left_sidebar: Place redesigned subheaders.

web/styles/app_variables.css

@@ -611,6 +611,8 @@
     --color-background-alert-word: hsl(18deg 100% 84%);
     --color-buddy-list-highlighted-user: hsl(120deg 12.3% 71.4% / 38%);
     --color-border-sidebar: hsl(0deg 0% 87%);
+    --color-text-sidebar-base: hsl(0deg 0% 0%);
+    --color-border-sidebar-subheader: hsl(0deg 0% 0% / 15%);
 
     /* Recent view */
     --color-border-recent-view-row: hsl(0deg 0% 87%);
@@ -1067,6 +1069,8 @@
     --color-background-alert-word: hsl(22deg 70% 35%);
     --color-buddy-list-highlighted-user: hsl(136deg 25% 73% / 20%);
     --color-border-sidebar: hsl(0deg 0% 0% / 20%);
+    --color-text-sidebar-base: hsl(0deg 0% 100%);
+    --color-border-sidebar-subheader: hsl(0deg 0% 100% / 15%);
 
     /* Recent view */
     --color-border-recent-view-row: hsl(0deg 0% 0% / 20%);

web/styles/dark_theme.css

@@ -831,15 +831,6 @@
         background-color: hsl(51deg 100% 23%);
     }
 
-    .streams_subheader {
-        color: hsl(240deg 11% 85%);
-
-        & .streams_subheader_name::before,
-        .streams_subheader_name::after {
-            border-color: hsl(240deg 11% 85%);
-        }
-    }
-
     .sub-unsub-message span::before,
     .sub-unsub-message span::after,
     .date_row span::before,

web/styles/left_sidebar.css

@@ -1510,41 +1510,45 @@ li.topic-list-item {
 }
 
 .streams_subheader {
-    font-size: 0.8em;
+    /* 14px at 16px/1em */
+    font-size: 0.875em;
     font-weight: normal;
     /* 16px line-height at 0.8em (11.2px at 14px legacy em) */
     line-height: 1.4286em;
+    letter-spacing: 0.04em;
     padding-left: var(--left-sidebar-toggle-width-offset);
     cursor: pointer;
     text-align: center;
     margin-right: var(--left-sidebar-right-margin);
-    color: hsl(240deg 10% 50%);
 
-    & .streams_subheader_name {
+    & .streams-subheader-wrapper {
         display: flex;
         flex-direction: row;
         width: 100%;
         left: 0.5em;
         right: 0.5em;
-        opacity: 0.5;
+        color: var(--color-text-sidebar-base);
     }
 
-    & .streams_subheader_name::before,
-    .streams_subheader_name::after {
+    & .streams-subheader-wrapper::before,
+    .streams-subheader-wrapper::after {
         content: " ";
         flex: 1 1;
         vertical-align: middle;
         margin: auto;
-        border: 0.5px solid hsl(240deg 10% 50%);
-        opacity: 0.2;
+        border-top: 1px solid var(--color-border-sidebar-subheader);
     }
 
-    & .streams_subheader_name::before {
-        margin-right: 0.5em;
+    & .streams-subheader-wrapper::before {
+        margin-right: 0.2em;
     }
 
-    & .streams_subheader_name::after {
-        margin-left: 0.5em;
+    & .streams-subheader-wrapper::after {
+        margin-left: 0.2em;
+    }
+
+    .streams-subheader-name {
+        opacity: 0.4;
     }
 }
 

web/templates/streams_subheader.hbs

@@ -1,3 +1,7 @@
 <div class="streams_subheader">
-    <span class="streams_subheader_name">{{ subheader_name }}</span>
+    <span class="streams-subheader-wrapper">
+        <span class="streams-subheader-name">
+            {{ subheader_name }}
+        </span>
+    </span>
 </div>