From 37fefc83c6a3b0fda743f8a6fa349cf5a653775f Mon Sep 17 00:00:00 2001
From: Nikolai <ni.tkachuk@yandex.ru>
Date: Mon, 12 Sep 2022 13:32:05 +0300
Subject: [PATCH] =?UTF-8?q?=D1=82=D0=B5=D1=85=D0=BF=D0=BE=D0=B4=D0=B4?=
 =?UTF-8?q?=D0=B5=D1=80=D0=B6=D0=BA=D0=B0=20-=20=D0=BD=D0=B0=20=D1=80?=
 =?UTF-8?q?=D0=B5=D0=B2=D1=8C=D1=8E?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Components/Content/index.tsx    |   9 +-
 src/Components/Error404/index.tsx   |   4 +-
 src/Components/Header/index.tsx     |   3 +-
 src/Components/Pagination/index.tsx |  41 ++++
 src/Components/Support/index.tsx    | 306 ++++++++++++++++++++++++++++
 src/Components/Users/index.tsx      |  13 +-
 src/theme.ts                        |  27 ++-
 7 files changed, 386 insertions(+), 17 deletions(-)
 create mode 100644 src/Components/Pagination/index.tsx
 create mode 100644 src/Components/Support/index.tsx

diff --git a/src/Components/Content/index.tsx b/src/Components/Content/index.tsx
index 4e1be81..a67fe2a 100644
--- a/src/Components/Content/index.tsx
+++ b/src/Components/Content/index.tsx
@@ -1,7 +1,6 @@
 import * as React from "react";
 import { Box } from "@mui/material";
-import theme from "../../theme";
-import Users from "../Users";
+import Support from "../Support";
 
 
 const Content: React.FC = () =>  {
@@ -13,9 +12,11 @@ const Content: React.FC = () =>  {
         display: "flex",
         flexDirection: "column",
         alignItems: "center",
-        overflowY: "scroll"
+        overflow: "auto",
+        overflowY: "auto",
+        padding: "60px"
       }}>
-        <Users />
+        <Support />
       </Box>
     </React.Fragment>
   );
diff --git a/src/Components/Error404/index.tsx b/src/Components/Error404/index.tsx
index ec18095..bb28b21 100644
--- a/src/Components/Error404/index.tsx
+++ b/src/Components/Error404/index.tsx
@@ -5,7 +5,7 @@ import theme from "../../theme";
 import CssBaseline from '@mui/material/CssBaseline';
 
 
-const Authorization: React.FC = () =>  {
+const Error404: React.FC = () =>  {
   return (
     <React.Fragment>
       <ThemeProvider theme={theme}>
@@ -54,4 +54,4 @@ const Authorization: React.FC = () =>  {
 }
 
 
-export default Authorization;
\ No newline at end of file
+export default Error404;
\ No newline at end of file
diff --git a/src/Components/Header/index.tsx b/src/Components/Header/index.tsx
index 0f44676..0155823 100644
--- a/src/Components/Header/index.tsx
+++ b/src/Components/Header/index.tsx
@@ -12,7 +12,8 @@ const Header: React.FC = () =>  {
         backgroundColor: theme.palette.menu.main,
         width: "100%",
         height: "85px",
-        borderBottom: "1px solid #45494c",
+        borderBottom: "1px solid",
+        borderColor: theme.palette.grayDark.main,
         display: "flex",
         justifyContent: "space-between"
       }}>
diff --git a/src/Components/Pagination/index.tsx b/src/Components/Pagination/index.tsx
new file mode 100644
index 0000000..27badda
--- /dev/null
+++ b/src/Components/Pagination/index.tsx
@@ -0,0 +1,41 @@
+import * as React from "react";
+import { Box, Pagination } from "@mui/material";
+import theme from "../../theme";
+
+
+const Users: React.FC = () =>  {
+  return (
+    <React.Fragment>
+      <Box sx={{
+        width: "100%",
+        border: "1px solid",
+        borderColor: theme.palette.grayDark.main,
+        borderRadius: "3px",
+        padding: "10px"
+      }}>
+        <Box sx={{
+          borderRadius: "3px",
+          padding: "10px",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center"
+        }}>
+          <Pagination 
+            count = {41}
+            sx ={{
+              "& .MuiPaginationItem-root": {
+                color: theme.palette.secondary.main
+              },
+              '.Mui-selected': {
+                backgroundColor: theme.palette.grayDark.main,
+              }
+            }}
+          />
+        </Box>
+      </Box>
+    </React.Fragment>
+  );
+}
+
+
+export default Users;
\ No newline at end of file
diff --git a/src/Components/Support/index.tsx b/src/Components/Support/index.tsx
new file mode 100644
index 0000000..eee1f17
--- /dev/null
+++ b/src/Components/Support/index.tsx
@@ -0,0 +1,306 @@
+import * as React from "react";
+import { Box, Button } from "@mui/material";
+import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
+import HighlightOffOutlinedIcon from '@mui/icons-material/HighlightOffOutlined';
+import CircleIcon from '@mui/icons-material/Circle';
+import theme from "../../theme";
+import { green } from '@mui/material/colors';
+import Pagination from "../Pagination";
+
+
+const Users: React.FC = () =>  {
+  return (
+    <React.Fragment>
+      <Box sx={{
+        width: "100%",
+        display: "flex",
+        justifyContent: "space-between"
+      }}>
+        <Box sx={{
+          border: "1px solid",
+          borderColor: theme.palette.grayDark.main,
+          width: "53%",
+          height: "100%",
+          borderRadius: "3px"
+        }}></Box>
+
+        <Box sx={{
+          width: "max(40%, 460px)",
+          height: "540px",
+          display: "flex",
+          flexDirection: "column",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}>
+          <Box sx={{
+            width: "100%",
+            border: "1px solid",
+            borderColor: theme.palette.grayDark.main,
+            borderRadius: "3px",
+            padding: "10px"
+          }}>
+            <Button 
+              variant = "contained"
+              sx={{
+                backgroundColor: theme.palette.grayDark.main,
+                width: "100%",
+                height: "45px",
+                fontSize: "15px",
+                fontWeight: "normal",
+                textTransform: "capitalize",
+                "&:hover": {
+                  backgroundColor: theme.palette.menu.main
+                }
+              }}>
+                Поиск
+                <SearchOutlinedIcon />
+            </Button>
+            <Button 
+              variant = "text"
+              sx={{
+                width: "100%",
+                height: "35px",
+                fontSize: "14px",
+                fontWeight: "normal",
+                color: theme.palette.secondary.main,
+                border: "1px solid",
+                borderColor: theme.palette.golden.main,
+                borderRadius: 0,
+                "&:hover": {
+                  backgroundColor: theme.palette.menu.main
+                }
+              }}>
+                ЗАКРЫТЬ ТИКЕТ 
+                <HighlightOffOutlinedIcon />
+            </Button>
+          </Box>
+
+          <Box sx={{
+            width: "100%",
+            height: "350px",
+            border: "1px solid",
+            borderColor: theme.palette.grayDark.main,
+            borderRadius: "3px",
+            overflow: "auto",
+            overflowY: "auto",
+            padding: "10px"
+          }}>
+
+            <Box sx={{
+              minHeight: "70px",
+              display: "flex",
+              justifyContent: "space-between"
+            }}>
+              <Box sx={{
+                width: "150px",
+                padding: "10px",
+                textAlign: "center",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+              }}>
+                10.09.2022
+              </Box>
+              <Box sx={{
+                width: "100%",
+                padding: "10px",
+                textAlign: "center",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+              }}>
+                ДЕНЬГИ НЕ ПРИШЛИ
+              </Box>
+              <Box sx={{
+                width: "30px",
+                padding: "10px",
+                textAlign: "center",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+              }}>
+                <CircleIcon sx={{
+                  color: green[ 700 ],
+                  transform: "scale(0.8)"
+                }} />
+              </Box>
+              <Box sx={{
+                width: "150px",
+                padding: "10px",
+                textAlign: "center",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+              }}>
+                ИНФО
+              </Box>
+            </Box>
+
+            <Box sx={{
+              minHeight: "70px",
+              display: "flex",
+              justifyContent: "space-between",
+              border: "1px solid",
+              borderColor: theme.palette.golden.main,
+              backgroundColor: theme.palette.goldenMedium.main
+            }}>
+              <Box sx={{
+                width: "150px",
+                padding: "10px",
+                textAlign: "center",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+              }}>
+                09.09.2022
+              </Box>
+              <Box sx={{
+                width: "100%",
+                padding: "10px",
+                textAlign: "center",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+              }}>
+                ВЫВОД
+              </Box>
+              <Box sx={{
+                width: "30px",
+                padding: "10px",
+                textAlign: "center",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+              }}>
+                <CircleIcon sx={{
+                  color: green[ 700 ],
+                  transform: "scale(0.8)"
+                }} />
+              </Box>
+              <Box sx={{
+                width: "150px",
+                padding: "10px",
+                textAlign: "center",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+              }}>
+                ИНФО
+              </Box>
+            </Box>
+
+            <Box sx={{
+              minHeight: "70px",
+              display: "flex",
+              justifyContent: "space-between",
+              border: "1px solid",
+              borderColor: theme.palette.golden.main,
+              backgroundColor: theme.palette.goldenMedium.main
+            }}>
+              <Box sx={{
+                width: "150px",
+                padding: "10px",
+                textAlign: "center",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+              }}>
+                09.09.2022
+              </Box>
+              <Box sx={{
+                width: "100%",
+                padding: "10px",
+                textAlign: "center",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+              }}>
+                ЗДРАВСТВУЙТЕ, МОЖНО ЛИ ОПЛАТИТЬ ЛИЦОМ НЕ ДОСТИГШИМ 18 ЛЕТ, ОПЛАТИТЬ 300 РУБЛЕЙ ЧЕРЕЗ КИВИ
+              </Box>
+              <Box sx={{
+                width: "30px",
+                padding: "10px",
+                textAlign: "center",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+              }}>
+                <CircleIcon sx={{
+                  color: green[ 700 ],
+                  transform: "scale(0.8)"
+                }} />
+              </Box>
+              <Box sx={{
+                width: "150px",
+                padding: "10px",
+                textAlign: "center",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+              }}>
+                ИНФО
+              </Box>
+            </Box>
+
+            <Box sx={{
+              minHeight: "70px",
+              display: "flex",
+              justifyContent: "space-between"
+            }}>
+              <Box sx={{
+                width: "150px",
+                padding: "10px",
+                textAlign: "center",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+              }}>
+                07.09.2022
+              </Box>
+              <Box sx={{
+                width: "100%",
+                padding: "10px",
+                textAlign: "center",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+              }}>
+                ПРОБЛЕМЫ С ВЫВОДОМ
+              </Box>
+              <Box sx={{
+                width: "30px",
+                padding: "10px",
+                textAlign: "center",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+              }}>
+                <CircleIcon sx={{
+                  color: green[ 700 ],
+                  transform: "scale(0.8)"
+                }} />
+              </Box>
+              <Box sx={{
+                width: "150px",
+                padding: "10px",
+                textAlign: "center",
+                display: "flex",
+                justifyContent: "center",
+                alignItems: "center"
+              }}>
+                ИНФО
+              </Box>
+            </Box>
+
+          </Box>
+
+          <Pagination />
+
+        </Box>
+      </Box>
+    </React.Fragment>
+  );
+}
+
+
+export default Users;
\ No newline at end of file
diff --git a/src/Components/Users/index.tsx b/src/Components/Users/index.tsx
index ef723d9..99ef391 100644
--- a/src/Components/Users/index.tsx
+++ b/src/Components/Users/index.tsx
@@ -22,14 +22,13 @@ const Users: React.FC = () =>  {
         variant="caption"  
         sx={{
           width: "90%",
-          height: "1660px",
+          height: "60px",
           display: "flex",
           flexDirection: "column",
           justifyContent: "center",
           alignItems: "center",
           border: "2px solid",
           fontWeight: "normal",
-          marginTop: "60px",
           borderColor: theme.palette.golden.main
       }}>
         ИНФОРМАЦИЯ О ПРОЕКТЕ
@@ -45,7 +44,7 @@ const Users: React.FC = () =>  {
         <TableHead>
           <TableRow sx={{
             borderBottom: "2px solid",
-            borderColor: theme.palette.gray.main,
+            borderColor: theme.palette.grayLight.main,
             height: "100px"
           }}>
             <TableCell>
@@ -81,7 +80,7 @@ const Users: React.FC = () =>  {
         <TableBody>
           <TableRow sx={{
             borderBottom: "2px solid",
-            borderColor: theme.palette.gray.main,
+            borderColor: theme.palette.grayLight.main,
             height: "100px"
           }}>
             <TableCell>
@@ -113,7 +112,7 @@ const Users: React.FC = () =>  {
 
           <TableRow sx={{
             borderBottom: "2px solid",
-            borderColor: theme.palette.gray.main,
+            borderColor: theme.palette.grayLight.main,
             height: "100px"
           }}>
             <TableCell>
@@ -196,7 +195,7 @@ const Users: React.FC = () =>  {
                 backgroundColor: theme.palette.content.main,
                 color: theme.palette.secondary.main,
                 borderBottom: "1px solid",
-                borderColor: theme.palette.gray.main,
+                borderColor: theme.palette.grayLight.main,
               } }} 
             InputLabelProps={{
               style: {
@@ -231,7 +230,7 @@ const Users: React.FC = () =>  {
                 backgroundColor: theme.palette.content.main,
                 color: theme.palette.secondary.main,
                 borderBottom: "1px solid",
-                borderColor: theme.palette.gray.main,
+                borderColor: theme.palette.grayLight.main,
               } }} 
             InputLabelProps={{
               style: {
diff --git a/src/theme.ts b/src/theme.ts
index b3b60d6..d1a7a89 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -18,14 +18,23 @@ const theme = createTheme({
     content: {
       main: "#26272c"
     },
-    gray: {
+    grayLight: {
       main: "#707070"
     },
+    grayDark: {
+      main: "#45494c"
+    },
+    grayMedium: {
+      main: "#424242"
+    },
     golden: {
       main: "#eaba5b"
     },
     goldenDark: {
       main: "#fe9903"
+    },
+    goldenMedium: {
+      main: "#2a2b1d"
     }
   },
 
@@ -88,7 +97,13 @@ declare module '@mui/material/styles' {
       content: {
         main: string;
       },
-      gray: {
+      grayLight: {
+        main: string;
+      },
+      grayDark: {
+        main: string;
+      },
+      grayMedium: {
         main: string;
       },
       golden: {
@@ -97,14 +112,20 @@ declare module '@mui/material/styles' {
       goldenDark: {
         main: string;
       },
+      goldenMedium: {
+        main: string;
+      }
     }
   }
   interface PaletteOptions {
     menu?: PaletteColorOptions;
     content?: PaletteColorOptions;
-    gray?: PaletteColorOptions;
+    grayLight?: PaletteColorOptions;
+    grayDark?: PaletteColorOptions;
+    grayMedium?: PaletteColorOptions;
     golden?: PaletteColorOptions;
     goldenDark?: PaletteColorOptions;
+    goldenMedium?: PaletteColorOptions;
   }
   // allow configuration using `createTheme`
   interface TypographyVariants {