♻️ Update dashboard comment icon

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

@@ -20,6 +20,17 @@
    [potok.v2.core :as ptk]
    [rumext.v2 :as mf]))
 
+
+(def ^:private close-icon
+  (i/icon-xref :close-refactor (stl/css :close-icon)))
+
+(def ^:private comments-icon-svg
+  (i/icon-xref :comments-refactor (stl/css :comments-icon)))
+
+
+(def ^:private comments-icon-small
+  (i/icon-xref :comments-refactor (stl/css :comments-icon-small)))
+
 (mf/defc comments-icon
   [{:keys [profile show? on-show-comments]}]
 
@@ -47,7 +58,7 @@
                :class (stl/css-case :button true
                                     :open show?
                                     :unread (boolean (seq tgroups)))}
-      i/comments-refactor]]))
+      comments-icon-small]]))
 
 (mf/defc comments-section
   [{:keys [profile team show? on-hide-comments]}]
@@ -91,11 +102,11 @@
       [:div {:class (stl/css :dropdown :comments-section :comment-threads-section)}
        [:div {:class (stl/css :header)}
         [:h3 (tr "labels.comments")]
-        [:button
-         {:class (stl/css :close)
-          :tab-index (if show? "0" "-1")
-          :on-click on-hide-comments
-          :on-key-down handle-keydown} i/close]]
+        [:button {:class (stl/css :close-btn)
+                  :tab-index (if show? "0" "-1")
+                  :on-click on-hide-comments
+                  :on-key-down handle-keydown}
+         close-icon]]
 
        (if (seq tgroups)
          [:div {:class (stl/css :thread-groups)}
@@ -113,5 +124,5 @@
               :key (:page-id tgroup)}])]
 
          [:div {:class (stl/css :thread-groups-placeholder)}
-          i/comments-refactor
+          comments-icon-svg
           (tr "labels.no-comments-available")])]]]))

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

@@ -48,14 +48,14 @@
   padding: $s-24;
   text-align: center;
   color: $df-secondary;
+}
 
-  svg {
-    stroke: $df-secondary;
-    fill: none;
-    height: $s-24;
-    margin-bottom: $s-24;
-    width: $s-24;
-  }
+.comments-icon {
+  @extend .button-icon;
+  stroke: var(--icon-foreground);
+  height: $s-24;
+  width: $s-24;
+  margin-bottom: $s-24;
 }
 
 .button {
@@ -65,28 +65,24 @@
   border-radius: $br-8;
   height: $s-32;
   width: $s-32;
+  --comment-icon-small-foreground-color: var(--icon-foreground);
 
-  svg {
-    width: $s-16;
-    height: $s-16;
-    stroke: $df-secondary;
-    fill: none;
-  }
-
-  &.unread svg,
-  &.open svg {
-    stroke: $da-tertiary;
+  &.unread,
+  &.open {
+    --comment-icon-small-foreground-color: var(--icon-foreground-selected);
   }
 
   &:hover {
     background-color: $db-quaternary;
-
-    svg {
-      stroke: $da-primary;
-    }
+    --comment-icon-small-foreground-color: var(--icon-foreground-active);
   }
 }
 
+.comments-icon-small {
+  @extend .button-icon;
+  stroke: var(--comment-icon-small-foreground-color);
+}
+
 .dropdown {
   @include menuShadow;
   background-color: $db-tertiary;
@@ -111,7 +107,6 @@
   height: $s-40;
   align-items: center;
   padding: 0 $s-12;
-
   h3 {
     color: $df-secondary;
     font-size: $fs-11;
@@ -119,16 +114,14 @@
     flex-grow: 1;
     text-transform: uppercase;
   }
-
-  .close {
-    display: flex;
-    align-items: center;
-    cursor: pointer;
-    svg {
-      width: $s-16;
-      height: $s-16;
-      transform: rotate(45deg);
-      fill: $df-secondary;
-    }
-  }
+}
+
+.close-btn {
+  @include buttonStyle;
+  @include flexCenter;
+}
+
+.close-icon {
+  @extend .button-icon;
+  stroke: var(--icon-foreground);
 }