From 8864528d55adec371d5818aa92afa9106f311b3d Mon Sep 17 00:00:00 2001
From: Leo Alfred <leoalfredmusic@gmail.com>
Date: Wed, 17 Jan 2024 05:05:16 -0600
Subject: [PATCH] Center InternalDatePicker Clear button (#3265)

* Center InternalDatePicker Clear button

* Add back Clear button padding

* Center date picker clear button through props

* Refactor StyledButtonContainer padding

* Refactor StyledButtonContainer to extend MenuItem

* Use custom date picker Clear button implementation

* Undo MenuItem changes

* Refactor new date picker code

* Refactor datepicker solution

* Rename StyledButtonContent to StyledButton

* Remove unnecessary menu-item class
---
 .../date/components/InternalDatePicker.tsx    | 33 +++++++------------
 .../components/MenuItemLeftContent.tsx        |  4 ++-
 2 files changed, 15 insertions(+), 22 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 313e6ee21..9a9b86375 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
@@ -3,7 +3,8 @@ import ReactDatePicker from 'react-datepicker';
 import styled from '@emotion/styled';
 
 import { IconCalendarX } from '@/ui/display/icon';
-import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
+import { MenuItemLeftContent } from '@/ui/navigation/menu-item/internals/components/MenuItemLeftContent';
+import { StyledHoverableMenuItemBase } from '@/ui/navigation/menu-item/internals/components/StyledMenuItemBase';
 import { overlayBackground } from '@/ui/theme/constants/effects';
 
 import 'react-datepicker/dist/react-datepicker.css';
@@ -226,20 +227,15 @@ const StyledContainer = styled.div`
   }
 `;
 
-const StyledButtonContainer = styled.div`
-  align-items: center;
-  align-self: stretch;
-  display: flex;
-  gap: ${({ theme }) => theme.spacing(2)};
-  padding-left: ${({ theme }) => theme.spacing(2)};
+const StyledButtonContainer = styled(StyledHoverableMenuItemBase)`
+  width: auto;
+  height: ${({ theme }) => theme.spacing(8)};
+  padding: 0 ${({ theme }) => theme.spacing(2)};
+  margin: ${({ theme }) => theme.spacing(2)};
+`;
 
-  & .menu-item {
-    height: ${({ theme }) => theme.spacing(8)};
-    margin-bottom: ${({ theme }) => theme.spacing(1)};
-    margin-top: ${({ theme }) => theme.spacing(1)};
-    padding: 0 ${({ theme }) => theme.spacing(2)};
-    width: fit-content;
-  }
+const StyledButton = styled(MenuItemLeftContent)`
+  justify-content: center;
 `;
 
 export type InternalDatePickerProps = {
@@ -281,13 +277,8 @@ export const InternalDatePicker = ({
         ></ReactDatePicker>
       </div>
       {clearable && (
-        <StyledButtonContainer>
-          <MenuItem
-            text="Clear"
-            LeftIcon={IconCalendarX}
-            onClick={handleClear}
-            className="menu-item"
-          />
+        <StyledButtonContainer onClick={handleClear} isMenuOpen={false}>
+          <StyledButton LeftIcon={IconCalendarX} text="Clear" />
         </StyledButtonContainer>
       )}
     </StyledContainer>
diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx
index b11984812..28ff53e5e 100644
--- a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx
+++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/MenuItemLeftContent.tsx
@@ -10,12 +10,14 @@ import {
 } from './StyledMenuItemBase';
 
 type MenuItemLeftContentProps = {
+  className?: string;
   LeftIcon: IconComponent | null | undefined;
   showGrip?: boolean;
   text: string;
 };
 
 export const MenuItemLeftContent = ({
+  className,
   LeftIcon,
   text,
   showGrip = false,
@@ -23,7 +25,7 @@ export const MenuItemLeftContent = ({
   const theme = useTheme();
 
   return (
-    <StyledMenuItemLeftContent>
+    <StyledMenuItemLeftContent className={className}>
       {showGrip && (
         <IconGripVertical
           size={theme.icon.size.md}