Merge pull request #70 from minaldiwan/try/inline-block-commenting

update feedback points regarding classes and typography
poojabhimani12 · Oct 15, 2024 · ffc7f51 · ffc7f51
2 parents ec1a8b3 + 2a4a427
commit ffc7f51
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 34 deletions.
diff --git a/packages/editor/src/components/collab-sidebar/add-comment.js b/packages/editor/src/components/collab-sidebar/add-comment.js
@@ -101,7 +101,6 @@ export function AddComment( {
 					variant="tertiary"
 					text={ _x( 'Cancel', 'Cancel comment button' ) }
 					onClick={ handleCancel }
-					size="compact"
 				/>
 				<Button
 					__next40pxDefaultSize
@@ -112,7 +111,6 @@ export function AddComment( {
 						0 === sanitizeCommentString( inputComment ).length
 					}
 					onClick={ () => onSubmit( inputComment ) }
-					size="compact"
 				/>
 			</HStack>
 		</VStack>

diff --git a/packages/editor/src/components/collab-sidebar/comments.js b/packages/editor/src/components/collab-sidebar/comments.js
@@ -120,7 +120,7 @@ export function Comments( {
 							confirmMessage={
 								// translators: message displayed when marking a comment as resolved
 								__(
-									'Are you sure you want to mark this thread as resolved?'
+									'Are you sure you want to mark this comment as resolved?'
 								)
 							}
 							confirmAction={ () => {
@@ -136,7 +136,7 @@ export function Comments( {
 							confirmMessage={
 								// translators: message displayed when deleting a comment
 								__(
-									'Are you sure you want to delete this thread?'
+									'Are you sure you want to delete this comment?'
 								)
 							}
 							confirmAction={ () => {
@@ -153,7 +153,7 @@ export function Comments( {
 	return (
 		<>
 			{
-				// If there are no threads, show a message indicating no threads are available.
+				// If there are no comments, show a message indicating no comments are available.
 				( ! Array.isArray( threads ) || threads.length === 0 ) && (
 					<VStack
 						alignment="left"
@@ -188,25 +188,30 @@ export function Comments( {
 						<CommentBoard thread={ thread } />
 						{ 'reply' === actionState?.action &&
 							thread.id === actionState?.id && (
-								<VStack
+								<HStack
 									alignment="left"
 									spacing="3"
 									justify="flex-start"
-									className="editor-collab-sidebar-panel__comment-field"
+									className="editor-collab-sidebar-panel__user-comment"
 								>
-									<CommentForm
-										onSubmit={ ( inputComment ) => {
-											onAddReply(
-												inputComment,
-												thread.id
-											);
-											setActionState( false );
-										} }
-										onCancel={ () =>
-											setActionState( false )
-										}
-									/>
-								</VStack>
+									<VStack
+										spacing="3"
+										className="editor-collab-sidebar-panel__comment-field"
+									>
+										<CommentForm
+											onSubmit={ ( inputComment ) => {
+												onAddReply(
+													inputComment,
+													thread.id
+												);
+												setActionState( false );
+											} }
+											onCancel={ () =>
+												setActionState( false )
+											}
+										/>
+									</VStack>
+								</HStack>
 							) }
 						{ 0 < thread?.reply?.length &&
 							thread.reply.map( ( reply ) => (
@@ -246,7 +251,6 @@ function CommentForm( { onSubmit, onCancel, thread } ) {
 		<>
 			<TextareaControl
 				__nextHasNoMarginBottom
-				className="editor-collab-sidebar-panel__comment-field-textarea"
 				value={ inputComment ?? '' }
 				onChange={ setInputComment }
 			/>
@@ -257,7 +261,6 @@ function CommentForm( { onSubmit, onCancel, thread } ) {
 						accessibleWhenDisabled
 						variant="primary"
 						onClick={ () => onSubmit( inputComment ) }
-						size="compact"
 						disabled={
 							0 === sanitizeCommentString( inputComment ).length
 						}
@@ -269,7 +272,6 @@ function CommentForm( { onSubmit, onCancel, thread } ) {
 					<Button
 						__next40pxDefaultSize
 						onClick={ onCancel }
-						size="compact"
 					>
 						{ _x( 'Cancel', 'Cancel comment edit' ) }
 					</Button>
@@ -307,14 +309,12 @@ function ConfirmNotice( { confirmMessage, confirmAction, discardAction } ) {
 					__next40pxDefaultSize
 					variant="primary"
 					onClick={ confirmAction }
-					size="compact"
 				>
 					{ __( 'Yes' ) }
 				</Button>
 				<Button
 					__next40pxDefaultSize
 					onClick={ discardAction }
-					size="compact"
 				>
 					{ __( 'No' ) }
 				</Button>

diff --git a/packages/editor/src/components/collab-sidebar/index.js b/packages/editor/src/components/collab-sidebar/index.js
@@ -130,7 +130,7 @@ export default function CollabSidebar() {
 
 		if ( savedRecord ) {
 			// translators: Comment resolved successfully
-			createNotice( 'snackbar', __( 'Thread marked as resolved.' ), {
+			createNotice( 'snackbar', __( 'Comment marked as resolved.' ), {
 				type: 'snackbar',
 				isDismissible: true,
 			} );
@@ -151,7 +151,7 @@ export default function CollabSidebar() {
 			createNotice(
 				'snackbar',
 				// translators: Comment edited successfully
-				__( 'Thread edited successfully.' ),
+				__( 'Comment edited successfully.' ),
 				{
 					type: 'snackbar',
 					isDismissible: true,
@@ -187,7 +187,7 @@ export default function CollabSidebar() {
 		createNotice(
 			'snackbar',
 			// translators: Comment deleted successfully
-			__( 'Thread deleted successfully.' ),
+			__( 'Comment deleted successfully.' ),
 			{
 				type: 'snackbar',
 				isDismissible: true,

diff --git a/packages/editor/src/components/collab-sidebar/style.scss b/packages/editor/src/components/collab-sidebar/style.scss
@@ -25,10 +25,6 @@
 		flex: 1;
 	}
 
-	&__comment-field-textarea {
-		width: 100%;
-	}
-
 	&__child-thread {
 		margin-top: 15px;
 	}
@@ -85,8 +81,7 @@
 		}
 
 		button {
-			height: 24px;
-			padding: 6px;
+			padding: 4px 10px;
 			color: $white;
 		}
 	}