chore(DatePicker): fix date picker appearance (#19497)

PostHog · Jan 4, 2024 · 1da03ed · 1da03ed
1 parent d16aab4
commit 1da03ed
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 7 deletions.
diff --git a/...end/__snapshots__/filters-propertyfilters--comparing-property-filters--dark.png b/...end/__snapshots__/filters-propertyfilters--comparing-property-filters--dark.png
diff --git a/...nd/__snapshots__/filters-propertyfilters--comparing-property-filters--light.png b/...nd/__snapshots__/filters-propertyfilters--comparing-property-filters--light.png
diff --git a/frontend/src/lib/components/DatePicker.scss b/frontend/src/lib/components/DatePicker.scss
@@ -5,14 +5,18 @@
 .posthog-3000 {
     .ant-picker {
         color: var(--default);
-        background: var(--secondary-3000);
-        border-color: transparent;
+        background: var(--lemon-button-bg-color);
+        border-color: var(--secondary-3000-button-border);
 
         .ant-picker-suffix {
             color: var(--default);
         }
     }
 
+    .ant-picker:hover {
+        border-color: var(--secondary-3000-button-border-hover);
+    }
+
     .ant-picker-panel-container {
         color: var(--default);
         background: var(--bg-3000);
@@ -24,7 +28,7 @@
     }
 
     .ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner {
-        background: var(--primary-3000);
+        background: var(--primary-highlight);
     }
 
     .ant-picker-time-panel .ant-picker-time-panel-column:nth-child(3)::after {
@@ -38,12 +42,23 @@
 
     .ant-picker-cell.ant-picker-cell-selected .ant-picker-cell-inner {
         color: var(--default);
-        background: var(--primary);
+        background: var(--primary-highlight);
     }
 
     .ant-picker-cell.ant-picker-cell-today .ant-picker-cell-inner::before {
         background: none;
-        border-color: var(--primary);
+        border-color: var(--text-secondary-3000);
+    }
+
+    .ant-picker-cell:hover:not(
+            .ant-picker-cell-selected,
+            .ant-picker-cell-range-start,
+            .ant-picker-cell-range-end,
+            .ant-picker-cell-range-hover-start,
+            .ant-picker-cell-range-hover-end
+        )
+        .ant-picker-cell-inner {
+        background: var(--secondary-3000);
     }
 
     .ant-picker-cell:hover:not(.ant-picker-cell-in-view) .ant-picker-cell-inner,
@@ -61,12 +76,55 @@
     }
 
     .ant-picker-footer .ant-btn-primary {
-        background: var(--primary);
-        border: none;
+        color: var(--primary);
+        text-shadow: none;
+        background: none;
+        border-color: var(--primary);
         border-radius: 0.25rem;
+        box-shadow: none;
+    }
+
+    .ant-picker-footer .ant-btn-primary:not(:disabled):hover {
+        color: #fff;
+        background: var(--primary);
     }
 
     .ant-picker-footer .ant-picker-now-btn:hover {
         color: var(--primary);
     }
+
+    .ant-picker-ok .ant-btn-primary span {
+        text-transform: uppercase;
+    }
+}
+
+.posthog-3000[theme='dark'] {
+    .ant-picker-time-panel-column > li.ant-picker-time-panel-cell-selected .ant-picker-time-panel-cell-inner {
+        background: rgba(#f7a503, 0.4);
+    }
+
+    .ant-picker-cell:hover:not(
+            .ant-picker-cell-selected,
+            .ant-picker-cell-range-start,
+            .ant-picker-cell-range-end,
+            .ant-picker-cell-range-hover-start,
+            .ant-picker-cell-range-hover-end
+        )
+        .ant-picker-cell-inner {
+        background: var(--muted-3000-dark);
+    }
+
+    .ant-picker-cell.ant-picker-cell-selected .ant-picker-cell-inner {
+        color: var(--default);
+        background: rgba(#f7a503, 0.4);
+    }
+
+    .ant-picker-time-panel-column > li.ant-picker-time-panel-cell .ant-picker-time-panel-cell-inner:hover {
+        background: var(--muted-3000-dark);
+    }
+
+    .ant-picker-cell.ant-picker-cell-today .ant-picker-cell-inner::before {
+        background: none;
+        border-color: var(--text-secondary-3000);
+    }
 }