From da8154cfd0928617b142c7a85c4bf0aebeb9ecae Mon Sep 17 00:00:00 2001
From: TatianaLopaeva <talopaeva@gmail.com>
Date: Wed, 10 Feb 2021 11:00:17 +0300
Subject: [PATCH] Web: Components: help-button: Added theme support, moved
 styles to a separate file.

---
 .../src/components/help-button/index.js       | 29 ++--------------
 .../help-button/styled-help-button.js         | 33 +++++++++++++++++++
 .../asc-web-components/src/themes/base.js     | 12 +++++++
 3 files changed, 47 insertions(+), 27 deletions(-)
 create mode 100644 packages/asc-web-components/src/components/help-button/styled-help-button.js

diff --git a/packages/asc-web-components/src/components/help-button/index.js b/packages/asc-web-components/src/components/help-button/index.js
index e60c77c66a..e072721680 100644
--- a/packages/asc-web-components/src/components/help-button/index.js
+++ b/packages/asc-web-components/src/components/help-button/index.js
@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+
 import IconButton from "../icon-button";
 import Tooltip from "../tooltip";
 import { handleAnyClick } from "../../utils/event";
@@ -9,33 +10,7 @@ import { desktop } from "../../utils/device";
 import Backdrop from "../backdrop";
 import Heading from "../heading";
 import throttle from "lodash/throttle";
-import styled from "styled-components";
-
-const Content = styled.div`
-  box-sizing: border-box;
-  position: relative;
-  width: 100%;
-  background-color: #fff;
-  padding: 0 16px 16px;
-
-  .header {
-    max-width: 500px;
-    margin: 0;
-    line-height: 56px;
-    font-weight: 700;
-  }
-`;
-
-const HeaderContent = styled.div`
-  display: flex;
-  align-items: center;
-  border-bottom: 1px solid #dee2e6;
-`;
-
-const Body = styled.div`
-  position: relative;
-  padding: 16px 0;
-`;
+import { Content, HeaderContent, Body } from "./styled-help-button";
 
 class HelpButton extends React.Component {
   constructor(props) {
diff --git a/packages/asc-web-components/src/components/help-button/styled-help-button.js b/packages/asc-web-components/src/components/help-button/styled-help-button.js
new file mode 100644
index 0000000000..2224288361
--- /dev/null
+++ b/packages/asc-web-components/src/components/help-button/styled-help-button.js
@@ -0,0 +1,33 @@
+import styled from "styled-components";
+import { Base } from "../../themes";
+
+const Content = styled.div`
+  box-sizing: border-box;
+  position: relative;
+  width: ${(props) => props.theme.helpButton.width};
+  background-color: ${(props) => props.theme.helpButton.backgroundColor};
+  padding: ${(props) => props.theme.helpButton.padding};
+
+  .header {
+    max-width: ${(props) => props.theme.helpButton.maxWidth};
+    margin: ${(props) => props.theme.helpButton.margin};
+    line-height: ${(props) => props.theme.helpButton.lineHeight};
+    font-weight: ${(props) => props.theme.helpButton.fontWeight};
+  }
+`;
+Content.defaultProps = { theme: Base };
+
+const HeaderContent = styled.div`
+  display: flex;
+  align-items: center;
+  border-bottom: ${(props) => props.theme.helpButton.borderBottom};
+`;
+HeaderContent.defaultProps = { theme: Base };
+
+const Body = styled.div`
+  position: relative;
+  padding: ${(props) => props.theme.helpButton.bodyPadding};
+`;
+Body.defaultProps = { theme: Base };
+
+export { Content, HeaderContent, Body };
diff --git a/packages/asc-web-components/src/themes/base.js b/packages/asc-web-components/src/themes/base.js
index 8c48587cb4..6b57298f52 100644
--- a/packages/asc-web-components/src/themes/base.js
+++ b/packages/asc-web-components/src/themes/base.js
@@ -142,6 +142,18 @@ const Base = {
     },
   },
 
+  helpButton: {
+    width: "100%",
+    backgroundColor: white,
+    maxWidth: "500px",
+    margin: "0",
+    lineHeight: "56px",
+    fontWeight: "700",
+    borderBottom: `1px solid ${globalColors.pattensBlue}`,
+    padding: "0 16px 16px",
+    bodyPadding: "16px 0",
+  },
+
   mainButton: {
     backgroundColor: orangeMain,
     disableBackgroundColor: orangeDisabled,