update Location of buttons in the image settings CropModal

src/assets/icons/CropIcon.tsx

@@ -1,40 +1,10 @@
 import { FC, SVGProps } from "react";
 
-export const CropIcon: FC = () => (
+export const CropIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
-  <svg
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
-    xmlns="http://www.w3.org/2000/svg"
+    <path d="M6 6H2.25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-    width="24"
+    <path d="M6 2.25V18H21.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-    height="24"
+    <path d="M18 15V6H9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-    viewBox="0 0 24 24"
+    <path d="M18 21.75V18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
-    fill="none"
-  >
-    <path
-      d="M6 6H2.25"
-      stroke="white"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M6 2.25V18H21.75"
-      stroke="white"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M18 15V6H9"
-      stroke="white"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
-    <path
-      d="M18 21.75V18"
-      stroke="white"
-      strokeWidth="1.5"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
   </svg>
 );

src/ui_kit/Modal/CropModal.tsx

@@ -17,7 +17,6 @@ import ReactCrop, { Crop, PixelCrop } from "react-image-crop";
 import "react-image-crop/dist/ReactCrop.css";
 import { canvasPreview } from "./utils/canvasPreview";
 
-
 const styleSlider: SxProps<Theme> = {
   color: "#7E2AEA",
   height: "12px",
@@ -51,7 +50,14 @@ interface Props {
   onSaveImageClick: (imageBlob: Blob) => void;
 }
 
-export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setCropModalImageBlob, onSaveImageClick, onClose }) => {
+export const CropModal: FC<Props> = ({
+  isOpen,
+  imageBlob,
+  originalImageUrl,
+  setCropModalImageBlob,
+  onSaveImageClick,
+  onClose,
+}) => {
   const theme = useTheme();
   const [crop, setCrop] = useState<Crop>();
   const [completedCrop, setCompletedCrop] = useState<PixelCrop>();
@@ -130,7 +136,8 @@ export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setC
       aria-labelledby="modal-modal-title"
       aria-describedby="modal-modal-description"
     >
-            <Box sx={{
+      <Box
+        sx={{
           position: "absolute",
           top: "50%",
           left: "50%",
@@ -140,7 +147,8 @@ export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setC
           padding: "20px",
           borderRadius: "8px",
           width: isMobile ? "343px" : "620px",
-            }}>
+        }}
+      >
         <Box
           sx={{
             height: "320px",
@@ -204,17 +212,18 @@ export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setC
             justifyContent: "space-between",
           }}
         >
-                    <IconButton onClick={() => setRotate(r => (r + 90) % 360)}>
+          <IconButton onClick={() => setRotate((r) => (r + 90) % 360)}>
             <ResetIcon />
           </IconButton>
           <Box>
-                        <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
+            <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Размер</Typography>
-                            Размер
-                        </Typography>
             <Slider
-                            sx={[styleSlider, {
+              sx={[
+                styleSlider,
+                {
                   width: isMobile ? "350px" : "250px",
-                            }]}
+                },
+              ]}
               value={width}
               min={50}
               max={580}
@@ -225,13 +234,14 @@ export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setC
             />
           </Box>
           <Box>
-                        <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
+            <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Затемнение</Typography>
-                            Затемнение
-                        </Typography>
             <Slider
-                            sx={[styleSlider, {
+              sx={[
+                styleSlider,
+                {
                   width: isMobile ? "350px" : "250px",
-                            }]}
+                },
+              ]}
               value={darken}
               min={0}
               max={100}
@@ -245,21 +255,26 @@ export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setC
             marginTop: "40px",
             width: "100%",
             display: "flex",
+            gap: "10px",
           }}
         >
           <Button
-                        onClick={handleSaveClick}
+            onClick={handleCropClick}
             disableRipple
-                        data-cy="crop-modal-save-button"
+            disabled={!completedCrop}
             sx={{
-                            height: "48px",
+              padding: "10px 20px",
-                            color: "#7E2AEA",
               borderRadius: "8px",
-                            border: "1px solid #7E2AEA",
+              background: theme.palette.brightPurple.main,
-                            marginRight: "10px",
+              fontSize: "18px",
-                            px: "20px",
+              color: "#7E2AEA",
+              border: `1px solid ${!completedCrop ? "rgba(0, 0, 0, 0.26)" : "#7E2AEA"}`,
+              backgroundColor: "transparent",
             }}
-                    >Сохранить</Button>
+          >
+            <CropIcon color={!completedCrop ? "rgba(0, 0, 0, 0.26)" : "#7E2AEA"} />
+            Обрезать
+          </Button>
           <Button
             onClick={handleLoadOriginalImage}
             disableRipple
@@ -270,26 +285,25 @@ export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setC
               color: "#7E2AEA",
               borderRadius: "8px",
               border: "1px solid #7E2AEA",
-                            marginRight: "10px",
-                            ml: "auto",
             }}
           >
             Загрузить оригинал
           </Button>
           <Button
-                        onClick={handleCropClick}
+            onClick={handleSaveClick}
             disableRipple
             variant="contained"
-                        disabled={!completedCrop}
+            data-cy="crop-modal-save-button"
             sx={{
-                            padding: "10px 20px",
+              height: "48px",
               borderRadius: "8px",
-                            background: theme.palette.brightPurple.main,
+              border: "1px solid #7E2AEA",
-                            fontSize: "18px",
+              marginRight: "10px",
+              px: "20px",
+              ml: "auto",
             }}
           >
-                        <CropIcon />
+            Сохранить
-                        Обрезать
           </Button>
         </Box>
       </Box>