admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Minor design fixes in date picker (#10443)

Browse Source 
- Fix the dimensions of the "Clear" button in the date picker
- Improve the contrast of the hover state of the selected day

## Before



https://github.com/user-attachments/assets/f15ee79b-8389-4e05-a7d7-cca23da64b7b



## After



https://github.com/user-attachments/assets/9b391bea-bdc5-479c-8f71-b45ebcef4f66
This commit is contained in:
Baptiste Devessier
2025-02-24 15:03:52 +01:00
committed by GitHub
parent 446924cf24
commit dc7a9fc767
1 changed files with 9 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx
View File

@ -19,9 +19,9 @@ import {
VariableDateViewFilterValueDirection, VariableDateViewFilterValueDirection,
VariableDateViewFilterValueUnit, VariableDateViewFilterValueUnit,
} from '@/views/view-filter-value/utils/resolveDateViewFilterValue'; } from '@/views/view-filter-value/utils/resolveDateViewFilterValue';
import { t } from '@lingui/core/macro';
import { useContext } from 'react'; import { useContext } from 'react';
import 'react-datepicker/dist/react-datepicker.css'; import 'react-datepicker/dist/react-datepicker.css';
import { t } from '@lingui/core/macro';
export const MONTH_AND_YEAR_DROPDOWN_ID = 'date-picker-month-and-year-dropdown'; export const MONTH_AND_YEAR_DROPDOWN_ID = 'date-picker-month-and-year-dropdown';
export const MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID = export const MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID =
@ -244,7 +244,11 @@ const StyledContainer = styled.div<{ calendarDisabled?: boolean }>`
& .react-datepicker__day--selected { & .react-datepicker__day--selected {
background-color: ${({ theme }) => theme.color.blue}; background-color: ${({ theme }) => theme.color.blue};
color: ${({ theme }) => theme.grayScale.gray0}; color: ${({ theme }) => theme.background.primary};
&.react-datepicker__day:hover {
color: ${({ theme }) => theme.background.primary};
}
} }
& .react-datepicker__day--outside-month { & .react-datepicker__day--outside-month {
@ -261,8 +265,9 @@ const StyledContainer = styled.div<{ calendarDisabled?: boolean }>`
`; `;
const StyledButtonContainer = styled(StyledHoverableMenuItemBase)` const StyledButtonContainer = styled(StyledHoverableMenuItemBase)`
height: ${({ theme }) => theme.spacing(4)}; box-sizing: border-box;
margin: ${({ theme }) => theme.spacing(2)}; height: 32px;
margin: ${({ theme }) => theme.spacing(1)};
padding: ${({ theme }) => theme.spacing(1)}; padding: ${({ theme }) => theme.spacing(1)};
width: auto; width: auto;
`; `;