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