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

@@ -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}

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;
+}