From c4bc0ad589a54f5b489d33fcff5b4b39107384af Mon Sep 17 00:00:00 2001
From: evykassirer <evy.kassirer@gmail.com>
Date: Thu, 29 Jun 2023 13:56:21 -0400
Subject: [PATCH] message feed: Change color of zulip logo at top of feed.

---
 web/src/message_feed_loading.ts |  4 ++++
 web/styles/dark_theme.css       | 15 ---------------
 web/styles/zulip.css            | 19 +++++++++++++++----
 3 files changed, 19 insertions(+), 19 deletions(-)

diff --git a/web/src/message_feed_loading.ts b/web/src/message_feed_loading.ts
index 33d1c67368..3000cefe86 100644
--- a/web/src/message_feed_loading.ts
+++ b/web/src/message_feed_loading.ts
@@ -7,6 +7,7 @@ let loading_newer_messages_indicator_showing = false;
 
 export function show_loading_older(): void {
     if (!loading_older_messages_indicator_showing) {
+        $(".top-messages-logo").toggleClass("loading", true);
         loading.make_indicator($("#loading_older_messages_indicator"), {abs_positioned: true});
         loading_older_messages_indicator_showing = true;
     }
@@ -14,6 +15,7 @@ export function show_loading_older(): void {
 
 export function hide_loading_older(): void {
     if (loading_older_messages_indicator_showing) {
+        $(".top-messages-logo").toggleClass("loading", false);
         loading.destroy_indicator($("#loading_older_messages_indicator"));
         loading_older_messages_indicator_showing = false;
     }
@@ -22,6 +24,7 @@ export function hide_loading_older(): void {
 export function show_loading_newer(): void {
     if (!loading_newer_messages_indicator_showing) {
         $(".bottom-messages-logo").show();
+        $(".bottom-messages-logo").toggleClass("loading", true);
         loading.make_indicator($("#loading_newer_messages_indicator"), {abs_positioned: true});
         loading_newer_messages_indicator_showing = true;
     }
@@ -30,6 +33,7 @@ export function show_loading_newer(): void {
 export function hide_loading_newer(): void {
     if (loading_newer_messages_indicator_showing) {
         $(".bottom-messages-logo").hide();
+        $(".bottom-messages-logo").toggleClass("loading", false);
         loading.destroy_indicator($("#loading_newer_messages_indicator"));
         loading_newer_messages_indicator_showing = false;
     }
diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index 5361c68a2b..b1c6ab47ce 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -1340,21 +1340,6 @@
         opacity: 0.7;
     }
 
-    .scheduled-messages-loading-logo,
-    .alert-zulip-logo,
-    .top-messages-logo,
-    .bottom-messages-logo {
-        & svg path {
-            fill: hsl(214deg 27% 18%);
-            stroke: hsl(214deg 27% 18%);
-        }
-
-        & svg circle {
-            fill: hsl(0deg 0% 100%);
-            stroke: hsl(0deg 0% 100%);
-        }
-    }
-
     .history-limited-box,
     .all-messages-search-caution {
         background-color: hsl(0deg 0% 0% / 20%);
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index b69ac9442f..287abf8930 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -161,6 +161,9 @@ body {
     --color-unread-marker: hsl(217deg 64% 59%);
     --color-failed-message-send-icon: hsl(3.88deg 98.84% 66.27%);
     --color-background-modal: hsl(0deg 0% 98%);
+    --color-zulip-logo: hsl(0deg 0% 0% / 34%);
+    --color-zulip-logo-loading: hsl(0deg 0% 27%);
+    --color-zulip-logo-z: hsl(0deg 0% 100%);
 
     /* Text colors */
     --color-text-default: hsl(0deg 0% 20%);
@@ -203,6 +206,9 @@ body {
     --color-navbar-bottom-border: hsl(0deg 0% 0% / 60%);
     --color-unread-marker: hsl(217deg 64% 59%);
     --color-background-modal: hsl(212deg 28% 18%);
+    --color-zulip-logo: hsl(0deg 0% 100% / 50%);
+    --color-zulip-logo-loading: hsl(0deg 0% 100%);
+    --color-zulip-logo-z: hsl(214deg 27% 18%);
 
     /* Text colors */
     --color-text-default: hsl(0deg 0% 100% / 75%);
@@ -350,15 +356,20 @@ p.n-margin {
 
     & svg {
         & circle {
-            fill: hsl(0deg 0% 27%);
-            stroke: hsl(0deg 0% 27%);
+            fill: var(--color-zulip-logo);
+            stroke: var(--color-zulip-logo);
         }
 
         & path {
-            fill: hsl(0deg 0% 100%);
-            stroke: hsl(0deg 0% 100%);
+            fill: var(--color-zulip-logo-z);
+            stroke: var(--color-zulip-logo-z);
         }
     }
+
+    &.loading circle {
+        fill: var(--color-zulip-logo-loading);
+        stroke: var(--color-zulip-logo-loading);
+    }
 }
 
 .top-messages-logo {