From 52864889dad6e682fe079fe8c650f5d325d0bb0f Mon Sep 17 00:00:00 2001
From: Sagar Hedaoo <sagarhedaoo@gmail.com>
Date: Mon, 3 Jun 2024 06:05:04 -0400
Subject: [PATCH] Updated Snackbar as shown in Figma Fixes #5666 (#5700)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<img width="282" alt="Screenshot 2024-06-01 at 1 07 16 AM"
src="https://github.com/twentyhq/twenty/assets/10000167/0b1cd2f5-9036-4a31-8dfa-b90972ebe1aa">


Updated the font weight and added Cancel label on the left of the icon
as shown in figma design.
Also, didn't increased the gap because it's already like the figma
design!
Let me know if you want more gap between title and description.

Closes https://github.com/twentyhq/twenty/issues/5666

---------

Co-authored-by: Thomas Trompette <thomas.trompette@sfr.fr>
---
 .../ui/feedback/snack-bar-manager/components/SnackBar.tsx       | 1 +
 .../src/modules/ui/input/button/components/LightButton.tsx      | 2 +-
 .../src/modules/ui/input/button/components/LightIconButton.tsx  | 1 -
 3 files changed, 2 insertions(+), 2 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 a603be570be..5104ecdbb52 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
@@ -188,6 +188,7 @@ export const SnackBar = ({
         {title}
         <StyledActions>
           {!!onCancel && <LightButton title="Cancel" onClick={onCancel} />}
+
           {!!onClose && (
             <LightIconButton title="Close" Icon={IconX} onClick={onClose} />
           )}
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 d3585825189..982c77a5d36 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
@@ -95,7 +95,7 @@ export const LightButton = ({
       className={className}
       active={active}
     >
-      {!!Icon && <Icon size={theme.icon.size.sm} />}
+      {!!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 97ab444e7ec..5f03c700e0c 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
@@ -60,7 +60,6 @@ const StyledButton = styled.button<
   transition: background 0.1s ease;
 
   white-space: nowrap;
-
   width: ${({ size }) => (size === 'small' ? '24px' : '32px')};
   min-width: ${({ size }) => (size === 'small' ? '24px' : '32px')};