From 445bf4224b384ee5f2786f1123fea5da091ed016 Mon Sep 17 00:00:00 2001 From: Alexey Safronov Date: Tue, 20 Aug 2024 15:16:21 +0400 Subject: [PATCH] Client: Replaced blur to blackout --- .../panels/InvitePanel/StyledInvitePanel.js | 1 - .../shared/components/backdrop/Backdrop.styled.ts | 7 +------ .../components/modal-dialog/ModalDialog.styled.ts | 8 -------- .../modal-dialog/sub-components/ModalBackdrop.tsx | 13 ------------- .../shared/components/section/Section.styled.ts | 1 - packages/shared/themes/base.ts | 7 ++++--- packages/shared/themes/dark.ts | 8 +++++--- packages/shared/themes/globalColors.ts | 3 +++ 8 files changed, 13 insertions(+), 35 deletions(-) diff --git a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js b/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js index 22e59aa6f5..25669afd61 100644 --- a/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js +++ b/packages/client/src/components/panels/InvitePanel/StyledInvitePanel.js @@ -56,7 +56,6 @@ const StyledInvitePanel = styled.div` height: auto; width: auto; background: ${(props) => props.theme.infoPanel.blurColor}; - backdrop-filter: blur(3px); z-index: 309; position: fixed; top: 0; diff --git a/packages/shared/components/backdrop/Backdrop.styled.ts b/packages/shared/components/backdrop/Backdrop.styled.ts index fc53887731..38aa834432 100644 --- a/packages/shared/components/backdrop/Backdrop.styled.ts +++ b/packages/shared/components/backdrop/Backdrop.styled.ts @@ -24,7 +24,7 @@ // content are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 // International. See the License terms at http://creativecommons.org/licenses/by-sa/4.0/legalcode -import styled, { css } from "styled-components"; +import styled from "styled-components"; import { Base } from "../../themes"; import { BackdropProps } from "./Backdrop.types"; @@ -33,11 +33,6 @@ const StyledBackdrop = styled.div` props.needBackground ? props.theme.backdrop.backgroundColor : props.theme.backdrop.unsetBackgroundColor}; - ${(props) => - props.needBackground && - css` - backdrop-filter: ${`blur(${props.theme.modalDialog.backdrop.blur}px)`}; - `}; display: ${(props) => (props.visible ? "block" : "none")}; height: 100vh; diff --git a/packages/shared/components/modal-dialog/ModalDialog.styled.ts b/packages/shared/components/modal-dialog/ModalDialog.styled.ts index 8e00d68c9a..123c4c98e2 100644 --- a/packages/shared/components/modal-dialog/ModalDialog.styled.ts +++ b/packages/shared/components/modal-dialog/ModalDialog.styled.ts @@ -49,14 +49,6 @@ const StyledModal = styled.div<{ modalSwipeOffset?: number; blur?: number }>` .loader-wrapper { padding: 0 16px 16px; } - - .modal-backdrop-active { - ${(props) => - props.blur && - css` - backdrop-filter: blur(${props.blur}px) !important; - `}; - } `; const Dialog = styled.div` diff --git a/packages/shared/components/modal-dialog/sub-components/ModalBackdrop.tsx b/packages/shared/components/modal-dialog/sub-components/ModalBackdrop.tsx index a279c3e69f..6399d742d4 100644 --- a/packages/shared/components/modal-dialog/sub-components/ModalBackdrop.tsx +++ b/packages/shared/components/modal-dialog/sub-components/ModalBackdrop.tsx @@ -31,17 +31,6 @@ import { TTheme } from "@docspace/shared/themes"; import { mobile } from "../../../utils"; import { ModalDialogBackdropProps } from "../ModalDialog.types"; -const backdropFilter = (props: { - theme: TTheme; - modalSwipeOffset?: number; -}) => { - const blur = props.theme.modalDialog.backdrop.blur; - const swipeOffset = props.modalSwipeOffset; - - if (!swipeOffset) return `blur(${blur}px)`; - return `blur(${blur + swipeOffset * (blur / 120)}px)`; -}; - const backdropBackground = (props: { theme: TTheme; modalSwipeOffset?: number; @@ -56,8 +45,6 @@ const backdropBackground = (props: { const StyledModalBackdrop = styled.div.attrs( (props: { theme: TTheme; modalSwipeOffset?: number; zIndex?: number }) => ({ style: { - backdropFilter: backdropFilter(props), - WebkitBackdropFilter: backdropFilter(props), background: backdropBackground(props), }, }), diff --git a/packages/shared/components/section/Section.styled.ts b/packages/shared/components/section/Section.styled.ts index 22d46a3db9..a4c1d92eb2 100644 --- a/packages/shared/components/section/Section.styled.ts +++ b/packages/shared/components/section/Section.styled.ts @@ -85,7 +85,6 @@ const StyledInfoPanelWrapper = styled.div.attrs(({ id }) => ({ height: auto; width: auto; background: ${(props) => props.theme.infoPanel.blurColor}; - backdrop-filter: blur(3px); z-index: 300; @media ${tablet} { z-index: 309; diff --git a/packages/shared/themes/base.ts b/packages/shared/themes/base.ts index 03758d9c8e..c409fb161a 100644 --- a/packages/shared/themes/base.ts +++ b/packages/shared/themes/base.ts @@ -29,7 +29,6 @@ import AvatarBaseReactSvgUrl from "PUBLIC_DIR/images/avatar.base.react.svg?url"; import { globalColors } from "./globalColors"; import { CommonTheme } from "./commonTheme"; import { DEFAULT_FONT_FAMILY } from "../constants"; -import { color } from "storybook-static/sb-manager/chunk-INSKDKQB"; export type TColorScheme = { id: number; @@ -92,6 +91,8 @@ const { darkRed, lightErrorStatus, + + blurLight, } = globalColors; export const getBaseTheme = () => { @@ -1337,7 +1338,7 @@ export const getBaseTheme = () => { }, backdrop: { - backgroundColor: "rgba(6, 22, 38, 0.2)", + backgroundColor: blurLight, unsetBackgroundColor: "unset", }, @@ -2069,7 +2070,7 @@ export const getBaseTheme = () => { sectionHeaderToggleBgActive: grayLight, backgroundColor: white, - blurColor: "rgba(6, 22, 38, 0.2)", + blurColor: blurLight, borderColor: grayLightMid, thumbnailBorderColor: grayLightMid, textColor: black, diff --git a/packages/shared/themes/dark.ts b/packages/shared/themes/dark.ts index 0e5ea72e49..5deec3296f 100644 --- a/packages/shared/themes/dark.ts +++ b/packages/shared/themes/dark.ts @@ -65,6 +65,8 @@ const { darkErrorStatus, charlestonGreen, outerSpace, + + blurDark, } = globalColors; const Dark: TTheme = { @@ -635,7 +637,7 @@ const Dark: TTheme = { r: 27, g: 27, b: 27, - a: 0.4, + a: 0.6, }, blur: 9, }, @@ -1305,7 +1307,7 @@ const Dark: TTheme = { }, backdrop: { - backgroundColor: "rgba(20, 20, 20, 0.8)", + backgroundColor: blurDark, unsetBackgroundColor: "unset", }, @@ -2041,7 +2043,7 @@ const Dark: TTheme = { sectionHeaderToggleBgActive: "#292929", backgroundColor: black, - blurColor: "rgba(20, 20, 20, 0.8)", + blurColor: blurDark, borderColor: "#474747", thumbnailBorderColor: grayLightMid, textColor: white, diff --git a/packages/shared/themes/globalColors.ts b/packages/shared/themes/globalColors.ts index e5b80a51ea..fffba8f6b1 100644 --- a/packages/shared/themes/globalColors.ts +++ b/packages/shared/themes/globalColors.ts @@ -47,6 +47,9 @@ export const globalColors = { lightHover: "#F3F4F4", veryDarkGrey: "#3D3D3D", + blurLight: "rgba(6, 22, 38, 0.2)", + blurDark: "rgba(27, 27, 27, 0.6)", + blueMain: "#2DA7DB", blueHover: "#3DB8EC", blueActive: "#1F97CA",