From 293948015e56ff2487e1940b3946dc6ef1cf09c4 Mon Sep 17 00:00:00 2001
From: Thomas Trompette <thomas.trompette@sfr.fr>
Date: Mon, 3 Jun 2024 11:34:10 +0200
Subject: [PATCH] Remove children

---
 .../snack-bar-manager/components/SnackBar.tsx        | 12 +++---------
 .../ui/input/button/components/LightButton.tsx       |  5 +----
 .../ui/input/button/components/LightIconButton.tsx   | 12 +++++-------
 3 files changed, 9 insertions(+), 20 deletions(-)

diff --git a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx b/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx
index 41dcf26bbff3b..5104ecdbb520f 100644
--- a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx
+++ b/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx
@@ -72,7 +72,7 @@ const StyledHeader = styled.div`
   align-items: center;
   color: ${({ theme }) => theme.font.color.primary};
   display: flex;
-  font-weight: ${({ theme }) => theme.font.weight.semiBold};
+  font-weight: ${({ theme }) => theme.font.weight.medium};
   gap: ${({ theme }) => theme.spacing(2)};
   height: ${({ theme }) => theme.spacing(6)};
   margin-bottom: ${({ theme }) => theme.spacing(1)};
@@ -187,16 +187,10 @@ export const SnackBar = ({
         {icon}
         {title}
         <StyledActions>
-          {!!onCancel && (
-            <LightButton title="Cancel" onClick={onCancel}>
-              Cancel
-            </LightButton>
-          )}
+          {!!onCancel && <LightButton title="Cancel" onClick={onCancel} />}
 
           {!!onClose && (
-            <LightIconButton title="Close" Icon={IconX} onClick={onClose}>
-              Cancel
-            </LightIconButton>
+            <LightIconButton title="Close" Icon={IconX} onClick={onClose} />
           )}
         </StyledActions>
       </StyledHeader>
diff --git a/packages/twenty-front/src/modules/ui/input/button/components/LightButton.tsx b/packages/twenty-front/src/modules/ui/input/button/components/LightButton.tsx
index 6fb3e97846e02..982c77a5d36d7 100644
--- a/packages/twenty-front/src/modules/ui/input/button/components/LightButton.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/LightButton.tsx
@@ -1,4 +1,4 @@
-import { MouseEvent, ReactNode } from 'react';
+import { MouseEvent } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconComponent } from 'twenty-ui';
@@ -13,7 +13,6 @@ export type LightButtonProps = {
   active?: boolean;
   disabled?: boolean;
   focus?: boolean;
-  children?: ReactNode;
   onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 };
 
@@ -83,7 +82,6 @@ export const LightButton = ({
   accent = 'secondary',
   disabled = false,
   focus = false,
-  children,
   onClick,
 }: LightButtonProps) => {
   const theme = useTheme();
@@ -97,7 +95,6 @@ export const LightButton = ({
       className={className}
       active={active}
     >
-      {children}
       {!!Icon && <Icon size={theme.icon.size.md} />}
       {title}
     </StyledButton>
diff --git a/packages/twenty-front/src/modules/ui/input/button/components/LightIconButton.tsx b/packages/twenty-front/src/modules/ui/input/button/components/LightIconButton.tsx
index aa4cd6c26ff27..96cc008f32981 100644
--- a/packages/twenty-front/src/modules/ui/input/button/components/LightIconButton.tsx
+++ b/packages/twenty-front/src/modules/ui/input/button/components/LightIconButton.tsx
@@ -1,4 +1,4 @@
-import { ComponentProps, MouseEvent, ReactNode } from 'react';
+import { ComponentProps, MouseEvent } from 'react';
 import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
 import { IconComponent } from 'twenty-ui';
@@ -16,7 +16,6 @@ export type LightIconButtonProps = {
   active?: boolean;
   disabled?: boolean;
   focus?: boolean;
-  children?: ReactNode;
   onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
 } & Pick<ComponentProps<'button'>, 'aria-label' | 'title'>;
 
@@ -57,12 +56,13 @@ const StyledButton = styled.button<
   gap: ${({ theme }) => theme.spacing(1)};
   height: ${({ size }) => (size === 'small' ? '24px' : '32px')};
   justify-content: center;
-  padding-left: 5px;
-  padding-right: 4px;
+  padding: 0;
   transition: background 0.1s ease;
 
+  white-space: nowrap;
+  width: ${({ size }) => (size === 'small' ? '24px' : '32px')};
+  min-width: ${({ size }) => (size === 'small' ? '24px' : '32px')};
   width: auto;
-  min-width: ${({ size }) => (size === 'small' ? '48px' : '64px')};
 
   &:hover {
     background: ${({ theme, disabled }) =>
@@ -91,7 +91,6 @@ export const LightIconButton = ({
   focus = false,
   onClick,
   title,
-  children,
 }: LightIconButtonProps) => {
   const theme = useTheme();
   return (
@@ -107,7 +106,6 @@ export const LightIconButton = ({
       active={active}
       title={title}
     >
-      {children}
       {Icon && <Icon size={theme.icon.size.sm} stroke={theme.icon.stroke.sm} />}
     </StyledButton>
   );