From 15302962441792ef5d16cc434e5fe49d4b3a1112 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 12 May 2022 14:51:59 +0200
Subject: [PATCH] dark styles for datepicker
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/styles/components/datepicker.scss | 43 ++++++++++++++++-----------
 1 file changed, 26 insertions(+), 17 deletions(-)

diff --git a/app/styles/components/datepicker.scss b/app/styles/components/datepicker.scss
index af5f7ab3f..ed5a5d839 100644
--- a/app/styles/components/datepicker.scss
+++ b/app/styles/components/datepicker.scss
@@ -1,5 +1,5 @@
 .react-datepicker {
-  @apply p-4 font-sans text-xs text-gray-900 border border-solid border-gray-200 rounded-lg;
+  @apply dark:bg-slate-900 dark:border-slate-700 p-4 font-sans text-xs text-gray-900 dark:text-gray-300 border border-solid border-gray-200 rounded-lg;
 }
 
 .react-datepicker__input-container > input {
@@ -12,11 +12,11 @@
 
 .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before,
 .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
-  @apply border-b-white;
+  @apply border-b-white dark:border-b-slate-900;
 }
 
 .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
-  @apply border-b-gray-200;
+  @apply border-b-gray-200 dark:border-b-slate-700;
 }
 
 .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
@@ -24,14 +24,14 @@
 }
 
 .react-datepicker__header {
-  @apply bg-white border-b-0 py-1 px-0;
+  @apply bg-white dark:bg-slate-900 border-b-0 py-1 px-0;
   // border-top-left-radius: var(--border-radius-lg);
 }
 
 .react-datepicker__current-month,
 .react-datepicker-time__header,
 .react-datepicker-year-header {
-  @apply text-gray-900 font-bold text-sm;
+  @apply text-gray-900 dark:text-gray-300 font-bold text-sm;
 }
 
 .react-datepicker__current-month {
@@ -39,7 +39,7 @@
 }
 
 .react-datepicker__navigation {
-  @apply top-4 h-8 w-8 rounded hover:bg-gray-50;
+  @apply top-4 h-8 w-8 rounded hover:bg-gray-50 dark:hover:bg-slate-900/50;
 }
 
 .react-datepicker__navigation-icon {
@@ -78,24 +78,37 @@
 
 .react-datepicker__day-names,
 .react-datepicker__week {
-  display: flex;
-  justify-content: space-between;
+  @apply flex justify-between;
+}
+
+.react-datepicker__time {
+  @apply dark:bg-slate-900;
+}
+
+.react-datepicker__time-container {
+  @apply dark:border-slate-700;
 }
 
 .react-datepicker__day-name,
 .react-datepicker__day,
 .react-datepicker__time-name {
-  @apply text-gray-900;
+  @apply text-gray-900 dark:text-gray-300;
   width: 30px;
   height: 30px;
   line-height: 30px;
 }
 
+.react-datepicker__time-list-item--disabled,
+.react-datepicker__day--disabled {
+  @apply text-gray-400 dark:text-gray-500;
+}
+
 .react-datepicker__day:hover,
 .react-datepicker__month-text:hover,
 .react-datepicker__quarter-text:hover,
-.react-datepicker__year-text:hover {
-  @apply bg-gray-100 rounded;
+.react-datepicker__year-text:hover,
+.react-datepicker__time-list-item:hover {
+  @apply bg-gray-100 dark:bg-slate-700 rounded;
 }
 
 .react-datepicker__day--selected,
@@ -110,16 +123,12 @@
 .react-datepicker__year-text--selected,
 .react-datepicker__year-text--in-selecting-range,
 .react-datepicker__year-text--in-range {
-  @apply bg-primary-600 hover:bg-primary-700 text-white rounded;
-}
-
-.react-datepicker__day--disabled {
-  @apply text-gray-400;
+  @apply bg-primary-600 hover:bg-primary-700 dark:bg-slate-300 dark:hover:bg-slate-200 text-white dark:text-black rounded;
 }
 
 .react-datepicker__day--keyboard-selected,
 .react-datepicker__month-text--keyboard-selected,
 .react-datepicker__quarter-text--keyboard-selected,
 .react-datepicker__year-text--keyboard-selected {
-  @apply bg-primary-50 hover:bg-primary-100 text-primary-600 dark:text-primary-400;
+  @apply bg-primary-50 hover:bg-primary-100 dark:bg-slate-700 dark:hover:bg-slate-600 text-primary-600 dark:text-primary-400;
 }