From df66c1a1091dccfa3946995981a22c0920415034 Mon Sep 17 00:00:00 2001
From: SedationH <sedationh@gmail.com>
Date: Sun, 27 Oct 2024 14:23:56 +0800
Subject: [PATCH] feat: Reorder comment components and improve layout for
 better readability

---
 .../CardModal/Activities/CommentEdit.jsx      |  2 +-
 .../CardModal/Activities/ItemComment.jsx      | 56 ++++++++++---------
 .../Activities/ItemComment.module.scss        |  6 ++
 3 files changed, 36 insertions(+), 28 deletions(-)

diff --git a/client/src/components/CardModal/Activities/CommentEdit.jsx b/client/src/components/CardModal/Activities/CommentEdit.jsx
index 706bcadf..bdb4cc0b 100755
--- a/client/src/components/CardModal/Activities/CommentEdit.jsx
+++ b/client/src/components/CardModal/Activities/CommentEdit.jsx
@@ -78,8 +78,8 @@ const CommentEdit = React.forwardRef(({ defaultData, onUpdate, text, actions },
   if (!isOpened) {
     return (
       <>
-        {text}
         {actions}
+        {text}
       </>
     );
   }
diff --git a/client/src/components/CardModal/Activities/ItemComment.jsx b/client/src/components/CardModal/Activities/ItemComment.jsx
index e44c3a2c..51dad798 100755
--- a/client/src/components/CardModal/Activities/ItemComment.jsx
+++ b/client/src/components/CardModal/Activities/ItemComment.jsx
@@ -31,15 +31,6 @@ const ItemComment = React.memo(
           <User name={user.name} avatarUrl={user.avatarUrl} />
         </span>
         <div className={classNames(styles.content)}>
-          <div className={styles.title}>
-            <span className={styles.author}>{user.name}</span>
-            <span className={styles.date}>
-              {t(`format:${getDateFormat(createdAt)}`, {
-                postProcess: 'formatDate',
-                value: createdAt,
-              })}
-            </span>
-          </div>
           <CommentEdit
             ref={commentEdit}
             defaultData={data}
@@ -50,28 +41,39 @@ const ItemComment = React.memo(
               </div>
             }
             actions={
-              canEdit && (
-                <Comment.Actions>
-                  <Comment.Action
-                    as="button"
-                    content={t('action.edit')}
-                    disabled={!isPersisted}
-                    onClick={handleEditClick}
-                  />
-                  <DeletePopup
-                    title="common.deleteComment"
-                    content="common.areYouSureYouWantToDeleteThisComment"
-                    buttonContent="action.deleteComment"
-                    onConfirm={onDelete}
-                  >
+              <div className={styles.title}>
+                <span>
+                  <span className={styles.author}>{user.name}</span>
+                  <span className={styles.date}>
+                    {t(`format:${getDateFormat(createdAt)}`, {
+                      postProcess: 'formatDate',
+                      value: createdAt,
+                    })}
+                  </span>
+                </span>
+                {canEdit && (
+                  <Comment.Actions>
                     <Comment.Action
                       as="button"
-                      content={t('action.delete')}
+                      content={t('action.edit')}
                       disabled={!isPersisted}
+                      onClick={handleEditClick}
                     />
-                  </DeletePopup>
-                </Comment.Actions>
-              )
+                    <DeletePopup
+                      title="common.deleteComment"
+                      content="common.areYouSureYouWantToDeleteThisComment"
+                      buttonContent="action.deleteComment"
+                      onConfirm={onDelete}
+                    >
+                      <Comment.Action
+                        as="button"
+                        content={t('action.delete')}
+                        disabled={!isPersisted}
+                      />
+                    </DeletePopup>
+                  </Comment.Actions>
+                )}
+              </div>
             }
           />
         </div>
diff --git a/client/src/components/CardModal/Activities/ItemComment.module.scss b/client/src/components/CardModal/Activities/ItemComment.module.scss
index 0153c9de..6e1c2d1e 100644
--- a/client/src/components/CardModal/Activities/ItemComment.module.scss
+++ b/client/src/components/CardModal/Activities/ItemComment.module.scss
@@ -38,6 +38,12 @@
 
   .title {
     padding-bottom: 4px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    position: sticky;
+    top: -1em;
+    background: #f5f6f7;
   }
 
   .user {