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

@@ -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 flex-wrap'>
-                <div className='text-muted fw-bold d-flex align-items-center'>
+                <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() })
                     }}

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() })
               }}

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'

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() })
             }}

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() })
             }}

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;
+}