From a478d7760b40cdccb9196b3632074fbc05f36ea7 Mon Sep 17 00:00:00 2001
From: gazizova-vlada <vlada.gazizova@onlyoffice.com>
Date: Fri, 15 Jul 2022 10:22:56 +0300
Subject: [PATCH] =?UTF-8?q?Web:Studio:=D0=A1olor=20palette=20stylization.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../sub-components/colorSchemeDialog.js       | 102 +++++++++++-------
 1 file changed, 61 insertions(+), 41 deletions(-)

diff --git a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/sub-components/colorSchemeDialog.js b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/sub-components/colorSchemeDialog.js
index df179449c1..2c430a9637 100644
--- a/web/ASC.Web.Client/src/components/pages/Settings/categories/common/sub-components/colorSchemeDialog.js
+++ b/web/ASC.Web.Client/src/components/pages/Settings/categories/common/sub-components/colorSchemeDialog.js
@@ -3,7 +3,8 @@ import ModalDialog from "@appserver/components/modal-dialog";
 import styled from "styled-components";
 import { inject, observer } from "mobx-react";
 import Button from "@appserver/components/button";
-import { HexColorPicker } from "react-colorful";
+import { HexColorPicker, HexColorInput } from "react-colorful";
+import InputBlock from "@appserver/components/input-block";
 
 const StyledComponent = styled(ModalDialog)`
   .modal-dialog-aside-footer {
@@ -60,33 +61,42 @@ const StyledComponent = styled(ModalDialog)`
     box-shadow: 0px 12px 40px rgba(4, 15, 27, 0.12);
   }
 
-  .react-colorful {
+  .hex-color-picker .react-colorful {
     width: auto;
-    height: 239px;
+    height: 195px;
+    padding-bottom: 16px;
   }
 
-  .react-colorful__pointer {
+  .react-colorful__saturation {
+    margin: 16px 0;
+  }
+
+  .hex-color-picker .react-colorful__saturation-pointer {
     width: 14px;
     height: 14px;
+    transform: none !important;
   }
 
-  .react-colorful__hue-pointer {
+  .hex-color-picker .react-colorful__hue {
+    border-radius: 6px;
+    height: 12px;
+  }
+
+  .hex-color-picker .react-colorful__hue-pointer {
     width: 24px;
     height: 24px;
+    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.25);
     border: 6px solid #fff;
   }
 
-  .react-colorful__last-control {
-    border-radius: 6px;
-    height: 12px;
-    margin: 16px 0;
-  }
-
   .hex-value {
+    outline: none;
     padding: 6px 8px;
     border: 1px solid #d0d5da;
     border-radius: 3px;
-    margin: 16px 0;
+    margin-top: 16px;
+    width: 100%;
+    box-sizing: border-box;
   }
 
   .hex-button {
@@ -110,7 +120,7 @@ const ColorSchemeDialog = (props) => {
     t,
   } = props;
 
-  const [color, setColor] = useState("#b32aa9");
+  const [color, setColor] = useState("#FF9933");
   const [openHexColorPicker, setOpenHexColorPicker] = useState(false);
 
   const onClick = () => {
@@ -125,36 +135,46 @@ const ColorSchemeDialog = (props) => {
     >
       <ModalDialog.Header>{header}</ModalDialog.Header>
       <ModalDialog.Body>
-        <div className="flex">
-          <div className="text">Accent</div>
-          <div className="color-button accent" onClick={onClick}></div>
-        </div>
-        <div className="flex">
-          <div className="text">Buttons</div>
-          <div className="color-button buttons" onClick={onClick}></div>
-        </div>
-        {openHexColorPicker && (
-          <div className="hex-color-picker">
-            <div className="hex-value">{color.toUpperCase()}</div>
-            <HexColorPicker color={color} onChange={setColor} />
-
-            <div className="hex-button">
-              <Button
-                label="Apply"
-                size="small"
-                className="apply-button"
-                primary={true}
-                scale={true}
-              />
-              <Button
-                label="Cancel"
-                className="button"
-                size="small"
-                scale={true}
-              />
+        <div>
+          <div>
+            <div className="flex">
+              <div className="text">Accent</div>
+              <div className="color-button accent" onClick={onClick}></div>
+            </div>
+            <div className="flex">
+              <div className="text">Buttons</div>
+              <div className="color-button buttons" onClick={onClick}></div>
             </div>
           </div>
-        )}
+
+          {openHexColorPicker && (
+            <div className="hex-color-picker">
+              <HexColorInput
+                className="hex-value"
+                prefixed
+                color={color.toUpperCase()}
+                onChange={setColor}
+              />
+              <HexColorPicker color={color} onChange={setColor} />
+
+              <div className="hex-button">
+                <Button
+                  label="Apply"
+                  size="small"
+                  className="apply-button"
+                  primary={true}
+                  scale={true}
+                />
+                <Button
+                  label="Cancel"
+                  className="button"
+                  size="small"
+                  scale={true}
+                />
+              </div>
+            </div>
+          )}
+        </div>
       </ModalDialog.Body>
 
       <ModalDialog.Footer>