Client:ColorPicker:Added display of the color panel on mobile in a separate modal window.

packages/client/src/pages/PortalSettings/categories/common/Appearance/StyledApperance.js

@@ -27,6 +27,7 @@
 import { mobile } from "@docspace/shared/utils";
 import PlusThemeSvgUrl from "PUBLIC_DIR/images/plus.theme.svg?url";
 import styled, { css } from "styled-components";
+import { ModalDialog } from "@docspace/shared/components/modal-dialog";
 
 const StyledComponent = styled.div`
   width: 100%;
@@ -178,4 +179,35 @@ const StyledTheme = styled.div`
     }
   }
 `;
-export { StyledComponent, StyledTheme };
+
+const StyledModalDialog = styled(ModalDialog)`
+  .modal-close {
+    display: none;
+  }
+
+  #modal-dialog {
+    max-height: none;
+  }
+
+  .hex-color-picker {
+    padding-bottom: 0 !important;
+    width: auto !important;
+
+    .react-colorful__saturation {
+      border-bottom: none;
+
+      .react-colorful__interactive {
+        width: calc(100% - 16px) !important;
+        height: calc(100% - 16px);
+      }
+    }
+
+    .react-colorful__hue {
+      .react-colorful__interactive {
+        width: auto;
+      }
+    }
+  }
+`;
+
+export { StyledComponent, StyledTheme, StyledModalDialog };

packages/client/src/pages/PortalSettings/categories/common/appearance.js

@@ -42,13 +42,17 @@ import { DropDown } from "@docspace/shared/components/drop-down";
 import api from "@docspace/shared/api";
 import Loader from "./sub-components/loaderAppearance";
 
-import { StyledComponent, StyledTheme } from "./Appearance/StyledApperance.js";
+import {
+  StyledComponent,
+  StyledTheme,
+  StyledModalDialog,
+} from "./Appearance/StyledApperance.js";
 import { ReactSVG } from "react-svg";
 import ModalDialogDelete from "./sub-components/modalDialogDelete";
 import hexRgb from "hex-rgb";
 import { isMobile } from "@docspace/shared/utils";
 import { DeviceType } from "@docspace/shared/enums";
-
+import { ModalDialog } from "@docspace/shared/components/modal-dialog";
 import { ColorPicker } from "@docspace/shared/components/color-picker";
 
 const Appearance = (props) => {
@@ -400,6 +404,9 @@ const Appearance = (props) => {
   }, [selectThemeId, selectedThemeId, onCloseDialogDelete, getAppearanceTheme]);
 
   const onCloseColorSchemeDialog = () => {
+    if ((openHexColorPickerAccent || openHexColorPickerButtons) && isMobile())
+      return;
+
     setShowColorSchemeDialog(false);
 
     setOpenHexColorPickerAccent(false);
@@ -599,7 +606,25 @@ const Appearance = (props) => {
     setVisibleDialog(true);
   };
 
-  const nodeHexColorPickerButtons = (
+  const nodeHexColorPickerButtons = isMobile() ? (
+    <StyledModalDialog
+      visible={openHexColorPickerButtons}
+      onClose={onCloseHexColorPickerButtons}
+      blur={8}
+    >
+      <ModalDialog.Body>
+        <ColorPicker
+          id="buttons-hex"
+          onClose={onCloseHexColorPickerButtons}
+          onApply={onAppliedColorButtons}
+          appliedColor={appliedColorButtons}
+          applyButtonLabel={t("Common:ApplyButton")}
+          cancelButtonLabel={t("Common:CancelButton")}
+          hexCodeLabel={t("Settings:HexCode")}
+        />
+      </ModalDialog.Body>
+    </StyledModalDialog>
+  ) : (
     <DropDown
       directionX="right"
       manualY="62px"
@@ -622,7 +647,24 @@ const Appearance = (props) => {
     </DropDown>
   );
 
-  const nodeHexColorPickerAccent = (
+  const nodeHexColorPickerAccent = isMobile() ? (
+    <StyledModalDialog
+      visible={openHexColorPickerAccent}
+      onClose={onCloseHexColorPickerAccent}
+      blur={8}
+    >
+      <ModalDialog.Body>
+        <ColorPicker
+          id="accent-hex"
+          onClose={onCloseHexColorPickerAccent}
+          onApply={onAppliedColorAccent}
+          appliedColor={appliedColorAccent}
+          applyButtonLabel={t("Common:ApplyButton")}
+          cancelButtonLabel={t("Common:CancelButton")}
+        />
+      </ModalDialog.Body>
+    </StyledModalDialog>
+  ) : (
     <DropDown
       directionX="right"
       manualY="62px"