Web:Studio:Add header, selectedAccentColorAndButtonsMain props to ColorSchemeDialog.

web/ASC.Web.Client/src/components/pages/Settings/categories/common/appearance.js

@@ -60,6 +60,15 @@ const Appearance = (props) => {
 
   const [showColorSchemeDialog, setShowColorSchemeDialog] = useState(false);
 
+  const [headerColorSchemeDialog, setHeaderColorSchemeDialog] = useState(
+    "Edit color scheme"
+  );
+
+  const [
+    selectedAccentColorAndButtonsMain,
+    setSelectedAccentColorAndButtonsMain,
+  ] = useState({});
+
   const checkImg = <img src="/static/images/check.white.svg" />;
 
   const array_items = useMemo(
@@ -102,17 +111,31 @@ const Appearance = (props) => {
   };
 
   const onClickEdit = () => {
-    console.log("onClickEdit");
+    // TODO: give store Accent color and Buttons main to id
+    setSelectedAccentColorAndButtonsMain({
+      accentColor: "#F97A0B",
+      buttonsMain: "#FF9933",
+    });
+
+    setHeaderColorSchemeDialog("Edit color scheme");
 
     setShowColorSchemeDialog(true);
   };
 
-  // TODO: true?
   const onCloseEdit = () => {
     setShowColorSchemeDialog(false);
   };
 
-  console.log("colorScheme", colorScheme);
+  const onAddTheme = () => {
+    setSelectedAccentColorAndButtonsMain({
+      addColor:
+        "url(/static/images/plus.theme.svg) 15px 15px no-repeat #D0D5DA",
+    });
+
+    setHeaderColorSchemeDialog("New color scheme");
+
+    setShowColorSchemeDialog(true);
+  };
 
   return (
     <StyledComponent>
@@ -140,7 +163,7 @@ const Appearance = (props) => {
         <div id="color-scheme_7" className="box" onClick={onColorSelection}>
           {onShowCheck(7)}
         </div>
-        <div className="add-theme box">
+        <div className="add-theme box" onClick={onAddTheme}>
           <img src="/static/images/plus.theme.svg" />
         </div>
       </div>
@@ -149,6 +172,8 @@ const Appearance = (props) => {
       <ColorSchemeDialog
         visible={showColorSchemeDialog}
         onClose={onCloseEdit}
+        header={headerColorSchemeDialog}
+        selectedAccentColorAndButtonsMain={selectedAccentColorAndButtonsMain}
       />
       <div>Preview</div>
       <TabContainer elements={array_items} onSelect={onChangePreviewTheme} />

web/ASC.Web.Client/src/components/pages/Settings/categories/common/sub-components/colorSchemeDialog.js

@@ -30,7 +30,20 @@ const StyledComponent = styled(ModalDialog)`
   .color-button {
     width: 46px;
     height: 46px;
-    background: green;
+  }
+
+  .accent {
+    background: ${(props) =>
+      props.selectedAccentColorAndButtonsMain.accentColor
+        ? props.selectedAccentColorAndButtonsMain.accentColor
+        : props.selectedAccentColorAndButtonsMain.addColor};
+  }
+
+  .buttons {
+    background: ${(props) =>
+      props.selectedAccentColorAndButtonsMain.buttonsMain
+        ? props.selectedAccentColorAndButtonsMain.buttonsMain
+        : props.selectedAccentColorAndButtonsMain.addColor};
   }
 
   .save-button {
@@ -89,7 +102,13 @@ const StyledComponent = styled(ModalDialog)`
 `;
 
 const ColorSchemeDialog = (props) => {
-  const { visible, onClose, t } = props;
+  const {
+    visible,
+    onClose,
+    header,
+    selectedAccentColorAndButtonsMain,
+    t,
+  } = props;
 
   const [color, setColor] = useState("#b32aa9");
   const [openHexColorPicker, setOpenHexColorPicker] = useState(false);
@@ -99,16 +118,20 @@ const ColorSchemeDialog = (props) => {
   };
 
   return (
-    <StyledComponent visible={visible} onClose={onClose}>
-      <ModalDialog.Header>Edit color scheme</ModalDialog.Header>
+    <StyledComponent
+      selectedAccentColorAndButtonsMain={selectedAccentColorAndButtonsMain}
+      visible={visible}
+      onClose={onClose}
+    >
+      <ModalDialog.Header>{header}</ModalDialog.Header>
       <ModalDialog.Body>
         <div className="flex">
           <div className="text">Accent</div>
-          <div className="color-button" onClick={onClick}></div>
+          <div className="color-button accent" onClick={onClick}></div>
         </div>
         <div className="flex">
           <div className="text">Buttons</div>
-          <div className="color-button" onClick={onClick}></div>
+          <div className="color-button buttons" onClick={onClick}></div>
         </div>
         {openHexColorPicker && (
           <div className="hex-color-picker">