From f7367488536ce92a02b4eba4376b447c622fb490 Mon Sep 17 00:00:00 2001
From: Ella E <ella.estigoy@gmail.com>
Date: Mon, 19 Jun 2023 12:05:23 -0600
Subject: [PATCH] FIX: Make the arrow and tooltip background the same color
 (#22171)

* FIX: Make the arrow and tooltip background the same color
* FIX: move position arrow
---
 app/assets/stylesheets/common/base/d-popover.scss | 8 ++++----
 app/assets/stylesheets/common/base/user-tips.scss | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/app/assets/stylesheets/common/base/d-popover.scss b/app/assets/stylesheets/common/base/d-popover.scss
index eaab5b6d627..ba609ff6bc6 100644
--- a/app/assets/stylesheets/common/base/d-popover.scss
+++ b/app/assets/stylesheets/common/base/d-popover.scss
@@ -6,6 +6,10 @@ $d-popover-border: var(--primary-low);
   background: $d-popover-background;
   border: 1px solid var(--primary-low);
   box-shadow: var(--shadow-menu-panel);
+
+  > .tippy-svg-arrow {
+    color: $d-popover-background;
+  }
 }
 
 .tippy-box[data-placement^="top"] .tippy-svg-arrow > svg {
@@ -16,10 +20,6 @@ $d-popover-border: var(--primary-low);
 }
 
 #tippy-rounded-arrow {
-  .svg-content {
-    fill: $d-popover-background;
-  }
-
   .svg-arrow {
     fill: $d-popover-border;
   }
diff --git a/app/assets/stylesheets/common/base/user-tips.scss b/app/assets/stylesheets/common/base/user-tips.scss
index 644d6ccd982..434669d280c 100644
--- a/app/assets/stylesheets/common/base/user-tips.scss
+++ b/app/assets/stylesheets/common/base/user-tips.scss
@@ -20,7 +20,7 @@
     }
   }
 
-  > .tippy-svg-arrow > svg {
+  > .tippy-svg-arrow {
     color: var(--tertiary);
   }
 }
@@ -52,19 +52,19 @@
 .tippy-box[data-theme~="user-tips"][data-placement^="left"]
   > .tippy-svg-arrow
   > svg {
-  left: 11px;
+  left: 12px;
 }
 
 .tippy-box[data-theme~="user-tips"][data-placement^="top"]
   > .tippy-svg-arrow
   > svg {
-  top: 11px;
+  top: 12px;
 }
 
 .tippy-box[data-theme~="user-tips"][data-placement^="bottom"]
   > .tippy-svg-arrow
   > svg {
-  top: -13px;
+  top: -14px;
   left: -1px;
 }