From 898af8a9af8a1123e38e691501656a12fa37542b Mon Sep 17 00:00:00 2001
From: evykassirer <evy@zulip.com>
Date: Wed, 6 Nov 2024 12:58:40 -0800
Subject: [PATCH] user_circles: Fix bug causing incorrect colors in typeahead.

c39ae45d954a982cbc7fa1a216a048877d18c419 was incorrect, and should
only have been applied to the circles in the buddy list avatars.
In other places in the app, the transparency was over other colors
of background.
---
 web/styles/right_sidebar.css | 12 ++++++++++++
 web/styles/user_circles.css  |  4 ++--
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/web/styles/right_sidebar.css b/web/styles/right_sidebar.css
index e60b2361d4..6b36a4050c 100644
--- a/web/styles/right_sidebar.css
+++ b/web/styles/right_sidebar.css
@@ -172,6 +172,18 @@ $user_status_emoji_width: 24px;
         height: 0.4em;
         top: 1.6em;
         left: 1.6em;
+
+        &.user_circle_idle {
+            background: linear-gradient(
+                to bottom,
+                var(--color-background) 50%,
+                var(--color-user-circle-idle) 50%
+            );
+        }
+
+        &.user_circle_empty {
+            background-color: var(--color-background);
+        }
     }
 
     .empty-list-message {
diff --git a/web/styles/user_circles.css b/web/styles/user_circles.css
index d06c10362b..6d8c1336e4 100644
--- a/web/styles/user_circles.css
+++ b/web/styles/user_circles.css
@@ -19,13 +19,13 @@
     border-color: var(--color-user-circle-idle);
     background: linear-gradient(
         to bottom,
-        var(--color-background) 50%,
+        hsl(0deg 0% 100% / 0%) 50%,
         var(--color-user-circle-idle) 50%
     );
 }
 
 .user_circle_empty {
-    background-color: var(--color-background);
+    background-color: transparent;
     border-color: hsl(0deg 0% 50%);
 }