From c55eaf2bec7fe716399e7d499047754b4e013b45 Mon Sep 17 00:00:00 2001
From: Aman Agrawal <amanagr@zulip.com>
Date: Thu, 23 Nov 2023 07:53:22 +0000
Subject: [PATCH] css: Set tippy-arrow color same as background in light theme.

---
 web/styles/compose.css    |  2 +-
 web/styles/dark_theme.css | 37 -------------------------------------
 web/styles/popovers.css   | 34 ++++++++++++++++++++++++++++++++++
 web/styles/zulip.css      |  2 ++
 4 files changed, 37 insertions(+), 38 deletions(-)

diff --git a/web/styles/compose.css b/web/styles/compose.css
index 726cdc54eb..e61b4808d7 100644
--- a/web/styles/compose.css
+++ b/web/styles/compose.css
@@ -1194,7 +1194,7 @@ textarea.new_message_textarea,
     & ul {
         list-style: none;
         margin: 0;
-        background: hsl(0deg 0% 100%);
+        background-color: var(--color-background-popover);
     }
 
     .typeahead-header {
diff --git a/web/styles/dark_theme.css b/web/styles/dark_theme.css
index ad7237eecb..4c53dee048 100644
--- a/web/styles/dark_theme.css
+++ b/web/styles/dark_theme.css
@@ -130,38 +130,6 @@
                 color: hsl(200deg 79% 66%);
             }
         }
-
-        &[data-placement^="top"] {
-            > .tippy-arrow {
-                &::before {
-                    border-top-color: hsl(235deg 18% 7%);
-                }
-            }
-        }
-
-        &[data-placement^="bottom"] {
-            > .tippy-arrow {
-                &::before {
-                    border-bottom-color: hsl(235deg 18% 7%);
-                }
-            }
-        }
-
-        &[data-placement^="left"] {
-            > .tippy-arrow {
-                &::before {
-                    border-left-color: hsl(235deg 18% 7%);
-                }
-            }
-        }
-
-        &[data-placement^="right"] {
-            > .tippy-arrow {
-                &::before {
-                    border-right-color: hsl(235deg 18% 7%);
-                }
-            }
-        }
     }
 
     .tippy-box:not([data-theme]) {
@@ -646,11 +614,6 @@
         }
     }
 
-    .tippy-box[data-theme~="light-border"],
-    .dropdown-menu ul,
-        background-color: hsl(212deg 32% 14%);
-    }
-
     /* Undo default dropdown background color for dark mode. */
     #searchbox_form .dropdown-menu ul {
         background-color: unset;
diff --git a/web/styles/popovers.css b/web/styles/popovers.css
index 069419edeb..1ee515dedb 100644
--- a/web/styles/popovers.css
+++ b/web/styles/popovers.css
@@ -4,6 +4,8 @@
   popovers. (Tippy tooltips are defined in tooltips.css).
 */
 .tippy-box[data-theme="light-border"] {
+    background-color: var(--color-background-popover);
+
     .sp-input {
         /* Override incorrect color for text in dark theme. */
         color: var(--color-text-default) !important;
@@ -29,6 +31,38 @@
             padding: 3px 15px;
         }
     }
+
+    &[data-placement^="top"] {
+        > .tippy-arrow {
+            &::before {
+                border-top-color: var(--color-background-popover);
+            }
+        }
+    }
+
+    &[data-placement^="bottom"] {
+        > .tippy-arrow {
+            &::before {
+                border-bottom-color: var(--color-background-popover);
+            }
+        }
+    }
+
+    &[data-placement^="left"] {
+        > .tippy-arrow {
+            &::before {
+                border-left-color: var(--color-background-popover);
+            }
+        }
+    }
+
+    &[data-placement^="right"] {
+        > .tippy-arrow {
+            &::before {
+                border-right-color: var(--color-background-popover);
+            }
+        }
+    }
 }
 
 .tippy-box[data-theme="dropdown-widget"] {
diff --git a/web/styles/zulip.css b/web/styles/zulip.css
index b773dc7ea0..b2b3b61ee5 100644
--- a/web/styles/zulip.css
+++ b/web/styles/zulip.css
@@ -226,6 +226,7 @@ body {
     --color-background-tab-picker-selected-tab: hsl(0deg 0% 100%);
     --color-outline-tab-picker-tab-option: hsl(0deg 0% 0% / 30%);
     --color-background-tab-picker-tab-option-hover: hsl(0deg 0% 100% / 60%);
+    --color-background-popover: hsl(0deg 0% 100%);
 
     /* Compose box colors */
     --color-compose-send-button-icon-color: hsl(0deg 0% 100%);
@@ -507,6 +508,7 @@ body {
     --color-compose-embedded-button-background-hover: hsl(
         235deg 100% 70% / 11%
     );
+    --color-background-popover: hsl(212deg 32% 14%);
 
     /* Text colors */
     --color-text-default: hsl(0deg 0% 100% / 75%);