Updated Snackbar as shown in Figma Fixes #5666 (#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 https://github.com/twentyhq/twenty/issues/5666

---------

Co-authored-by: Thomas Trompette <thomas.trompette@sfr.fr>
This commit is contained in:
Sagar Hedaoo
2024-06-03 06:05:04 -04:00
committed by GitHub
parent eab8deb211
commit 52864889da
3 changed files with 2 additions and 2 deletions

View File

@ -188,6 +188,7 @@ export const SnackBar = ({
{title}
<StyledActions>
{!!onCancel && <LightButton title="Cancel" onClick={onCancel} />}
{!!onClose && (
<LightIconButton title="Close" Icon={IconX} onClick={onClose} />
)}

View File

@ -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>
);

View File

@ -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')};