From ec01fb30e3f4d10fcf5e421f545a2efd74a0af25 Mon Sep 17 00:00:00 2001
From: Igor <nemytyshew@yandex.ru>
Date: Thu, 29 Apr 2021 12:33:11 +0300
Subject: [PATCH] Themed datepicker (#454)

* init commit for redesign

* css fix

* moving datepicker styles to styles.css + remove duplicate imports

* small fix

* ..and another
---
 components/common/DatePicker.tsx |  5 ++--
 pages/styles.css                 | 48 ++++++++++++++++++++++++++++++++
 2 files changed, 51 insertions(+), 2 deletions(-)

diff --git a/components/common/DatePicker.tsx b/components/common/DatePicker.tsx
index 115c8f32a..515345270 100644
--- a/components/common/DatePicker.tsx
+++ b/components/common/DatePicker.tsx
@@ -1,4 +1,4 @@
-import { Box } from "@chakra-ui/react";
+import { Box, useColorMode } from "@chakra-ui/react";
 import React from "react";
 import ReactDatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
@@ -10,8 +10,9 @@ interface Props {
 }
 
 const DatePicker = ({ selectedDate, onChange, isClearable = false }: Props) => {
+  const { colorMode } = useColorMode();
   return (
-    <Box color="black">
+    <Box className={colorMode + "-datepicker"}>
       <ReactDatePicker
         selected={selectedDate}
         onChange={onChange}
diff --git a/pages/styles.css b/pages/styles.css
index d3b5c9388..6af8a8418 100644
--- a/pages/styles.css
+++ b/pages/styles.css
@@ -122,3 +122,51 @@ For Next.JS image
 a.nounderline {
   text-decoration: none !important;
 }
+
+/*
+For React Datepicker
+ */
+.light-datepicker {
+  --light-gray: var(--chakra-colors-gray-200);
+  --gray: var(--chakra-colors-gray-300);
+  --blue600: var(--chakra-colors-blue-500);
+  --text: var(--chakra-colors-black);
+}
+.dark-datepicker {
+  --light-gray: var(--chakra-colors-whiteAlpha-300);
+  --gray: var(--chakra-colors-whiteAlpha-400);
+  --blue600: var(--chakra-colors-blue-300);
+  --text: #edf2f7; /* default color slightly differs from chakra-colors-gray-100 */
+}
+
+.react-datepicker-wrapper {
+  width: 100%;
+}
+
+.react-datepicker__input-container {
+  -webkit-padding-start: var(--chakra-space-4);
+  padding-inline-start: var(--chakra-space-4);
+  -webkit-padding-end: var(--chakra-space-2);
+  padding-inline-end: var(--chakra-space-2);
+  border-radius: var(--chakra-radii-md);
+  border: 1px solid;
+  border-color: var(--light-gray);
+}
+
+.react-datepicker__input-container:hover {
+  border-color: var(--gray);
+}
+
+.react-datepicker__input-container:focus-within {
+  z-index: 1;
+  border-color: var(--blue600);
+  box-shadow: 0 0 0 1px var(--blue600);
+}
+
+.react-datepicker__input-container > input {
+  background-color: transparent;
+  width: 100%;
+  height: var(--chakra-sizes-10);
+  color: var(--text);
+  outline: none;
+}