Adjust style Preview / Write button

apps/app/src/components/PageComment/Comment.tsx

@@ -153,14 +153,14 @@ export const Comment = (props: CommentProps): JSX.Element => {
               <div className="small fw-bold me-3">
                 <Username user={creator} />
               </div>
-              <Link href={`#${commentId}`} prefetch={false} className="small">
+              <Link href={`#${commentId}`} prefetch={false} className="small comment-timestamp">
                 <FormattedDistanceDate id={commentId} date={comment.createdAt} />
               </Link>
               <span className="ms-2">
                 <Link
                   id={`page-comment-revision-${commentId}`}
                   href={urljoin(returnPathForURL(pagePath, pageId), revHref)}
-                  className="page-comment-revision"
+                  className="page-comment-revision comment-timestamp"
                   prefetch={false}
                 >
                   <span className="material-symbols-outlined">history</span>

apps/app/src/components/PageComment/CommentEditor.module.scss

@@ -21,4 +21,45 @@
       padding-top: 0.5em;
     }
   }
+  .comment-write {
+    .nav {
+      --bs-nav-link-padding-x: 12px;
+      --bs-nav-link-padding-y: 6px;
+    }
+  }
+}
+
+@include bs.color-mode(light) {
+  .comment-editor-styles :global {
+    .comment-write {
+      .nav.nav-pills {
+        background-color: white;
+        &:hover {
+          background-color: bs.$gray-100;
+        }
+        border: 2px solid bs.$gray-500;
+        --bs-nav-link-color: #{ bs.$gray-500 };
+        --bs-nav-link-hover-color: #{ bs.$gray-500 };
+        --bs-nav-pills-link-active-bg: #{ bs.$gray-500 };
+      }
+    }
+  }
+}
+
+@include bs.color-mode(dark) {
+  .comment-editor-styles :global {
+    .comment-write {
+      .nav.nav-pills {
+        // background-color: bs.$gray-600;
+        &:hover {
+          background-color: rgba(bs.$gray-600, 0.1);
+        }
+        border: 2px solid bs.$gray-800;
+        --bs-nav-pills-link-active-color: #{ bs.$gray-400 };
+        --bs-nav-link-color: #{ bs.$gray-400 };
+        --bs-nav-link-hover-color: #{ bs.$gray-400 };
+        --bs-nav-pills-link-active-bg: #{ bs.$gray-800 };
+      }
+    }
+  }
 }

apps/app/src/components/PageComment/CommentEditor.tsx

@@ -309,23 +309,23 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
 
     return (
       <>
-        <div className="comment-write p-3">
+        <div className="comment-write px-4 pt-3 pb-1">
           <div className="d-flex justify-content-between align-items-center mb-2">
             <div className="d-flex">
               <UserPicture user={currentUser} noLink noTooltip />
               <p className="ms-2 mb-0">Add a comment</p>
             </div>
-            <ul className="nav nav-pills">
+            <ul className="nav nav-pills rounded-2">
               <li className="nav-item">
-                <a className="nav-link" href="#comment_preview" data-bs-toggle="tab">
-                  <span className="material-symbols-outlined me-1">play_arrow</span>
-                  {t('Preview')}
+                <a className="nav-link rounded-1 rounded-end-0" href="#comment_preview" data-bs-toggle="tab">
+                  <span className="material-symbols-outlined">play_arrow</span>
+                  <small>{t('Preview')}</small>
                 </a>
               </li>
               <li className="nav-item">
-                <a className="nav-link active" aria-current="page" href="#comment_editor" data-bs-toggle="tab">
+                <a className="nav-link active rounded-1 rounded-start-0" aria-current="page" href="#comment_editor" data-bs-toggle="tab">
                   <span className="material-symbols-outlined me-1 fs-5">edit_square</span>
-                  {t('Write')}
+                  <small>{t('Write')}</small>
                 </a>
               </li>
             </ul>
@@ -348,7 +348,7 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
           </div>
         </div>
 
-        <div className="comment-submit px-3 pb-3 mb-2">
+        <div className="comment-submit px-4 pb-3 mb-2">
           <div className="d-flex">
             <span className="flex-grow-1" />
             <span className="d-none d-sm-inline">{errorMessage && errorMessage}</span>