From 8044501fc9135b4cb7bf47bda307326f0c09b4fb Mon Sep 17 00:00:00 2001
From: ArtChaos189 <tvolkiska967@gmail.com>
Date: Thu, 7 Sep 2023 15:58:10 +0300
Subject: [PATCH] style update modal

---
 src/index.tsx                   |  3 +-
 src/ui_kit/Modal/CropModal2.tsx | 54 +++++++++++------------
 src/ui_kit/Modal/modal.css      | 76 +++++++++++++++++++++++++++++++++
 3 files changed, 105 insertions(+), 28 deletions(-)
 create mode 100644 src/ui_kit/Modal/modal.css

diff --git a/src/index.tsx b/src/index.tsx
index 40838698..edf541d7 100755
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -6,7 +6,6 @@ import "./index.css";
 import { BrowserRouter, Route, Routes } from "react-router-dom";
 import lightTheme from "./utils/themes/light";
 import { ThemeProvider } from "@mui/material";
-import HorizontalLinearStepper from "./ui_kit/Stepper";
 
 import StartPage from "./pages/startPage/StartPage";
 import Main from "./pages/main";
@@ -20,6 +19,8 @@ import MyQuizzes from "./pages/createQuize/MyQuizzes";
 import MyQuizzesFull from "./pages/createQuize/MyQuizzesFull";
 import ImageCrop from "@ui_kit/Modal/ImageCrop";
 
+import "./ui_kit/Modal/modal.css";
+
 const routeslink: { path: string; page: JSX.Element; header: boolean; sidebar: boolean }[] = [
   { path: "/", page: <MyQuizzesFull />, header: false, sidebar: false },
   { path: "/questions/:quizId", page: <QuestionsPage />, header: true, sidebar: true },
diff --git a/src/ui_kit/Modal/CropModal2.tsx b/src/ui_kit/Modal/CropModal2.tsx
index 807886bf..9d20546b 100644
--- a/src/ui_kit/Modal/CropModal2.tsx
+++ b/src/ui_kit/Modal/CropModal2.tsx
@@ -118,33 +118,6 @@ export const CropModal2: FC<Iprops> = ({ opened, onClose }) => {
 
   return (
     <>
-      {completedCrop && (
-        <div>
-          <canvas
-            ref={previewCanvasRef}
-            style={{
-              display: "none",
-              zIndex: "-999",
-              border: "1px solid black",
-              objectFit: "contain",
-              width: completedCrop.width,
-              height: completedCrop.height,
-            }}
-          />
-        </div>
-      )}
-      <div>
-        <a
-          href="#hidden"
-          ref={hiddenAnchorRef}
-          download
-          style={{
-            display: "none",
-          }}
-        >
-          Hidden download
-        </a>
-      </div>
       <Modal
         open={opened}
         onClose={onClose}
@@ -272,6 +245,33 @@ export const CropModal2: FC<Iprops> = ({ opened, onClose }) => {
           </Box>
         </Box>
       </Modal>
+      {completedCrop && (
+        <div>
+          <canvas
+            ref={previewCanvasRef}
+            style={{
+              display: "none",
+              zIndex: "-999",
+              border: "1px solid black",
+              objectFit: "contain",
+              width: completedCrop.width,
+              height: completedCrop.height,
+            }}
+          />
+        </div>
+      )}
+      <div>
+        <a
+          href="#hidden"
+          ref={hiddenAnchorRef}
+          download
+          style={{
+            display: "none",
+          }}
+        >
+          Hidden download
+        </a>
+      </div>
     </>
   );
 };
diff --git a/src/ui_kit/Modal/modal.css b/src/ui_kit/Modal/modal.css
new file mode 100644
index 00000000..34f8fe98
--- /dev/null
+++ b/src/ui_kit/Modal/modal.css
@@ -0,0 +1,76 @@
+.ReactCrop__drag-bar,
+.ord-e {
+  background-color: #7e2aea;
+}
+
+.ReactCrop__crop-selection:not(.ReactCrop--no-animate .ReactCrop__crop-selection) {
+  background-image: none;
+}
+
+.ReactCrop__drag-bar.ord-e {
+  right: 0;
+  top: 0;
+  width: 3px;
+  height: 100%;
+  margin-right: -3px;
+}
+
+.ReactCrop__drag-bar.ord-s {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  margin-bottom: -3px;
+}
+
+.ReactCrop__drag-bar.ord-n {
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  margin-bottom: -3px;
+}
+
+.ReactCrop__drag-bar.ord-w {
+  top: 0;
+  left: 0;
+  width: 3px;
+  height: 100%;
+  margin-left: -3px;
+}
+
+/* кружочки */
+
+.ReactCrop .ord-nw:after {
+  background-color: #7e2aea;
+}
+
+.ReactCrop .ord-n:after {
+  background-color: #7e2aea;
+}
+
+.ReactCrop .ord-ne:after {
+  background-color: #7e2aea;
+}
+
+.ReactCrop .ord-se:after {
+  background-color: #7e2aea;
+}
+
+.ReactCrop .ord-e:after {
+  background-color: #7e2aea;
+}
+
+.ReactCrop .ord-s:after {
+  background-color: #7e2aea;
+}
+
+.ReactCrop .ord-sw:after {
+  background-color: #7e2aea;
+}
+
+.ReactCrop .ord-w:after {
+  background-color: #7e2aea;
+}
+
+/* кружочки */