From f1bd01d7483aac0c4873b1e059ed29f0f0d90856 Mon Sep 17 00:00:00 2001
From: Manish Kushare <kushare.manish9@gmail.com>
Date: Tue, 4 Oct 2022 09:27:24 +0530
Subject: [PATCH] Datepicker calender dark theme (#4111)

* making datepicker consistent with the dark theme

* removed * selector

* made range date picker calender consistent with the dark theme

* added hover effect on calendar day in range date picker

* removed unwanted border around the calendar container in range date picker

* made the months change arrow consistent with the dark theme in range date picker

* removed wrapperClassName from date picker component

* made the suggested changes and removed left and right border around DateRangePicker_picker class
---
 frontend/src/Editor/Components/Datepicker.jsx |  2 +-
 frontend/src/_styles/theme.scss               | 62 +++++++++++++++++++
 2 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/frontend/src/Editor/Components/Datepicker.jsx b/frontend/src/Editor/Components/Datepicker.jsx
index 547c6179d4..954b718863 100644
--- a/frontend/src/Editor/Components/Datepicker.jsx
+++ b/frontend/src/Editor/Components/Datepicker.jsx
@@ -79,7 +79,7 @@ export const Datepicker = function Datepicker({
   return (
     <div
       data-disabled={disabledState}
-      className="datepicker-widget"
+      className={`datepicker-widget ${darkMode && 'theme-dark'}`}
       data-cy={`draggable-widget-${String(component.name).toLowerCase()}`}
       style={{
         height,
diff --git a/frontend/src/_styles/theme.scss b/frontend/src/_styles/theme.scss
index 56bd45f5dd..6fe4c3f321 100644
--- a/frontend/src/_styles/theme.scss
+++ b/frontend/src/_styles/theme.scss
@@ -6393,6 +6393,68 @@ input.hide-input-arrows{
   }
 }
 
+.datepicker-widget.theme-dark{
+  .react-datepicker__tab-loop{
+    .react-datepicker__header{
+      background-color: #232e3c;
+      .react-datepicker__current-month,.react-datepicker__day-name,.react-datepicker__month-select,.react-datepicker__year-select{
+        color: white;
+      }
+      .react-datepicker__month-select,.react-datepicker__year-select{
+        background-color: transparent;
+      }
+    }
+    .react-datepicker__month{
+      background-color: #232e3c;
+      .react-datepicker__day{
+        color: white;
+        &:hover{
+          background-color: #636466;
+        }
+      }
+      .react-datepicker__day--outside-month{
+        opacity: 0.5;
+      }
+    }
+    .react-datepicker{
+      background-color: #232e3c;
+    }
+  }
+}
+
+.theme-dark{
+  .CalendarMonth,.DayPickerNavigation_button,.CalendarDay,.CalendarMonthGrid,.DayPicker_focusRegion,.DayPicker{
+    background-color: #232e3c;
+  }
+  .DayPicker_weekHeader_ul,
+  .CalendarMonth_caption,
+  .CalendarDay{
+    color: white;
+  }
+  .CalendarDay__selected_span,.CalendarDay__selected_start,.CalendarDay__selected_end{
+    background-color: #4D72FA;
+    color: white;
+  }
+  .CalendarDay{
+    border-color: transparent;//hiding the border around days in the dark theme
+    &:hover{
+      background-color: #636466;
+    }
+  }
+  .DateInput_fangStroke{
+    stroke: #232E3C;
+    fill: #232E3C;
+  }
+  .DayPickerNavigation_svg__horizontal{
+    fill: white;
+  }
+  .DayPicker__withBorder{
+    border-radius: 0;
+  }
+  .DateRangePicker_picker {
+    background-color: transparent;
+  }
+}
 
 .link-widget{
   display: flex;