update style CroppingModal

src/ui_kit/Modal/CroppingModal.tsx

@@ -2,7 +2,7 @@ import React, { FC, useRef, useState } from "react";
 import { saveAs } from "file-saver";
 import ReactCrop, { Crop } from "react-image-crop";
 import "react-image-crop/dist/ReactCrop.css";
-import { Box, Button, Modal, Slider, Typography } from "@mui/material";
+import { Box, Button, Modal, Slider, Typography, useMediaQuery, useTheme } from "@mui/material";
 
 import quiz from "../../assets/quiz-template-6.png";
 import { ResetIcon } from "@icons/ResetIcon";
@@ -12,44 +12,47 @@ interface Iprops {
   onClose: () => void;
 }
 
-const style = {
-  position: "absolute" as "absolute",
-  top: "50%",
-  left: "50%",
-  transform: "translate(-50%, -50%)",
-  width: "620px",
-  bgcolor: "background.paper",
-  boxShadow: 24,
-  padding: "20px",
-  borderRadius: "8px",
-};
-
-const styleSlider = {
-  width: "250px",
-  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,
-                      0px 4px 4px 3px #C3C8DD`,
-    },
-  },
-};
-
 export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
+  const theme = useTheme();
+  const isMobile = useMediaQuery(theme.breakpoints.down(786));
+
+  const style = {
+    position: "absolute" as "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate(-50%, -50%)",
+    width: isMobile ? "343px" : "620px",
+    bgcolor: "background.paper",
+    boxShadow: 24,
+    padding: "20px",
+    borderRadius: "8px",
+  };
+
+  const styleSlider = {
+    width: isMobile ? "350px" : "250px",
+    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,
+                        0px 4px 4px 3px #C3C8DD`,
+      },
+    },
+  };
+
   const [src, setSrc] = useState<string | ArrayBuffer | null>(quiz);
   const [crop, setCrop] = useState<Crop>({ unit: "px", y: 0, x: 0, width: 100, height: 100 });
   const [completedCrop, setCompletedCrop] = useState<Crop | null>(null);
@@ -57,6 +60,8 @@ export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
   const [darken, setDarken] = useState(0);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
+  console.log(src);
+
   const onCropComplete = (crop: Crop) => {
     setCompletedCrop(crop);
   };
@@ -90,8 +95,20 @@ export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
     const img = new Image();
     img.src = image as string;
 
-    const scaleX = imageSize < 580 ? img.naturalWidth / (580 * (imageSize / 200)) : img.naturalWidth / 580;
+    let scaleX = 360 / 580;
-    const scaleY = img.naturalHeight / 320;
+    let scaleY = 219 / 320;
+
+    if (img.naturalWidth) {
+      scaleX = img.naturalWidth / 580;
+    }
+
+    if (img.naturalHeight) {
+      scaleY = img.naturalHeight / 320;
+    }
+
+    console.log(scaleX);
+
+    console.log(scaleY);
 
     const canvas = document.createElement("canvas");
     canvas.width = crop.width!;
@@ -193,7 +210,7 @@ export const CroppingModal: FC<Iprops> = ({ opened, onClose }) => {
           px
         </Box>
 
-        <Box sx={{ display: "flex", alignItems: "end", justifyContent: "space-between" }}>
+        <Box sx={{ display: isMobile ? "block" : "flex", alignItems: "end", justifyContent: "space-between" }}>
           <ResetIcon
             onClick={() => {
               setCrop((prevCrop: Crop) => ({