From 2a1ea326d20edf6fdfceabc304aca310a34307d7 Mon Sep 17 00:00:00 2001 From: Marie <51697796+ijreilly@users.noreply.github.com> Date: Mon, 27 May 2024 12:15:57 +0200 Subject: [PATCH] Fix SnackBar visual (#5569) cf https://discord.com/channels/1130383047699738754/1243478998810497054 --- .../activities/table/components/CommentChip.tsx | 2 +- .../snack-bar-manager/components/SnackBar.tsx | 1 + .../input/components/FieldTextAreaOverlay.tsx | 2 +- .../button/components/FloatingIconButton.tsx | 6 ++---- .../layout/dropdown/components/DropdownMenu.tsx | 6 ++---- packages/twenty-ui/src/theme/constants/Blur.ts | 5 ----- .../twenty-ui/src/theme/constants/BlurDark.ts | 5 +++++ .../twenty-ui/src/theme/constants/BlurLight.ts | 5 +++++ .../src/theme/constants/OverlayBackground.ts | 2 +- .../twenty-ui/src/theme/constants/ThemeCommon.ts | 16 ---------------- .../twenty-ui/src/theme/constants/ThemeDark.ts | 3 +++ .../twenty-ui/src/theme/constants/ThemeLight.ts | 2 ++ packages/twenty-ui/src/theme/index.ts | 3 ++- 13 files changed, 25 insertions(+), 33 deletions(-) delete mode 100644 packages/twenty-ui/src/theme/constants/Blur.ts create mode 100644 packages/twenty-ui/src/theme/constants/BlurDark.ts create mode 100644 packages/twenty-ui/src/theme/constants/BlurLight.ts diff --git a/packages/twenty-front/src/modules/activities/table/components/CommentChip.tsx b/packages/twenty-front/src/modules/activities/table/components/CommentChip.tsx index 72166e3d2..e2757c7bc 100644 --- a/packages/twenty-front/src/modules/activities/table/components/CommentChip.tsx +++ b/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}; diff --git a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx b/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx index 83a634cb2..a603be570 100644 --- a/packages/twenty-front/src/modules/ui/feedback/snack-bar-manager/components/SnackBar.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/ui/field/input/components/FieldTextAreaOverlay.tsx b/packages/twenty-front/src/modules/ui/field/input/components/FieldTextAreaOverlay.tsx index 63cc48c51..3f88d01d8 100644 --- a/packages/twenty-front/src/modules/ui/field/input/components/FieldTextAreaOverlay.tsx +++ b/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; diff --git a/packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButton.tsx b/packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButton.tsx index 9e0b566fc..f4122a93c 100644 --- a/packages/twenty-front/src/modules/ui/input/button/components/FloatingIconButton.tsx +++ b/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 }) => 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 480405667..1ed1b3557 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 @@ -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 diff --git a/packages/twenty-ui/src/theme/constants/Blur.ts b/packages/twenty-ui/src/theme/constants/Blur.ts deleted file mode 100644 index b881a44ec..000000000 --- a/packages/twenty-ui/src/theme/constants/Blur.ts +++ /dev/null @@ -1,5 +0,0 @@ -export const BLUR = { - light: 'blur(6px)', - medium: 'blur(12px)', - strong: 'blur(20px)', -}; diff --git a/packages/twenty-ui/src/theme/constants/BlurDark.ts b/packages/twenty-ui/src/theme/constants/BlurDark.ts new file mode 100644 index 000000000..84129053f --- /dev/null +++ b/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%)', +}; diff --git a/packages/twenty-ui/src/theme/constants/BlurLight.ts b/packages/twenty-ui/src/theme/constants/BlurLight.ts new file mode 100644 index 000000000..4661f2f39 --- /dev/null +++ b/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%)', +}; diff --git a/packages/twenty-ui/src/theme/constants/OverlayBackground.ts b/packages/twenty-ui/src/theme/constants/OverlayBackground.ts index b8c55a5ab..af98f2f78 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(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}; `; diff --git a/packages/twenty-ui/src/theme/constants/ThemeCommon.ts b/packages/twenty-ui/src/theme/constants/ThemeCommon.ts index 8c450fb87..442a1c076 100644 --- a/packages/twenty-ui/src/theme/constants/ThemeCommon.ts +++ b/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(' '), diff --git a/packages/twenty-ui/src/theme/constants/ThemeDark.ts b/packages/twenty-ui/src/theme/constants/ThemeDark.ts index 248256e7d..b77613126 100644 --- a/packages/twenty-ui/src/theme/constants/ThemeDark.ts +++ b/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, diff --git a/packages/twenty-ui/src/theme/constants/ThemeLight.ts b/packages/twenty-ui/src/theme/constants/ThemeLight.ts index 11b4d111c..cb89370c7 100644 --- a/packages/twenty-ui/src/theme/constants/ThemeLight.ts +++ b/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, diff --git a/packages/twenty-ui/src/theme/index.ts b/packages/twenty-ui/src/theme/index.ts index 4f603f646..2d98d81f6 100644 --- a/packages/twenty-ui/src/theme/index.ts +++ b/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';