twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-24 12:34:10 +03:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* 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>
This commit is contained in:
Danil 2024-03-15 17:19:27 +01:00 committed by GitHub
parent 638a12c571
commit 235e71ca02
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
11 changed files with 19 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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%)`,

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

@ -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%)`,

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

@ -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};
`;

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

@ -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};

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

@ -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;
}

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

@ -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%)`,

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

@ -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%)`,

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

@ -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);
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};
`;

1
packages/twenty-ui/src/theme/constants/BackgroundDark.ts
View File

@ -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%)`,

1
packages/twenty-ui/src/theme/constants/BackgroundLight.ts
View File

@ -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%)`,

4
packages/twenty-ui/src/theme/constants/OverlayBackground.ts
View File

@ -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};
`;