From 47df2855004c2eccd3c9bf1747ec805905944304 Mon Sep 17 00:00:00 2001
From: Eva Marco <evamarcod@gmail.com>
Date: Thu, 7 Mar 2024 11:09:03 +0100
Subject: [PATCH] :recycle: Unnest scss rules in dashboard settings

---
 .../src/app/main/ui/settings/sidebar.cljs     |  35 ++--
 .../src/app/main/ui/settings/sidebar.scss     | 167 ++++++------------
 2 files changed, 74 insertions(+), 128 deletions(-)

diff --git a/frontend/src/app/main/ui/settings/sidebar.cljs b/frontend/src/app/main/ui/settings/sidebar.cljs
index 9638292f23..def29fc6d6 100644
--- a/frontend/src/app/main/ui/settings/sidebar.cljs
+++ b/frontend/src/app/main/ui/settings/sidebar.cljs
@@ -23,6 +23,9 @@
 (def ^:private arrow-icon
   (i/icon-xref :arrow-refactor (stl/css :arrow-icon)))
 
+(def ^:private feedback-icon
+  (i/icon-xref :feedback-refactor (stl/css :feedback-icon)))
+
 (def ^:private go-settings-profile
   #(st/emit! (rt/nav :settings-profile)))
 
@@ -64,43 +67,49 @@
 
     [:div {:class (stl/css :sidebar-content)}
      [:div {:class (stl/css :sidebar-content-section)}
-      [:div {:class (stl/css :back-to-dashboard)
-             :on-click go-dashboard}
+      [:button {:class (stl/css :back-to-dashboard)
+                :on-click go-dashboard}
        arrow-icon
-       [:span {:class (stl/css :text)} (tr "labels.dashboard")]]]
+       [:span {:class (stl/css :back-text)} (tr "labels.dashboard")]]]
 
-     [:hr]
+     [:hr {:class (stl/css :sidebar-separator)}]
 
      [:div {:class (stl/css :sidebar-content-section)}
-      [:ul {:class (stl/css :sidebar-nav :no-overflow)}
-       [:li {:class (when profile? (stl/css :current))
+      [:ul {:class (stl/css :sidebar-nav-settings)}
+       [:li {:class (stl/css-case :current profile?
+                                  :settings-item true)
              :on-click go-settings-profile}
         [:span {:class (stl/css :element-title)} (tr "labels.profile")]]
 
-       [:li {:class (when password? (stl/css :current))
+       [:li {:class (stl/css-case :current password?
+                                  :settings-item true)
              :on-click go-settings-password}
         [:span {:class (stl/css :element-title)} (tr "labels.password")]]
 
-       [:li {:class (when options? (stl/css :current))
+       [:li {:class (stl/css-case :current options?
+                                  :settings-item true)
              :on-click go-settings-options
              :data-test "settings-profile"}
         [:span {:class (stl/css :element-title)} (tr "labels.settings")]]
 
        (when (contains? cf/flags :access-tokens)
-         [:li {:class (when access-tokens? (stl/css :current))
+         [:li {:class (stl/css-case :current access-tokens?
+                                    :settings-item true)
                :on-click go-settings-access-tokens
                :data-test "settings-access-tokens"}
           [:span {:class (stl/css :element-title)} (tr "labels.access-tokens")]])
 
-       [:hr]
+       [:hr {:class (stl/css :sidebar-separator)}]
 
-       [:li {:on-click show-release-notes :data-test "release-notes"}
+       [:li {:on-click show-release-notes :data-test "release-notes"
+             :class (stl/css :settings-item)}
         [:span {:class (stl/css :element-title)} (tr "labels.release-notes")]]
 
        (when (contains? cf/flags :user-feedback)
-         [:li {:class (when feedback? (stl/css :current))
+         [:li {:class (stl/css-case :current feedback?
+                                    :settings-item true)
                :on-click go-settings-feedback}
-          i/feedback-refactor
+          feedback-icon
           [:span {:class (stl/css :element-title)} (tr "labels.give-feedback")]])]]]))
 
 (mf/defc sidebar
diff --git a/frontend/src/app/main/ui/settings/sidebar.scss b/frontend/src/app/main/ui/settings/sidebar.scss
index 59b4d9d8a8..a027458927 100644
--- a/frontend/src/app/main/ui/settings/sidebar.scss
+++ b/frontend/src/app/main/ui/settings/sidebar.scss
@@ -7,143 +7,80 @@
 @use "common/refactor/common-refactor.scss" as *;
 
 .dashboard-sidebar {
-  background-color: var(--panel-background-color);
-  border-right: $s-1 solid $db-quaternary;
-  display: flex;
-  flex-direction: column;
   grid-column: 1 / span 2;
   grid-row: 1 / span 2;
+  display: grid;
+  grid-template-rows: 1fr auto;
   height: 100%;
-  margin: 0 $s-16 0 0;
-  padding: $s-16 0 0 0;
+  padding-block-start: $s-16;
+  border-right: $s-1 solid var(--panel-border-color);
   z-index: $z-index-1;
+  background-color: var(--panel-background-color);
 }
 
 .sidebar-content {
-  display: flex;
-  flex-direction: column;
+  display: grid;
+  grid-template-rows: auto auto 1fr;
   height: 100%;
-  overflow-y: auto;
   padding: 0;
+  overflow-y: auto;
+}
 
-  hr {
-    border-color: transparent;
-    margin: $s-12 $s-16;
+.sidebar-separator {
+  border-color: transparent;
+  margin: $s-12 $s-16;
+}
+
+.sidebar-nav-settings {
+  display: grid;
+  grid-auto-rows: auto;
+  margin: 0;
+  overflow: unset;
+  user-select: none;
+}
+
+.settings-item {
+  --settings-foreground-color: var(--menu-foreground-color-rest);
+  --settings-background-color: transparent;
+  display: flex;
+  align-items: center;
+  padding: $s-8 $s-8 $s-8 $s-24;
+  color: var(--settings-foreground-color);
+  background-color: var(--settings-background-color);
+  cursor: pointer;
+
+  &:hover {
+    --settings-foreground-color: var(--sidebar-element-foreground-color-hover);
+    --settings-background-color: var(--sidebar-element-background-color-hover);
+  }
+
+  &.current {
+    --settings-foreground-color: var(--sidebar-element-foreground-color-selected);
+    --settings-background-color: var(--sidebar-element-background-color-selected);
   }
 }
 
-.sidebar-nav {
-  display: flex;
-  flex-direction: column;
-  margin: 0;
-  overflow-y: auto;
-  user-select: none;
+.feedback-icon {
+  @extend .button-icon-small;
+  stroke: var(--settings-foreground-color);
+  margin-right: $s-8;
+}
 
-  &.no-overflow {
-    overflow: unset;
-  }
-
-  li {
-    align-items: center;
-    cursor: pointer;
-    display: flex;
-    flex-shrink: 0;
-    padding: $s-8 $s-8 $s-8 $s-24;
-    color: $df-secondary;
-
-    a {
-      font-weight: $fw400;
-      width: 100%;
-      &:hover {
-        text-decoration: none;
-      }
-    }
-
-    svg {
-      stroke: currentColor;
-      fill: none;
-      margin-right: $s-8;
-      height: $s-12;
-      width: $s-12;
-    }
-
-    span {
-      font-size: $fs-14;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-    }
-
-    &::before {
-      display: none;
-      background-color: transparent;
-      border-radius: $br-4;
-      content: "";
-      height: $s-24;
-      margin-right: $s-8;
-      width: $s-4;
-    }
-
-    &.recent-projects {
-      svg {
-        fill: $df-primary;
-      }
-    }
-
-    & .edit-wrapper {
-      border: $s-1 solid $df-primary;
-      border-radius: $br-4;
-      display: flex;
-      width: 100%;
-    }
-
-    input.element-title {
-      border: 0;
-      height: $s-32;
-      padding: $s-6;
-      margin: 0;
-      width: 100%;
-      background-color: $df-primary;
-    }
-
-    .element-subtitle {
-      color: $df-secondary;
-      font-style: italic;
-    }
-
-    &:hover {
-      background-color: $db-quaternary;
-      &::before {
-        background-color: $df-primary;
-      }
-    }
-
-    &.current {
-      background-color: $db-quaternary;
-      color: $da-primary;
-
-      a {
-        font-weight: $fw400;
-        color: currentColor;
-      }
-
-      &::before {
-        background-color: $da-tertiary;
-      }
-    }
-  }
+.element-title {
+  @include textEllipsis;
+  @include bodyMediumTypography;
 }
 
 .back-to-dashboard {
+  @include buttonStyle;
   display: flex;
   align-items: center;
   padding: $s-12 $s-16;
   font-size: $fs-14;
-  cursor: pointer;
+}
 
-  .text {
-    color: $df-primary;
-  }
+.back-text {
+  color: $df-primary;
 }
 
 .arrow-icon {