feat: implement new SnackBar design (#5515)

Closes #5383

## Light theme

<img width="905" alt="image"
src="https://github.com/twentyhq/twenty/assets/3098428/ab0683c5-ded3-420c-ace6-684d38794a2d">

## Dark theme

<img width="903" alt="image"
src="https://github.com/twentyhq/twenty/assets/3098428/4e43ca35-438d-4ba0-8388-1f061c6ccfb0">
This commit is contained in:
Thaïs
2024-05-23 12:19:50 +02:00
committed by GitHub
parent 453525ca25
commit 8019ba8782
53 changed files with 485 additions and 552 deletions

View File

@ -2,6 +2,7 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconCopy } from 'twenty-ui';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { Button } from '@/ui/input/button/components/Button';
import { TextInput } from '@/ui/input/components/TextInput';
@ -32,7 +33,7 @@ export const ApiKeyInput = ({ apiKey }: ApiKeyInputProps) => {
title="Copy"
onClick={() => {
enqueueSnackBar('Api Key copied to clipboard', {
variant: 'success',
variant: SnackBarVariant.Success,
icon: <IconCopy size={theme.icon.size.md} />,
duration: 2000,
});

View File

@ -20,6 +20,7 @@ import { getConnectionDbName } from '@/settings/integrations/utils/getConnection
import { getSettingsPagePath } from '@/settings/utils/getSettingsPagePath';
import { SettingsPath } from '@/types/SettingsPath';
import { Info } from '@/ui/display/info/components/Info';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { Breadcrumb } from '@/ui/navigation/bread-crumb/components/Breadcrumb';
import {
@ -91,7 +92,7 @@ export const SettingsIntegrationEditDatabaseConnectionContent = ({
);
} catch (error) {
enqueueSnackBar((error as Error).message, {
variant: 'error',
variant: SnackBarVariant.Error,
});
}
};

View File

@ -2,6 +2,7 @@ import { useRecoilValue } from 'recoil';
import { H2Title } from 'twenty-ui';
import { currentUserState } from '@/auth/states/currentUserState';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { Button } from '@/ui/input/button/components/Button';
import { useEmailPasswordResetLinkMutation } from '~/generated/graphql';
@ -16,7 +17,7 @@ export const ChangePassword = () => {
const handlePasswordResetClick = async () => {
if (!currentUser?.email) {
enqueueSnackBar('Invalid email', {
variant: 'error',
variant: SnackBarVariant.Error,
});
return;
}
@ -29,16 +30,16 @@ export const ChangePassword = () => {
});
if (data?.emailPasswordResetLink?.success === true) {
enqueueSnackBar('Password reset link has been sent to the email', {
variant: 'success',
variant: SnackBarVariant.Success,
});
} else {
enqueueSnackBar('There was some issue', {
variant: 'error',
variant: SnackBarVariant.Error,
});
}
} catch (error) {
enqueueSnackBar((error as Error).message, {
variant: 'error',
variant: SnackBarVariant.Error,
});
}
};

View File

@ -1,6 +1,7 @@
import { useRecoilState } from 'recoil';
import { currentWorkspaceState } from '@/auth/states/currentWorkspaceState';
import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
import { Toggle } from '@/ui/input/components/Toggle';
import { useUpdateWorkspaceMutation } from '~/generated/graphql';
@ -32,7 +33,7 @@ export const ToggleImpersonate = () => {
});
} catch (err: any) {
enqueueSnackBar(err?.message, {
variant: 'error',
variant: SnackBarVariant.Error,
});
}
};