From a9421f6ba05ad7b8cd786fce05058a81bee14244 Mon Sep 17 00:00:00 2001
From: Karl Stolley <karl@zulip.com>
Date: Thu, 26 Oct 2023 10:21:52 -0400
Subject: [PATCH] navbar: Use new purple icon color with left-sidebar toggle.

This also implements the same hover and focus-visible styles
as icons on the righthand side of the navbar.
---
 web/styles/dark_theme.css |  6 ------
 web/styles/zulip.css      | 21 +++++++++++++++++++--
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index b4934bba4d..da64798512 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -733,16 +733,10 @@
         color: hsl(236deg 33% 90%);
     }
 
-    #streamlist-toggle,
     #userlist-toggle {
         color: inherit;
     }
 
-    #streamlist-toggle-button {
-        color: inherit;
-        background-color: inherit;
-    }
-
     #userlist-toggle-button {
         color: hsl(221deg 9% 54%);
 
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index 72fdf9c454..b585621146 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -2286,12 +2286,29 @@ div.focused-message-list {
 
 #streamlist-toggle-button {
     text-decoration: none;
-    color: hsl(0deg 0% 52%);
+    color: var(--color-navbar-icon);
     display: flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
+
+    &:hover {
+        background-color: var(--color-header-button-hover);
+    }
+
+    &:active {
+        background-color: var(--color-header-button-focus);
+    }
+
+    &:focus {
+        outline: 0;
+    }
+
+    &:focus-visible {
+        outline: none;
+        background-color: var(--color-header-button-focus);
+    }
 }
 
 #streamlist-toggle-unreadcount {
@@ -2299,7 +2316,7 @@ div.focused-message-list {
     display: none;
     height: 6px;
     width: 6px;
-    background-color: var(--color-background-unread-counter-dot);
+    background-color: var(--color-navbar-icon);
     top: 10px;
     right: 9px;
     border: 2px solid var(--color-background-navbar);