From 878efb4062caa43f2a5e606e560b9f4216ecb33f Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Fri, 15 Mar 2024 17:16:10 +0100 Subject: [PATCH] Fixes --- .../options/modules/ui/theme/constants/BackgroundDark.ts | 1 + .../modules/ui/theme/constants/BackgroundLight.ts | 1 + .../modules/ui/theme/constants/OverlayBackground.ts | 4 ++-- .../ui/layout/dropdown/components/DropdownMenu.tsx | 9 +++++++-- .../internals/components/StyledMenuItemBase.tsx | 6 ------ .../src/modules/ui/theme/constants/BackgroundDark.ts | 1 + .../src/modules/ui/theme/constants/BackgroundLight.ts | 1 + .../src/modules/ui/theme/constants/OverlayBackground.ts | 2 +- packages/twenty-ui/src/theme/constants/BackgroundDark.ts | 1 + .../twenty-ui/src/theme/constants/BackgroundLight.ts | 1 + .../twenty-ui/src/theme/constants/OverlayBackground.ts | 4 ++-- 11 files changed, 18 insertions(+), 13 deletions(-) diff --git a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BackgroundDark.ts b/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BackgroundDark.ts index 5a7802dfb287..d4687782b729 100644 --- a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BackgroundDark.ts +++ b/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%)`, diff --git a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BackgroundLight.ts b/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BackgroundLight.ts index a096887d16ba..e72ff80f98f7 100644 --- a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/BackgroundLight.ts +++ b/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%)`, diff --git a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/OverlayBackground.ts b/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/OverlayBackground.ts index 50fe3a0ef8db..e23e08f33d79 100644 --- a/packages/twenty-chrome-extension/src/options/modules/ui/theme/constants/OverlayBackground.ts +++ b/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); - background: ${props.theme.background.transparent.secondary}; + backdrop-filter: blur(12px) saturate(200%) contrast(50%) brightness(130%); + background: ${props.theme.background.transparent.forBackdropFilter}; box-shadow: ${props.theme.boxShadow.strong}; `; diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx index 8dc52fabee06..d7b910460f08 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenu.tsx +++ b/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)')}; - background: ${({ theme }) => theme.background.transparent.secondary}; + backdrop-filter: ${({ disableBlur }) => + 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}; diff --git a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx index 5bcf5bd0d9c7..a3e91a8807cb 100644 --- a/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx +++ b/packages/twenty-front/src/modules/ui/navigation/menu-item/internals/components/StyledMenuItemBase.tsx @@ -16,10 +16,6 @@ export const StyledMenuItemBase = styled.li` 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: 0; pointer-events: none; position: fixed; right: ${({ theme }) => theme.spacing(2)}; @@ -117,7 +112,6 @@ export const StyledHoverableMenuItemBase = styled(StyledMenuItemBase)<{ &:hover { & .hoverable-buttons { - opacity: 0; pointer-events: auto; position: static; } diff --git a/packages/twenty-front/src/modules/ui/theme/constants/BackgroundDark.ts b/packages/twenty-front/src/modules/ui/theme/constants/BackgroundDark.ts index c5204dbbaf33..e91329882d07 100644 --- a/packages/twenty-front/src/modules/ui/theme/constants/BackgroundDark.ts +++ b/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%)`, diff --git a/packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts b/packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts index 3247f5f9fbf5..e78f8e6bb5cc 100644 --- a/packages/twenty-front/src/modules/ui/theme/constants/BackgroundLight.ts +++ b/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%)`, diff --git a/packages/twenty-front/src/modules/ui/theme/constants/OverlayBackground.ts b/packages/twenty-front/src/modules/ui/theme/constants/OverlayBackground.ts index 083133298ebd..25bcbe4493fe 100644 --- a/packages/twenty-front/src/modules/ui/theme/constants/OverlayBackground.ts +++ b/packages/twenty-front/src/modules/ui/theme/constants/OverlayBackground.ts @@ -4,6 +4,6 @@ import { ThemeType } from './ThemeLight'; export const OVERLAY_BACKGROUND = (props: { theme: ThemeType }) => css` 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}; `; diff --git a/packages/twenty-ui/src/theme/constants/BackgroundDark.ts b/packages/twenty-ui/src/theme/constants/BackgroundDark.ts index c9aa752aa99d..299edc7e7501 100644 --- a/packages/twenty-ui/src/theme/constants/BackgroundDark.ts +++ b/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%)`, diff --git a/packages/twenty-ui/src/theme/constants/BackgroundLight.ts b/packages/twenty-ui/src/theme/constants/BackgroundLight.ts index e36c08281270..ff2475a49cbc 100644 --- a/packages/twenty-ui/src/theme/constants/BackgroundLight.ts +++ b/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%)`, diff --git a/packages/twenty-ui/src/theme/constants/OverlayBackground.ts b/packages/twenty-ui/src/theme/constants/OverlayBackground.ts index 379d66ae76e9..a61aa50fe57c 100644 --- a/packages/twenty-ui/src/theme/constants/OverlayBackground.ts +++ b/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); - background: ${props.theme.background.transparent.secondary}; + backdrop-filter: blur(12px) saturate(200%) contrast(50%) brightness(130%); + background: ${props.theme.background.transparent.forBackdropFilter}; box-shadow: ${props.theme.boxShadow.strong}; `;