left_sidebar: Add hover effects for section headings.

web/styles/app_variables.css

@@ -338,6 +338,8 @@
     --text-transform-sidebar-action-heading: uppercase;
     --letter-spacing-sidebar-heading: 0.0469em;
     --opacity-sidebar-heading: 0.7;
+    --opacity-sidebar-heading-icon: 0.5;
+    --opacity-sidebar-heading-hover: 0.9;
     --opacity-right-sidebar-subheading: 0.65;
     --opacity-right-sidebar-subheading-hover: 0.9;
 

web/styles/left_sidebar.css

@@ -12,6 +12,7 @@
 .left-sidebar-title {
     color: var(--color-text-sidebar-heading);
     opacity: var(--opacity-sidebar-heading);
+    transition: opacity 140ms linear;
     font-size: inherit;
     font-weight: var(--font-weight-sidebar-heading);
     letter-spacing: var(--letter-spacing-sidebar-heading);
@@ -180,6 +181,18 @@
     grid-template-rows: var(--line-height-sidebar-row-prominent);
     cursor: pointer;
     white-space: nowrap;
+    border-radius: 4px;
+
+    /* Prevent hover styles set on other rows when zoomed in. */
+    &:not(.zoom-in):hover {
+        background-color: var(--color-background-hover-narrow-filter);
+        box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
+
+        .left-sidebar-title,
+        .sidebar-heading-icon {
+            opacity: var(--opacity-sidebar-heading-hover);
+        }
+    }
 
     #toggle-direct-messages-section-icon {
         grid-area: starting-anchor-element;
@@ -273,11 +286,7 @@
 #toggle-direct-messages-section-icon,
 #toggle-top-left-navigation-area-icon {
     color: var(--color-text-sidebar-heading);
-    opacity: var(--opacity-sidebar-heading);
+    opacity: var(--opacity-sidebar-heading-icon);
-
-    &:hover {
-        opacity: 1;
-    }
 
     &:focus {
         outline: 0;
@@ -847,14 +856,26 @@ li.top_left_scheduled_messages {
 }
 
 #views-label-container {
+    margin-right: var(--left-sidebar-right-margin);
     grid-template-columns:
         0 var(--left-sidebar-header-icon-toggle-width) 0 minmax(0, 0.5fr) minmax(
             0,
             1fr
         )
-        30px var(--left-sidebar-right-margin);
+        30px 0;
-    grid-template-rows: var(--line-height-sidebar-row-prominent);
+    grid-template-rows: 28px;
     cursor: pointer;
+    border-radius: 4px;
+
+    &:not(.remove-pointer-for-spectator):hover {
+        background-color: var(--color-background-hover-narrow-filter);
+        box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
+
+        .left-sidebar-title,
+        .sidebar-heading-icon {
+            opacity: var(--opacity-sidebar-heading-hover);
+        }
+    }
 
     &.showing-expanded-navigation {
         /* When the expanded navigation is visible,
@@ -1371,22 +1392,41 @@ li.topic-list-item {
 #streams_header {
     grid-template-columns:
         var(--left-sidebar-toggle-width-offset) 0 0 minmax(0, 1fr)
-        minmax(17px, max-content) 30px var(--left-sidebar-right-margin);
+        minmax(17px, max-content) 30px 0;
     /* Keep the stream-search area rows collapsed. */
     grid-template-rows: var(--line-height-sidebar-row-prominent) 0 0;
     cursor: pointer;
-    padding: var(--left-sidebar-sections-vertical-gutter) 0 3px 0;
+    margin: var(--left-sidebar-sections-vertical-gutter)
+        var(--left-sidebar-right-margin) 3px 0;
     position: sticky;
     /* Keep sticky within SimpleBar context. */
     top: 0;
     z-index: 2;
     background-color: var(--color-background);
+    border-radius: 4px;
+
+    &:hover {
+        background-color: var(--color-background-opaque-hover-narrow-filter);
+        box-shadow: inset 0 0 0 1px var(--color-shadow-sidebar-row-hover);
+
+        .left-sidebar-title,
+        .sidebar-heading-icon {
+            opacity: var(--opacity-sidebar-heading-hover);
+        }
+    }
 
     &.showing-stream-search-section {
         /* Open up the stream-search rows. The 10px
            row maintains space with the streams list
            below. */
         grid-template-rows: var(--line-height-sidebar-row-prominent) 28px 10px;
+
+        /* When the search section is showing, switch
+           off the hover effects on the row. */
+        &:hover {
+            background-color: var(--color-background);
+            box-shadow: unset;
+        }
     }
 
     .left-sidebar-title {
@@ -1520,7 +1560,8 @@ li.topic-list-item {
 .spectator-view #streams_header {
     grid-template-columns:
         var(--left-sidebar-toggle-width-offset) 0 0 minmax(0, 1fr)
-        minmax(30px, max-content) 0 var(--left-sidebar-right-margin);
+        minmax(30px, max-content) 0 0;
+    margin-right: var(--left-sidebar-right-margin);
 
     /* With markers and controls now sized the same
        as the ordinary vdots area (but allowed to grow,
@@ -1600,6 +1641,12 @@ li.topic-list-item {
         z-index: 2;
         padding-bottom: 1px;
         background-color: var(--color-background);
+
+        &:hover {
+            /* Prevent hover styles set on other rows. */
+            box-shadow: none;
+            background-color: var(--color-background);
+        }
     }
 
     #streams_header,

web/templates/left_sidebar.hbs

@@ -1,7 +1,7 @@
 <div class="left-sidebar" id="left-sidebar" role="navigation">
     <div id="left-sidebar-navigation-area" class="left-sidebar-navigation-area">
         <div id="views-label-container" class="showing-expanded-navigation {{#if is_spectator}}remove-pointer-for-spectator{{/if}}">
-            <i id="toggle-top-left-navigation-area-icon" class="zulip-icon zulip-icon-heading-triangle-right rotate-icon-down views-tooltip-target hidden-for-spectators" aria-hidden="true"></i>
+            <i id="toggle-top-left-navigation-area-icon" class="zulip-icon zulip-icon-heading-triangle-right sidebar-heading-icon rotate-icon-down views-tooltip-target hidden-for-spectators" aria-hidden="true"></i>
             {{~!-- squash whitespace --~}}
             <h4 class="left-sidebar-title"><span class="views-tooltip-target">{{t 'VIEWS' }}</span></h4>
             <ul id="left-sidebar-navigation-list-condensed" class="filters">
@@ -145,7 +145,7 @@
     </div>
 
     <div id="direct-messages-section-header" class="direct-messages-container hidden-for-spectators zoom-out zoom-in-sticky">
-        <i id="toggle-direct-messages-section-icon" class="zulip-icon zulip-icon-heading-triangle-right rotate-icon-down dm-tooltip-target zoom-in-hide" aria-hidden="true" tabindex="0" role="button"></i>
+        <i id="toggle-direct-messages-section-icon" class="zulip-icon zulip-icon-heading-triangle-right sidebar-heading-icon rotate-icon-down dm-tooltip-target zoom-in-hide" aria-hidden="true" tabindex="0" role="button"></i>
         <h4 class="left-sidebar-title"><span class="dm-tooltip-target">{{t 'DIRECT MESSAGES' }}</span></h4>
         <div class="heading-markers-and-controls">
             <a id="show-all-direct-messages" href="#narrow/is/dm" data-tooltip-template-id="show-all-direct-messages-template">