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

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