ekzyis
/
stacker.news
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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>
This commit is contained in:
Abhi Shandilya 2024-05-11 21:32:44 -04:00 committed by GitHub
parent aacf7c6170
commit 6ed0e53fc1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 98 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
components/search.js
View File

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

2
components/top-header.js
View File

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

2
components/usage-header.js
View File

@ -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'

2
pages/[name]/[type].js
View File

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

2
pages/referrals/[when].js
View File

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

91
styles/globals.scss
View File

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