From ec0d32df21f87611c107e7b0844d4daa9bfedac0 Mon Sep 17 00:00:00 2001
From: TatianaLopaeva <talopaeva@gmail.com>
Date: Thu, 4 Feb 2021 12:28:04 +0300
Subject: [PATCH] Web: Components: backdrop:  Added theme into styles, added
 commonStyles, moved styles to a separate file.

---
 .../src/components/backdrop/index.js          | 14 +----------
 .../components/backdrop/styled-backdrop.js    | 24 +++++++++++++++++++
 .../asc-web-components/src/themes/base.js     |  6 +++--
 3 files changed, 29 insertions(+), 15 deletions(-)
 create mode 100644 packages/asc-web-components/src/components/backdrop/styled-backdrop.js

diff --git a/packages/asc-web-components/src/components/backdrop/index.js b/packages/asc-web-components/src/components/backdrop/index.js
index 95d3356194..d3014359f6 100644
--- a/packages/asc-web-components/src/components/backdrop/index.js
+++ b/packages/asc-web-components/src/components/backdrop/index.js
@@ -1,19 +1,7 @@
 import React from "react";
 import PropTypes from "prop-types";
-import styled from "styled-components";
 
-const StyledBackdrop = styled.div`
-  background-color: ${(props) =>
-    props.needBackground ? "rgba(6, 22, 38, 0.1)" : "unset"};
-  display: ${(props) => (props.visible ? "block" : "none")};
-  height: 100vh;
-  position: fixed;
-  width: 100vw;
-  z-index: ${(props) => props.zIndex};
-  left: 0;
-  top: 0;
-  cursor: ${(props) => (props.needBackground ? "pointer" : "default")}; ;
-`;
+import StyledBackdrop from "./styled-backdrop";
 
 class Backdrop extends React.Component {
   constructor(props) {
diff --git a/packages/asc-web-components/src/components/backdrop/styled-backdrop.js b/packages/asc-web-components/src/components/backdrop/styled-backdrop.js
new file mode 100644
index 0000000000..eba094903e
--- /dev/null
+++ b/packages/asc-web-components/src/components/backdrop/styled-backdrop.js
@@ -0,0 +1,24 @@
+import styled from "styled-components";
+
+import { Base } from "../../themes";
+
+const StyledBackdrop = styled.div`
+  background-color: ${(props) =>
+    props.needBackground
+      ? props.theme.backdrop.backgroundColor
+      : props.theme.backdrop.unsetBackgroundColor};
+  display: ${(props) => (props.visible ? "block" : "none")};
+  height: 100vh;
+  position: fixed;
+  width: 100vw;
+  z-index: ${(props) => props.zIndex};
+  left: 0;
+  top: 0;
+  cursor: ${(props) => (props.needBackground ? "pointer" : "default")}; ;
+`;
+
+StyledBackdrop.defaultProps = {
+  theme: Base,
+};
+
+export default StyledBackdrop;
diff --git a/packages/asc-web-components/src/themes/base.js b/packages/asc-web-components/src/themes/base.js
index a60c01a2d3..d70fe896da 100644
--- a/packages/asc-web-components/src/themes/base.js
+++ b/packages/asc-web-components/src/themes/base.js
@@ -455,10 +455,12 @@ const Base = {
       big: "82px",
       max: "160px",
     },
-
   },
 
-  // backdrop: { backgroundColor: "rgba(0, 0, 0, 0.3)" },
+  backdrop: {
+    backgroundColor: "rgba(6, 22, 38, 0.1)",
+    unsetBackgroundColor: "unset",
+  },
 
   // loader: {
   //   color: shuttleGrey,