применение настроек кнопок Артёма в модалке настройки картинки

src/ui_kit/Modal/CropModal.tsx

@@ -40,8 +40,8 @@ const styleSlider: SxProps<Theme> = {
         "&:focus, &:hover, &.Mui-active, &.Mui-focusVisible": {
             boxShadow: `0px 0px 0px 3px white,
                     0px 4px 4px 3px #C3C8DD`,
+        },
     },
-  },
 };
 
 interface Props {
@@ -249,20 +249,9 @@ export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setC
                     marginTop: "40px",
                     width: "100%",
                     display: "flex",
-                }}>
+                    gap: "10px",
-                    <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
@@ -273,8 +262,6 @@ export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setC
                             color: "#7E2AEA",
                             borderRadius: "8px",
                             border: "1px solid #7E2AEA",
-                            marginRight: "10px",
-                            ml: "auto",
                         }}
                     >
                         Загрузить оригинал
@@ -282,18 +269,38 @@ export const CropModal: FC<Props> = ({ isOpen, imageBlob, originalImageUrl, setC
                     <Button
                         onClick={handleCropClick}
                         disableRipple
-                        variant="contained"
+                        disabled={!completedCrop}
-                        disabled={!completedCrop?.width || !completedCrop?.height}
                         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 />
+                        <CropIcon color={!completedCrop ? "rgba(0, 0, 0, 0.26)" : "#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>