Redesign DatePicker (#108)

front/src/components/form/DatePicker.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import React, { ReactElement, forwardRef, useState } from 'react';
-import ReactDatePicker from 'react-datepicker';
+import ReactDatePicker, { CalendarContainerProps } from 'react-datepicker';
 
 import 'react-datepicker/dist/react-datepicker.css';
 
@@ -9,12 +9,17 @@ export type DatePickerProps = {
   date: Date;
   onChangeHandler: (date: Date) => void;
   customInput?: ReactElement;
+  customContainer?(props: CalendarContainerProps): React.ReactNode;
 };
 
 const StyledContainer = styled.div`
   & .react-datepicker {
     border-color: ${(props) => props.theme.primaryBorder};
+    background: transparent;
     font-family: 'Inter';
+    font-size: ${(props) => props.theme.fontSizeMedium};
+    border: none;
+    display: block;
   }
 
   & .react-datepicker__triangle::after {
@@ -25,17 +30,150 @@ const StyledContainer = styled.div`
     display: none;
   }
 
+  // Header
+
   & .react-datepicker__header {
-    background-color: ${(props) => props.theme.primaryBackground};
-    border-bottom-color: ${(props) => props.theme.primaryBorder};
+    background: transparent;
+    border: none;
+  }
+
+  & .react-datepicker__header__dropdown {
+    display: flex;
+    margin-left: ${(props) => props.theme.spacing(1)};
+    margin-bottom: ${(props) => props.theme.spacing(1)};
+  }
+
+  & .react-datepicker__month-dropdown-container,
+  & .react-datepicker__year-dropdown-container {
+    text-align: left;
+    border-radius: 4px;
+    margin-left: ${(props) => props.theme.spacing(1)};
+    margin-right: 0;
+    padding: ${(props) => props.theme.spacing(2)};
+    padding-right: ${(props) => props.theme.spacing(4)};
+    background-color: ${(props) => props.theme.tertiaryBackground};
+  }
+
+  & .react-datepicker__month-read-view--down-arrow,
+  & .react-datepicker__year-read-view--down-arrow {
+    height: 5px;
+    width: 5px;
+    border-width: 1px 1px 0 0;
+    border-color: ${(props) => props.theme.text40};
+    top: 3px;
+    right: -6px;
+  }
+
+  & .react-datepicker__year-read-view,
+  & .react-datepicker__month-read-view {
+    padding-right: ${(props) => props.theme.spacing(2)};
+  }
+
+  & .react-datepicker__month-dropdown-container {
+    width: 80px;
+  }
+
+  & .react-datepicker__year-dropdown-container {
+    width: 50px;
+  }
+
+  & .react-datepicker__month-dropdown {
+    left: ${(props) => props.theme.spacing(2)};
+    top: ${(props) => props.theme.spacing(2)};
+    width: calc(80px + ${(props) => props.theme.spacing(6)});
+    border: ${(props) => props.theme.primaryBorder};
+  }
+
+  & .react-datepicker__year-dropdown {
+    left: calc(${(props) => props.theme.spacing(9)} + 80px);
+    top: ${(props) => props.theme.spacing(2)};
+    width: calc(50px + ${(props) => props.theme.spacing(6)});
+    border: ${(props) => props.theme.primaryBorder};
+  }
+
+  & .react-datepicker__navigation--years {
+    display: none;
+  }
+
+  & .react-datepicker__month-option--selected,
+  & .react-datepicker__year-option--selected {
+    display: none;
+  }
+
+  & .react-datepicker__year-option,
+  & .react-datepicker__month-option {
+    line-height: 32px;
+    text-align: left;
+    padding-left: ${(props) => props.theme.spacing(2)};
+    width: calc(100% - ${(props) => props.theme.spacing(2)});
+    background-color: ${(props) => props.theme.tertiaryBackground};
+
+    &:hover {
+      color: ${(props) => props.theme.text100};
+      font-weight: bold;
+    }
+  }
+
+  & .react-datepicker__current-month {
+    display: none;
+  }
+
+  & .react-datepicker__day-name {
+    color: ${(props) => props.theme.text60};
+    width: 34px;
+    height: 40px;
+    line-height: 40px;
+  }
+
+  // Days
+
+  & .react-datepicker__month {
+    margin-top: 0;
+  }
+
+  & .react-datepicker__day {
+    width: 34px;
+    height: 34px;
+    line-height: 34px;
   }
 
   & .react-datepicker__day--selected {
     background-color: ${(props) => props.theme.blue};
   }
+
+  & .react-datepicker__navigation--previous {
+    right: 44px;
+    top: 12px;
+    left: auto;
+  }
+
+  & .react-datepicker__navigation--next {
+    right: 6px;
+    top: 12px;
+  }
+
+  & .react-datepicker__navigation-icon::before {
+    height: 7px;
+    width: 7px;
+    border-width: 1px 1px 0 0;
+    border-color: ${(props) => props.theme.text40};
+  }
+
+  & .react-datepicker__day--outside-month {
+    color: ${(props) => props.theme.text40};
+  }
+
+  & .react-datepicker__day--keyboard-selected {
+    background-color: inherit;
+  }
 `;
 
-function DatePicker({ date, onChangeHandler, customInput }: DatePickerProps) {
+function DatePicker({
+  date,
+  onChangeHandler,
+  customInput,
+  customContainer,
+}: DatePickerProps) {
   const [startDate, setStartDate] = useState(date);
 
   type DivProps = React.HTMLProps<HTMLDivElement>;
@@ -58,11 +196,14 @@ function DatePicker({ date, onChangeHandler, customInput }: DatePickerProps) {
       <ReactDatePicker
         open={true}
         selected={startDate}
+        showMonthDropdown
+        showYearDropdown
         onChange={(date: Date) => {
           setStartDate(date);
           onChangeHandler(date);
         }}
         customInput={customInput ? customInput : <DefaultDateDisplay />}
+        calendarContainer={customContainer ? customContainer : undefined}
       />
     </StyledContainer>
   );