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">

Author: thaisguigon

packages/twenty-front/.storybook/preview.tsx

@@ -29,9 +29,8 @@ initialize({
 const preview: Preview = {
   decorators: [
     (Story) => {
-      const mode = useDarkMode() ? 'Dark' : 'Light';
+      const theme = useDarkMode() ? THEME_DARK : THEME_LIGHT;
 
-      const theme = mode === 'Dark' ? THEME_DARK : THEME_LIGHT;
       return (
         <ThemeProvider theme={theme}>
           <Story />

packages/twenty-front/src/modules/activities/hooks/useCustomResolver.ts

@@ -8,6 +8,7 @@ import {
 
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
 import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 
 type CustomResolverQueryResult<
@@ -62,7 +63,7 @@ export const useCustomResolver = <
     variables: queryVariables,
     onError: (error) => {
       enqueueSnackBar(error.message || `Error loading ${objectName}`, {
-        variant: 'error',
+        variant: SnackBarVariant.Error,
       });
     },
   });

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useHandleResetPassword.ts

@@ -1,5 +1,6 @@
 import { useCallback } from 'react';
 
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { useEmailPasswordResetLinkMutation } from '~/generated/graphql';
 
@@ -12,7 +13,7 @@ export const useHandleResetPassword = () => {
       return async () => {
         if (!email) {
           enqueueSnackBar('Invalid email', {
-            variant: 'error',
+            variant: SnackBarVariant.Error,
           });
           return;
         }
@@ -24,16 +25,16 @@ export const useHandleResetPassword = () => {
 
           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,
           });
         }
       };

packages/twenty-front/src/modules/auth/sign-in-up/hooks/useSignInUp.tsx

@@ -7,6 +7,7 @@ import { Form } from '@/auth/sign-in-up/hooks/useSignInUpForm';
 import { useReadCaptchaToken } from '@/captcha/hooks/useReadCaptchaToken';
 import { useRequestFreshCaptchaToken } from '@/captcha/hooks/useRequestFreshCaptchaToken';
 import { AppPath } from '@/types/AppPath';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { useIsMatchingLocation } from '~/hooks/useIsMatchingLocation';
 
@@ -75,7 +76,7 @@ export const useSignInUp = (form: UseFormReturn<Form>) => {
       },
       onError: (error) => {
         enqueueSnackBar(`${error.message}`, {
-          variant: 'error',
+          variant: SnackBarVariant.Error,
         });
       },
       onCompleted: (data) => {
@@ -124,7 +125,7 @@ export const useSignInUp = (form: UseFormReturn<Form>) => {
         navigateAfterSignInUp(currentWorkspace, currentWorkspaceMember);
       } catch (err: any) {
         enqueueSnackBar(err?.message, {
-          variant: 'error',
+          variant: SnackBarVariant.Error,
         });
       }
     },

packages/twenty-front/src/modules/error-handler/components/PromiseRejectionEffect.tsx

@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect } from 'react';
 
 import { ObjectMetadataItemNotFoundError } from '@/object-metadata/errors/ObjectMetadataNotFoundError';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 
 export const PromiseRejectionEffect = () => {
@@ -15,12 +16,12 @@ export const PromiseRejectionEffect = () => {
         enqueueSnackBar(
           `Error with custom object that cannot be found : ${event.reason}`,
           {
-            variant: 'error',
+            variant: SnackBarVariant.Error,
           },
         );
       } else {
         enqueueSnackBar(`Error: ${event.reason}`, {
-          variant: 'error',
+          variant: SnackBarVariant.Error,
         });
       }
     },

packages/twenty-front/src/modules/object-metadata/hooks/useFindManyObjectMetadataItems.ts

@@ -1,6 +1,7 @@
 import { useMemo } from 'react';
 import { useQuery } from '@apollo/client';
 
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import {
   FieldFilter,
@@ -43,7 +44,7 @@ export const useFindManyObjectMetadataItems = ({
       enqueueSnackBar(
         `Error during useFindManyObjectMetadataItems, ${error.message}`,
         {
-          variant: 'error',
+          variant: SnackBarVariant.Error,
         },
       );
     },

packages/twenty-front/src/modules/object-record/hooks/useFindDuplicateRecords.ts

@@ -9,6 +9,7 @@ import { RecordGqlOperationFindManyResult } from '@/object-record/graphql/types/
 import { useFindDuplicateRecordsQuery } from '@/object-record/hooks/useFindDuplicatesRecordsQuery';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { getFindDuplicateRecordsQueryResponseField } from '@/object-record/utils/getFindDuplicateRecordsQueryResponseField';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { logError } from '~/utils/logError';
 
@@ -54,7 +55,7 @@ export const useFindDuplicateRecords = <T extends ObjectRecord = ObjectRecord>({
         enqueueSnackBar(
           `Error during useFindDuplicateRecords for "${objectMetadataItem.nameSingular}", ${error.message}`,
           {
-            variant: 'error',
+            variant: SnackBarVariant.Error,
           },
         );
       },

packages/twenty-front/src/modules/object-record/hooks/useFindManyRecords.ts

@@ -17,6 +17,7 @@ import { RecordGqlOperationVariables } from '@/object-record/graphql/types/Recor
 import { useFindManyRecordsQuery } from '@/object-record/hooks/useFindManyRecordsQuery';
 import { ObjectRecord } from '@/object-record/types/ObjectRecord';
 import { filterUniqueRecordEdgesByCursor } from '@/object-record/utils/filterUniqueRecordEdgesByCursor';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { isDefined } from '~/utils/isDefined';
 import { logError } from '~/utils/logError';
@@ -116,7 +117,7 @@ export const useFindManyRecords = <T extends ObjectRecord = ObjectRecord>({
         enqueueSnackBar(
           `Error during useFindManyRecords for "${objectMetadataItem.namePlural}", ${error.message}`,
           {
-            variant: 'error',
+            variant: SnackBarVariant.Error,
           },
         );
       },
@@ -192,7 +193,7 @@ export const useFindManyRecords = <T extends ObjectRecord = ObjectRecord>({
         enqueueSnackBar(
           `Error during fetchMoreObjects for "${objectMetadataItem.namePlural}", ${error}`,
           {
-            variant: 'error',
+            variant: SnackBarVariant.Error,
           },
         );
       } finally {

packages/twenty-front/src/modules/object-record/record-field/components/LightCopyIconButton.tsx

@@ -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 { LightIconButton } from '@/ui/input/button/components/LightIconButton';
 
@@ -24,7 +25,7 @@ export const LightCopyIconButton = ({ copyText }: LightCopyIconButtonProps) => {
         Icon={IconCopy}
         onClick={() => {
           enqueueSnackBar('Text copied to clipboard', {
-            variant: 'success',
+            variant: SnackBarVariant.Success,
             icon: <IconCopy size={theme.icon.size.md} />,
             duration: 2000,
           });

packages/twenty-front/src/modules/object-record/spreadsheet-import/useSpreadsheetRecordImport.ts

@@ -6,6 +6,7 @@ import { useCreateManyRecords } from '@/object-record/hooks/useCreateManyRecords
 import { getSpreadSheetValidation } from '@/object-record/spreadsheet-import/util/getSpreadSheetValidation';
 import { useSpreadsheetImport } from '@/spreadsheet-import/hooks/useSpreadsheetImport';
 import { SpreadsheetOptions, Validation } from '@/spreadsheet-import/types';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { FieldMetadataType } from '~/generated-metadata/graphql';
 import { isDefined } from '~/utils/isDefined';
@@ -163,7 +164,7 @@ export const useSpreadsheetRecordImport = (objectNameSingular: string) => {
           await createManyRecords(createInputs);
         } catch (error: any) {
           enqueueSnackBar(error?.message || 'Something went wrong', {
-            variant: 'error',
+            variant: SnackBarVariant.Error,
           });
         }
       },

packages/twenty-front/src/modules/settings/developers/components/ApiKeyInput.tsx

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

packages/twenty-front/src/modules/settings/integrations/database-connection/components/SettingsIntegrationEditDatabaseConnectionContent.tsx

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

packages/twenty-front/src/modules/settings/profile/components/ChangePassword.tsx

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

packages/twenty-front/src/modules/settings/workspace/components/ToggleImpersonate.tsx

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

packages/twenty-front/src/modules/spreadsheet-import/steps/components/MatchColumnsStep/MatchColumnsStep.tsx

@@ -12,6 +12,7 @@ import { setColumn } from '@/spreadsheet-import/utils/setColumn';
 import { setIgnoreColumn } from '@/spreadsheet-import/utils/setIgnoreColumn';
 import { setSubColumn } from '@/spreadsheet-import/utils/setSubColumn';
 import { useDialogManager } from '@/ui/feedback/dialog-manager/hooks/useDialogManager';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Modal } from '@/ui/layout/modal/components/Modal';
 
@@ -170,7 +171,7 @@ export const MatchColumnsStep = <T extends string>({
             } else if (index === existingFieldIndex) {
               enqueueSnackBar('Columns cannot duplicate', {
                 title: 'Another column unselected',
-                variant: 'error',
+                variant: SnackBarVariant.Error,
               });
               return setColumn(column);
             } else {

packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadFlow.tsx

@@ -8,6 +8,7 @@ import { RawData } from '@/spreadsheet-import/types';
 import { exceedsMaxRecords } from '@/spreadsheet-import/utils/exceedsMaxRecords';
 import { mapWorkbook } from '@/spreadsheet-import/utils/mapWorkbook';
 import { CircularProgressBar } from '@/ui/feedback/progress-bar/components/CircularProgressBar';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { Modal } from '@/ui/layout/modal/components/Modal';
 
@@ -80,7 +81,7 @@ export const UploadFlow = ({ nextStep }: UploadFlowProps) => {
     (description: string) => {
       enqueueSnackBar(description, {
         title: 'Error',
-        variant: 'error',
+        variant: SnackBarVariant.Error,
       });
     },
     [enqueueSnackBar],

packages/twenty-front/src/modules/spreadsheet-import/steps/components/UploadStep/components/DropZone.tsx

@@ -5,6 +5,7 @@ import * as XLSX from 'xlsx-ugnis';
 
 import { useSpreadsheetImportInternal } from '@/spreadsheet-import/hooks/useSpreadsheetImportInternal';
 import { readFileAsync } from '@/spreadsheet-import/utils/readFilesAsync';
+import { SnackBarVariant } from '@/ui/feedback/snack-bar-manager/components/SnackBar';
 import { useSnackBar } from '@/ui/feedback/snack-bar-manager/hooks/useSnackBar';
 import { MainButton } from '@/ui/input/button/components/MainButton';
 
@@ -114,7 +115,7 @@ export const DropZone = ({ onContinue, isLoading }: DropZoneProps) => {
       fileRejections.forEach((fileRejection) => {
         enqueueSnackBar(fileRejection.errors[0].message, {
           title: `${fileRejection.file.name} upload rejected`,
-          variant: 'error',
+          variant: SnackBarVariant.Error,
         });
       });
     },