message feed: Change color of zulip logo at top of feed.

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;
     }

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%);

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%);
+            fill: var(--color-zulip-logo);
-            stroke: hsl(0deg 0% 27%);
+            stroke: var(--color-zulip-logo);
         }
 
         & path {
-            fill: hsl(0deg 0% 100%);
+            fill: var(--color-zulip-logo-z);
-            stroke: hsl(0deg 0% 100%);
+            stroke: var(--color-zulip-logo-z);
         }
     }
+
+    &.loading circle {
+        fill: var(--color-zulip-logo-loading);
+        stroke: var(--color-zulip-logo-loading);
+    }
 }
 
 .top-messages-logo {