chore: add react date picker back to project

Author: Dan-Y-Ko

src/app/globals.css

@@ -1,3 +1,112 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+/* React DateTime Picker styles */
+.react-datepicker {
+    border-radius: 8px !important;
+    overflow: hidden !important;
+}
+
+.react-datepicker {
+    background-color: #f5f5f5 !important;
+    border: 2px solid rgba(107, 114, 128, 0.4) !important;
+    /* box-shadow: 0px 0px 0px 3px rgba(107, 114, 128, 0.3) !important; */
+}
+
+[data-theme="dark"] .react-datepicker {
+    background-color: #16171a !important;
+    border: 2px solid rgba(107, 114, 128, 0.4) !important;
+    /* box-shadow: 0px 0px 0px 3px rgba(107, 114, 128, 0.3) !important; */
+}
+
+.react-datepicker__navigation-icon::before {
+    border-color: #6b7280 !important;
+}
+
+[data-theme="dark"] .react-datepicker__navigation-icon::before {
+    border-color: #6b7280 !important;
+}
+
+.react-datepicker__month-container,
+.react-datepicker__header,
+.react-datepicker__time-container,
+.react-datepicker__header,
+.react-datepicker__time-box {
+    background-color: #f5f5f5 !important;
+    border: none !important;
+}
+
+.react-datepicker__month-container {
+    border-right: 1px solid rgba(107, 114, 128, 0.4) !important;
+}
+
+[data-theme="dark"] .react-datepicker__month-container,
+[data-theme="dark"] .react-datepicker__header,
+[data-theme="dark"] .react-datepicker__time-container,
+[data-theme="dark"] .react-datepicker__header,
+[data-theme="dark"] .react-datepicker__time-box {
+    background-color: #16171a !important;
+}
+
+.react-datepicker__day,
+.react-datepicker__current-month {
+    font-size: 14px !important;
+    font-weight: semibold !important;
+}
+
+.react-datepicker__day,
+.react-datepicker__current-month,
+.react-datepicker__day-name,
+.react-datepicker-time__header,
+.react-datepicker__time-list-item {
+    color: #4c515b !important;
+}
+
+[data-theme="dark"] .react-datepicker__day,
+[data-theme="dark"] .react-datepicker__current-month,
+[data-theme="dark"] .react-datepicker__day-name,
+[data-theme="dark"] .react-datepicker-time__header,
+[data-theme="dark"] .react-datepicker__time-list-item {
+    color: #a0a5ae !important;
+}
+
+.react-datepicker__day--today {
+    color: #4c515b !important;
+}
+
+[data-theme="dark"] .react-datepicker__day--today {
+    color: #a0a5ae !important;
+}
+
+.react-datepicker__day.react-datepicker__day--selected,
+.react-datepicker__time-list-item--selected,
+.react-datepicker__day--keyboard-selected,
+.react-datepicker__day:hover,
+.react-datepicker__time-list-item:hover {
+    background: #e3e5eb !important;
+    color: #4c515b !important;
+}
+
+[data-theme="dark"] .react-datepicker__day.react-datepicker__day--selected,
+[data-theme="dark"] .react-datepicker__time-list-item--selected,
+[data-theme="dark"] .react-datepicker__day--keyboard-selected,
+[data-theme="dark"] .react-datepicker__day:hover,
+[data-theme="dark"] .react-datepicker__time-list-item:hover {
+    background: #383b43 !important;
+    color: #a0a5ae !important;
+}
+
+.react-datepicker__time-list-item--disabled,
+.react-datepicker__time-list-item--disabled:hover {
+    background: none !important;
+    color: #e3e5eb !important;
+}
+
+[data-theme="dark"] .react-datepicker__time-list-item--disabled {
+    color: #383b43 !important;
+}
+
+.react-datepicker__triangle {
+    display: none !important;
+}

yarn.lock

@@ -471,19 +471,18 @@ __metadata:
 
 "@chingu-x/components@file:C:\\Users\\DK379\\Documents\\web_pages\\chingu_packages\\components::locator=chingu_dashboard%40workspace%3A.":
   version: 0.11.0
-  resolution: "@chingu-x/components@file:/C%3A/Users/DK379/Documents/web_pages/chingu_packages/components#/C%3A/Users/DK379/Documents/web_pages/chingu_packages/components::hash=2c9f57&locator=chingu_dashboard%40workspace%3A."
+  resolution: "@chingu-x/components@file:/C%3A/Users/DK379/Documents/web_pages/chingu_packages/components#/C%3A/Users/DK379/Documents/web_pages/chingu_packages/components::hash=a87958&locator=chingu_dashboard%40workspace%3A."
   dependencies:
     "@heroicons/react": "npm:^2.2.0"
     class-variance-authority: "npm:^0.7.1"
     clsx: "npm:^2.1.1"
     framer-motion: "npm:^11.17.0"
-    react-datepicker: "npm:^6.1.0"
     tailwind-merge: "npm:^2.5.5"
   peerDependencies:
     react: ^18.0.0
     react-dom: ^18.0.0
     tailwindcss: ^3.0.0
-  checksum: 4dbb280fc19666a5001216ca90226657333976ed697028a93bc10b92a0b8899aedda86267f9c0d2dff6d3d42cad0b38f5edaed347001414c6a0da1c2a5110207
+  checksum: 3468a99811c2b1c26c24bac830700a4f3f0f36be4aaa7757763b1d8f42f212e7341f825b819923f9640fad021222ca438e3e3c31e5c062e89e36155e98c17a2a
   languageName: node
   linkType: hard