Client: Replaced blur to blackout

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;

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<BackdropProps & { needBackground: boolean }>`
     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;

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`

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),
     },
   }),

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;

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,

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,

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",