From e7466ced18884e08e7c2ee706229e91203635031 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandro@alejandrocelaya.com>
Date: Sat, 20 Feb 2021 09:02:07 +0100
Subject: [PATCH] Added dark theme styles for date picker

---
 src/index.scss           |  3 ++-
 src/utils/DateInput.scss | 54 +++++++++++++++++++++++++++++++++++++---
 2 files changed, 52 insertions(+), 5 deletions(-)

diff --git a/src/index.scss b/src/index.scss
index ea594f29..407826cd 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -101,7 +101,8 @@ body,
   }
 }
 
-.dropdown-item {
+.dropdown-item,
+.dropdown-item-text {
   color: var(--text-color);
 }
 
diff --git a/src/utils/DateInput.scss b/src/utils/DateInput.scss
index c33e71de..50c4016a 100644
--- a/src/utils/DateInput.scss
+++ b/src/utils/DateInput.scss
@@ -43,10 +43,6 @@
   display: block !important;
 }
 
-.react-datepicker-popper {
-  z-index: 2;
-}
-
 .react-datepicker__day--keyboard-selected {
   background-color: $mainColor;
 
@@ -54,3 +50,53 @@
     background-color: darken($mainColor, 12%);
   }
 }
+
+.react-datepicker.react-datepicker {
+  background-color: var(--primary-color);
+  color: var(--text-color);
+  border-color: var(--border-color);
+}
+
+.react-datepicker__header.react-datepicker__header {
+  background-color: var(--secondary-color);
+  border-color: var(--border-color);
+}
+
+.react-datepicker__current-month.react-datepicker__current-month,
+.react-datepicker-time__header.react-datepicker-time__header,
+.react-datepicker-year-header.react-datepicker-year-header,
+.react-datepicker__day-name.react-datepicker__day-name,
+.react-datepicker__day:not(:hover).react-datepicker__day:not(:hover),
+.react-datepicker__time-name.react-datepicker__time-name {
+  color: inherit;
+}
+
+.react-datepicker__day--keyboard-selected.react-datepicker__day--keyboard-selected,
+.react-datepicker__month-text--keyboard-selected.react-datepicker__month-text--keyboard-selected,
+.react-datepicker__quarter-text--keyboard-selected.react-datepicker__quarter-text--keyboard-selected,
+.react-datepicker__year-text--keyboard-selected.react-datepicker__year-text--keyboard-selected {
+  background-color: var(--brand-color) !important;
+  color: white !important;
+}
+
+.react-datepicker-popper.react-datepicker-popper {
+  z-index: 2;
+
+  &[data-placement^='top'] .react-datepicker__triangle.react-datepicker__triangle {
+    border-top-color: var(--primary-color);
+    border-bottom-color: var(--border-color);
+
+    &::before {
+      border-top-color: var(--border-color);
+    }
+  }
+
+  &[data-placement^='bottom'] .react-datepicker__triangle.react-datepicker__triangle {
+    border-top-color: var(--border-color);
+    border-bottom-color: var(--secondary-color);
+
+    &::before {
+      border-bottom-color: var(--border-color);
+    }
+  }
+}