From f60cf7dfb7bd8a4119bee7912d9e6c7aab3c6ad8 Mon Sep 17 00:00:00 2001
From: Juraj Majerik <juro.majerik@gmail.com>
Date: Fri, 22 Dec 2023 11:14:51 +0100
Subject: [PATCH] fix date picker style

---
 frontend/src/lib/components/DatePicker.scss | 80 +++++++++++++++++++--
 1 file changed, 73 insertions(+), 7 deletions(-)

diff --git a/frontend/src/lib/components/DatePicker.scss b/frontend/src/lib/components/DatePicker.scss
index f71c348fe9062..0bc4f6024aef8 100644
--- 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);
+    }
 }