UX: new sidebar styling (#29119)

app/assets/stylesheets/common/base/sidebar-section-link.scss

@@ -1,5 +1,5 @@
 :root {
-  --d-sidebar-section-link-prefix-margin-right: 0.35rem;
+  --d-sidebar-section-link-prefix-margin-right: 0.75em;
   --d-sidebar-section-link-prefix-width: 1.35rem;
   --d-sidebar-section-link-icon-size: 0.8em;
 }
@@ -9,6 +9,12 @@
   align-items: center;
   position: relative;
 
+  &[data-list-item-name="all-categories"],
+  &[data-list-item-name="all-tags"],
+  &[data-list-item-name="configure-default-navigation-menu-tags"] {
+    font-size: var(--font-down-1-rem);
+  }
+
   .sidebar-section-link {
     display: inline-flex;
     width: 100%;
@@ -26,14 +32,17 @@
     }
 
     &.active {
-      color: var(--d-sidebar-highlight-color);
-      background: var(--d-sidebar-highlight-background);
+      background: var(--d-selected);
+      font-weight: bold;
 
       .sidebar-section-link-prefix {
         &.icon {
           color: var(--d-sidebar-highlight-color);
         }
       }
+      .sidebar-section-link-hover:hover .sidebar-section-hover-button {
+        background-color: var(--d-selected);
+      }
     }
 
     .sidebar-section-link-content-badge {

app/assets/stylesheets/common/base/sidebar-section.scss

@@ -1,5 +1,14 @@
 .sidebar-section-wrapper {
   .discourse-no-touch & {
+    padding-block: 0.35rem;
+    border-bottom: 1px solid var(--secondary-very-high);
+    &:first-child {
+      padding-top: 0;
+    }
+    &[data-section-name="user-threads"] {
+      padding-bottom: 0;
+    }
+
     &:hover {
       .sidebar-section-header-wrapper {
         .btn.dropdown-select-box-header,
@@ -15,7 +24,6 @@
 
     .discourse-no-touch & {
       &:hover {
-        background: var(--d-sidebar-highlight-background);
         .d-icon-globe {
           color: var(--d-sidebar-highlight-color);
         }
@@ -74,16 +82,20 @@
 
   .sidebar-section-header {
     flex: 1 1 auto;
-    color: var(--d-sidebar-header-color);
     align-items: center;
     min-width: 0;
     padding: 0;
+    font-size: var(--font-down-2-rem);
+    color: var(--primary-medium);
+    font-weight: bold;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
 
     &.sidebar-section-header-collapsable {
       justify-content: flex-start;
 
       &:hover {
-        color: var(--primary);
+        color: var(--primary-medium);
       }
 
       &:focus {
@@ -115,8 +127,7 @@
     align-items: center;
     justify-content: center;
 
-    svg {
-      font-size: var(--font-down-1);
+    .d-icon {
       color: var(--d-sidebar-header-icon-color);
     }
   }
@@ -147,7 +158,6 @@
   }
 
   .sidebar-section-content {
-    padding-bottom: 0.875em;
     margin: 0;
     hr {
       margin: 0em 1.5em;

app/assets/stylesheets/common/base/sidebar.scss

@@ -6,9 +6,9 @@
   --d-sidebar-animation-time: 0.25s;
   --d-sidebar-animation-ease: ease-in-out;
   // 1.25rem gets text left-aligned with the hamburger icon
-  --d-sidebar-row-horizontal-padding: 1.25rem;
+  --d-sidebar-row-horizontal-padding: 1rem;
   // ems so height is variable along with font size
-  --d-sidebar-row-height: 2.1em;
+  --d-sidebar-row-height: 2.2em;
 
   --d-sidebar-background: var(--secondary);
   --d-sidebar-admin-background: var(--primary-very-low);
@@ -81,10 +81,14 @@
     flex-direction: column;
     box-sizing: border-box;
     flex: 1;
-    padding: 1.35em 0 1em;
+    padding: 1.5rem 1rem 1rem;
     overflow-x: hidden;
     overflow-y: overlay;
 
+    > .sidebar-section-wrapper:last-child {
+      border-bottom: 0;
+    }
+
     // custom scrollbar styling
     --scrollbarBg: transparent;
     --scrollbarThumbBg: var(--primary-low);

plugins/chat/assets/stylesheets/common/chat-user-threads.scss

@@ -58,13 +58,8 @@
 
 //sidebar
 #sidebar-section-content-user-threads {
-  padding-bottom: 0.5rem;
-  .sidebar-section-link-wrapper:hover {
-    .sidebar-section-link-prefix {
-      color: var(--primary-very-high);
-    }
-  }
+  padding-bottom: 0.35em;
   .sidebar-section-link-content-text {
-    color: var(--d-sidebar-header-color);
+    color: var(--d-sidebar-link-color);
   }
 }

plugins/chat/spec/system/sidebar_navigation_menu_spec.rb

@@ -23,7 +23,7 @@ RSpec.describe "Sidebar navigation menu", type: :system do
 
       expect(sidebar_page.channels_section).to have_css(
         ".sidebar-section-header-text",
-        text: I18n.t("js.chat.chat_channels"),
+        text: I18n.t("js.chat.chat_channels").upcase,
       )
     end