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

#5073 - fix datepicker styling in dark mode (#5074)

Browse Source 
This PR fixes three issues with the datepicker in dark mode. The
following UI elements now appear in light colors when the theme is set
to dark mode:

- The selected date.
- The clock icon.
- The date time input component.

Before:
<img width="1003" alt="theming bug"
src="https://github.com/twentyhq/twenty/assets/16918891/914b7043-e692-4de8-8440-ddd89cbf3973">

After:
<img width="374" alt="dark_theme_calendar_after"
src="https://github.com/twentyhq/twenty/assets/16918891/346fd950-1ef8-405e-9486-59abb81f92db">
<img width="347" alt="light_theme_calendar_after"
src="https://github.com/twentyhq/twenty/assets/16918891/17463094-53e5-4bc4-8812-a53a37cd08ed">

#5073

Co-authored-by: Thomas Trompette <thomast@twenty.com>
This commit is contained in:
Orinami Olatunji
2024-04-24 14:18:26 +01:00
committed by GitHub
parent d130b78166
commit adbc8ab96f
2 changed files with 7 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,6 @@
import { useCallback, useEffect, useState } from 'react'; import { useCallback, useEffect, useState } from 'react';
import { useIMask } from 'react-imask'; import { useIMask } from 'react-imask';
import { css } from '@emotion/react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { DateTime } from 'luxon'; import { DateTime } from 'luxon';
@ -26,7 +27,11 @@ const StyledInput = styled.input<{ hasError?: boolean }>`
font-weight: 500; font-weight: 500;
font-size: ${({ theme }) => theme.font.size.md}; font-size: ${({ theme }) => theme.font.size.md};
width: 100%; width: 100%;
color: ${({ hasError, theme }) => (hasError ? theme.color.red : 'inherit')}; ${({ hasError, theme }) =>
hasError &&
css`
color: ${theme.color.red};
`};
`; `;
type DateTimeInputProps = { type DateTimeInputProps = {

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

@ -255,7 +255,7 @@ const StyledContainer = styled.div`
& .react-datepicker__day--selected { & .react-datepicker__day--selected {
background-color: ${({ theme }) => theme.color.blue}; background-color: ${({ theme }) => theme.color.blue};
color: ${({ theme }) => theme.font.color.inverted}; color: ${({ theme }) => theme.grayScale.gray0};
} }
& .react-datepicker__day--outside-month { & .react-datepicker__day--outside-month {