From adbc8ab96fb004a29c156cbde3b0039d6e2b4538 Mon Sep 17 00:00:00 2001
From: Orinami Olatunji <16918891+orinamio@users.noreply.github.com>
Date: Wed, 24 Apr 2024 14:18:26 +0100
Subject: [PATCH] #5073 - fix datepicker styling in dark mode (#5074)

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>
---
 .../components/internal/date/components/DateTimeInput.tsx  | 7 ++++++-
 .../internal/date/components/InternalDatePicker.tsx        | 2 +-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimeInput.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimeInput.tsx
index cc1ccbd4e..5d1033753 100644
--- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimeInput.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/DateTimeInput.tsx
@@ -1,5 +1,6 @@
 import { useCallback, useEffect, useState } from 'react';
 import { useIMask } from 'react-imask';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { DateTime } from 'luxon';
 
@@ -26,7 +27,11 @@ const StyledInput = styled.input<{ hasError?: boolean }>`
   font-weight: 500;
   font-size: ${({ theme }) => theme.font.size.md};
   width: 100%;
-  color: ${({ hasError, theme }) => (hasError ? theme.color.red : 'inherit')};
+  ${({ hasError, theme }) =>
+    hasError &&
+    css`
+      color: ${theme.color.red};
+    `};
 `;
 
 type DateTimeInputProps = {
diff --git a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx
index be2666fc9..368c7eafd 100644
--- a/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx
+++ b/packages/twenty-front/src/modules/ui/input/components/internal/date/components/InternalDatePicker.tsx
@@ -255,7 +255,7 @@ const StyledContainer = styled.div`
 
   & .react-datepicker__day--selected {
     background-color: ${({ theme }) => theme.color.blue};
-    color: ${({ theme }) => theme.font.color.inverted};
+    color: ${({ theme }) => theme.grayScale.gray0};
   }
 
   & .react-datepicker__day--outside-month {