Oranize page-comment-revision

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

@@ -38,10 +38,6 @@
       border: 1px solid bs.$gray-200;
       backdrop-filter: blur(10px);
     }
-
-    .comment-timestamp {
-      color: bs.$gray-500;
-    }
   }
 }
 
@@ -62,9 +58,5 @@
       border: 1px solid bs.$gray-700;
       backdrop-filter: blur(10px);
     }
-
-    .comment-timestamp {
-      color: bs.$gray-600;
-    }
   }
 }

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

@@ -84,3 +84,21 @@
     }
   }
 }
+
+// // Light mode color
+@include bs.color-mode(light) {
+  .comment-styles :global {
+    .page-comment-revision {
+      color: bs.$gray-500;
+    }
+  }
+}
+
+// // Dark mode color
+@include bs.color-mode(dark) {
+  .comment-styles :global {
+    .page-comment-revision {
+      color: bs.$gray-600;
+    }
+  }
+}

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 comment-timestamp">
+              <Link href={`#${commentId}`} prefetch={false} className="small page-comment-revision">
                 <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 comment-timestamp"
+                  className="page-comment-revision"
                   prefetch={false}
                 >
                   <span className="material-symbols-outlined">history</span>