Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-05 22:38:48 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Datepicker calender dark theme (#4111)

Browse source 
* making datepicker consistent with the dark theme

* removed * selector

* made range date picker calender consistent with the dark theme

* added hover effect on calendar day in range date picker

* removed unwanted border around the calendar container in range date picker

* made the months change arrow consistent with the dark theme in range date picker

* removed wrapperClassName from date picker component

* made the suggested changes and removed left and right border around DateRangePicker_picker class
This commit is contained in:
Manish Kushare 2022-10-04 09:27:24 +05:30 committed by GitHub
parent abc273363a
commit f1bd01d748
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 63 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
frontend/src/Editor/Components/Datepicker.jsx
View file

@ -79,7 +79,7 @@ export const Datepicker = function Datepicker({
return (
<div
data-disabled={disabledState}
className="datepicker-widget"
className={`datepicker-widget ${darkMode && 'theme-dark'}`}
data-cy={`draggable-widget-${String(component.name).toLowerCase()}`}
style={{
height,

62
frontend/src/_styles/theme.scss
View file

@ -6393,6 +6393,68 @@ input.hide-input-arrows{
}
}
.datepicker-widget.theme-dark{
.react-datepicker__tab-loop{
.react-datepicker__header{
background-color: #232e3c;
.react-datepicker__current-month,.react-datepicker__day-name,.react-datepicker__month-select,.react-datepicker__year-select{
color: white;
}
.react-datepicker__month-select,.react-datepicker__year-select{
background-color: transparent;
}
}
.react-datepicker__month{
background-color: #232e3c;
.react-datepicker__day{
color: white;
&:hover{
background-color: #636466;
}
}
.react-datepicker__day--outside-month{
opacity: 0.5;
}
}
.react-datepicker{
background-color: #232e3c;
}
}
}
.theme-dark{
.CalendarMonth,.DayPickerNavigation_button,.CalendarDay,.CalendarMonthGrid,.DayPicker_focusRegion,.DayPicker{
background-color: #232e3c;
}
.DayPicker_weekHeader_ul,
.CalendarMonth_caption,
.CalendarDay{
color: white;
}
.CalendarDay__selected_span,.CalendarDay__selected_start,.CalendarDay__selected_end{
background-color: #4D72FA;
color: white;
}
.CalendarDay{
border-color: transparent;//hiding the border around days in the dark theme
&:hover{
background-color: #636466;
}
}
.DateInput_fangStroke{
stroke: #232E3C;
fill: #232E3C;
}
.DayPickerNavigation_svg__horizontal{
fill: white;
}
.DayPicker__withBorder{
border-radius: 0;
}
.DateRangePicker_picker {
background-color: transparent;
}
}
.link-widget{
display: flex;