Fix SnackBar visual (#5569)

cf https://discord.com/channels/1130383047699738754/1243478998810497054

packages/twenty-front/src/modules/activities/table/components/CommentChip.tsx

@@ -9,7 +9,7 @@ export type CommentChipProps = {
 
 const StyledChip = styled.div`
   align-items: center;
-  backdrop-filter: blur(12px) saturate(200%) contrast(50%) brightness(130%);
+  backdrop-filter: ${({ theme }) => theme.blur.medium};
 
   background: ${({ theme }) => theme.background.transparent.primary};
   border-radius: ${({ theme }) => theme.border.radius.md};

packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx

@@ -50,6 +50,7 @@ const StyledContainer = styled.div`
   padding: ${({ theme }) => theme.spacing(2)};
   position: relative;
   width: 296px;
+  margin-top: ${({ theme }) => theme.spacing(2)};
 
   @media (max-width: ${MOBILE_VIEWPORT}px) {
     border-radius: 0;

packages/twenty-front/src/modules/ui/field/input/components/FieldTextAreaOverlay.tsx

@@ -3,7 +3,7 @@ import styled from '@emotion/styled';
 const StyledFieldTextAreaOverlay = styled.div`
   border-radius: ${({ theme }) => theme.border.radius.sm};
   background: ${({ theme }) => theme.background.transparent.secondary};
-  backdrop-filter: blur(12px) saturate(200%) contrast(50%) brightness(130%);
+  backdrop-filter: ${({ theme }) => theme.blur.medium};
   align-items: center;
   display: flex;
   height: 32px;

packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButton.tsx

@@ -30,10 +30,8 @@ const StyledButton = styled.button<
   >
 >`
   align-items: center;
-  backdrop-filter: ${({ applyBlur }) =>
-    applyBlur
-      ? 'blur(12px) saturate(200%) contrast(50%) brightness(130%)'
-      : 'none'};
+  backdrop-filter: ${({ theme, applyBlur }) =>
+    applyBlur ? theme.blur.medium : 'none'};
   background: ${({ theme, isActive }) =>
     isActive ? theme.background.transparent.medium : theme.background.primary};
   border: ${({ focus, theme }) =>

packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx

@@ -5,10 +5,8 @@ const StyledDropdownMenu = styled.div<{
   disableBorder?: boolean;
   width?: `${string}px` | `${number}%` | 'auto' | number;
 }>`
-  backdrop-filter: ${({ disableBlur }) =>
-    disableBlur
-      ? 'none'
-      : 'blur(12px) saturate(200%) contrast(50%) brightness(130%)'};
+  backdrop-filter: ${({ theme, disableBlur }) =>
+    disableBlur ? 'none' : theme.blur.medium};
 
   background: ${({ theme, disableBlur }) =>
     disableBlur

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

@@ -1,5 +0,0 @@
-export const BLUR = {
-  light: 'blur(6px)',
-  medium: 'blur(12px)',
-  strong: 'blur(20px)',
-};

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

@@ -0,0 +1,5 @@
+export const BLUR_DARK = {
+  light: 'blur(6px) saturate(200%) contrast(100%) brightness(130%)',
+  medium: 'blur(12px) saturate(200%) contrast(100%) brightness(130%)',
+  strong: 'blur(20px) saturate(200%) contrast(100%) brightness(130%)',
+};

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

@@ -0,0 +1,5 @@
+export const BLUR_LIGHT = {
+  light: 'blur(6px) saturate(200%) contrast(50%) brightness(130%)',
+  medium: 'blur(12px) saturate(200%) contrast(50%) brightness(130%)',
+  strong: 'blur(20px) saturate(200%) contrast(50%) brightness(130%)',
+};

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

@@ -3,7 +3,7 @@ import { css } from '@emotion/react';
 import { ThemeType } from '..';
 
 export const OVERLAY_BACKGROUND = (props: { theme: ThemeType }) => css`
-  backdrop-filter: blur(12px) saturate(200%) contrast(50%) brightness(130%);
+  backdrop-filter: ${props.theme.blur.medium};
   background: ${props.theme.background.transparent.secondary};
   box-shadow: ${props.theme.boxShadow.strong};
 `;

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

@@ -1,6 +1,5 @@
 /* eslint-disable @nx/workspace-no-hardcoded-colors */
 import { ANIMATION } from './Animation';
-import { BLUR } from './Blur';
 import { COLOR } from './Colors';
 import { GRAY_SCALE } from './GrayScale';
 import { ICON } from './Icon';
@@ -13,22 +12,7 @@ export const THEME_COMMON = {
   icon: ICON,
   modal: MODAL,
   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,3 +1,5 @@
+import { BLUR_DARK } from '@ui/theme/constants/BlurDark';
+
 import { SNACK_BAR_DARK, ThemeType } from '..';
 
 import { ACCENT_DARK } from './AccentDark';
@@ -13,6 +15,7 @@ export const THEME_DARK: ThemeType = {
   ...{
     accent: ACCENT_DARK,
     background: BACKGROUND_DARK,
+    blur: BLUR_DARK,
     border: BORDER_DARK,
     boxShadow: BOX_SHADOW_DARK,
     font: FONT_DARK,

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

@@ -1,3 +1,4 @@
+import { BLUR_LIGHT } from '@ui/theme/constants/BlurLight';
 import { SNACK_BAR_LIGHT } from '@ui/theme/constants/SnackBarLight';
 
 import { ACCENT_LIGHT } from './AccentLight';
@@ -13,6 +14,7 @@ export const THEME_LIGHT = {
   ...{
     accent: ACCENT_LIGHT,
     background: BACKGROUND_LIGHT,
+    blur: BLUR_LIGHT,
     border: BORDER_LIGHT,
     boxShadow: BOX_SHADOW_LIGHT,
     font: FONT_LIGHT,

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

@@ -3,7 +3,8 @@ export * from './constants/AccentLight';
 export * from './constants/Animation';
 export * from './constants/BackgroundDark';
 export * from './constants/BackgroundLight';
-export * from './constants/Blur';
+export * from './constants/BlurDark';
+export * from './constants/BlurLight';
 export * from './constants/BorderCommon';
 export * from './constants/BorderDark';
 export * from './constants/BorderLight';