fix: dark mode tweaks (#18428)

PostHog · Nov 7, 2023 · ab04bdd · ab04bdd
1 parent 7148f03
commit ab04bdd
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 10 deletions.
diff --git a/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist.png b/frontend/__snapshots__/scenes-app-notebooks--recordings-playlist.png
diff --git a/frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss b/frontend/src/layout/navigation-3000/sidepanel/SidePanel.scss
@@ -20,7 +20,7 @@
             box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.2);
 
             [theme='dark'] & {
-                box-shadow: 0px 0px 30px rgba(255, 255, 255, 0.1);
+                box-shadow: none;
             }
         }
 

diff --git a/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.scss b/frontend/src/lib/components/PropertyFilters/components/PropertyFilterButton.scss
@@ -1,6 +1,5 @@
 .PropertyFilterButton {
     overflow: hidden;
-    color: var(--bg-charcoal);
     border-color: transparent;
     background: var(--border);
     display: inline-flex;
@@ -10,7 +9,7 @@
     &:focus {
         border-color: var(--border);
         background: var(--border);
-        color: var(--bg-charcoal);
+        color: var(--text-default);
     }
 
     text-shadow: none;
@@ -27,8 +26,4 @@
         overflow: hidden;
         text-overflow: ellipsis;
     }
-
-    .anticon-close {
-        color: var(--bg-charcoal);
-    }
 }
diff --git a/frontend/src/lib/components/SmoothingFilter/SmoothingFilter.tsx b/frontend/src/lib/components/SmoothingFilter/SmoothingFilter.tsx
@@ -1,10 +1,10 @@
-import { Select } from 'antd'
 import { FundOutlined } from '@ant-design/icons'
 import { smoothingOptions } from './smoothings'
 import { useActions, useValues } from 'kea'
 import { insightLogic } from 'scenes/insights/insightLogic'
 import { insightVizDataLogic } from 'scenes/insights/insightVizDataLogic'
 import { trendsDataLogic } from 'scenes/trends/trendsDataLogic'
+import { LemonSelect } from '@posthog/lemon-ui'
 
 export function SmoothingFilter(): JSX.Element | null {
     const { insightProps } = useValues(insightLogic)
@@ -31,9 +31,8 @@ export function SmoothingFilter(): JSX.Element | null {
     }))
 
     return options.length ? (
-        <Select
+        <LemonSelect
             key={interval}
-            bordered
             value={smoothing_intervals || 1}
             dropdownMatchSelectWidth={false}
             onChange={(key) => {
@@ -43,6 +42,7 @@ export function SmoothingFilter(): JSX.Element | null {
             }}
             data-attr="smoothing-filter"
             options={options}
+            size="small"
         />
     ) : (
         <></>

diff --git a/frontend/src/styles/global.scss b/frontend/src/styles/global.scss
@@ -707,6 +707,19 @@ body {
     }
     .ant-select-dropdown {
         z-index: var(--z-ant-select-dropdown);
+        background-color: var(--bg-3000);
+
+        .ant-select-item.ant-select-item-option {
+            background-color: var(--bg-3000);
+
+            &.ant-select-item-option-active {
+                background-color: var(--border-3000);
+            }
+        }
+    }
+
+    .ant-input-number-group-addon {
+        background: var(--bg-3000);
     }
 
     .ant-picker-dropdown {