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-ui/src/display/icon/components/TablerIcons.ts

@@ -133,6 +133,7 @@ export {
   IconSend,
   IconSettings,
   IconSortDescending,
+  IconSquareRoundedCheck,
   IconTable,
   IconTag,
   IconTags,

packages/twenty-ui/src/theme/constants/SnackBarCommon.ts

@@ -0,0 +1,21 @@
+import { MAIN_COLORS } from '@ui/theme/constants/MainColors';
+import { RGBA } from '@ui/theme/constants/Rgba';
+
+export const SNACK_BAR_COMMON = {
+  success: {
+    color: MAIN_COLORS.turquoise,
+    backgroundColor: RGBA(MAIN_COLORS.turquoise, 0.04),
+  },
+  error: {
+    color: MAIN_COLORS.red,
+    backgroundColor: RGBA(MAIN_COLORS.red, 0.04),
+  },
+  warning: {
+    color: MAIN_COLORS.orange,
+    backgroundColor: RGBA(MAIN_COLORS.orange, 0.04),
+  },
+  info: {
+    color: MAIN_COLORS.blue,
+    backgroundColor: RGBA(MAIN_COLORS.blue, 0.04),
+  },
+};

packages/twenty-ui/src/theme/constants/SnackBarDark.ts

@@ -0,0 +1,11 @@
+import { BACKGROUND_DARK } from '@ui/theme/constants/BackgroundDark';
+import { FONT_DARK } from '@ui/theme/constants/FontDark';
+import { SNACK_BAR_COMMON } from '@ui/theme/constants/SnackBarCommon';
+
+export const SNACK_BAR_DARK = {
+  ...SNACK_BAR_COMMON,
+  default: {
+    color: FONT_DARK.color.primary,
+    backgroundColor: BACKGROUND_DARK.transparent.light,
+  },
+};

packages/twenty-ui/src/theme/constants/SnackBarLight.ts

@@ -0,0 +1,11 @@
+import { BACKGROUND_LIGHT } from '@ui/theme/constants/BackgroundLight';
+import { FONT_LIGHT } from '@ui/theme/constants/FontLight';
+import { SNACK_BAR_COMMON } from '@ui/theme/constants/SnackBarCommon';
+
+export const SNACK_BAR_LIGHT = {
+  ...SNACK_BAR_COMMON,
+  default: {
+    color: FONT_LIGHT.color.primary,
+    backgroundColor: BACKGROUND_LIGHT.transparent.light,
+  },
+};

packages/twenty-ui/src/theme/constants/ThemeCommon.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @nx/workspace-no-hardcoded-colors */
 import { ANIMATION } from './Animation';
 import { BLUR } from './Blur';
 import { COLOR } from './Colors';
@@ -15,20 +14,6 @@ export const THEME_COMMON = {
   text: TEXT,
   blur: BLUR,
   animation: ANIMATION,
-  snackBar: {
-    success: {
-      background: '#16A26B',
-      color: '#D0F8E9',
-    },
-    error: {
-      background: '#B43232',
-      color: '#FED8D8',
-    },
-    info: {
-      background: COLOR.gray80,
-      color: GRAY_SCALE.gray0,
-    },
-  },
   spacingMultiplicator: 4,
   spacing: (...args: number[]) =>
     args.map((multiplicator) => `${multiplicator * 4}px`).join(' '),

packages/twenty-ui/src/theme/constants/ThemeDark.ts

@@ -1,4 +1,4 @@
-import { ThemeType } from '..';
+import { SNACK_BAR_DARK, ThemeType } from '..';
 
 import { ACCENT_DARK } from './AccentDark';
 import { BACKGROUND_DARK } from './BackgroundDark';
@@ -14,9 +14,10 @@ export const THEME_DARK: ThemeType = {
     accent: ACCENT_DARK,
     background: BACKGROUND_DARK,
     border: BORDER_DARK,
-    tag: TAG_DARK,
     boxShadow: BOX_SHADOW_DARK,
     font: FONT_DARK,
     name: 'dark',
+    snackBar: SNACK_BAR_DARK,
+    tag: TAG_DARK,
   },
 };

packages/twenty-ui/src/theme/constants/ThemeLight.ts

@@ -1,3 +1,5 @@
+import { SNACK_BAR_LIGHT } from '@ui/theme/constants/SnackBarLight';
+
 import { ACCENT_LIGHT } from './AccentLight';
 import { BACKGROUND_LIGHT } from './BackgroundLight';
 import { BORDER_LIGHT } from './BorderLight';
@@ -12,9 +14,10 @@ export const THEME_LIGHT = {
     accent: ACCENT_LIGHT,
     background: BACKGROUND_LIGHT,
     border: BORDER_LIGHT,
-    tag: TAG_LIGHT,
     boxShadow: BOX_SHADOW_LIGHT,
     font: FONT_LIGHT,
     name: 'light',
+    snackBar: SNACK_BAR_LIGHT,
+    tag: TAG_LIGHT,
   },
 };

packages/twenty-ui/src/theme/index.ts

@@ -23,6 +23,9 @@ export * from './constants/Modal';
 export * from './constants/OverlayBackground';
 export * from './constants/Rgba';
 export * from './constants/SecondaryColors';
+export * from './constants/SnackBarCommon';
+export * from './constants/SnackBarDark';
+export * from './constants/SnackBarLight';
 export * from './constants/TagDark';
 export * from './constants/TagLight';
 export * from './constants/Text';