Merge pull request #124 from AnWhiteM/Dashboard

calendar styles
AnWhiteM · Jun 19, 2024 · 7bc8d81 · 7bc8d81
2 parents e7e33c7 + 1bd657e
commit 7bc8d81
Show file tree

Hide file tree

Showing 6 changed files with 393 additions and 180 deletions.
diff --git a/src/components/CreateCardModal/CreateCardModal.jsx b/src/components/CreateCardModal/CreateCardModal.jsx
@@ -9,6 +9,7 @@ import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import { useState } from "react";
 import clsx from "clsx";
+import "./react-date-picker.css";
 
 Modal.setAppElement("#root");
 
@@ -146,7 +147,6 @@ export const CreateCard = ({ isOpen, isClose, column }) => {
                   css.calendarModal,
                   css.calendarContainer
                 )}
-                popperClassName={clsx(css.popper, css.datePopper)}
                 dateFormat="EEEE, MMMM dd"
                 selected={selectedDate}
                 onChange={(date) => setSelectedDate(date)}

diff --git a/src/components/CreateCardModal/CreateCardModal.module.css b/src/components/CreateCardModal/CreateCardModal.module.css
@@ -85,6 +85,7 @@ input[type="radio"]:checked {
 .calendar.input {
   width: 100%;
   height: 20px;
+  font-size: 14px;
   border: none;
   color: #bedbb0;
   position: relative;
@@ -104,6 +105,13 @@ input[type="radio"]:checked {
   right: 8px;
 }
 
+.calendarModal.calendarContainer {
+  color: #ffffff;
+  background-color: #000000;
+  border: none;
+  font-family: inherit;
+}
+
 @media print {
   input[type="radio"] {
     -webkit-appearance: auto;

diff --git a/src/components/CreateCardModal/react-date-picker.css b/src/components/CreateCardModal/react-date-picker.css
@@ -0,0 +1,76 @@
+.react-datepicker__month-container {
+  padding: 18px;
+}
+
+.react-datepicker__header {
+  border: none;
+  background-color: transparent;
+}
+
+h2.react-datepicker__current-month {
+  margin: 0 auto;
+  width: 197px;
+  padding-bottom: 14px;
+  font-size: 16px;
+  font-weight: 500;
+  letter-spacing: -0.02em;
+  border-bottom: 1px solid;
+  border-color: #ffffff;
+  color: #ffffff;
+}
+
+.react-datepicker__navigation {
+  top: 18px;
+}
+
+.react-datepicker__day-name {
+  font-size: 14px;
+  letter-spacing: -0.02em;
+  color: #ffffff;
+}
+
+.react-datepicker__day {
+  gap: 11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 400;
+  width: 23px;
+  height: 23px;
+  line-height: 1.28;
+  letter-spacing: -0.02em;
+  color: #ffffff;
+}
+
+.react-datepicker__day:hover,
+.react-datepicker__day--selected {
+  border-radius: 50%;
+  background-color: #bedbb0;
+  color: #000000;
+}
+
+.react-datepicker__day--disabled {
+  color: #000000;
+}
+.react-datepicker__day--disabled:hover {
+  background-color: #000000;
+}
+
+.react-datepicker__day--keyboard-selected,
+.react-datepicker__month-text--keyboard-selected,
+.react-datepicker__quarter-text--keyboard-selected,
+.react-datepicker__year-text--keyboard-selected {
+  border-radius: 50%;
+  background-color: #bedbb0;
+  color: #000000;
+}
+
+.react-datepicker__week {
+  display: flex;
+  gap: 4px;
+}
+
+.react-datepicker__day--outside-month {
+  visibility: hidden;
+}