left_sidebar: Place redesigned styles for action headings.

help/include/left-sidebar-conversations.md

@@ -12,7 +12,7 @@ and the channels you are subscribed to.
 
 !!! tip ""
 
-    To see all conversations, click on **more conversations** (in direct messages) or **show all topics**
+    To see all conversations, click on **MORE CONVERSATIONS** (in direct messages) or **SHOW ALL TOPICS**
     (in a channel).
 
 {end_tabs}

help/left-sidebar.md

@@ -48,11 +48,11 @@ information you need in the moment.
 1. If the **DIRECT MESSAGES** section in the left sidebar is collapsed, click the triangle to the
    left of **DIRECT MESSAGES** to expand it.
 
-1. Click **more conversations** at the bottom of the list of recent DM conversations.
+1. Click **MORE CONVERSATIONS** at the bottom of the list of recent DM conversations.
 
 !!! tip ""
 
-    To return to the channel list in the left sidebar, click **back to channels**.
+    To return to the channel list in the left sidebar, click **BACK TO CHANNELS**.
 
 {end_tabs}
 
@@ -63,7 +63,7 @@ information you need in the moment.
 
 1. Click on a channel in the left sidebar.
 
-1. Click **show all topics** at the bottom of the list of recent topics in the
+1. Click **SHOW ALL TOPICS** at the bottom of the list of recent topics in the
    selected channel.
 
 !!! tip ""

web/styles/app_variables.css

@@ -330,7 +330,16 @@
 
     /* Shared sidebar typography and effects values. */
     --font-weight-sidebar-heading: 600;
+    --font-weight-sidebar-action-heading: 370;
+    --font-variant-sidebar-action-heading: all-small-caps;
+    --font-feature-settings-sidebar-action-heading: "c2sc", "smcp";
+    /* 17px at 16px/1em = 1.0625em */
+    --font-size-sidebar-action-heading: 1.0625em;
+    --text-transform-sidebar-action-heading: uppercase;
     --letter-spacing-sidebar-heading: 0.0469em;
+    --opacity-sidebar-heading: 0.7;
+    --opacity-right-sidebar-subheading: 0.65;
+    --opacity-right-sidebar-subheading-hover: 0.9;
 
     /*
     Message box elements and values.

web/styles/left_sidebar.css

@@ -37,13 +37,6 @@
     margin-right: var(--left-sidebar-right-margin);
 }
 
-li.show-more-topics {
-    & a {
-        /* 12px at 14px/1em */
-        font-size: 0.8571em;
-    }
-}
-
 #streams_inline_icon,
 .streams_filter_icon {
     opacity: 0.5;
@@ -243,17 +236,17 @@ li.show-more-topics {
         }
 
         & li#show-more-direct-messages {
+            font-size: var(--font-size-sidebar-action-heading);
+            font-weight: var(--font-weight-sidebar-action-heading);
+            letter-spacing: var(--letter-spacing-sidebar-action-heading);
+            font-variant: var(--font-variant-sidebar-action-heading);
+            text-transform: var(--text-transform-sidebar-action-heading);
             cursor: pointer;
             /* The 'more conversations' line has no icons,
                so vertically align the text with the unread
                count, when one appears there. */
             align-items: baseline;
 
-            & a {
-                /* 12px at 14px/1em */
-                font-size: 0.8571em;
-            }
-
             .unread_count {
                 margin-top: 2px;
             }
@@ -996,6 +989,14 @@ li.top_left_scheduled_messages {
     }
 }
 
+.sidebar-topic-action-heading {
+    font-size: var(--font-size-sidebar-action-heading);
+    font-weight: var(--font-weight-sidebar-action-heading);
+    font-variant: var(--font-variant-sidebar-action-heading);
+    font-feature-settings: var(--font-feature-settings-sidebar-action-heading);
+    text-transform: var(--text-transform-sidebar-action-heading);
+}
+
 .topic-list-filter {
     grid-area: row-content;
 }
@@ -1209,14 +1210,15 @@ li.topic-list-item {
 
 .dm-box {
     grid-template-columns:
-        var(--left-sidebar-toggle-width-offset) var(
+        var(--left-sidebar-toggle-width-offset) [action-heading-start] var(
             --left-sidebar-icon-column-width
         )
-        var(--left-sidebar-icon-content-gap) minmax(0, 1fr) minmax(
+        var(--left-sidebar-icon-content-gap) minmax(0, 1fr) [action-heading-end] minmax(
             0,
             max-content
         )
         30px 0;
+    grid-template-rows: [action-heading-start] auto [action-heading-end];
 
     .conversation-partners-icon {
         grid-area: starting-anchor-element;
@@ -1224,7 +1226,7 @@ li.topic-list-item {
     }
 
     .dm-name {
-        grid-area: row-content;
+        grid-area: action-heading;
     }
 
     .user_circle {
@@ -1294,9 +1296,12 @@ li.topic-list-item {
 
     .show-all-streams {
         grid-area: row-content;
+        font-size: var(--font-size-sidebar-action-heading);
+        font-weight: var(--font-weight-sidebar-action-heading);
+        font-variant: var(--font-variant-sidebar-action-heading);
+        text-transform: var(--text-transform-sidebar-action-heading);
         color: inherit;
         text-decoration: none;
-        text-transform: uppercase;
     }
 
     .unread_count {
@@ -1550,10 +1555,12 @@ li.topic-list-item {
         line-height: var(--line-height-sidebar-row);
         text-decoration: none;
         color: inherit;
-        /* 12px at 14px/1em */
 
         .hide-more-direct-messages-text {
-            font-size: 0.8571em;
+            font-size: var(--font-size-sidebar-action-heading);
+            font-weight: var(--font-weight-sidebar-action-heading);
+            font-variant: var(--font-variant-sidebar-action-heading);
+            text-transform: var(--text-transform-sidebar-action-heading);
             grid-area: row-content;
         }
 

web/templates/more_topics.hbs

@@ -2,7 +2,7 @@
   {{#unless more_topics_unreads}}zero-topic-unreads{{/unless}}
   {{#if more_topics_unread_count_muted}}more_topic_unreads_muted_only{{/if}}">
     <div class="topic-box">
-        <a class="sidebar-topic-name" tabindex="0">{{t "show all topics" }}</a>
+        <a class="sidebar-topic-action-heading sidebar-topic-name" tabindex="0">{{t "Show all topics" }}</a>
         <div class="topic-markers-and-controls">
             {{#if more_topics_have_unread_mention_messages}}
                 <span class="unread_mention_info">