Web: Components: save-cancel-buttons: Added theme support, moved styles to a separate file.

packages/asc-web-components/src/components/save-cancel-buttons/index.js

@@ -1,38 +1,9 @@
 import React from "react";
-import styled from "styled-components";
+
 import PropTypes from "prop-types";
 import Button from "../button";
 import Text from "../text";
-import { tablet } from "../../utils/device";
-
-const StyledSaveCancelButtons = styled.div`
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-  display: flex;
-  left: 0;
-  padding: 8px 24px 8px 16px;
-  justify-content: space-between;
-  box-sizing: border-box;
-  align-items: center;
-
-  .save-button {
-    margin-right: 8px;
-  }
-
-  .unsaved-changes {
-    color: #a3a9ae;
-  }
-
-  @media ${tablet} {
-    justify-content: flex-end;
-    position: fixed;
-
-    .unsaved-changes {
-      display: none;
-    }
-  }
-`;
+import StyledSaveCancelButtons from "./styled-save-cancel-buttons";
 
 const ButtonKeys = Object.freeze({
   enter: 13,

packages/asc-web-components/src/components/save-cancel-buttons/styled-save-cancel-buttons.js

@@ -0,0 +1,37 @@
+import styled from "styled-components";
+
+import { Base } from "../../themes";
+import { tablet } from "../../utils/device";
+
+const StyledSaveCancelButtons = styled.div`
+  display: flex;
+  position: absolute;
+  justify-content: space-between;
+  box-sizing: border-box;
+  align-items: center;
+
+  bottom: ${(props) => props.theme.saveCancelButtons.bottom};
+  width: ${(props) => props.theme.saveCancelButtons.width};
+
+  left: ${(props) => props.theme.saveCancelButtons.left};
+  padding: ${(props) => props.theme.saveCancelButtons.padding};
+
+  .save-button {
+    margin-right: ${(props) => props.theme.saveCancelButtons.marginRight};
+  }
+
+  .unsaved-changes {
+    color: ${(props) => props.theme.saveCancelButtons.unsavedColor};
+  }
+
+  @media ${tablet} {
+    justify-content: flex-end;
+    position: fixed;
+
+    .unsaved-changes {
+      display: none;
+    }
+  }
+`;
+StyledSaveCancelButtons.defaultProps = { theme: Base };
+export default StyledSaveCancelButtons;

packages/asc-web-components/src/themes/base.js

@@ -200,6 +200,16 @@ const Base = {
     color: black,
   },
 
+  saveCancelButtons: {
+    bottom: "0",
+    width: "100%",
+    left: "0",
+    padding: "8px 24px 8px 16px",
+    marginRight: "8px",
+
+    unsavedColor: gray,
+  },
+
   selectedItem: {
     background: grayLight,
     border: `1px solid ${globalColors.grayLightMid}`,