From dc7a9fc767412c6a6e6e14a96399e68719b4f860 Mon Sep 17 00:00:00 2001
From: Baptiste Devessier <baptiste@devessier.fr>
Date: Mon, 24 Feb 2025 15:03:52 +0100
Subject: [PATCH] Minor design fixes in date picker (#10443)

- 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
---
 .../internal/date/components/InternalDatePicker.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

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 880b74901..c90abedbd 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
@@ -19,9 +19,9 @@ import {
   VariableDateViewFilterValueDirection,
   VariableDateViewFilterValueUnit,
 } from '@/views/view-filter-value/utils/resolveDateViewFilterValue';
+import { t } from '@lingui/core/macro';
 import { useContext } from 'react';
 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_MONTH_SELECT_ID =
@@ -244,7 +244,11 @@ const StyledContainer = styled.div<{ calendarDisabled?: boolean }>`
 
   & .react-datepicker__day--selected {
     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 {
@@ -261,8 +265,9 @@ const StyledContainer = styled.div<{ calendarDisabled?: boolean }>`
 `;
 
 const StyledButtonContainer = styled(StyledHoverableMenuItemBase)`
-  height: ${({ theme }) => theme.spacing(4)};
-  margin: ${({ theme }) => theme.spacing(2)};
+  box-sizing: border-box;
+  height: 32px;
+  margin: ${({ theme }) => theme.spacing(1)};
   padding: ${({ theme }) => theme.spacing(1)};
   width: auto;
 `;