♻️ Unnest scss rules in dashboard settings

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)
+      [: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)}
+      [:ul {:class (stl/css :sidebar-nav-settings)}
-       [:li {:class (when profile? (stl/css :current))
+       [: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

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-block-start: $s-16;
-  padding: $s-16 0 0 0;
+  border-right: $s-1 solid var(--panel-border-color);
   z-index: $z-index-1;
+  background-color: var(--panel-background-color);
 }
 
 .sidebar-content {
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  grid-template-rows: auto auto 1fr;
   height: 100%;
-  overflow-y: auto;
   padding: 0;
+  overflow-y: auto;
+}
 
-  hr {
+.sidebar-separator {
   border-color: transparent;
   margin: $s-12 $s-16;
 }
-}
 
-.sidebar-nav {
+.sidebar-nav-settings {
-  display: flex;
+  display: grid;
-  flex-direction: column;
+  grid-auto-rows: auto;
   margin: 0;
-  overflow-y: auto;
-  user-select: none;
-
-  &.no-overflow {
   overflow: unset;
+  user-select: none;
 }
 
-  li {
+.settings-item {
+  --settings-foreground-color: var(--menu-foreground-color-rest);
+  --settings-background-color: transparent;
+  display: flex;
   align-items: center;
-    cursor: pointer;
-    display: flex;
-    flex-shrink: 0;
   padding: $s-8 $s-8 $s-8 $s-24;
-    color: $df-secondary;
+  color: var(--settings-foreground-color);
-
+  background-color: var(--settings-background-color);
-    a {
+  cursor: pointer;
-      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;
+    --settings-foreground-color: var(--sidebar-element-foreground-color-hover);
-      &::before {
+    --settings-background-color: var(--sidebar-element-background-color-hover);
-        background-color: $df-primary;
-      }
   }
 
   &.current {
-      background-color: $db-quaternary;
+    --settings-foreground-color: var(--sidebar-element-foreground-color-selected);
-      color: $da-primary;
+    --settings-background-color: var(--sidebar-element-background-color-selected);
-
+  }
-      a {
-        font-weight: $fw400;
-        color: currentColor;
 }
 
-      &::before {
+.feedback-icon {
-        background-color: $da-tertiary;
+  @extend .button-icon-small;
-      }
+  stroke: var(--settings-foreground-color);
-    }
+  margin-right: $s-8;
 }
+
+.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 {