From 5652ed2070d2d202a30f55c48d8d92325a946670 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=9D=D0=B0=D0=B4=D0=B5=D0=B6=D0=B4=D0=B0?=
 <nbrineva@yandex.ru>
Date: Wed, 7 Aug 2024 20:26:57 +0300
Subject: [PATCH] =?UTF-8?q?cropmodal=20=D0=B4=D0=B5=D1=81=D0=BA=D1=82?=
 =?UTF-8?q?=D0=BE=D0=BF=20=D0=B2=D0=B5=D1=80=D1=81=D0=B8=D1=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/icons/AmoTrash.tsx                 |  26 ++++
 src/ui_kit/Modal/CropModal/CropGeneral.tsx    | 124 ++++++++++--------
 .../Modal/CropModal/NavigationPanel.tsx       |   9 +-
 src/ui_kit/Modal/CropModal/WorkSpace.tsx      |  69 ++++++----
 4 files changed, 145 insertions(+), 83 deletions(-)
 create mode 100644 src/assets/icons/AmoTrash.tsx

diff --git a/src/assets/icons/AmoTrash.tsx b/src/assets/icons/AmoTrash.tsx
new file mode 100644
index 00000000..d61e6652
--- /dev/null
+++ b/src/assets/icons/AmoTrash.tsx
@@ -0,0 +1,26 @@
+import { Box } from "@mui/material";
+
+interface Props {
+  color?: string;
+  height?: string;
+  width?: string;
+}
+
+export default function AmoTrash({ color, height, width }: Props) {
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+      }}
+    >
+      <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.4994 6H4.5" stroke="#FC2012" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M5.5 18.7492V8.74609H18.5V18.7492C18.5 20.1299 17.3807 21.2492 16 21.2492H8C6.61929 21.2492 5.5 20.1299 5.5 18.7492Z" fill="#FC2012" stroke="#F02B2B"/>
+<path d="M15.75 6V4.5C15.75 4.10218 15.592 3.72064 15.3107 3.43934C15.0294 3.15804 14.6478 3 14.25 3H9.75C9.35218 3 8.97064 3.15804 8.68934 3.43934C8.40804 3.72064 8.25 4.10218 8.25 4.5V6" stroke="#FC2012" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
+    
+    </Box>
+  );
+}
diff --git a/src/ui_kit/Modal/CropModal/CropGeneral.tsx b/src/ui_kit/Modal/CropModal/CropGeneral.tsx
index 6f2169c6..7b40a3cb 100644
--- a/src/ui_kit/Modal/CropModal/CropGeneral.tsx
+++ b/src/ui_kit/Modal/CropModal/CropGeneral.tsx
@@ -29,7 +29,8 @@ import { CropAspectRatio, DEFAULTCROPRULES, EditedImage } from "@/model/CropModa
 
 const styleSlider: SxProps<Theme> = {
     color: "#7E2AEA",
-    height: "12px",
+    height: "10px",
+    p: "18px 0",
     "& .MuiSlider-track": {
         border: "none",
     },
@@ -38,8 +39,8 @@ const styleSlider: SxProps<Theme> = {
         border: `1px solid #9A9AAF`,
     },
     "& .MuiSlider-thumb": {
-        height: 26,
-        width: 26,
+        height: 24,
+        width: 24,
         border: `6px solid #7E2AEA`,
         backgroundColor: "white",
         boxShadow: `0px 0px 0px 3px white,
@@ -74,7 +75,7 @@ export const CropGeneral: FC<Props> = ({
     async function handleRotateClick() {
         editedImagesChange((old) => {
             const newRotate = old.newRules.rotate + 90;
-            
+
             return {
                 newRules: {
                     ...old.newRules,
@@ -100,7 +101,7 @@ export const CropGeneral: FC<Props> = ({
                 imageHeight,
             );
 
-//Хз зачем это было нужно, как будет работать - перетещу
+            //Хз зачем это было нужно, как будет работать - перетещу
 
             // if (!old.newRules.crop || old.newRules.crop.height === 0 || old.newRules.crop.width === 0) {
             //     return centerCrop(crop, imageWidth, imageHeight);
@@ -114,7 +115,7 @@ export const CropGeneral: FC<Props> = ({
                 100 - crop.height,
                 Math.max(0, old.newRules.crop.y + (old.newRules.crop.height - crop.height) / 2),
             );
-            
+
             return {
                 newRules: {
                     ...old.newRules,
@@ -134,7 +135,8 @@ export const CropGeneral: FC<Props> = ({
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "center",
-                    padding: "0 20px"
+                    padding: "0 20px",
+                    marginTop: "20px",
                 }}
             >
                 <ReactCrop
@@ -168,7 +170,7 @@ export const CropGeneral: FC<Props> = ({
                                             cropImageElementRef.current?.height,
                                             cropAspectRatio
                                                 ? cropAspectRatio.width / cropAspectRatio.height
-                                                : 1,
+                                                : 2,
                                         )
                                     }
                                 }))
@@ -180,6 +182,7 @@ export const CropGeneral: FC<Props> = ({
                         style={{
                             filter: `brightness(${100 - editedImage.newRules.darken}%)`,
                             maxWidth: "100%",
+                            height: "320px",
                             maxHeight: "320px",
                             display: "block",
                             objectFit: "contain",
@@ -189,58 +192,73 @@ export const CropGeneral: FC<Props> = ({
             </Box>
             <Box
                 sx={{
-                    mt: "40px",
+                    mt: "48px",
                     display: isMobile ? "block" : "flex",
                     alignItems: "end",
                     justifyContent: "space-between",
-                    padding: "0 20px"
+                    padding: "0 20px",
+
                 }}
             >
-                <IconButton onClick={handleRotateClick}>
+                <IconButton onClick={handleRotateClick}
+                    sx={{
+                        mb:"11px",
+                        p: "0",
+
+                    }}
+                >
                     <ResetIcon />
                 </IconButton>
-                <Box>
-                    <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
-                        Размер
-                    </Typography>
-                    <Slider
-                        sx={[
-                            styleSlider,
-                            {
-                                width: isMobile ? undefined : "200px",
-                            },
-                        ]}
-                        value={editedImage.newRules.crop.width ?? 1}
-                        min={1}
-                        max={100}
-                        step={0.1}
-                        onChange={(_, newValue) => {
-                            if (typeof newValue === "number") handleSizeChange(newValue);
-                        }}
-                    />
-                </Box>
-                <Box>
-                    <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
-                        Затемнение
-                    </Typography>
-                    <Slider
-                        sx={[
-                            styleSlider,
-                            {
-                                width: isMobile ? undefined : "200px",
-                            },
-                        ]}
-                        value={editedImage.newRules.darken}
-                        min={0}
-                        max={100}
-                        step={1}
-                        onChange={(_, newValue) => editedImagesChange((old) => ({
-                            newRules: {
-                                ...old.newRules,
-                                darken: newValue as number
-                            }
-                        }))}
-                    />
+                <Box
+                    sx={{
+                        display: "flex",
+                        justifyContent: "space-between",
+                        gap: "24px",
+                    }}
+                >
+                    <Box>
+                        <Typography sx={{ color: "#9A9AAF", fontSize: "16px" }}>
+                            Размер
+                        </Typography>
+                        <Slider
+                            sx={[
+                                styleSlider,
+                                {
+                                    width: isMobile ? undefined : "248px",
+                                },
+                            ]}
+                            value={55}
+                            min={1}
+                            max={100}
+                            step={0.1}
+                            onChange={(_, newValue) => {
+                                if (typeof newValue === "number") handleSizeChange(newValue);
+                            }}
+                        />
+                    </Box>
+                    <Box>
+                        <Typography sx={{ color: "#9A9AAF", fontSize: "16px", ml:"-1px", }}>
+                            Затемнение
+                        </Typography>
+                        <Slider
+                            sx={[
+                                styleSlider,
+                                {
+                                    width: isMobile ? undefined : "248px",
+                                },
+                            ]}
+                            value={52}
+                            min={0}
+                            max={100}
+                            step={1}
+                            onChange={(_, newValue) => editedImagesChange((old) => ({
+                                newRules: {
+                                    ...old.newRules,
+                                    darken: newValue as number
+                                }
+                            }))}
+                        />
+                    </Box>
                 </Box>
             </Box>
         </>
diff --git a/src/ui_kit/Modal/CropModal/NavigationPanel.tsx b/src/ui_kit/Modal/CropModal/NavigationPanel.tsx
index 6cd5485e..aad2f58c 100644
--- a/src/ui_kit/Modal/CropModal/NavigationPanel.tsx
+++ b/src/ui_kit/Modal/CropModal/NavigationPanel.tsx
@@ -41,12 +41,13 @@ export const NavigationPanel: FC<Props> = ({
     return (
         <Box
             sx={{
-                marginTop: "40px",
+                marginTop: "18px",
                 padding: "0 20px 20px",
                 width: "100%",
                 display: "flex",
                 gap: "5px",
                 flexWrap: isMobile ? "wrap" : undefined,
+                justifyContent: "space-between"
             }}
         >
             <Button
@@ -66,8 +67,8 @@ export const NavigationPanel: FC<Props> = ({
             <Box
                 sx={{
                     display: "flex",
-                    gap: "5px",
-                    ml: "auto",
+                    gap: "10px",
+                    
                 }}
             >
                 <Button
@@ -96,7 +97,7 @@ export const NavigationPanel: FC<Props> = ({
                         height: "48px",
                         borderRadius: "8px",
                         border: "1px solid #7E2AEA",
-                        p: "10px 15px",
+                        p: "10px 19px",
                         width: isMobile ? "100%" : undefined,
                     }}
                 >
diff --git a/src/ui_kit/Modal/CropModal/WorkSpace.tsx b/src/ui_kit/Modal/CropModal/WorkSpace.tsx
index 5b7470ba..0088716a 100644
--- a/src/ui_kit/Modal/CropModal/WorkSpace.tsx
+++ b/src/ui_kit/Modal/CropModal/WorkSpace.tsx
@@ -14,6 +14,7 @@ import DeleteIcon from "@mui/icons-material/Delete";
 
 import type { CropAspectRatio, CropOnDeleteIamgeClick, EditedImage, ScreenStepsTypes } from "@/model/CropModal/CropModal"
 import { EditedImagesChangeType } from "./CropModal";
+import AmoTrash from "@/assets/icons/AmoTrash";
 
 
 const modalModels = {
@@ -50,53 +51,69 @@ export default function WorkSpace({
         <>
             <Box
                 sx={{
-                    mt: "5px",
+                    mt: "12px",
                     padding: "0 20px",
                     display: "flex",
                     alignItems: "center",
                     justifyContent: "space-between"
                 }}
             >
-                <Box>
+                <Box
+                    sx={{
+                        width: "100%"
+                    }}
+                >
                     <Box
                         sx={{
                             display: "flex",
-                            alignItems: "center",
-                            gap: "13px"
+                            justifyContent: "space-between",
+                            width: "100%",
+                            alignItems: "center"
                         }}
                     >
-                        <Typography
+                        <Box
                             sx={{
-                                color: "#4D4D4D",
-                                fontSize: "24px",
-                                fontWeight: 500,
-                                lineHeight: "28.44px",
-
+                                display: "flex",
+                                alignItems: "center",
+                                gap: "13px"
                             }}
-                        >{currentModel.name}</Typography>
-                        {currentModel.icon}
+                        >
+                            <Typography
+                                sx={{
+                                    color: "#4D4D4D",
+                                    fontSize: "24px",
+                                    fontWeight: 500,
+                                    lineHeight: "28.44px",
+
+                                }}
+                            >{currentModel.name}</Typography>
+                            {currentModel.icon}
+                        </Box>
+                        <IconButton
+                            // onClick={onDeleteClick}
+                            sx={{
+                                height: "24px",
+                                width: "24px",
+                                p: 0,
+                                color: theme.palette.orange.main,
+                                borderRadius: "50%",
+                                mb:"5px",
+                            }}
+                        >
+                            <AmoTrash></AmoTrash>
+                        </IconButton>
+
                     </Box>
 
                     <Typography sx={{
-                        fontSize: "14px",
+                        fontSize: "13.8px",
                         color: "#9A9AAF",
-                        lineHeight: "16.59px",
+                        lineHeight: "16px",
                     }}>
                         {currentStep + 1 + " шаг"}
                     </Typography>
                 </Box>
-                <IconButton
-                    // onClick={onDeleteClick}
-                    sx={{
-                        height: "48px",
-                        width: "48px",
-                        p: 0,
-                        color: theme.palette.orange.main,
-                        borderRadius: "50%",
-                    }}
-                >
-                    <DeleteIcon />
-                </IconButton>
+
 
             </Box>
             <CropGeneral