fix date picker style

PostHog · Dec 22, 2023 · f60cf7d · f60cf7d
1 parent 915cf58
commit f60cf7d
Showing 1 changed file with 73 additions and 7 deletions.
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,63 @@
     }
 
     .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);
     }
+
+    // HACKY: replace 'Ok' with 'OK'
+    .ant-picker-ok .ant-btn-primary span {
+        font-size: 0;
+        visibility: hidden;
+    }
+
+    .ant-picker-ok .ant-btn-primary span::after {
+        font-size: 14px;
+        visibility: visible;
+        content: 'OK';
+    }
+}
+
+.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);
+    }
 }