feat: design for datepicker

webapp-next/components/layouts/Header.tsx

@@ -12,8 +12,6 @@ export function Header() {
       bg="white"
       w="full"
       boxShadow="box-shadow: 0px 10px 15px -3px rgba(36, 108, 249, 0.04), 0px 4px 6px -2px rgba(36, 108, 249, 0.04);"
-    >
-      <FilterDates />
-    </Flex>
+    ></Flex>
   );
 }

webapp-next/components/layouts/Menu.tsx

@@ -7,6 +7,7 @@ import { FiltersDeathLocations } from '../filters/DeathLocations';
 import { FiltersSexes } from '../filters/Sexes';
 import { MenuTitle } from './MenuTitle';
 import { SubMenu } from './SubMenu';
+import { FilterDates } from '../filters/Dates';
 
 const ageRanges = [
   { id: 0, label: '0-10 ans', minAge: 0, maxAge: 10 },
@@ -44,11 +45,15 @@ export function Menu() {
         <Image src="/CM2D.svg" alt="CM2D Logo" w={24} />
       </Box>
       <Box mt={5} h="3px" w="full" bg="gray.50" />
-      <Box mt={8} px={8}>
+      <Box mt={10} px={8}>
         <MenuTitle title="Cause de décès" />
         <FilterCauses filters={filters} setFilters={setFilters} />
       </Box>
-      <Box mt={8} px={8}>
+      <Box mt={10} px={8}>
+        <MenuTitle title="Période" />
+        <FilterDates />
+      </Box>
+      <Box mt={10} px={8}>
         <MenuTitle title="Filtres" />
         <SubMenu
           title="Démographie"

webapp-next/utils/overrides.css

@@ -1,6 +1,86 @@
+/* Override chakra checkboxes */
 .chakra-checkbox__label[data-checked] {
   font-weight: bold;
 }
 .chakra-checkbox__control {
   border-width: 1px !important;
 }
+
+/* Override chakra autocomplete */
+.chakra-input:focus-visible {
+  border-color: #246cf9 !important;
+  box-shadow: none !important;
+}
+
+/* Override date picker */
+.react-datepicker-wrapper input {
+  padding: 0.7rem 0.5rem 0.7rem 2.5rem;
+  border-radius: 0.375rem;
+  background-color: white;
+  border: 1px solid #e9f1ff;
+  max-width: 100%;
+}
+.react-datepicker-wrapper input:focus-visible {
+  outline: 1px solid #246cf9;
+}
+.react-datepicker-wrapper {
+  position: relative;
+}
+.react-datepicker-wrapper::before {
+  content: '';
+  display: block;
+  width: 24px;
+  height: 24px;
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  transform: translateY(-50%);
+  z-index: 1;
+  background: url('../public/icons/calendar.svg') center / cover no-repeat;
+}
+.react-datepicker {
+  border: 1px solid #e9f1ff;
+  box-shadow: 0px 2px 6px -1px rgba(36, 108, 249, 0.04),
+    0px 2px 4px -1px rgba(36, 108, 249, 0.04);
+  border-radius: 10px;
+  font-family: 'Inter', sans-serif;
+}
+.react-datepicker .react-datepicker__header {
+  background-color: white;
+  border-bottom: none;
+  padding: 15px 0;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+.react-datepicker .react-datepicker__triangle {
+  display: none;
+}
+.react-datepicker .react-datepicker__navigation {
+  height: 38px;
+  width: 38px;
+}
+.react-datepicker
+  .react-datepicker__navigation
+  .react-datepicker__navigation-icon::before {
+  border-color: #246cf9;
+  border-width: 2px 2px 0 0;
+  top: 18px;
+}
+.react-datepicker
+  .react-datepicker__month-wrapper
+  .react-datepicker__month-text {
+  width: 4.75rem;
+  padding: 10px;
+}
+
+.react-datepicker
+  .react-datepicker__month-wrapper
+  .react-datepicker__month--in-range {
+  background-color: #246cf9;
+}
+
+.react-datepicker
+  .react-datepicker__month-wrapper
+  .react-datepicker__month-text--keyboard-selected {
+  background-color: #e9f1ff;
+}