popovers: Add consistent tippy arrows which support all placements.

Added `tippy.js/dist/border.css` along with some custom CSS override,
to add arrows which inherit the border color and width of the popover,
while also supporting all placements.

Also consolidates the CSS styling of the popovers to the `tippy-box`
element, which is the recommended way to theme the element according to
https://atomiks.github.io/tippyjs/v6/themes/#creating-a-theme.
This further helps in unifying the styling of the popover and the arrow,
and prevents inconsistencies such as shadow of the popover being casted
onto the arrows.

web/shared/icons/popover-arrow.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="8" viewBox="0 0 16 8" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M16 8L8.793 0.347826C8.35587 -0.115942 7.64413 -0.115942 7.20701 0.347826C7.20701 0.347826 2.90369 4.91934 0 8H16Z" fill="white"/>
-</svg>

web/src/bundles/app.ts

@@ -15,6 +15,9 @@ import "../zulip_test";
 
 // Import styles
 import "tippy.js/dist/tippy.css";
+// Adds color inheritance to the borders when using the default CSS Arrow.
+// https://atomiks.github.io/tippyjs/v6/themes/#arrow-border
+import "tippy.js/dist/border.css";
 import "tippy.js/themes/light-border.css";
 import "spectrum-colorpicker/spectrum.css";
 import "katex/dist/katex.css";

web/styles/app_variables.css

@@ -151,6 +151,15 @@
     /* Gap between tabs in the tab picker */
     --grid-gap-tab-picker: 2px;
 
+    /*
+    The tippy arrow which matches the color of the popover's border,
+    is formed by stacking two arrows on top of each other, via the
+    use of `::before` and `::after` pseudo-elements. This value overrides
+    the offset of the `::before` pseudo element to create a thicker border,
+    visually consistent with that of it's parent popover.
+    */
+    --popover-tippy-arrow-before-offset: -6.5px;
+
     /* Colors used across the app */
     --color-date: hsl(0deg 0% 15% / 75%);
     --color-background-private-message-header: hsl(46deg 35% 93%);

web/styles/popovers.css

@@ -82,30 +82,33 @@
 }
 
 .tippy-box[data-theme="popover-menu"] {
-    border: 0;
+    background-color: var(--color-background-popover-menu);
+    border: 1px solid var(--color-border-popover-menu);
     border-radius: 6px;
+    box-shadow: var(--box-shadow-popover-menu);
 
     > .tippy-content {
         padding: 0;
     }
 
     > .tippy-arrow {
-        top: -5.5px;
+        color: var(--color-background-popover-menu);
-        width: 16px;
+    }
-        height: 8px;
-        z-index: 1;
-        filter: drop-shadow(0 -1.25px 0 var(--color-border-dropdown-menu));
 
-        &::before {
+    &[data-placement^="top"] > .tippy-arrow::before {
-            content: "";
+        bottom: var(--popover-tippy-arrow-before-offset);
-            top: 0;
+    }
-            width: 100%;
+
-            height: 100%;
+    &[data-placement^="bottom"] > .tippy-arrow::before {
-            mask-image: url("../shared/icons/popover-arrow.svg");
+        top: var(--popover-tippy-arrow-before-offset);
-            mask-size: contain;
+    }
-            mask-repeat: no-repeat;
+
-            color: var(--color-background-dropdown-menu);
+    &[data-placement^="left"] > .tippy-arrow::before {
-        }
+        right: var(--popover-tippy-arrow-before-offset);
+    }
+
+    &[data-placement^="right"] > .tippy-arrow::before {
+        left: var(--popover-tippy-arrow-before-offset);
     }
 }
 
@@ -1230,13 +1233,10 @@ ul {
 
 .popover-menu {
     margin: 0;
-    border: 1px solid var(--color-border-popover-menu);
-    background-color: var(--color-background-popover-menu);
     max-height: 85vh;
     overflow-x: hidden;
     user-select: none;
     border-radius: 6px;
-    box-shadow: var(--box-shadow-popover-menu);
 
     .simplebar-content {
         min-width: var(--popover-menu-min-width);