From d3152800a6a04d8154172f66e40439fb2f363a67 Mon Sep 17 00:00:00 2001
From: Tim Abbott <tabbott@zulip.com>
Date: Thu, 23 Mar 2023 10:57:47 -0700
Subject: [PATCH] css: Refactor Tippy popover CSS.

The CSS for our first Tippy popover, actions_popover, incorrectly did
not split the CSS that is meant to be applied to all popovers from
that CSS that is only for that specific popover.

Reorganize this with some clarifying comments.
---
 web/styles/components.css |  6 ++----
 web/styles/popovers.css   | 36 +++++++++++++++++++++++-------------
 2 files changed, 25 insertions(+), 17 deletions(-)

diff --git a/web/styles/components.css b/web/styles/components.css
index 7665427bb1..00a6a82806 100644
--- a/web/styles/components.css
+++ b/web/styles/components.css
@@ -100,10 +100,8 @@ i.zulip-icon.zulip-icon-bot {
 }
 
 .tippy-content {
-    /* This actually sets the
-     * default font size of only
-     * tooltips; popovers should define
-     * font-size of their own.
+    /* Set the default font size for tooltips. Popovers override this with
+       a rule looking at the data-theme.
      */
     font-size: 12px;
 }
diff --git a/web/styles/popovers.css b/web/styles/popovers.css
index fa107267ac..9e18dec4d6 100644
--- a/web/styles/popovers.css
+++ b/web/styles/popovers.css
@@ -1,3 +1,26 @@
+/*
+  Our Tippy popovers use the strangely named "light-border" Tippy
+  theme, so this block defines the common styling for all of our Tippy
+  popovers. (Tippy tooltips are defined in tooltips.css).
+*/
+.tippy-box[data-theme="light-border"] {
+    /* TODO: Clean this logic up after drop Bootstrap styling */
+    & ul.nav {
+        /* Override default padding of tippyjs */
+        margin: 0 -9px;
+
+        /* Override bootstrap defaults */
+        .nav-list > li > a {
+            padding: 3px 15px;
+        }
+
+        /* Override bootstrap defaults */
+        & hr {
+            margin: 5px 0;
+        }
+    }
+}
+
 .popover {
     width: auto;
     max-width: 100%;
@@ -206,19 +229,6 @@ ul {
 }
 
 .actions_popover {
-    /* Override default padding of tippyjs */
-    margin: 0 -9px;
-
-    /* Override bootstrap defaults */
-    .nav-list > li > a {
-        padding: 3px 15px;
-    }
-
-    /* Override bootstrap defaults */
-    & hr {
-        margin: 5px 0;
-    }
-
     .mark_as_unread {
         .unread_count {
             /* The icon for this menu item is in the form of an unread count from