♻️ Unnest scss of dashboard comments file

frontend/resources/styles/common/refactor/design-tokens.scss

@@ -156,6 +156,7 @@
   --icon-foreground-accept: var(--status-color-success-500);
   --icon-foreground-discard: var(--status-color-error-500);
   --icon-foreground-active: var(--color-accent-primary);
+  --icon-foreground-selected: var(--color-accent-tertiary);
 
   // INPUTS, SELECTS, DROPDOWNS
 

frontend/src/app/main/ui/dashboard/comments.cljs

@@ -55,7 +55,7 @@
                :on-click on-show-comments
                :on-key-down handle-keydown
                :data-test "open-comments"
-               :class (stl/css-case :button true
+               :class (stl/css-case :comment-button true
                                     :open show?
                                     :unread (boolean (seq tgroups)))}
       comments-icon-small]]))
@@ -101,7 +101,7 @@
      [:& dropdown {:show show? :on-close on-hide-comments}
       [:div {:class (stl/css :dropdown :comments-section :comment-threads-section)}
        [:div {:class (stl/css :header)}
-        [:h3 (tr "labels.comments")]
+        [:h3 {:class (stl/css :header-title)} (tr "labels.comments")]
         [:button {:class (stl/css :close-btn)
                   :tab-index (if show? "0" "-1")
                   :on-click on-hide-comments

frontend/src/app/main/ui/dashboard/comments.scss

@@ -7,17 +7,9 @@
 @use "common/refactor/common-refactor.scss" as *;
 
 .dashboard-comments-section {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  @include flexCenter;
   position: relative;
   border-radius: $br-8;
-
-  button {
-    cursor: pointer;
-    background: none;
-    border: none;
-  }
 }
 
 .thread-groups {
@@ -25,13 +17,6 @@
   overflow-y: scroll;
   max-height: $s-440;
   overflow: auto;
-
-  hr {
-    background-color: $df-primary;
-    border: 0;
-    height: $s-1;
-    margin: 0;
-  }
 }
 
 .thread-group {
@@ -58,10 +43,9 @@
   margin-bottom: $s-24;
 }
 
-.button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.comment-button {
+  @include buttonStyle;
+  @include flexCenter;
   border-radius: $br-8;
   height: $s-32;
   width: $s-32;
@@ -107,13 +91,14 @@
   height: $s-40;
   align-items: center;
   padding: 0 $s-12;
-  h3 {
-    color: $df-secondary;
-    font-size: $fs-11;
-    line-height: 1.28;
-    flex-grow: 1;
-    text-transform: uppercase;
-  }
+}
+
+.header-title {
+  color: $df-secondary;
+  font-size: $fs-11;
+  line-height: 1.28;
+  flex-grow: 1;
+  text-transform: uppercase;
 }
 
 .close-btn {