Adjust style reply button

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

@@ -9,7 +9,7 @@
 
   // reply button
   .btn-comment-reply {
-
+    backdrop-filter: blur(35px);
   }
 
   // TODO: Refacotr Soft-coding
@@ -20,3 +20,29 @@
     border: none;
   }
 }
+
+@include bs.color-mode(light) {
+  .page-comment-styles :global {
+    .btn-comment-reply {
+      --bs-btn-color: #{( bs.$gray-600 )};
+      --bs-btn-hover-color:  #{( bs.$gray-700 )};
+      --bs-btn-bg: #{rgba( bs.$gray-200, 0.3 )};
+      --bs-btn-hover-bg: #{( bs.$gray-200 )};
+      --bs-btn-border-color: #{( bs.$gray-200 )};
+      --bs-btn-hover-border-color: #{( bs.$gray-300 )};
+    }
+  }
+}
+
+@include bs.color-mode(dark) {
+  .page-comment-styles :global {
+    .btn-comment-reply {
+      --bs-btn-color: #{( bs.$gray-500 )};
+      --bs-btn-hover-color:  #{( bs.$gray-400 )};
+      --bs-btn-bg: #{rgba( bs.$gray-800, 0.3 )};
+      --bs-btn-hover-bg: #{( bs.$gray-800 )};
+      --bs-btn-border-color: #{( bs.$gray-700 )};
+      --bs-btn-hover-border-color: #{( bs.$gray-600 )};
+    }
+  }
+}

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

@@ -94,6 +94,10 @@
       border: 1px solid bs.$gray-200;
       backdrop-filter: blur(35px);
     }
+
+    .comment-timestamp {
+      color: bs.$gray-500;
+    }
   }
 }
 
@@ -102,9 +106,13 @@
   .comment-styles :global {
     // == Colors
     .bg-comment {
-      background-color: rgba( bs.$gray-200, 0.5 );
-      border: 1px solid bs.$gray-200;
+      background-color: rgba( bs.$gray-800, 0.3 );
+      border: 1px solid bs.$gray-700;
       backdrop-filter: blur(35px);
     }
+
+    .comment-timestamp {
+      color: bs.$gray-600;
+    }
   }
 }

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

@@ -13,13 +13,13 @@ export const CommentControl = (props: CommentControlProps): JSX.Element => {
   return (
     // The page-comment-control class is imported from Comment.module.scss
     <div className="page-comment-control">
-      <button type="button" className="btn btn-link p-2" onClick={onClickEditBtn}>
+      <button type="button" className="btn btn-link p-2 opacity-50" onClick={onClickEditBtn}>
         <span className="material-symbols-outlined">edit</span>
       </button>
       <button
         data-testid="comment-delete-button"
         type="button"
-        className="btn btn-link p-2 me-2"
+        className="btn btn-link p-2 me-2 opacity-50"
         onClick={onClickDeleteBtn}
       >
         <span className="material-symbols-outlined">close</span>