From 6ed0e53fc129d7fc6e041c2d3903ac9f96430749 Mon Sep 17 00:00:00 2001
From: Abhi Shandilya <abhiShandy@users.noreply.github.com>
Date: Sat, 11 May 2024 21:32:44 -0400
Subject: [PATCH] fix: custom calendar dark theme (#1123)

* fix: custom calendar dark theme

* refine custom date picker

* color the triangle

---------

Co-authored-by: Keyan <34140557+huumn@users.noreply.github.com>
Co-authored-by: keyan <keyan.kousha+huumn@gmail.com>
---
 components/search.js       |  6 +--
 components/top-header.js   |  2 +-
 components/usage-header.js |  2 +-
 pages/[name]/[type].js     |  2 +-
 pages/referrals/[when].js  |  2 +-
 styles/globals.scss        | 91 ++++++++++++++++++++++++++++++++++++++
 6 files changed, 98 insertions(+), 7 deletions(-)

diff --git a/components/search.js b/components/search.js
index 9cbbc16a..84d4055a 100644
--- a/components/search.js
+++ b/components/search.js
@@ -81,8 +81,8 @@ export default function Search ({ sub }) {
               </SubmitButton>
             </div>
             {filter && router.query.q &&
-              <div className='text-muted fw-bold d-flex align-items-center flex-wrap pb-2'>
-                <div className='text-muted fw-bold d-flex align-items-center'>
+              <div className='text-muted fw-bold d-flex align-items-center flex-wrap'>
+                <div className='text-muted fw-bold d-flex align-items-center mb-2'>
                   <Select
                     groupClassName='me-2 mb-0'
                     onChange={(formik, e) => search({ ...formik?.values, what: e.target.value })}
@@ -120,7 +120,7 @@ export default function Search ({ sub }) {
                   <DatePicker
                     fromName='from'
                     toName='to'
-                    className='p-0 px-2 mb-2'
+                    className='p-0 px-2'
                     onChange={(formik, [from, to], e) => {
                       search({ ...formik?.values, from: from.getTime(), to: to.getTime() })
                     }}
diff --git a/components/top-header.js b/components/top-header.js
index 7bf473ae..638cc300 100644
--- a/components/top-header.js
+++ b/components/top-header.js
@@ -86,7 +86,7 @@ export default function TopHeader ({ sub, cat }) {
             <DatePicker
               fromName='from'
               toName='to'
-              className='p-0 px-2 my-2'
+              className='p-0 px-2'
               onChange={(formik, [from, to], e) => {
                 top({ ...formik?.values, from: from.getTime(), to: to.getTime() })
               }}
diff --git a/components/usage-header.js b/components/usage-header.js
index 6e76fcef..65460f22 100644
--- a/components/usage-header.js
+++ b/components/usage-header.js
@@ -25,7 +25,7 @@ export function UsageHeader ({ pathname = null }) {
 
   return (
     <div className='text-muted fw-bold my-0 d-flex align-items-center flex-wrap'>
-      <div className='text-muted fw-bold my-2 d-flex align-items-center'>
+      <div className='text-muted fw-bold mb-2 d-flex align-items-center'>
         stacker analytics for
         <Select
           groupClassName='mb-0 mx-2'
diff --git a/pages/[name]/[type].js b/pages/[name]/[type].js
index bb16df16..75678a59 100644
--- a/pages/[name]/[type].js
+++ b/pages/[name]/[type].js
@@ -104,7 +104,7 @@ function UserItemsHeader ({ type, name }) {
         {when === 'custom' &&
           <DatePicker
             fromName='from' toName='to'
-            className='p-0 px-2 mb-2'
+            className='p-0 px-2'
             onChange={(formik, [from, to], e) => {
               select({ ...formik?.values, from: from.getTime(), to: to.getTime() })
             }}
diff --git a/pages/referrals/[when].js b/pages/referrals/[when].js
index 0b647759..4e8cabcd 100644
--- a/pages/referrals/[when].js
+++ b/pages/referrals/[when].js
@@ -82,7 +82,7 @@ export default function Referrals ({ ssrData }) {
             noForm
             fromName='from'
             toName='to'
-            className='p-0 px-2 mb-2'
+            className='p-0 px-2'
             onChange={(formik, [from, to], e) => {
               select({ when, from: from.getTime(), to: to.getTime() })
             }}
diff --git a/styles/globals.scss b/styles/globals.scss
index 462f8d34..7135dd10 100644
--- a/styles/globals.scss
+++ b/styles/globals.scss
@@ -935,6 +935,13 @@ div[contenteditable]:focus,
   }
 }
 
+.react-datepicker-wrapper {
+  display: inline-block;
+  padding: 0;
+  border: 0;
+  margin-bottom: 0.5rem;
+}
+
 // To satisfy assumptions of the date picker component.
 .react-datepicker__navigation-icon {
   line-height: normal;
@@ -942,3 +949,87 @@ div[contenteditable]:focus,
 .react-datepicker__navigation-icon::before, .react-datepicker__navigation-icon::after {
   box-sizing: content-box;
 }
+
+.react-datepicker {
+  background-color: var(--theme-inputBg) !important;
+}
+
+.react-datepicker__header {
+  background-color: var(--theme-inputDisabledBg) !important;
+}
+
+.react-datepicker__day,
+.react-datepicker__current-month,
+.react-datepicker__day-name {
+  color: var(--bs-body-color) !important;
+}
+
+.react-datepicker__day--outside-month {
+  color: var(--theme-inputDisabledBg) !important;
+}
+
+.react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
+  border-top: none;
+  border-bottom-color: var(--theme-inputDisabledBg) !important;
+}
+
+.react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
+.react-datepicker__month-text--selected,
+.react-datepicker__month-text--in-selecting-range,
+.react-datepicker__month-text--in-range,
+.react-datepicker__quarter-text--selected,
+.react-datepicker__quarter-text--in-selecting-range,
+.react-datepicker__quarter-text--in-range,
+.react-datepicker__year-text--selected,
+.react-datepicker__year-text--in-selecting-range,
+.react-datepicker__year-text--in-range {
+  border-radius: 0.4rem !important;
+  background-color: var(--bs-info) !important;
+  color: var(--theme-inputDisabledBg) !important;
+}
+.react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
+.react-datepicker__month-text--selected:hover,
+.react-datepicker__month-text--in-selecting-range:hover,
+.react-datepicker__month-text--in-range:hover,
+.react-datepicker__quarter-text--selected:hover,
+.react-datepicker__quarter-text--in-selecting-range:hover,
+.react-datepicker__quarter-text--in-range:hover,
+.react-datepicker__year-text--selected:hover,
+.react-datepicker__year-text--in-selecting-range:hover,
+.react-datepicker__year-text--in-range:hover {
+  background-color: var(--bs-info) !important;
+}
+.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: 0.4rem !important;
+  background-color: var(--theme-inputBg) !important;
+  color: var(--bs-body-color) !important;
+}
+.react-datepicker__day:hover, .react-datepicker__month-text:hover,
+.react-datepicker__quarter-text:hover, .react-datepicker__year-text:hover,
+.react-datepicker__day--keyboard-selected:hover,
+.react-datepicker__month-text--keyboard-selected:hover,
+.react-datepicker__quarter-text--keyboard-selected:hover,
+.react-datepicker__year-text--keyboard-selected:hover {
+  background-color: var(--theme-clickToContextColor) !important;
+}
+.react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
+.react-datepicker__month-text--in-range,
+.react-datepicker__quarter-text--in-range,
+.react-datepicker__year-text--in-range),
+.react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
+.react-datepicker__month-text--in-range,
+.react-datepicker__quarter-text--in-range,
+.react-datepicker__year-text--in-range),
+.react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
+.react-datepicker__month-text--in-range,
+.react-datepicker__quarter-text--in-range,
+.react-datepicker__year-text--in-range),
+.react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
+.react-datepicker__month-text--in-range,
+.react-datepicker__quarter-text--in-range,
+.react-datepicker__year-text--in-range) {
+  background-color: var(--bs-info) !important;
+}
\ No newline at end of file