Web: Components: fixed floating button in main button mobile, added scrollbar

packages/asc-web-components/main-button-mobile/index.js

@@ -16,6 +16,7 @@ import IconButton from "../icon-button";
 import Button from "../button";
 import Text from "../text";
 import Scrollbar from "@appserver/components/scrollbar";
+import { isMobile, isTablet } from "react-device-detect";
 
 const ProgressBarMobile = ({
   label,
@@ -102,18 +103,9 @@ const MainButtonMobile = (props) => {
     ? progressOptions.filter((option) => option.open)
     : [];
 
-  console.log(dropDownRef);
-
-  const renderDropDown = () => {
+  const renderItems = () => {
     return (
-      <StyledDropDown
-        forwardedRef={dropDownRef}
-        open={isOpen}
-        clickOutsideAction={outsideClick}
-        manualWidth={manualWidth || "400px"}
-        directionY="top"
-        directionX="right"
-      >
+      <>
         <StyledContainerAction>
           {actionOptions.map((option) => (
             <StyledDropDownItem
@@ -178,11 +170,11 @@ const MainButtonMobile = (props) => {
             />
           </StyledButtonWrapper>
         )}
-      </StyledDropDown>
+      </>
     );
   };
 
-  const children = renderDropDown();
+  const children = renderItems();
 
   return (
     <div ref={ref} className={className} style={style}>
@@ -190,8 +182,25 @@ const MainButtonMobile = (props) => {
         icon={isOpen ? "minus" : "plus"}
         onClick={onMainButtonClick}
         percent={percent}
+        color={"#ed7309"}
       />
-      {children}
+      <StyledDropDown
+        forwardedRef={dropDownRef}
+        open={isOpen}
+        clickOutsideAction={outsideClick}
+        manualWidth={manualWidth || "400px"}
+        directionY="top"
+        directionX="right"
+        isMobile={isMobile || isTablet}
+      >
+        {isMobile || isTablet ? (
+          <Scrollbar scrollclass="section-scroll" stype="mediumBlack">
+            {children}
+          </Scrollbar>
+        ) : (
+          children
+        )}
+      </StyledDropDown>
     </div>
   );
 };

packages/asc-web-components/main-button-mobile/styled-main-button.js

@@ -5,12 +5,7 @@ import DropDownItem from "../drop-down-item";
 import FloatingButton from "@appserver/common/components/FloatingButton";
 
 const StyledFloatingButton = styled(FloatingButton)`
-  & + div {
-  }
-
   .circle__mask + div {
-    background-color: #ed7309;
-
     svg {
       margin-top: 4px;
     }
@@ -38,17 +33,13 @@ const StyledFloatingButton = styled(FloatingButton)`
   .circle__mask .circle__fill {
     background-color: #fff;
   }
-
-  /* .circle__mask {
-    transform: none !important;
-    clip: none !important;
-  } */
 `;
 
 const StyledDropDown = styled(DropDown)`
   bottom: ${(props) => props.theme.mainButtonMobile.dropDown.bottom};
   right: ${(props) => props.theme.mainButtonMobile.dropDown.right};
   z-index: ${(props) => props.theme.mainButtonMobile.dropDown.zIndex};
+  height: ${(props) => (props.isMobile ? "100vh" : "auto")};
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;