chore(3000): changes dark mode background, border, added a few borders (

#18798) * changes dark mode background, border, added a few borders * Update UI snapshots for `chromium` (1) * Update UI snapshots for `chromium` (2) * Update UI snapshots for `chromium` (2) --------- Co-authored-by: github-actions <41898282+github-actions[bot]@users.noreply.github.com>
PostHog · Nov 22, 2023 · 81da5f3 · 81da5f3
1 parent 889e67a
commit 81da5f3
Show file tree

Hide file tree

Showing 18 changed files with 21 additions and 8 deletions.
diff --git a/frontend/__snapshots__/lemon-ui-lemon-banner--closable.png b/frontend/__snapshots__/lemon-ui-lemon-banner--closable.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-banner--dismissable.png b/frontend/__snapshots__/lemon-ui-lemon-banner--dismissable.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-banner--error.png b/frontend/__snapshots__/lemon-ui-lemon-banner--error.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-banner--info.png b/frontend/__snapshots__/lemon-ui-lemon-banner--info.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-banner--success.png b/frontend/__snapshots__/lemon-ui-lemon-banner--success.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-banner--warning.png b/frontend/__snapshots__/lemon-ui-lemon-banner--warning.png
diff --git a/frontend/__snapshots__/lemon-ui-lemon-button--as-links.png b/frontend/__snapshots__/lemon-ui-lemon-button--as-links.png
diff --git a/frontend/__snapshots__/scenes-app-batchexports--create-export.png b/frontend/__snapshots__/scenes-app-batchexports--create-export.png
diff --git a/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png b/frontend/__snapshots__/scenes-app-experiments--complete-funnel-experiment.png
diff --git a/frontend/__snapshots__/scenes-app-experiments--running-trend-experiment.png b/frontend/__snapshots__/scenes-app-experiments--running-trend-experiment.png
diff --git a/frontend/__snapshots__/scenes-app-notebooks--notebooks-list.png b/frontend/__snapshots__/scenes-app-notebooks--notebooks-list.png
diff --git a/frontend/__snapshots__/scenes-app-surveys--surveys-list.png b/frontend/__snapshots__/scenes-app-surveys--surveys-list.png
diff --git a/frontend/__snapshots__/scenes-other-login--sso-error.png b/frontend/__snapshots__/scenes-other-login--sso-error.png
diff --git a/frontend/__snapshots__/scenes-other-settings--settings-organization.png b/frontend/__snapshots__/scenes-other-settings--settings-organization.png
diff --git a/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.scss b/frontend/src/lib/lemon-ui/LemonBanner/LemonBanner.scss
@@ -1,13 +1,14 @@
 .LemonBanner {
+    align-items: center;
     border-radius: var(--radius);
-    padding: 0.5rem 0.75rem;
+    border: solid 1px var(--border-3000);
     color: var(--primary-alt);
-    font-weight: 500;
     display: flex;
-    align-items: center;
-    text-align: left;
+    font-weight: 500;
     gap: 0.5rem;
     min-height: 3rem;
+    padding: 0.5rem 0.75rem;
+    text-align: left;
 
     &.LemonBanner--info {
         background-color: var(--primary-alt-highlight);

diff --git a/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.scss b/frontend/src/queries/nodes/InsightViz/PropertyGroupFilters/PropertyGroupFilters.scss
@@ -1,6 +1,11 @@
 .PropertyGroupFilters {
     .property-group {
         background-color: var(--side);
+
+        .posthog-3000 & {
+            border-width: 1px;
+        }
+
         padding: 0.5rem;
         border-radius: 4px;
     }

diff --git a/frontend/src/scenes/feature-flags/FeatureFlag.scss b/frontend/src/scenes/feature-flags/FeatureFlag.scss
@@ -64,6 +64,10 @@
 }
 
 .FeatureConditionCard {
+    .posthog-3000 & {
+        background: var(--bg-light);
+    }
+
     .FeatureConditionCard--border--highlight {
         border-color: var(--primary-3000);
     }

diff --git a/frontend/src/styles/vars.scss b/frontend/src/styles/vars.scss
@@ -125,6 +125,7 @@ $colors: (
     'secondary-3000-hover-light': #cfd1c2,
     'accent-3000-light': #eeefe9,
     'bg-3000-light': #f3f4ef,
+    'bg-hover-3000-light': #f3f4ef,
     'border-3000-light': #dadbd2,
     'border-bold-3000-light': #c1c2b9,
     'glass-bg-3000-light': #e4e5deb3,
@@ -157,11 +158,12 @@ $colors: (
 
     'secondary-3000-dark': #1d1f27,
     'secondary-3000-hover-dark': #575d77,
-    'accent-3000-dark': #232429,
+    'accent-3000-dark': #21242b,
     'bg-3000-dark': #1d1f27,
-    'border-3000-dark': #4a4c52,
+    'bg-hover-3000-dark': #292b36,
+    'border-3000-dark': #35373e,
     'border-bold-3000-dark': #3f4046,
-    'glass-bg-3000-dark': #1d1f27b3,
+    'glass-bg-3000-dark': #21242bb3,
     'glass-border-3000-dark': var(--border-3000-dark),
     'link-3000-dark': #f1a82c,
 
@@ -189,10 +191,11 @@ $colors: (
     'secondary-3000-hover': var(--secondary-3000-hover),
     'accent-3000': var(--accent-3000),
     'bg-3000': var(--bg-3000),
+    'bg-hover-3000': var(--bg-hover-3000),
     'border-3000': var(--border-3000),
     'border-bold-3000': var(--border-bold-3000),
     'glass-bg-3000': var(--glass-bg-3000),
-    'glass-border-3000': var(--glass-border-3000),
+    'glass-border-3000': var(--border-3000),
     'link-3000': var(--link-3000),
     // 'bg-light': var(--accent-3000),
     'primary-3000-frame-bg': var(--primary-3000-frame-bg),