Updated Snackbar as shown in Figma Fixes twentyhq#5666 (twentyhq#5700)

<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 twentyhq#5666 --------- Co-authored-by: Thomas Trompette <[email protected]>
arnavsaxena17 · Jun 3, 2024 · 65fcdc6 · 65fcdc6
1 parent a73d8a7
commit 65fcdc6
Show file tree

Hide file tree

Showing 3 changed files with 2 additions and 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
@@ -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
@@ -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
@@ -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')};