From 6a00a12d0cc094cc1fdfdb1af20482a2d61cff05 Mon Sep 17 00:00:00 2001
From: IlyaDoronin <ryletd@gmail.com>
Date: Wed, 23 Aug 2023 17:01:39 +0300
Subject: [PATCH] feat: UserModal close button

---
 src/pages/dashboard/ModalUser/index.tsx | 56 ++++++++++++++++++++-----
 1 file changed, 46 insertions(+), 10 deletions(-)

diff --git a/src/pages/dashboard/ModalUser/index.tsx b/src/pages/dashboard/ModalUser/index.tsx
index 8e4effb..3dd724f 100644
--- a/src/pages/dashboard/ModalUser/index.tsx
+++ b/src/pages/dashboard/ModalUser/index.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { useLinkClickHandler } from "react-router-dom";
+import { Link, useLinkClickHandler } from "react-router-dom";
 import {
   Box,
   Modal,
@@ -81,21 +81,57 @@ const ModalUser = () => {
               overflowX: "hidden",
             }}
           >
-            <Typography
-              id="transition-modal-title"
-              variant="caption"
+            <Box
               sx={{
-                display: "block",
+                position: "relative",
                 textAlign: "center",
-                fontSize: "18px",
                 padding: "12px",
-                color: theme.palette.common.white,
                 background: "#9A9AAF",
               }}
             >
-              Пользователь сервиса
-            </Typography>
-
+              <Typography
+                id="transition-modal-title"
+                variant="caption"
+                sx={{
+                  fontSize: "18px",
+                  color: theme.palette.common.white,
+                }}
+              >
+                Пользователь сервиса
+              </Typography>
+              <Link to="/users">
+                <Box
+                  sx={{
+                    cursor: "pointer",
+                    position: "absolute",
+                    top: "20px",
+                    right: "15px",
+                    height: "15px",
+                    width: "15px",
+                    "&::before": {
+                      content: `""`,
+                      position: "absolute",
+                      top: "5px",
+                      right: 0,
+                      transform: "rotate(45deg)",
+                      width: "18px",
+                      height: "2px",
+                      background: "#ffffff",
+                    },
+                    "&::after": {
+                      content: `""`,
+                      position: "absolute",
+                      top: "5px",
+                      right: 0,
+                      transform: "rotate(-45deg)",
+                      width: "18px",
+                      height: "2px",
+                      background: "#ffffff",
+                    },
+                  }}
+                />
+              </Link>
+            </Box>
             <Box sx={{ width: "100%", height: "100%", display: "flex" }}>
               <Box
                 sx={{