From a3e74c55f1523764761b47a7ea2c92039e7feecd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Mar=C3=ADa=20Valderrama?= <mavalroot@gmail.com>
Date: Wed, 19 Feb 2025 16:45:22 +0100
Subject: [PATCH] :lipstick: Add cosmetic changes to notifications buttons
 (#5902)

---
 frontend/src/app/main/ui/dashboard/comments.cljs |  6 ++++--
 frontend/src/app/main/ui/dashboard/comments.scss | 11 +++++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/main/ui/dashboard/comments.cljs b/frontend/src/app/main/ui/dashboard/comments.cljs
index 0fbc42160..02384a66b 100644
--- a/frontend/src/app/main/ui/dashboard/comments.cljs
+++ b/frontend/src/app/main/ui/dashboard/comments.cljs
@@ -89,13 +89,15 @@
        [:div {:class (stl/css :header)}
         [:h3 {:class (stl/css :header-title)} (tr "dashboard.notifications")]
         (when (seq tgroups)
-          [:> icon-button* {:variant "ghost"
+          [:> icon-button* {:class (stl/css :mark-all-as-read-button :notifications-button)
+                            :variant "action"
                             :tab-index (if show? "0" "-1")
                             :aria-label (tr "label.mark-all-as-read")
                             :on-click on-read-all
                             :icon "tick"}])
 
-        [:> icon-button* {:variant "ghost"
+        [:> icon-button* {:class (stl/css :notifications-button)
+                          :variant "action"
                           :tab-index (if show? "0" "-1")
                           :aria-label (tr "labels.close")
                           :on-click on-hide-comments
diff --git a/frontend/src/app/main/ui/dashboard/comments.scss b/frontend/src/app/main/ui/dashboard/comments.scss
index 93070c2f7..6cd591354 100644
--- a/frontend/src/app/main/ui/dashboard/comments.scss
+++ b/frontend/src/app/main/ui/dashboard/comments.scss
@@ -86,6 +86,7 @@
   height: $s-40;
   align-items: center;
   padding: 0 $s-12;
+  gap: $s-4;
 }
 
 .header-title {
@@ -95,3 +96,13 @@
   flex-grow: 1;
   text-transform: uppercase;
 }
+
+.notifications-button {
+  &:hover {
+    cursor: pointer;
+  }
+  &.mark-all-as-read-button {
+    border-radius: $s-8;
+    border: $s-1 solid;
+  }
+}