From d96a3140dc69d6c658c15e50858b6079593d044a Mon Sep 17 00:00:00 2001
From: gazizova-vlada <vlada.gazizova@onlyoffice.com>
Date: Mon, 15 Aug 2022 10:38:46 +0300
Subject: [PATCH] Web:Common:Added FloatingButtonTheme.

---
 .../components/ColorTheme/ColorTheme.js       |  4 +++
 .../common/components/ColorTheme/constants.js |  1 +
 .../ColorTheme/styled/floatingButton.js       | 26 +++++++++++++++++++
 .../components/ColorTheme/styled/index.js     |  2 ++
 .../FloatingButton/FloatingButton.js          | 16 +++++++++---
 .../FloatingButton/StyledFloatingButton.js    |  4 ---
 6 files changed, 45 insertions(+), 8 deletions(-)
 create mode 100644 packages/common/components/ColorTheme/styled/floatingButton.js

diff --git a/packages/common/components/ColorTheme/ColorTheme.js b/packages/common/components/ColorTheme/ColorTheme.js
index 8d4d4ff7e9..ec000c076b 100644
--- a/packages/common/components/ColorTheme/ColorTheme.js
+++ b/packages/common/components/ColorTheme/ColorTheme.js
@@ -23,6 +23,7 @@ import {
   ComboButtonTheme,
   LinkForgotPasswordTheme,
   LoadingButtonTheme,
+  FloatingButtonTheme,
 } from "./styled";
 import { ThemeType } from "./constants";
 
@@ -92,6 +93,9 @@ const ColorTheme = forwardRef((props, ref) => {
     case ThemeType.LoadingButton: {
       return <LoadingButtonTheme ref={ref} {...props} />;
     }
+    case ThemeType.FloatingButton: {
+      return <FloatingButtonTheme ref={ref} {...props} />;
+    }
   }
 });
 
diff --git a/packages/common/components/ColorTheme/constants.js b/packages/common/components/ColorTheme/constants.js
index 3e228cfa96..4f23576ede 100644
--- a/packages/common/components/ColorTheme/constants.js
+++ b/packages/common/components/ColorTheme/constants.js
@@ -20,4 +20,5 @@ export const ThemeType = {
   ComboButton: "comboButton",
   LinkForgotPassword: "linkForgotPassword",
   LoadingButton: "loadingButton",
+  FloatingButton: "floatingButton",
 };
diff --git a/packages/common/components/ColorTheme/styled/floatingButton.js b/packages/common/components/ColorTheme/styled/floatingButton.js
new file mode 100644
index 0000000000..6a5dc9784c
--- /dev/null
+++ b/packages/common/components/ColorTheme/styled/floatingButton.js
@@ -0,0 +1,26 @@
+import styled, { css } from "styled-components";
+import {
+  StyledCircleWrap,
+  StyledFloatingButton,
+} from "@docspace/common/components/FloatingButton/StyledFloatingButton";
+import Base from "@docspace/components/themes/base";
+
+const getDefaultStyles = ({ currentColorScheme, color, theme }) => css`
+  background: ${color
+    ? color
+    : theme.isBase === true
+    ? currentColorScheme.accentColor
+    : theme.floatingButton.backgroundColor};
+
+  ${StyledFloatingButton} {
+    background: ${color
+      ? color
+      : theme.isBase === true
+      ? currentColorScheme.accentColor
+      : theme.floatingButton.backgroundColor};
+  }
+`;
+
+StyledCircleWrap.defaultProps = { theme: Base };
+
+export default styled(StyledCircleWrap)(getDefaultStyles);
diff --git a/packages/common/components/ColorTheme/styled/index.js b/packages/common/components/ColorTheme/styled/index.js
index 77d1a831d7..22da31732d 100644
--- a/packages/common/components/ColorTheme/styled/index.js
+++ b/packages/common/components/ColorTheme/styled/index.js
@@ -39,3 +39,5 @@ export { default as ComboButtonTheme } from "./comboButton";
 export { default as LinkForgotPasswordTheme } from "./linkForgotPassword";
 
 export { default as LoadingButtonTheme } from "./loadingButton";
+
+export { default as FloatingButtonTheme } from "./floatingButton";
diff --git a/packages/common/components/FloatingButton/FloatingButton.js b/packages/common/components/FloatingButton/FloatingButton.js
index 72c54134d9..c26bfda39c 100644
--- a/packages/common/components/FloatingButton/FloatingButton.js
+++ b/packages/common/components/FloatingButton/FloatingButton.js
@@ -22,20 +22,26 @@ import ButtonPlusIcon from "../../../../public/images/actions.button.plus.react.
 import ButtonMinusIcon from "../../../../public/images/actions.button.minus.react.svg";
 import CloseIcon from "../../../../public/images/close-icon.react.svg";
 
+import { ColorTheme, ThemeType } from "@docspace/common/components/ColorTheme";
+
 const StyledButtonAlertIcon = styled(ButtonAlertIcon)`
   ${commonIconsStyles}
 `;
 
 const Delay = 1000;
-const FloatingButton = ({ id, className, style, ...rest }) => {
+const FloatingButton = (props) => {
   const {
+    id,
+    className,
+    style,
     icon,
     alert,
     percent,
     onClick,
     color,
     clearUploadedFilesHistory,
-  } = rest;
+    ...rest
+  } = props;
 
   const [animationCompleted, setAnimationCompleted] = useState(false);
 
@@ -58,7 +64,9 @@ const FloatingButton = ({ id, className, style, ...rest }) => {
 
   return (
     <StyledFloatingButtonWrapper>
-      <StyledCircleWrap
+      <ColorTheme
+        {...props}
+        type={ThemeType.FloatingButton}
         color={color}
         id={id}
         className={`${className} not-selectable`}
@@ -102,7 +110,7 @@ const FloatingButton = ({ id, className, style, ...rest }) => {
             </StyledAlertIcon>
           </StyledFloatingButton>
         </StyledCircle>
-      </StyledCircleWrap>
+      </ColorTheme>
       {clearUploadedFilesHistory && percent === 100 && (
         <CloseIcon
           className="layout-progress-bar_close-icon"
diff --git a/packages/common/components/FloatingButton/StyledFloatingButton.js b/packages/common/components/FloatingButton/StyledFloatingButton.js
index 23c9a97bb8..f2c265b148 100644
--- a/packages/common/components/FloatingButton/StyledFloatingButton.js
+++ b/packages/common/components/FloatingButton/StyledFloatingButton.js
@@ -47,8 +47,6 @@ const StyledCircleWrap = styled.div`
   z-index: 500;
   width: 48px;
   height: 48px;
-  background: ${(props) =>
-    props.color ? props.color : props.theme.floatingButton.backgroundColor};
   border-radius: 50%;
   cursor: pointer;
   box-shadow: ${(props) => props.theme.floatingButton.boxShadow};
@@ -129,8 +127,6 @@ const StyledFloatingButton = styled.div`
   width: 38px;
   height: 38px;
   border-radius: 50%;
-  background: ${(props) =>
-    props.color ? props.color : props.theme.floatingButton.backgroundColor};
   text-align: center;
   margin: 5px;
   position: absolute;