Web:Common:FloatingButton: add support dark-theme

packages/asc-web-common/components/FloatingButton/StyledFloatingButton.js

@@ -1,12 +1,10 @@
-import styled, { keyframes, css } from "styled-components";
-
-const backgroundColor = "none";
-const color = "#2DA7DB";
+import Base from '@appserver/components/themes/base';
+import styled, { keyframes, css } from 'styled-components';
 
 const StyledCircleWrap = styled.div`
   width: 54px;
   height: 54px;
-  background: ${backgroundColor};
+  background: none;
   border-radius: 50%;
   cursor: pointer;
 `;
@@ -20,6 +18,8 @@ const rotate360 = keyframes`
   }
 `;
 
+StyledCircleWrap.defaultProps = { theme: Base };
+
 const StyledCircle = styled.div`
   .circle__mask,
   .circle__fill {
@@ -50,7 +50,7 @@ const StyledCircle = styled.div`
 
   .circle__mask .circle__fill {
     clip: rect(0px, 27px, 54px, 0px);
-    background-color: ${color};
+    background-color: ${(props) => props.theme.floatingButton.color};
   }
 
   .circle__mask.circle__full {
@@ -72,17 +72,26 @@ const StyledFloatingButton = styled.div`
   width: 48px;
   height: 48px;
   border-radius: 50%;
-  background: #fff;
-  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.13);
+  background: ${(props) => props.theme.floatingButton.backgroundColor};
+  box-shadow: ${(props) => props.theme.floatingButton.boxShadow};
   text-align: center;
   margin: 3px;
   position: absolute;
 `;
 
+StyledFloatingButton.defaultProps = { theme: Base };
+
 const IconBox = styled.div`
   padding-top: 12px;
+  svg {
+    path {
+      fill: ${(props) => props.theme.floatingButton.fill};
+    }
+  }
 `;
 
+IconBox.defaultProps = { theme: Base };
+
 const StyledAlertIcon = styled.div`
   position: absolute;
   width: 12px;
@@ -91,10 +100,4 @@ const StyledAlertIcon = styled.div`
   top: -10px;
 `;
 
-export {
-  StyledCircleWrap,
-  StyledCircle,
-  StyledFloatingButton,
-  StyledAlertIcon,
-  IconBox,
-};
+export { StyledCircleWrap, StyledCircle, StyledFloatingButton, StyledAlertIcon, IconBox };

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

@@ -1936,6 +1936,13 @@ const Base = {
       placeholderColor: "#a3a9ae",
     },
   },
+
+  floatingButton: {
+    backgroundColor: "#fff",
+    color: "#2DA7DB",
+    boxShadow: "0px 5px 20px rgba(0, 0, 0, 0.13)",
+    fill: "#A3A9AE",
+  },
 };
 
 export default Base;

packages/asc-web-components/themes/dark.js

@@ -1936,6 +1936,13 @@ const Dark = {
       placeholderColor: "#474747",
     },
   },
+
+  floatingButton: {
+    backgroundColor: "#e5e5e5",
+    color: "#292929",
+    boxShadow: "0px 12px 24px rgba(0, 0, 0, 0.12)",
+    fill: "#292929",
+  },
 };
 
 export default Dark;