From 80377bdaa937179b1d36d7b2ade365ea105c93bf Mon Sep 17 00:00:00 2001
From: Pierre-Louis Guhur <pierre-louis.guhur@laposte.net>
Date: Thu, 3 Nov 2022 16:50:03 +0100
Subject: [PATCH] fix: improve style datepicker

---
 components/DatePicker.tsx                   |  38 +-
 components/admin/LimitDate.tsx              |   9 +-
 styles/scss/_admin.scss                     |  83 ++-
 styles/scss/_app.scss                       |  27 +-
 styles/scss/_badge.scss                     |   3 +
 styles/scss/{_buttons.scss => _button.scss} |   4 +-
 styles/scss/_datepicker-mixins.scss         |  84 +++
 styles/scss/_datepicker-variables.scss      |  20 +
 styles/scss/_datepicker.scss                | 597 ++++++++++++++++++++
 styles/scss/_modal.scss                     |   4 +-
 styles/scss/_switch.scss                    |  14 +-
 styles/scss/config.scss                     |   4 +-
 12 files changed, 801 insertions(+), 86 deletions(-)
 create mode 100644 styles/scss/_badge.scss
 rename styles/scss/{_buttons.scss => _button.scss} (95%)
 create mode 100644 styles/scss/_datepicker-mixins.scss
 create mode 100644 styles/scss/_datepicker-variables.scss
 create mode 100644 styles/scss/_datepicker.scss

diff --git a/components/DatePicker.tsx b/components/DatePicker.tsx
index 30e2832..473b802 100644
--- a/components/DatePicker.tsx
+++ b/components/DatePicker.tsx
@@ -1,26 +1,38 @@
 import {useState, forwardRef} from 'react'
 import {Button, Row, Col} from 'reactstrap'
+import {useTranslation} from "next-i18next";
+import {faCalendarDays, faChevronDown} from "@fortawesome/free-solid-svg-icons";
 import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import DatePicker from 'react-datepicker'
 
+const CustomDatePicker = ({date, setDate}) => {
+  const {t} = useTranslation();
+
+  const ExampleCustomInput = forwardRef(({value, onClick}, ref) => (
+    <button onClick={onClick} ref={ref}>
+      <Row className='p-2 align-items-end'>
+        <Col className='col-auto me-auto'>
+          <Row className='gx-3 align-items-end'>
+            <Col className='col-auto'>
+              <FontAwesomeIcon icon={faCalendarDays} />
+            </Col>
+            <Col className='col-auto'>
+              {t('admin.until')}{' '}{value}
+            </Col>
+          </Row>
+        </Col>
+        <Col className='col-auto'>
+          <FontAwesomeIcon className='text-muted' icon={faChevronDown} />
+        </Col>
+      </Row>
+    </button>
+  ));
 
-const CustomDatePicker = ({icon, date, setDate}) => {
   return (<DatePicker
     selected={date}
+    customInput={<ExampleCustomInput />}
     onChange={(date) => setDate(date)}
   />);
-  //   const ExampleCustomInput = forwardRef(({value, onClick}, ref) => (
-  //     <Button onClick={onClick} ref={ref}>
-  //       <Row className='gx-2 align-items-end'>
-  //         <Col className='col-auto'>
-  //           <FontAwesomeIcon icon={icon} />
-  //         </Col>
-  //         <Col className='col-auto'>
-  //           {children}
-  //         </Col>
-  //       </Row>
-  //     </Button>
-  //   ));
   //   {/*<Button className="example-custom-input" 
   //       {value}
   //     </button>*/}
diff --git a/components/admin/LimitDate.tsx b/components/admin/LimitDate.tsx
index 2fc8f8c..a6999a6 100644
--- a/components/admin/LimitDate.tsx
+++ b/components/admin/LimitDate.tsx
@@ -37,10 +37,13 @@ const LimitDate = () => {
       <Col className='col-auto d-flex align-items-center'>
         <Switch toggle={toggle} state={hasDate} />
       </Col>
-      {hasDate ?
-        <DatePicker icon={null} date={endDate} setDate={setEndDate} />
-        : null}
     </Row>
+    {hasDate ?
+      <>
+        <DatePicker icon={null} date={endDate} setDate={setEndDate} />
+        <span className="badge text-bg-light text-black-50">{t("Starting date")}</span>
+      </>
+      : null}
   </Container>)
 }
 
diff --git a/styles/scss/_admin.scss b/styles/scss/_admin.scss
index 3730ecf..b3b2330 100644
--- a/styles/scss/_admin.scss
+++ b/styles/scss/_admin.scss
@@ -1,18 +1,18 @@
 .creation-step.disabled {
-	opacity: 0.5;
+  opacity: 0.5;
 }
 .creation-step {
-	color: rgb(255,255,255);
-	.name {
+  color: rgb(255, 255, 255);
+  .name {
     font-weight: 500;
     font-size: 16px;
-    }
+  }
 
-.badge {
+  .badge {
     width: 24px;
     height: 24px;
     background-color: black; // , 0.2);
-}
+  }
 }
 
 .creation-step.active {
@@ -21,61 +21,56 @@
     color: $mv-blue-color;
   }
   .name {
-	color: white;
+    color: white;
   }
 }
 
 .candidate {
-	max-width:  500px;
+  max-width: 500px;
 }
 
 .default-avatar {
-	background-color: rgba(255, 255, 255, 0.16);
-	width: inherit!important;
-	position: inherit!important;
-	padding: 4px;
-	margin-right: 10px;
+  background-color: rgba(255, 255, 255, 0.16);
+  width: inherit !important;
+  position: inherit !important;
+  padding: 4px;
+  margin-right: 10px;
 }
 
 .candidate * > input[type="file"] {
-	  display: none;
-	}
+  display: none;
+}
 .candidate * > .inputfile {
-	  background: transparent;
-	  color: #0a004c;
-	  border: 2px solid #0a004c;
-	  box-shadow: 0px 2px 0px 0px #0a004c;
-	  padding: 8px 20px;
-	  font-size: 14px;
-	  line-height: 24px;
-	  display: inline-block;
-	  cursor: pointer;
-	}
+  background: transparent;
+  color: #0a004c;
+  border: 2px solid #0a004c;
+  box-shadow: 0px 2px 0px 0px #0a004c;
+  padding: 8px 20px;
+  font-size: 14px;
+  line-height: 24px;
+  display: inline-block;
+  cursor: pointer;
+}
 // .creation-steps > * .form-control, .creation-steps * > input[type='text']:focus,.creation-steps * > input[type='text']::placeholder {
 
-.modal_candidate > * :is(
-	input[type='text'],
-	input[type='text']:focus,
-	input[type='text']::placeholder) 
-{
-    background: white;
-    border-radius: 0px;
-    color: black!important;
-    opacity: 0.5;
-    box-shadow: 0px 2px 0px #C3BFD8;
-    margin-bottom: 20px;
+.modal_candidate
+  > *
+  :is(input[type="text"], input[type="text"]:focus, input[type="text"]::placeholder) {
+  background: white;
+  border-radius: 0px;
+  color: black !important;
+  opacity: 0.5;
+  box-shadow: 0px 2px 0px #c3bfd8;
+  margin-bottom: 20px;
 }
 
-.modal_candidate > * input[type='text']:focus
-{
-    opacity: 0.8;
+.modal_candidate > * input[type="text"]:focus {
+  opacity: 0.8;
 }
-.modal_candidate > * input[type='text']:placeholder
-{
-    opacity: 0.4;
+.modal_candidate > * input[type="text"]:placeholder {
+  opacity: 0.4;
 }
 
-
 .params {
-	max-width: 1070px;
+  max-width: 1070px;
 }
diff --git a/styles/scss/_app.scss b/styles/scss/_app.scss
index 219ca98..7f27912 100644
--- a/styles/scss/_app.scss
+++ b/styles/scss/_app.scss
@@ -1,7 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=DM+Serif+Display:ital@0;1&display=swap");
 
-body{
-	background-color: $mv-blue-color;
+body {
+  background-color: $mv-blue-color;
 }
 h1,
 h2,
@@ -51,7 +51,7 @@ main > .div {
 }
 
 main {
-  background: url('../../public/back.svg'), rgb(10, 0, 76, 0.64);
+  background: url("../../public/back.svg"), rgb(10, 0, 76, 0.64);
 }
 
 header {
@@ -336,7 +336,7 @@ h5 {
 .form-control {
   height: auto;
   background: transparent;
-//  color: white;
+  //  color: white;
   border: none;
 }
 /*
@@ -372,22 +372,21 @@ ol.result > li {
 }
 
 .border-dashed {
- border-style: dashed!important;
+  border-style: dashed !important;
 }
 
 .text-muted {
-	color: inherit;
-	opacity: 0.5;
+  color: inherit;
+  opacity: 0.5;
 }
 
-.cursor-pointer { 
-	cursor: pointer;
+.cursor-pointer {
+  cursor: pointer;
 }
 
 .hide {
-	display: none;
+  display: none;
+}
+.noshadow {
+  box-shadow: unset !important;
 }
-.noshadow{ box-shadow: unset!important;}
-
-
-
diff --git a/styles/scss/_badge.scss b/styles/scss/_badge.scss
new file mode 100644
index 0000000..d1f0f5f
--- /dev/null
+++ b/styles/scss/_badge.scss
@@ -0,0 +1,3 @@
+.badge {
+  border-radius: 0px;
+}
diff --git a/styles/scss/_buttons.scss b/styles/scss/_button.scss
similarity index 95%
rename from styles/scss/_buttons.scss
rename to styles/scss/_button.scss
index 0cfe3ca..ef4c99a 100644
--- a/styles/scss/_buttons.scss
+++ b/styles/scss/_button.scss
@@ -51,8 +51,8 @@
   box-shadow: 0px 5px 0px #7a64f9;
 }
 *.btn[class*="-info"] {
-  background-color: #4A2FEF;
-  border: 2px solid #4A2FEF;
+  background-color: #4a2fef;
+  border: 2px solid #4a2fef;
 }
 .btn:not([class*="btn-outline-"]):hover {
   background-color: rgb(255, 255, 255, 0.2);
diff --git a/styles/scss/_datepicker-mixins.scss b/styles/scss/_datepicker-mixins.scss
new file mode 100644
index 0000000..e297133
--- /dev/null
+++ b/styles/scss/_datepicker-mixins.scss
@@ -0,0 +1,84 @@
+%navigation-chevron {
+  border-color: $mv-blue-color;
+  border-style: solid;
+  border-width: 2px 2px 0 0;
+  content: "";
+  display: block;
+  height: 12px;
+  position: absolute;
+  top: 6px;
+  width: 12px;
+
+  &--disabled,
+  &--disabled:hover {
+    border-color: $datepicker__navigation-disabled-color;
+    cursor: default;
+  }
+}
+
+%triangle-arrow {
+  margin-left: -$datepicker__triangle-size * 0.5;
+  position: absolute;
+  width: 0;
+
+  &::before,
+  &::after {
+    box-sizing: content-box;
+    position: absolute;
+    border: $datepicker__triangle-size solid transparent;
+    height: 0;
+    width: 1px;
+    content: "";
+    z-index: -1;
+    border-width: $datepicker__triangle-size;
+    left: -$datepicker__triangle-size;
+  }
+
+  &::before {
+    border-bottom-color: $datepicker__border-color;
+  }
+}
+
+%triangle-arrow-up {
+  @extend %triangle-arrow;
+
+  top: 0;
+  margin-top: -$datepicker__triangle-size;
+
+  &::before,
+  &::after {
+    border-top: none;
+    border-bottom-color: $datepicker__background-color;
+  }
+
+  &::after {
+    top: 0;
+  }
+
+  &::before {
+    top: -1px;
+    border-bottom-color: $datepicker__border-color;
+  }
+}
+
+%triangle-arrow-down {
+  @extend %triangle-arrow;
+
+  bottom: 0;
+  margin-bottom: -$datepicker__triangle-size;
+
+  &::before,
+  &::after {
+    border-bottom: none;
+    border-top-color: #fff;
+  }
+
+  &::after {
+    bottom: 0;
+  }
+
+  &::before {
+    bottom: -1px;
+    border-top-color: $datepicker__border-color;
+  }
+}
diff --git a/styles/scss/_datepicker-variables.scss b/styles/scss/_datepicker-variables.scss
new file mode 100644
index 0000000..6707c5a
--- /dev/null
+++ b/styles/scss/_datepicker-variables.scss
@@ -0,0 +1,20 @@
+$datepicker__background-color: white !default;
+$datepicker__border-color: #f2f0ff !default;
+$datepicker__highlighted-color: #3dcc4a !default;
+$datepicker__muted-color: #ccc !default;
+$datepicker__selected-color: $mv-blue-color !default;
+$datepicker__text-color: #000 !default;
+$datepicker__header-color: #000 !default;
+$datepicker__navigation-disabled-color: lighten(
+  $datepicker__muted-color,
+  10%
+) !default;
+
+$datepicker__border-radius: 2px !default;
+$datepicker__day-margin: 0 !default;
+$datepicker__font-size: 0.8rem !default;
+$datepicker__font-family: "DM Sans", sans-serif !default;
+$datepicker__item-size: 42px !default;
+$datepicker__margin: 0.4rem !default;
+$datepicker__navigation-button-size: 32px !default;
+$datepicker__triangle-size: 0px !default;
diff --git a/styles/scss/_datepicker.scss b/styles/scss/_datepicker.scss
new file mode 100644
index 0000000..dd9c00b
--- /dev/null
+++ b/styles/scss/_datepicker.scss
@@ -0,0 +1,597 @@
+@import "./_datepicker-variables.scss";
+@import "./_datepicker-mixins.scss";
+
+.react-datepicker-wrapper {
+  display: inline-block;
+  padding: 0;
+  border: 0;
+  width: 100%;
+}
+
+.react-datepicker {
+  font-family: $datepicker__font-family;
+  font-size: $datepicker__font-size;
+  background-color: #fff;
+  color: $datepicker__text-color;
+  border: 2px solid $datepicker__border-color;
+  box-shadow: 0px 8px 8px rgba(143, 136, 186, 0.11);
+  border-radius: $datepicker__border-radius;
+  display: inline-block;
+  position: relative;
+  padding: 16px;
+  font-weight: bold;
+}
+
+.react-datepicker--time-only {
+  .react-datepicker__triangle {
+    left: 35px;
+  }
+
+  .react-datepicker__time-container {
+    border-left: 0;
+  }
+
+  .react-datepicker__time,
+  .react-datepicker__time-box {
+    border-bottom-left-radius: 0.3rem;
+    border-bottom-right-radius: 0.3rem;
+  }
+}
+
+.react-datepicker__triangle {
+  position: absolute;
+  left: 50px;
+}
+
+.react-datepicker-popper {
+  z-index: 1;
+
+  &[data-placement^="bottom"] {
+    padding-top: $datepicker__triangle-size + 2px;
+
+    .react-datepicker__triangle {
+      @extend %triangle-arrow-up;
+    }
+  }
+
+  &[data-placement="bottom-end"],
+  &[data-placement="top-end"] {
+    .react-datepicker__triangle {
+      left: auto;
+      right: 50px;
+    }
+  }
+
+  &[data-placement^="top"] {
+    padding-bottom: $datepicker__triangle-size + 2px;
+
+    .react-datepicker__triangle {
+      @extend %triangle-arrow-down;
+    }
+  }
+
+  &[data-placement^="right"] {
+    padding-left: $datepicker__triangle-size;
+
+    .react-datepicker__triangle {
+      left: auto;
+      right: 42px;
+    }
+  }
+
+  &[data-placement^="left"] {
+    padding-right: $datepicker__triangle-size;
+
+    .react-datepicker__triangle {
+      left: 42px;
+      right: auto;
+    }
+  }
+}
+
+.react-datepicker__header {
+  text-align: center;
+  background-color: $datepicker__background-color;
+  border-top-left-radius: $datepicker__border-radius;
+  padding: 8px 0;
+  position: relative;
+
+  &--time {
+    padding-bottom: 8px;
+    padding-left: 5px;
+    padding-right: 5px;
+
+    &:not(&--only) {
+      border-top-left-radius: 0;
+    }
+  }
+
+  &:not(&--has-time-select) {
+    border-top-right-radius: $datepicker__border-radius;
+  }
+}
+
+.react-datepicker__year-dropdown-container--select,
+.react-datepicker__month-dropdown-container--select,
+.react-datepicker__month-year-dropdown-container--select,
+.react-datepicker__year-dropdown-container--scroll,
+.react-datepicker__month-dropdown-container--scroll,
+.react-datepicker__month-year-dropdown-container--scroll {
+  display: inline-block;
+  margin: 0 15px;
+}
+
+.react-datepicker__current-month,
+.react-datepicker-time__header,
+.react-datepicker-year-header {
+  margin-top: 0;
+  color: $datepicker__header-color;
+  font-weight: bold;
+  font-size: $datepicker__font-size * 1.18;
+}
+
+.react-datepicker-time__header {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.react-datepicker__navigation {
+  align-items: center;
+  background: none;
+  display: flex;
+  justify-content: center;
+  text-align: center;
+  cursor: pointer;
+  position: absolute;
+  top: 23px;
+  padding: 0;
+  border: none;
+  z-index: 1;
+  height: $datepicker__navigation-button-size;
+  width: $datepicker__navigation-button-size;
+  text-indent: -999em;
+  overflow: hidden;
+
+  &--previous {
+    left: 19px;
+  }
+
+  &--next {
+    right: 19px;
+
+    &--with-time:not(&--with-today-button) {
+      right: 85px;
+    }
+  }
+
+  &--years {
+    position: relative;
+    top: 0;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+
+    &-previous {
+      top: 4px;
+    }
+
+    &-upcoming {
+      top: -4px;
+    }
+  }
+
+  &:hover {
+    *::before {
+      border-color: darken($datepicker__muted-color, 15%);
+    }
+  }
+}
+
+.react-datepicker__navigation-icon {
+  position: relative;
+  top: -1px;
+  font-size: 20px;
+  width: 0;
+
+  &::before {
+    @extend %navigation-chevron;
+  }
+
+  &--next {
+    left: -2px;
+
+    &::before {
+      transform: rotate(45deg);
+      left: -7px;
+    }
+  }
+
+  &--previous {
+    right: -2px;
+
+    &::before {
+      transform: rotate(225deg);
+      right: -7px;
+    }
+  }
+}
+
+.react-datepicker__month-container {
+  float: left;
+}
+
+.react-datepicker__year {
+  margin: $datepicker__margin;
+  text-align: center;
+
+  &-wrapper {
+    display: flex;
+    flex-wrap: wrap;
+    max-width: 180px;
+  }
+
+  .react-datepicker__year-text {
+    display: inline-block;
+    width: 4rem;
+    margin: 2px;
+  }
+}
+
+.react-datepicker__month {
+  margin: $datepicker__margin;
+  text-align: center;
+
+  .react-datepicker__month-text,
+  .react-datepicker__quarter-text {
+    display: inline-block;
+    width: 4rem;
+    margin: 2px;
+  }
+}
+
+.react-datepicker__week-number {
+  color: $datepicker__muted-color;
+  display: inline-block;
+  width: $datepicker__item-size;
+  line-height: $datepicker__item-size;
+  text-align: center;
+  margin: $datepicker__day-margin;
+
+  &.react-datepicker__week-number--clickable {
+    cursor: pointer;
+
+    &:hover {
+      border-radius: $datepicker__border-radius;
+      background-color: $datepicker__background-color;
+    }
+  }
+}
+
+.react-datepicker__day-names,
+.react-datepicker__week {
+  white-space: nowrap;
+}
+
+.react-datepicker__day-names {
+  margin-bottom: -3px;
+  margin-top: 20px;
+  color: #0a004c;
+  opacity: 0.4;
+}
+
+.react-datepicker__day-name,
+.react-datepicker__day,
+.react-datepicker__time-name {
+  color: $datepicker__text-color;
+  display: inline-block;
+  width: $datepicker__item-size;
+  line-height: $datepicker__item-size;
+  text-align: center;
+  margin: $datepicker__day-margin;
+}
+
+.react-datepicker__month,
+.react-datepicker__quarter {
+  &--selected,
+  &--in-selecting-range,
+  &--in-range {
+    border-radius: $datepicker__border-radius;
+    background-color: $datepicker__selected-color;
+    color: #fff;
+
+    &:hover {
+      background-color: darken($datepicker__selected-color, 5%);
+    }
+  }
+
+  &--disabled {
+    color: $datepicker__muted-color;
+    pointer-events: none;
+
+    &:hover {
+      cursor: default;
+      background-color: transparent;
+    }
+  }
+}
+
+.react-datepicker__day,
+.react-datepicker__month-text,
+.react-datepicker__quarter-text,
+.react-datepicker__year-text {
+  cursor: pointer;
+
+  &:hover {
+    border-radius: $datepicker__border-radius;
+    background-color: $datepicker__background-color;
+  }
+
+  &--today {
+    font-weight: bold;
+  }
+
+  &--highlighted {
+    border-radius: $datepicker__border-radius;
+    background-color: $datepicker__highlighted-color;
+    color: #fff;
+
+    &:hover {
+      background-color: darken($datepicker__highlighted-color, 5%);
+    }
+
+    &-custom-1 {
+      color: magenta;
+    }
+
+    &-custom-2 {
+      color: green;
+    }
+  }
+
+  &--selected,
+  &--in-selecting-range,
+  &--in-range {
+    border-radius: $datepicker__border-radius;
+    background-color: $datepicker__selected-color;
+    color: #fff;
+
+    &:hover {
+      background-color: darken($datepicker__selected-color, 5%);
+    }
+  }
+
+  &--keyboard-selected {
+    border-radius: $datepicker__border-radius;
+    background-color: lighten($datepicker__selected-color, 45%);
+    color: rgb(0, 0, 0);
+
+    &:hover {
+      background-color: darken($datepicker__selected-color, 5%);
+    }
+  }
+
+  &--in-selecting-range:not(&--in-range) {
+    background-color: rgba($datepicker__selected-color, 0.5);
+  }
+
+  &--in-range:not(&--in-selecting-range) {
+    .react-datepicker__month--selecting-range & {
+      background-color: $datepicker__background-color;
+      color: $datepicker__text-color;
+    }
+  }
+
+  &--disabled {
+    cursor: default;
+    color: $datepicker__muted-color;
+
+    &:hover {
+      background-color: transparent;
+    }
+  }
+}
+
+.react-datepicker__month-text,
+.react-datepicker__quarter-text {
+  &.react-datepicker__month--selected,
+  &.react-datepicker__month--in-range,
+  &.react-datepicker__quarter--selected,
+  &.react-datepicker__quarter--in-range {
+    &:hover {
+      background-color: $datepicker__selected-color;
+    }
+  }
+
+  &:hover {
+    background-color: $datepicker__background-color;
+  }
+}
+
+.react-datepicker__input-container {
+  position: relative;
+  display: inline-block;
+  /* Inside auto layout */
+  flex: none;
+  order: 1;
+  align-self: stretch;
+  flex-grow: 0;
+
+  button {
+    background: white;
+    border: 2px solid #2400fd;
+    border-radius: 4px;
+    font-weight: bold;
+  }
+}
+
+.react-datepicker__year-read-view,
+.react-datepicker__month-read-view,
+.react-datepicker__month-year-read-view {
+  border: 1px solid transparent;
+  border-radius: $datepicker__border-radius;
+  position: relative;
+
+  &:hover {
+    cursor: pointer;
+
+    .react-datepicker__year-read-view--down-arrow,
+    .react-datepicker__month-read-view--down-arrow {
+      border-top-color: darken($datepicker__muted-color, 10%);
+    }
+  }
+
+  &--down-arrow {
+    @extend %navigation-chevron;
+
+    transform: rotate(135deg);
+    right: -16px;
+    top: 0;
+  }
+}
+
+.react-datepicker__year-dropdown,
+.react-datepicker__month-dropdown,
+.react-datepicker__month-year-dropdown {
+  background-color: $datepicker__background-color;
+  position: absolute;
+  width: 50%;
+  left: 25%;
+  top: 30px;
+  z-index: 1;
+  text-align: center;
+  border-radius: $datepicker__border-radius;
+  border: 1px solid $datepicker__border-color;
+
+  &:hover {
+    cursor: pointer;
+  }
+
+  &--scrollable {
+    height: 150px;
+    overflow-y: scroll;
+  }
+}
+
+.react-datepicker__year-option,
+.react-datepicker__month-option,
+.react-datepicker__month-year-option {
+  line-height: 20px;
+  width: 100%;
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+
+  &:first-of-type {
+    border-top-left-radius: $datepicker__border-radius;
+    border-top-right-radius: $datepicker__border-radius;
+  }
+
+  &:last-of-type {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    border-bottom-left-radius: $datepicker__border-radius;
+    border-bottom-right-radius: $datepicker__border-radius;
+  }
+
+  &:hover {
+    background-color: $datepicker__muted-color;
+
+    .react-datepicker__navigation--years-upcoming {
+      border-bottom-color: darken($datepicker__muted-color, 10%);
+    }
+
+    .react-datepicker__navigation--years-previous {
+      border-top-color: darken($datepicker__muted-color, 10%);
+    }
+  }
+
+  &--selected {
+    position: absolute;
+    left: 15px;
+  }
+}
+
+.react-datepicker__close-icon {
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  outline: 0;
+  padding: 0 6px 0 0;
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  display: table-cell;
+  vertical-align: middle;
+
+  &::after {
+    cursor: pointer;
+    background-color: $datepicker__selected-color;
+    color: #fff;
+    border-radius: 50%;
+    height: 16px;
+    width: 16px;
+    padding: 2px;
+    font-size: 12px;
+    line-height: 1;
+    text-align: center;
+    display: table-cell;
+    vertical-align: middle;
+    content: "\00d7";
+  }
+}
+
+.react-datepicker__today-button {
+  background: $datepicker__background-color;
+  border-top: 1px solid $datepicker__border-color;
+  cursor: pointer;
+  text-align: center;
+  font-weight: bold;
+  padding: 5px 0;
+  clear: left;
+}
+
+.react-datepicker__portal {
+  position: fixed;
+  width: 100vw;
+  height: 100vh;
+  background-color: rgba(0, 0, 0, 0.8);
+  left: 0;
+  top: 0;
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  z-index: 2147483647;
+
+  .react-datepicker__day-name,
+  .react-datepicker__day,
+  .react-datepicker__time-name {
+    width: 3rem;
+    line-height: 3rem;
+  }
+
+  @media (max-width: 400px), (max-height: 550px) {
+    .react-datepicker__day-name,
+    .react-datepicker__day,
+    .react-datepicker__time-name {
+      width: 2rem;
+      line-height: 2rem;
+    }
+  }
+
+  .react-datepicker__current-month,
+  .react-datepicker-time__header {
+    font-size: $datepicker__font-size * 1.8;
+  }
+}
+
+.react-datepicker__children-container {
+  width: 13.8rem;
+  margin: 0.4rem;
+  padding-right: 0.2rem;
+  padding-left: 0.2rem;
+  height: auto;
+}
diff --git a/styles/scss/_modal.scss b/styles/scss/_modal.scss
index 38b4ce9..62c54c1 100644
--- a/styles/scss/_modal.scss
+++ b/styles/scss/_modal.scss
@@ -23,9 +23,9 @@
 }
 
 .modal {
-	border-radius: unset;
+  border-radius: unset;
 }
 
 h4.modal-title {
-	color: $mv-blue-color;
+  color: $mv-blue-color;
 }
diff --git a/styles/scss/_switch.scss b/styles/scss/_switch.scss
index 6690c80..e1307c2 100644
--- a/styles/scss/_switch.scss
+++ b/styles/scss/_switch.scss
@@ -1,12 +1,12 @@
 .form-switch .form-check-input {
-height: 24px;
-width: 40px;
-background-color: #C3BFD8;
-border: unset;
-background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.5' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
+  height: 24px;
+  width: 40px;
+  background-color: #c3bfd8;
+  border: unset;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.5' fill='rgba%280, 0, 0, 0.25%29'/%3e%3c/svg%3e");
 }
 
 .form-switch .form-check-input:checked {
-background-color: #0d6efd;
+  background-color: #0d6efd;
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3.5' fill='%23fff'/%3e%3c/svg%3e");
-  }
+}
diff --git a/styles/scss/config.scss b/styles/scss/config.scss
index f092023..a921e7e 100644
--- a/styles/scss/config.scss
+++ b/styles/scss/config.scss
@@ -26,7 +26,9 @@ $theme-colors: (
 
 @import "_bootstrap.scss";
 @import "app.scss";
-@import "_buttons.scss";
+@import "_button.scss";
+@import "_badge.scss";
+@import "_datepicker.scss";
 @import "_header.scss";
 @import "_footer.scss";
 @import "_modal.scss";