From 0cc07e48f8a46f7fc9ec2615c9b40c0c6afce17e Mon Sep 17 00:00:00 2001
From: ArtChaos189 <tvolkiska967@gmail.com>
Date: Sat, 16 Dec 2023 02:02:51 +0300
Subject: [PATCH] update Location of buttons in the image settings CropModal

---
 src/assets/icons/CropIcon.tsx  |  42 +--
 src/ui_kit/Modal/CropModal.tsx | 598 +++++++++++++++++----------------
 2 files changed, 312 insertions(+), 328 deletions(-)

diff --git a/src/assets/icons/CropIcon.tsx b/src/assets/icons/CropIcon.tsx
index 520e90d9..16b098a7 100644
--- a/src/assets/icons/CropIcon.tsx
+++ b/src/assets/icons/CropIcon.tsx
@@ -1,40 +1,10 @@
 import { FC, SVGProps } from "react";
 
-export const CropIcon: FC = () => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    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"
-    />
+export const CropIcon: FC<SVGProps<SVGSVGElement>> = (props) => (
+  <svg {...props} xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
+    <path d="M6 6H2.25" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M6 2.25V18H21.75" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M18 15V6H9" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
+    <path d="M18 21.75V18" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
   </svg>
 );
diff --git a/src/ui_kit/Modal/CropModal.tsx b/src/ui_kit/Modal/CropModal.tsx
index 218b3b10..9edc2cf8 100644
--- a/src/ui_kit/Modal/CropModal.tsx
+++ b/src/ui_kit/Modal/CropModal.tsx
@@ -1,330 +1,344 @@
 import { CropIcon } from "@icons/CropIcon";
 import { ResetIcon } from "@icons/ResetIcon";
 import {
-    Box,
-    Button,
-    IconButton,
-    Modal,
-    Slider,
-    SxProps,
-    Theme,
-    Typography,
-    useMediaQuery,
-    useTheme,
+  Box,
+  Button,
+  IconButton,
+  Modal,
+  Slider,
+  SxProps,
+  Theme,
+  Typography,
+  useMediaQuery,
+  useTheme,
 } from "@mui/material";
 import { FC, useMemo, useRef, useState } from "react";
 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",
-    "& .MuiSlider-track": {
-        border: "none",
-    },
-    "& .MuiSlider-rail": {
-        backgroundColor: "#F2F3F7",
-        border: `1px solid #9A9AAF`,
-    },
-    "& .MuiSlider-thumb": {
-        height: 26,
-        width: 26,
-        border: `6px solid #7E2AEA`,
-        backgroundColor: "white",
-        boxShadow: `0px 0px 0px 3px white,
+  color: "#7E2AEA",
+  height: "12px",
+  "& .MuiSlider-track": {
+    border: "none",
+  },
+  "& .MuiSlider-rail": {
+    backgroundColor: "#F2F3F7",
+    border: `1px solid #9A9AAF`,
+  },
+  "& .MuiSlider-thumb": {
+    height: 26,
+    width: 26,
+    border: `6px solid #7E2AEA`,
+    backgroundColor: "white",
+    boxShadow: `0px 0px 0px 3px white,
                 0px 4px 4px 3px #C3C8DD`,
-        "&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": {
-            boxShadow: `0px 0px 0px 3px white,
+    "&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": {
+      boxShadow: `0px 0px 0px 3px white,
                     0px 4px 4px 3px #C3C8DD`,
-        },
     },
+  },
 };
 
 interface Props {
-    isOpen: boolean;
-    imageBlob: Blob | null;
-    originalImageUrl: string | null;
-    setCropModalImageBlob: (imageBlob: Blob) => void;
-    onClose: () => void;
-    onSaveImageClick: (imageBlob: Blob) => void;
+  isOpen: boolean;
+  imageBlob: Blob | null;
+  originalImageUrl: string | null;
+  setCropModalImageBlob: (imageBlob: Blob) => void;
+  onClose: () => void;
+  onSaveImageClick: (imageBlob: Blob) => void;
 }
 
-export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setCropModalImageBlob, onSaveImageClick, onClose }) => {
-    const theme = useTheme();
-    const [crop, setCrop] = useState<Crop>();
-    const [completedCrop, setCompletedCrop] = useState<PixelCrop>();
-    const [darken, setDarken] = useState(0);
-    const [rotate, setRotate] = useState(0);
-    const [width, setWidth] = useState<number>(240);
-    const cropImageElementRef = useRef<HTMLImageElement>(null);
-    const isMobile = useMediaQuery(theme.breakpoints.down(786));
+export const CropModal: FC<Props> = ({
+  isOpen,
+  imageBlob,
+  originalImageUrl,
+  setCropModalImageBlob,
+  onSaveImageClick,
+  onClose,
+}) => {
+  const theme = useTheme();
+  const [crop, setCrop] = useState<Crop>();
+  const [completedCrop, setCompletedCrop] = useState<PixelCrop>();
+  const [darken, setDarken] = useState(0);
+  const [rotate, setRotate] = useState(0);
+  const [width, setWidth] = useState<number>(240);
+  const cropImageElementRef = useRef<HTMLImageElement>(null);
+  const isMobile = useMediaQuery(theme.breakpoints.down(786));
 
-    const imageUrl = useMemo(() => imageBlob && URL.createObjectURL(imageBlob), [imageBlob]);
+  const imageUrl = useMemo(() => imageBlob && URL.createObjectURL(imageBlob), [imageBlob]);
 
-    const handleCropClick = async () => {
-        if (!completedCrop) throw new Error("No completed crop");
-        if (!cropImageElementRef.current) throw new Error("No image");
+  const handleCropClick = async () => {
+    if (!completedCrop) throw new Error("No completed crop");
+    if (!cropImageElementRef.current) throw new Error("No image");
 
-        const canvasCopy = document.createElement("canvas");
-        const ctx = canvasCopy.getContext("2d");
-        if (!ctx) throw new Error("No 2d context");
+    const canvasCopy = document.createElement("canvas");
+    const ctx = canvasCopy.getContext("2d");
+    if (!ctx) throw new Error("No 2d context");
 
-        canvasCopy.width = completedCrop.width;
-        canvasCopy.height = completedCrop.height;
-        ctx.filter = `brightness(${100 - darken}%)`;
+    canvasCopy.width = completedCrop.width;
+    canvasCopy.height = completedCrop.height;
+    ctx.filter = `brightness(${100 - darken}%)`;
 
-        await canvasPreview(cropImageElementRef.current, canvasCopy, completedCrop, rotate);
+    await canvasPreview(cropImageElementRef.current, canvasCopy, completedCrop, rotate);
 
-        canvasCopy.toBlob((blob) => {
-            if (!blob) throw new Error("Failed to create blob");
+    canvasCopy.toBlob((blob) => {
+      if (!blob) throw new Error("Failed to create blob");
 
-            setCropModalImageBlob(blob);
-            setCrop(undefined);
-            setCompletedCrop(undefined);
-        });
-    };
+      setCropModalImageBlob(blob);
+      setCrop(undefined);
+      setCompletedCrop(undefined);
+    });
+  };
 
-    function handleSaveClick() {
-        if (imageBlob) onSaveImageClick?.(imageBlob);
-        setCrop(undefined);
-        setCompletedCrop(undefined);
-        onClose();
+  function handleSaveClick() {
+    if (imageBlob) onSaveImageClick?.(imageBlob);
+    setCrop(undefined);
+    setCompletedCrop(undefined);
+    onClose();
+  }
+
+  async function handleLoadOriginalImage() {
+    if (!originalImageUrl) return;
+
+    const response = await fetch(originalImageUrl);
+    const blob = await response.blob();
+
+    setCropModalImageBlob(blob);
+    setCrop(undefined);
+    setCompletedCrop(undefined);
+  }
+
+  const getImageSize = () => {
+    if (cropImageElementRef.current) {
+      const imageWidth = cropImageElementRef.current.naturalWidth;
+      const imageHeight = cropImageElementRef.current.naturalHeight;
+
+      const aspect = imageWidth / imageHeight;
+
+      if (aspect <= 1.333) {
+        setWidth(240);
+      }
+      if (aspect >= 1.5) {
+        setWidth(580);
+      }
+      if (aspect >= 1.778) {
+        setWidth(580);
+      }
     }
+  };
 
-    async function handleLoadOriginalImage() {
-        if (!originalImageUrl) return;
-
-        const response = await fetch(originalImageUrl);
-        const blob = await response.blob();
-
-        setCropModalImageBlob(blob);
-        setCrop(undefined);
-        setCompletedCrop(undefined);
-    }
-
-    const getImageSize = () => {
-        if (cropImageElementRef.current) {
-            const imageWidth = cropImageElementRef.current.naturalWidth;
-            const imageHeight = cropImageElementRef.current.naturalHeight;
-
-            const aspect = imageWidth / imageHeight;
-
-            if (aspect <= 1.333) {
-                setWidth(240);
-            }
-            if (aspect >= 1.5) {
-                setWidth(580);
-            }
-            if (aspect >= 1.778) {
-                setWidth(580);
-            }
-        }
-    };
-
-    return (
-        <Modal
-            open={isOpen}
-            onClose={onClose}
-            aria-labelledby="modal-modal-title"
-            aria-describedby="modal-modal-description"
+  return (
+    <Modal
+      open={isOpen}
+      onClose={onClose}
+      aria-labelledby="modal-modal-title"
+      aria-describedby="modal-modal-description"
+    >
+      <Box
+        sx={{
+          position: "absolute",
+          top: "50%",
+          left: "50%",
+          transform: "translate(-50%, -50%)",
+          bgcolor: "background.paper",
+          boxShadow: 24,
+          padding: "20px",
+          borderRadius: "8px",
+          width: isMobile ? "343px" : "620px",
+        }}
+      >
+        <Box
+          sx={{
+            height: "320px",
+            padding: "10px",
+            backgroundSize: "cover",
+            backgroundRepeat: "no-repeat",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
         >
-            <Box sx={{
-                position: "absolute",
-                top: "50%",
-                left: "50%",
-                transform: "translate(-50%, -50%)",
-                bgcolor: "background.paper",
-                boxShadow: 24,
-                padding: "20px",
-                borderRadius: "8px",
-                width: isMobile ? "343px" : "620px",
-            }}>
-                <Box
-                    sx={{
-                        height: "320px",
-                        padding: "10px",
-                        backgroundSize: "cover",
-                        backgroundRepeat: "no-repeat",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                    }}
-                >
-                    {imageUrl && (
-                        <ReactCrop
-                            crop={crop}
-                            onChange={(_, percentCrop) => setCrop(percentCrop)}
-                            onComplete={(c) => setCompletedCrop(c)}
-                            maxWidth={500}
-                            minWidth={50}
-                            maxHeight={320}
-                            minHeight={50}
-                        >
-                            <img
-                                onLoad={getImageSize}
-                                ref={cropImageElementRef}
-                                alt="Crop me"
-                                src={imageUrl}
-                                style={{
-                                    filter: `brightness(${100 - darken}%)`,
-                                    transform: ` rotate(${rotate}deg)`,
-                                    maxWidth: "580px",
-                                    maxHeight: "320px",
-                                }}
-                                width={width}
-                            />
-                        </ReactCrop>
-                    )}
-                </Box>
-                <Box
-                    sx={{
-                        color: "#7E2AEA",
-                        display: "flex",
-                        alignItems: "center",
-                        justifyContent: "center",
-                        fontSize: "16xp",
-                        fontWeight: "600",
-                        marginBottom: "50px",
-                    }}
-                >
-                    <Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>
-                        {crop?.width ? Math.round(crop.width) + "px" : ""}
-                    </Typography>
-                    <Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>
-                        {crop?.height ? Math.round(crop.height) + "px" : ""}
-                    </Typography>
-                </Box>
+          {imageUrl && (
+            <ReactCrop
+              crop={crop}
+              onChange={(_, percentCrop) => setCrop(percentCrop)}
+              onComplete={(c) => setCompletedCrop(c)}
+              maxWidth={500}
+              minWidth={50}
+              maxHeight={320}
+              minHeight={50}
+            >
+              <img
+                onLoad={getImageSize}
+                ref={cropImageElementRef}
+                alt="Crop me"
+                src={imageUrl}
+                style={{
+                  filter: `brightness(${100 - darken}%)`,
+                  transform: ` rotate(${rotate}deg)`,
+                  maxWidth: "580px",
+                  maxHeight: "320px",
+                }}
+                width={width}
+              />
+            </ReactCrop>
+          )}
+        </Box>
+        <Box
+          sx={{
+            color: "#7E2AEA",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: "16xp",
+            fontWeight: "600",
+            marginBottom: "50px",
+          }}
+        >
+          <Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>
+            {crop?.width ? Math.round(crop.width) + "px" : ""}
+          </Typography>
+          <Typography sx={{ color: "#7E2AEA", lineHeight: "0px" }}>
+            {crop?.height ? Math.round(crop.height) + "px" : ""}
+          </Typography>
+        </Box>
 
-                <Box
-                    sx={{
-                        display: isMobile ? "block" : "flex",
-                        alignItems: "end",
-                        justifyContent: "space-between",
-                    }}
-                >
-                    <IconButton onClick={() => setRotate(r => (r + 90) % 360)}>
-                        <ResetIcon />
-                    </IconButton>
-                    <Box>
-                        <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
-                            Размер
-                        </Typography>
-                        <Slider
-                            sx={[styleSlider, {
-                                width: isMobile ? "350px" : "250px",
-                            }]}
-                            value={width}
-                            min={50}
-                            max={580}
-                            step={1}
-                            onChange={(_, newValue) => {
-                                setWidth(newValue as number);
-                            }}
-                        />
-                    </Box>
-                    <Box>
-                        <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
-                            Затемнение
-                        </Typography>
-                        <Slider
-                            sx={[styleSlider, {
-                                width: isMobile ? "350px" : "250px",
-                            }]}
-                            value={darken}
-                            min={0}
-                            max={100}
-                            step={1}
-                            onChange={(_, newValue) => setDarken(newValue as number)}
-                        />
-                    </Box>
-                </Box>
-                <Box
-                    sx={{
-                        marginTop: "40px",
-                        width: "100%",
-                        display: "flex",
-                    }}
-                >
-                    <Button
-                        onClick={handleSaveClick}
-                        disableRipple
-                        data-cy="crop-modal-save-button"
-                        sx={{
-                            height: "48px",
-                            color: "#7E2AEA",
-                            borderRadius: "8px",
-                            border: "1px solid #7E2AEA",
-                            marginRight: "10px",
-                            px: "20px",
-                        }}
-                    >Сохранить</Button>
-                    <Button
-                        onClick={handleLoadOriginalImage}
-                        disableRipple
-                        disabled={!originalImageUrl}
-                        sx={{
-                            width: "215px",
-                            height: "48px",
-                            color: "#7E2AEA",
-                            borderRadius: "8px",
-                            border: "1px solid #7E2AEA",
-                            marginRight: "10px",
-                            ml: "auto",
-                        }}
-                    >
-                        Загрузить оригинал
-                    </Button>
-                    <Button
-                        onClick={handleCropClick}
-                        disableRipple
-                        variant="contained"
-                        disabled={!completedCrop}
-                        sx={{
-                            padding: "10px 20px",
-                            borderRadius: "8px",
-                            background: theme.palette.brightPurple.main,
-                            fontSize: "18px",
-                        }}
-                    >
-                        <CropIcon />
-                        Обрезать
-                    </Button>
-                </Box>
-            </Box>
-        </Modal>
-    );
+        <Box
+          sx={{
+            display: isMobile ? "block" : "flex",
+            alignItems: "end",
+            justifyContent: "space-between",
+          }}
+        >
+          <IconButton onClick={() => setRotate((r) => (r + 90) % 360)}>
+            <ResetIcon />
+          </IconButton>
+          <Box>
+            <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Размер</Typography>
+            <Slider
+              sx={[
+                styleSlider,
+                {
+                  width: isMobile ? "350px" : "250px",
+                },
+              ]}
+              value={width}
+              min={50}
+              max={580}
+              step={1}
+              onChange={(_, newValue) => {
+                setWidth(newValue as number);
+              }}
+            />
+          </Box>
+          <Box>
+            <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>Затемнение</Typography>
+            <Slider
+              sx={[
+                styleSlider,
+                {
+                  width: isMobile ? "350px" : "250px",
+                },
+              ]}
+              value={darken}
+              min={0}
+              max={100}
+              step={1}
+              onChange={(_, newValue) => setDarken(newValue as number)}
+            />
+          </Box>
+        </Box>
+        <Box
+          sx={{
+            marginTop: "40px",
+            width: "100%",
+            display: "flex",
+            gap: "10px",
+          }}
+        >
+          <Button
+            onClick={handleCropClick}
+            disableRipple
+            disabled={!completedCrop}
+            sx={{
+              padding: "10px 20px",
+              borderRadius: "8px",
+              background: theme.palette.brightPurple.main,
+              fontSize: "18px",
+              color: "#7E2AEA",
+              border: `1px solid ${!completedCrop ? "rgba(0, 0, 0, 0.26)" : "#7E2AEA"}`,
+              backgroundColor: "transparent",
+            }}
+          >
+            <CropIcon color={!completedCrop ? "rgba(0, 0, 0, 0.26)" : "#7E2AEA"} />
+            Обрезать
+          </Button>
+          <Button
+            onClick={handleLoadOriginalImage}
+            disableRipple
+            disabled={!originalImageUrl}
+            sx={{
+              width: "215px",
+              height: "48px",
+              color: "#7E2AEA",
+              borderRadius: "8px",
+              border: "1px solid #7E2AEA",
+            }}
+          >
+            Загрузить оригинал
+          </Button>
+          <Button
+            onClick={handleSaveClick}
+            disableRipple
+            variant="contained"
+            data-cy="crop-modal-save-button"
+            sx={{
+              height: "48px",
+              borderRadius: "8px",
+              border: "1px solid #7E2AEA",
+              marginRight: "10px",
+              px: "20px",
+              ml: "auto",
+            }}
+          >
+            Сохранить
+          </Button>
+        </Box>
+      </Box>
+    </Modal>
+  );
 };
 
 export function useCropModalState(initialOpenState = false) {
-    const [isCropModalOpen, setOpened] = useState(initialOpenState);
-    const [imageBlob, setCropModalImageBlob] = useState<Blob | null>(null);
-    const [originalImageUrl, setOriginalImageUrl] = useState<string | null>(null);
+  const [isCropModalOpen, setOpened] = useState(initialOpenState);
+  const [imageBlob, setCropModalImageBlob] = useState<Blob | null>(null);
+  const [originalImageUrl, setOriginalImageUrl] = useState<string | null>(null);
 
-    const closeCropModal = () => {
-        setOpened(false);
-        setCropModalImageBlob(null);
-        setOriginalImageUrl(null);
-    };
+  const closeCropModal = () => {
+    setOpened(false);
+    setCropModalImageBlob(null);
+    setOriginalImageUrl(null);
+  };
 
-    async function openCropModal(image: Blob | string, originalImageUrl: string | null | undefined = null) {
-        if (typeof image === "string") {
-            const response = await fetch(image);
-            image = await response.blob();
-        }
-
-        setCropModalImageBlob(image);
-        setOriginalImageUrl(originalImageUrl);
-        setOpened(true);
+  async function openCropModal(image: Blob | string, originalImageUrl: string | null | undefined = null) {
+    if (typeof image === "string") {
+      const response = await fetch(image);
+      image = await response.blob();
     }
 
-    return {
-        isCropModalOpen,
-        openCropModal,
-        closeCropModal,
-        imageBlob,
-        setCropModalImageBlob,
-        originalImageUrl,
-    } as const;
+    setCropModalImageBlob(image);
+    setOriginalImageUrl(originalImageUrl);
+    setOpened(true);
+  }
+
+  return {
+    isCropModalOpen,
+    openCropModal,
+    closeCropModal,
+    imageBlob,
+    setCropModalImageBlob,
+    originalImageUrl,
+  } as const;
 }