Update backdrop-filter in OverlayBackground.ts (#4436)

* Update backdrop-filter in OverlayBackground.ts

* Fix backdrop-filter in OverlayBackground.ts

* Update opacity of menu item, to be constantly 0

* Fixes

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BackgroundDark.ts

@@ -19,6 +19,7 @@ export const BACKGROUND_DARK = {
     light: RGBA(GRAY_SCALE.gray0, 0.06),
     lighter: RGBA(GRAY_SCALE.gray0, 0.03),
     danger: RGBA(COLOR.red, 0.08),
+    forBackdropFilter: RGBA(GRAY_SCALE.gray80, 0.5),
   },
   overlay: RGBA(GRAY_SCALE.gray80, 0.8),
   radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BackgroundLight.ts

@@ -19,6 +19,7 @@ export const BACKGROUND_LIGHT = {
     light: RGBA(GRAY_SCALE.gray100, 0.04),
     lighter: RGBA(GRAY_SCALE.gray100, 0.02),
     danger: RGBA(COLOR.red, 0.08),
+    forBackdropFilter: RGBA(GRAY_SCALE.gray10, 0.5),
   },
   overlay: RGBA(GRAY_SCALE.gray80, 0.8),
   radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,

packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/OverlayBackground.ts

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

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

@@ -4,8 +4,13 @@ const StyledDropdownMenu = styled.div<{
   disableBlur?: boolean;
   width?: `${string}px` | `${number}%` | 'auto' | number;
 }>`
-  backdrop-filter: ${({ disableBlur }) => (disableBlur ? 'none' : 'blur(8px)')};
+  backdrop-filter: ${({ disableBlur }) =>
-  background: ${({ theme }) => theme.background.transparent.secondary};
+    disableBlur
+      ? 'none'
+      : 'blur(12px) saturate(200%) contrast(50%) brightness(130%)'};
+
+  background: ${({ theme }) => theme.background.transparent.forBackdropFilter};
+
   border: 1px solid ${({ theme }) => theme.border.color.medium};
   border-radius: ${({ theme }) => theme.border.radius.md};
 

packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx

@@ -16,10 +16,6 @@ export const StyledMenuItemBase = styled.li<MenuItemBaseProps>`
 
   align-items: center;
 
-  background: ${({ isKeySelected, theme }) =>
-    isKeySelected
-      ? theme.background.transparent.light
-      : theme.background.secondary};
   border-radius: ${({ theme }) => theme.border.radius.sm};
   cursor: pointer;
 
@@ -108,7 +104,6 @@ export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{
   isMenuOpen: boolean;
 }>`
   & .hoverable-buttons {
-    opacity: ${({ isMenuOpen }) => (isMenuOpen ? 1 : 0)};
     pointer-events: none;
     position: fixed;
     right: ${({ theme }) => theme.spacing(2)};
@@ -117,7 +112,6 @@ export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{
 
   &:hover {
     & .hoverable-buttons {
-      opacity: 1;
       pointer-events: auto;
       position: static;
     }

packages/twenty-front/src/modules/ui/theme/constants/BackgroundDark.ts

@@ -20,6 +20,7 @@ export const BACKGROUND_DARK = {
     light: RGBA(GRAY_SCALE.gray0, 0.06),
     lighter: RGBA(GRAY_SCALE.gray0, 0.03),
     danger: RGBA(COLOR.red, 0.08),
+    forBackdropFilter: RGBA(GRAY_SCALE.gray80, 0.5),
   },
   overlay: RGBA(GRAY_SCALE.gray80, 0.8),
   radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,

packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts

@@ -20,6 +20,7 @@ export const BACKGROUND_LIGHT = {
     light: RGBA(GRAY_SCALE.gray100, 0.04),
     lighter: RGBA(GRAY_SCALE.gray100, 0.02),
     danger: RGBA(COLOR.red, 0.08),
+    forBackdropFilter: RGBA(GRAY_SCALE.gray10, 0.5),
   },
   overlay: RGBA(GRAY_SCALE.gray80, 0.8),
   radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,

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

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

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

@@ -20,6 +20,7 @@ export const BACKGROUND_DARK = {
     light: RGBA(GRAY_SCALE.gray0, 0.06),
     lighter: RGBA(GRAY_SCALE.gray0, 0.03),
     danger: RGBA(COLOR.red, 0.08),
+    forBackdropFilter: RGBA(GRAY_SCALE.gray80, 0.5),
   },
   overlay: RGBA(GRAY_SCALE.gray80, 0.8),
   radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,

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

@@ -20,6 +20,7 @@ export const BACKGROUND_LIGHT = {
     light: RGBA(GRAY_SCALE.gray100, 0.04),
     lighter: RGBA(GRAY_SCALE.gray100, 0.02),
     danger: RGBA(COLOR.red, 0.08),
+    forBackdropFilter: RGBA(GRAY_SCALE.gray10, 0.5),
   },
   overlay: RGBA(GRAY_SCALE.gray80, 0.8),
   radialGradient: `radial-gradient(50% 62.62% at 50% 0%, #505050 0%, ${GRAY_SCALE.gray60} 100%)`,

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(8px);
+  backdrop-filter: blur(12px) saturate(200%) contrast(50%) brightness(130%);
-  background: ${props.theme.background.transparent.secondary};
+  background: ${props.theme.background.transparent.forBackdropFilter};
   box-shadow: ${props.theme.boxShadow.strong};
 `;