From 82889723b13d16e47a552f45ed3b0db587d2e844 Mon Sep 17 00:00:00 2001
From: David Newell <d.newell1@outlook.com>
Date: Wed, 29 Nov 2023 12:02:40 +0000
Subject: [PATCH] fix: popover arrow background color (#18867)

---
 .../src/lib/lemon-ui/Popover/Popover.scss     | 20 +++++++++++++++++++
 .../src/scenes/experiments/Experiment.scss    |  2 +-
 .../scenes/experiments/ExperimentPreview.tsx  |  4 ++--
 3 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/frontend/src/lib/lemon-ui/Popover/Popover.scss b/frontend/src/lib/lemon-ui/Popover/Popover.scss
index 01779d797acdd..e4ae40e777722 100644
--- a/frontend/src/lib/lemon-ui/Popover/Popover.scss
+++ b/frontend/src/lib/lemon-ui/Popover/Popover.scss
@@ -111,28 +111,48 @@
     background: var(--bg-3000);
     transform: rotate(45deg);
 
+    .posthog-3000 & {
+        background: var(--bg-light);
+    }
+
     [data-placement^='bottom'] & {
         top: -0.25rem;
         border-top: 1px solid var(--border);
         border-left: 1px solid var(--border);
+
+        .posthog-3000 & {
+            top: -0.3rem;
+        }
     }
 
     [data-placement^='top'] & {
         bottom: -0.25rem;
         border-right: 1px solid var(--border);
         border-bottom: 1px solid var(--border);
+
+        .posthog-3000 & {
+            bottom: -0.3rem;
+        }
     }
 
     [data-placement^='left'] & {
         right: -0.25rem;
         border-top: 1px solid var(--border);
         border-right: 1px solid var(--border);
+
+        .posthog-3000 & {
+            right: -0.3rem;
+        }
     }
 
     [data-placement^='right'] & {
         left: -0.25rem;
         border-bottom: 1px solid var(--border);
         border-left: 1px solid var(--border);
+
+        .posthog-3000 & {
+            left: -0.3rem;
+        }
     }
 
     .Popover--actionable & {
diff --git a/frontend/src/scenes/experiments/Experiment.scss b/frontend/src/scenes/experiments/Experiment.scss
index d2dcd3723da97..85059e647fa48 100644
--- a/frontend/src/scenes/experiments/Experiment.scss
+++ b/frontend/src/scenes/experiments/Experiment.scss
@@ -23,7 +23,7 @@
             }
 
             .ant-slider-rail {
-                background-color: var(--primary-highlight);
+                background-color: var(--primary-3000-highlight);
             }
         }
     }
diff --git a/frontend/src/scenes/experiments/ExperimentPreview.tsx b/frontend/src/scenes/experiments/ExperimentPreview.tsx
index 9d7585e944e77..ed4a4ef9e442e 100644
--- a/frontend/src/scenes/experiments/ExperimentPreview.tsx
+++ b/frontend/src/scenes/experiments/ExperimentPreview.tsx
@@ -123,8 +123,8 @@ export function ExperimentPreview({
                                     value={minimumDetectableChange}
                                     min={1}
                                     max={sliderMaxValue}
-                                    trackStyle={{ background: 'var(--primary)' }}
-                                    handleStyle={{ background: 'var(--primary)' }}
+                                    trackStyle={{ background: 'var(--primary-3000)' }}
+                                    handleStyle={{ background: 'var(--primary-3000)' }}
                                     onChange={(value) => {
                                         setExperiment({
                                             parameters: {