Web:Common:Added FloatingButtonTheme.

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} />;
+    }
   }
 });
 

packages/common/components/ColorTheme/constants.js

@@ -20,4 +20,5 @@ export const ThemeType = {
   ComboButton: "comboButton",
   LinkForgotPassword: "linkForgotPassword",
   LoadingButton: "loadingButton",
+  FloatingButton: "floatingButton",
 };

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);

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";

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"

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;