верстка авторизации, регистрации, восстановления пароля

package.json

@@ -22,8 +22,11 @@
     "@types/react": "^18.0.18",
     "@types/react-dom": "^18.0.6",
     "@types/react-router-dom": "^5.3.3",
+    "craco": "^0.0.3",
     "dayjs": "^1.11.5",
+    "formik": "^2.2.9",
     "moment": "^2.29.4",
+    "nanoid": "^4.0.1",
     "numeral": "^2.0.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -59,5 +62,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "craco-alias": "^3.0.1"
   }
 }

src/index.tsx

@@ -1,38 +1,56 @@
 import * as React from "react";
+import CssBaseline from "@mui/material/CssBaseline";
+import { ThemeProvider } from '@mui/material/styles';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter, Routes, Route } from "react-router-dom";
-import Authorization from "./pages/Authorization";
+import theme from "./theme";
-import Sections from "./pages/Sections";
+import PublicRoute from "@kitUI/publicRoute";
-import LoggedIn from "./pages/dashboard";
+import PrivateRoute from "@kitUI/privateRoute";
-import Error404 from "./pages/Error404";
+import Signin from "@pages/Authorization/signin";
+import Signup from "@pages/Authorization/signup";
+import Restore from "@pages/Authorization/restore";
+import Sections from "@pages/Sections";
+import LoggedIn from "@pages/dashboard";
+import Error404 from "@pages/Error404";
+import Users from "@pages/dashboard/Content/Users";
+import Entities from "@pages/dashboard/Content/Entities";
+import Tariffs from "@pages/dashboard/Content/Tariffs";
+import DiscountManagement from "@pages/dashboard/Content/DiscountManagement";
+import PromocodeManagement from "@pages/dashboard/Content/PromocodeManagement";
+import Support from "@pages/dashboard/Content/Support";
 
+const componentsArray = [
+    ["/users", <Users />],
+    ["/entities",<Entities />],
+    ["/tariffs", <Tariffs />],
+    ["/discounts", <DiscountManagement />],
+    ["/promocode", <PromocodeManagement />],
+    ["/support", <Support />]
+]
 
 const container = document.getElementById('root');
 const root = createRoot(container!);
 root.render(
     <React.StrictMode>
-        <BrowserRouter>
+        <CssBaseline />
-            <Routes>
+        <ThemeProvider theme={theme}>
-                <Route path="/" element={ <Authorization /> } />
+            <BrowserRouter>
-                <Route path="/dispatch" element={ <Sections /> } />
+                <Routes>
+                    <Route path="/" element={<PublicRoute><Signin /></PublicRoute> } />
+                    <Route path="/signin" element={ <PublicRoute><Signin /></PublicRoute> } />
+                    <Route path="/signup" element={ <PublicRoute><Signup /></PublicRoute> } />
+                    <Route path="/restore" element={ <PublicRoute><Restore /></PublicRoute> } />
+                    <Route path="/dispatch" element={ <PublicRoute><Sections /></PublicRoute> } />
+                    {componentsArray.map((e:any, i) => (
+                        <Route key={i} path={e[0]} element={ <PrivateRoute>{e[1]}</PrivateRoute> } />
+                    ))}
 
-                <Route path="/users"     element={ <LoggedIn section={1} /> } />
+                    <Route
-                <Route path="/entities"  element={ <LoggedIn section={2} /> } />
+                        path="*"
-                <Route path="/tariffs"   element={ <LoggedIn section={3} /> } />
+                        element={ <Error404 /> }
-                <Route path="/discounts" element={ <LoggedIn section={4} /> } />
+                    />
-                <Route path="/promocode" element={ <LoggedIn section={5} /> } />
+                </Routes>
-
+            </BrowserRouter>
-
+        </ThemeProvider>
-                <Route path="/support"   element={ <LoggedIn section={8} /> } />
-
-                <Route path="/modalAdmin"    element={ <LoggedIn section={-1} /> } />
-                <Route path="/modalUser"     element={ <LoggedIn section={-1} /> } />
-                <Route path="/modalEntities" element={ <LoggedIn section={-1} /> } />
-                <Route
-                    path="*"
-                    element={ <Error404 /> }
-                />
-            </Routes>
-      </BrowserRouter>
     </React.StrictMode>
 );

src/kitUI/cleverButton.tsx

@@ -0,0 +1,26 @@
+import { styled } from "@mui/material/styles";
+import { Button, Skeleton} from "@mui/material";
+const BeautifulButton = styled(Button)(({ theme }) => ({
+    width: "250px",
+    margin: "15px auto",
+    padding: "20px 30px",
+    fontSize: 18
+}));
+
+interface Props {
+    isReady: boolean
+    text:string
+    type?: "button" | "reset" | "submit"
+}
+
+export default ({
+    isReady = true,
+    text,
+    type = "button"
+}:Props) => {
+
+    if (isReady) {
+        return <BeautifulButton type={type}>{text}</BeautifulButton>
+    }
+    return <Skeleton>{text}</Skeleton>
+}

src/kitUI/outlinedInput.tsx

@@ -0,0 +1,15 @@
+import { styled } from "@mui/material/styles";
+import { TextField} from "@mui/material";
+export default styled(TextField)(({ theme }) => ({
+    color: theme.palette.grayLight.main,
+    "& .MuiInputLabel-root": {
+        color: theme.palette.grayLight.main,
+    },
+    "& .MuiFilledInput-root": {
+        border: theme.palette.grayLight.main+" 1px solid",
+        borderRadius: "0",
+        backgroundColor: theme.palette.hover.main,
+        color: theme.palette.grayLight.main,
+    }
+
+}));

src/kitUI/privateRoute.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { useLocation, Navigate } from 'react-router-dom'
+
+export default ({ children }: any) => {
+    console.log("проверяю")
+    const auth = true
+    const location = useLocation()
+
+    if (!auth) {
+        return children
+    }
+    return <Navigate to="/users" state={{from: location}} />
+
+}

src/kitUI/publicRoute.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { useLocation, Navigate } from 'react-router-dom'
+
+export default ({ children }: any) => {
+    console.log("проверяю")
+    const auth = true
+    const location = useLocation()
+
+    if (!auth) {
+        return <Navigate to="/signin" state={{from: location}} />
+    }
+
+    return children
+}

src/pages/Authorization/index.tsx

@@ -1,252 +0,0 @@
-import * as React from "react";
-import { Box, Typography, TextField, Checkbox, Button } from "@mui/material";
-import { ThemeProvider } from "@mui/material";
-import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
-import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
-import theme from "../../theme";
-import CssBaseline from '@mui/material/CssBaseline';
-import Logo from "../Logo";
-
-
-const Authorization: React.FC = () =>  {
-  return (
-    <React.Fragment>
-      <ThemeProvider theme={theme}>
-        <CssBaseline />
-          <Box sx={{
-              backgroundColor: theme.palette.primary.main,
-              color: theme.palette.secondary.main,
-              height: "100%"
-          }}>
-          <Box sx={{
-            width: "100vw",
-            height: "100vh",
-            display: "flex",
-            flexDirection: "column",
-            justifyContent: "center",
-            alignItems: "center"
-          }}>
-            <Box sx={{
-              maxWidth: "370px",
-              height: "700px",
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "space-between",
-              alignItems: "center",
-              padding: '0 10px'
-            }}>
-
-              <Logo />
-
-              <Box sx={{
-                width: "100%"
-              }}>
-                  <Typography variant="h5">
-                    Добро пожаловать
-                  </Typography>
-                  <Typography variant="h6" style={{ textAlign: "left" }}>
-                    Мы рады что вы выбрали нас!
-                  </Typography>
-              </Box>
-
-              <Box sx={{
-                width: "100%",
-                height: "135px",
-                display: "flex",
-                flexDirection: "column",
-                justifyContent: "space-between",
-                alignItems: "center"
-              }}>
-                <Box sx={{
-                  display: "flex",
-                  width: "100%",
-                  height: "65px"
-                }}>
-                  
-                  <Box sx={{ 
-                    width: "50px",
-                    display: "flex",
-                    flexDirection: "column",
-                    justifyContent: "center",
-                    alignItems: "left"
-                  }}>
-                    <EmailOutlinedIcon 
-                      sx={{ color: theme.palette.golden.main }}
-                      fontSize="large" />
-                  </Box>
-                  <Box sx={{
-                    display: "flex",
-                    flexDirection: "column",
-                    justifyContent: "center",
-                    alignItems: "center"
-                  }}>
-                    <TextField
-                      id = "standard-basic"
-                      label = "Эл. почта"
-                      variant = "filled"
-                      color = "secondary"
-                      sx = {{  }}
-                      InputProps={{
-                        style: {
-                          backgroundColor: theme.palette.content.main,
-                          color: theme.palette.secondary.main,
-                          paddingRight: '30px'
-                        } }} 
-                      InputLabelProps={{
-                        style: {
-                          color: theme.palette.secondary.main
-                        } }} 
-                    />
-                  </Box>
-                  
-                </Box>
-                <Box sx={{
-                  display: "flex",
-                  width: "100%",
-                  height: "65px",
-                }}>
-                  
-                  <Box sx={{ 
-                    width: "50px",
-                    display: "flex",
-                    flexDirection: "column",
-                    justifyContent: "center",
-                    alignItems: "left"
-                  }}>
-                    <LockOutlinedIcon 
-                      sx={{ color: theme.palette.golden.main }}
-                      fontSize="large" />
-                  </Box>
-                  <Box sx={{
-                    display: "flex",
-                    flexDirection: "column",
-                    justifyContent: "center",
-                    alignItems: "center"
-                  }}>
-                    <TextField
-                      id = "outlined-password-input"
-                      label = "Пароль"
-                      type = "password"
-                      variant = "filled"
-                      color = "secondary"
-                      sx = {{ }}
-                      InputProps={{
-                        style: {
-                          backgroundColor: theme.palette.content.main,
-                          color: theme.palette.secondary.main,
-                          paddingRight: '30px'
-                        } }} 
-                      InputLabelProps={{
-                        style: {
-                          color: theme.palette.secondary.main
-                        } }} 
-                    />
-                  </Box>
-
-                </Box>
-                
-              </Box>
-
-            
-              <Box sx={{
-                width: "100%",
-                height: "75px"
-              }}>
-                <Box sx={{
-                  display: "flex",
-                  width: "100%"
-                }}>
-                  
-                  <Box sx={{ 
-                    width: "50px",
-                    height: "46px"
-                  }}>
-                    <Checkbox sx={{ 
-                      color: theme.palette.secondary.main,
-                      transform: "scale(1.5)",
-                      '&.Mui-checked': {
-                        color: theme.palette.secondary.main,
-                      },
-                    }} />
-                  </Box>
-                  <Box sx={{ 
-                    display: "flex",
-                    flexDirection: "column",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    fontWeight: "600"
-                  }}>
-                    Запомнить этот компьютер
-                  </Box>
-                  
-                </Box>
-                <Box sx={{
-                  display: "flex",
-                  width: "100%"
-                }}>
-
-                  <Typography
-                    variant = "h4"
-                    sx={{
-                      color: theme.palette.golden.main,
-                      cursor: "pointer",
-                      "&:hover": {
-                        color: theme.palette.goldenDark.main
-                      }
-                    }}>
-                    Забыли пароль?
-                  </Typography>
-
-                </Box>
-                
-              </Box>
-
-
-              <Button 
-                variant = "contained"
-                sx={{
-                  backgroundColor: theme.palette.content.main,
-                  width: "100%",
-                  padding: '21px 16px',
-                  "&:hover": {
-                    backgroundColor: theme.palette.menu.main
-                  }
-                }}>
-                  ВОЙТИ
-              </Button>
-
-
-              <Box sx={{
-                width: "100%",
-                display: "flex",
-                justifyContent: "space-between",
-                alignItems: "center",
-              }}>
-                <Typography 
-                  variant = "h4">
-                    У вас нет аккаунта?
-                </Typography>
-                <Typography
-                  variant = "h4"
-                  sx={{
-                    color: theme.palette.golden.main,
-                    borderBottom: `1px solid ${theme.palette.golden.main}`,
-                    cursor: "pointer",
-                    "&:hover": {
-                      color: theme.palette.goldenDark.main
-                    }
-                  }}>
-                    Зарегистрируйтесь
-                </Typography>
-              </Box>
-
-            </Box>
-          </Box>
-        </Box>
-      </ThemeProvider>
-    </React.Fragment>
-  );
-}
-
-
-export default Authorization;

src/pages/Authorization/restore.tsx

@@ -0,0 +1,116 @@
+import * as React from "react";
+import { Formik, Field, Form } from 'formik';
+import {useTheme} from "@mui/material/styles";
+import { Link } from "react-router-dom"
+import {Box, Button, Checkbox, TextField, Typography} from "@mui/material";
+import Logo from "@pages/Logo";
+import CleverButton from "@kitUI/cleverButton"
+import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
+import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
+import OutlinedInput from "@kitUI/outlinedInput";
+
+export default () => {
+    const theme = useTheme()
+    const [restore, setRestore] = React.useState(true)
+    const [isReady, setIsReady] = React.useState(true)
+    if (restore) {
+        return (
+
+            <Formik
+                initialValues={{
+                    mail: ""
+                }}
+                onSubmit={(values) => {
+                    setRestore(false)
+                }}
+            >
+                <Form>
+                    <Box component="section"
+                         sx={{
+                             minHeight: "100vh",
+                             height: "100%",
+                             width: "100%",
+                             backgroundColor: theme.palette.content.main,
+                             display: "flex",
+                             justifyContent: "center",
+                             alignItems: "center",
+                             padding: "15px 0"
+                         }}
+                    >
+                        <Box component="article"
+                             sx={{
+                                 width: "350px",
+                                 backgroundColor: theme.palette.content.main,
+                                 display: "flex",
+                                 flexDirection: "column",
+                                 justifyContent: "center",
+                                 "> *": {
+                                     marginTop: "15px"
+                                 }
+                             }}
+                        >
+                            <Typography variant="h6" color={theme.palette.secondary.main}>Восстановление пароля</Typography>
+                            <Logo/>
+
+                            <Box sx={{display:"flex", alignItems:"center",marginTop:"15px","> *": {marginRight:"10px"}}}>
+                                <EmailOutlinedIcon htmlColor={theme.palette.golden.main}/>
+                                <Field as={OutlinedInput} autoComplete="none" variant="filled" name="mail" label="Эл. почта"/>
+                            </Box>
+                                <CleverButton type="submit" text="Отправить" isReady={isReady}/>
+                            <Link to="/signin" style={{textDecoration:"none"}}><Typography color={theme.palette.golden.main}>Я помню пароль</Typography></Link>
+                        </Box>
+                    </Box>
+                </Form>
+            </Formik>
+        )
+    } else {
+        return(
+            <Formik
+                initialValues={{
+                    code: ""
+                }}
+                onSubmit={(values) => {
+                }}
+            >
+                <Form>
+                    <Box component="section"
+                         sx={{
+                             minHeight: "100vh",
+                             height: "100%",
+                             width: "100%",
+                             backgroundColor: theme.palette.content.main,
+                             display: "flex",
+                             justifyContent: "center",
+                             alignItems: "center",
+                             padding: "15px 0"
+                         }}
+                    >
+                        <Box component="article"
+                             sx={{
+                                 width: "350px",
+                                 backgroundColor: theme.palette.content.main,
+                                 display: "flex",
+                                 flexDirection: "column",
+                                 justifyContent: "center",
+                                 "> *": {
+                                     marginTop: "15px"
+                                 }
+                             }}
+                        >
+                            <Typography variant="h6" color={theme.palette.secondary.main}>Восстановление пароля</Typography>
+                            <Logo/>
+
+                            <Box sx={{display:"flex", alignItems:"center",marginTop:"15px","> *": {marginRight:"10px"}}}>
+                                <LockOutlinedIcon htmlColor={theme.palette.golden.main}/>
+                                <Field as={OutlinedInput} name="code" variant="filled" label="Код из сообщения"/>
+                            </Box>
+
+                            <CleverButton type="submit" text="Отправить" isReady={isReady}/>
+                            <Link to="/signin" style={{textDecoration:"none"}}><Typography color={theme.palette.golden.main}>Я помню пароль</Typography></Link>
+                        </Box>
+                    </Box>
+                </Form>
+            </Formik>
+        )
+    }
+}

src/pages/Authorization/signin.tsx

@@ -0,0 +1,100 @@
+import * as React from "react"
+import {useTheme} from "@mui/material/styles"
+import { Formik, Field, Form } from 'formik'
+import { Link } from "react-router-dom"
+import { Box, Checkbox, TextField, Typography, FormControlLabel} from "@mui/material"
+import Logo from "@pages/Logo"
+import CleverButton from "@kitUI/cleverButton"
+import OutlinedInput from "@kitUI/outlinedInput"
+import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
+import LockOutlinedIcon from "@mui/icons-material/LockOutlined"
+
+export default () => {
+    const theme = useTheme()
+    const [isReady, setIsReady] = React.useState(true)
+
+    return(
+        <Formik
+            initialValues={{
+                login: "",
+                pass: ""
+            }}
+            onSubmit={(values) => {
+
+            }}
+        >
+            <Form>
+                <Box component="section"
+                     sx={{
+                         minHeight: "100vh",
+                         height: "100%",
+                         width: "100%",
+                         backgroundColor: theme.palette.content.main,
+                         display: "flex",
+                         justifyContent: "center",
+                         alignItems: "center",
+                         padding: "15px 0"
+                     }}
+                >
+                    <Box component="article"
+                         sx={{
+                             width: "350px",
+                             backgroundColor: theme.palette.content.main,
+                             display: "flex",
+                             flexDirection: "column",
+                             justifyContent: "center",
+                             "> *": {
+                                 marginTop: "15px"
+                             }
+                         }}
+                    >
+                        <Logo/>
+                        <Box>
+                            <Typography variant="h5" color={theme.palette.secondary.main}>Добро пожаловать</Typography>
+                            <Typography variant="h6" color={theme.palette.secondary.main}>Мы рады что вы выбрали нас!</Typography>
+                        </Box>
+                            <Box sx={{display:"flex", alignItems:"center",marginTop:"15px","> *": {marginRight:"10px"}}}>
+                                <EmailOutlinedIcon htmlColor={theme.palette.golden.main}/>
+                                <Field as={OutlinedInput} name="login" variant="filled" label="Эл. почта"/>
+                            </Box>
+                            <Box sx={{display:"flex", alignItems:"center",marginTop:"15px","> *": {marginRight:"10px"}}}>
+                                <LockOutlinedIcon htmlColor={theme.palette.golden.main}/>
+                                <Field as={OutlinedInput} type="password" name="pass" variant="filled" label="Пароль"/>
+                            </Box>
+                        <Box component="article"
+                            sx={{
+                                display: "flex",
+                                alignItems: "center"
+                            }}
+                        >
+                            <FormControlLabel
+                                sx={{color:"white"}}
+                                control={<Checkbox
+                                value="checkedA"
+                                inputProps={{ 'aria-label': 'Checkbox A' }}
+                                sx={{
+                                    color: "white",
+                                    transform: "scale(1.5)",
+                                    "&.Mui-checked": {
+                                        color: "white",
+                                    },
+                                    "&.MuiFormControlLabel-root": {
+                                        color: "white",
+                                    },
+                                }}
+                            />} label="Запомнить этот компьютер" />
+                        </Box>
+                        <Link to="/restore" style={{textDecoration:"none"}}><Typography color={theme.palette.golden.main}>Забыли пароль?</Typography></Link>
+                        <CleverButton type="submit"  text="Войти" isReady={isReady}/>
+                        <Box sx={{
+                            display: "flex"
+                        }}>
+                            <Typography color={theme.palette.secondary.main}>У вас нет аккаунта?&nbsp;</Typography>
+                            <Link to="/signup" style={{textDecoration:"none"}}><Typography color={theme.palette.golden.main}>Зарегестрируйтесь</Typography></Link>
+                        </Box>
+                    </Box>
+                </Box>
+            </Form>
+        </Formik>
+    )
+}

src/pages/Authorization/signup.tsx

@@ -0,0 +1,77 @@
+import * as React from "react"
+import { useTheme } from "@mui/material/styles"
+import { Formik, Field, Form } from "formik"
+import { Link } from "react-router-dom"
+import {Box, TextField, Typography} from "@mui/material"
+import CleverButton from "@kitUI/cleverButton"
+import OutlinedInput from "@kitUI/outlinedInput";
+import Logo from "@pages/Logo/index"
+import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined"
+import LockOutlinedIcon from "@mui/icons-material/LockOutlined"
+
+export default () => {
+    const theme = useTheme()
+    const [isReady, setIsReady] = React.useState(true)
+
+    return(
+        <Formik
+            initialValues={{
+                login: "",
+                first: "",
+                second: ""
+            }}
+            onSubmit={(values) => {
+            }}
+        >
+            <Form>
+                <Box component="section"
+                     sx={{
+                         minHeight: "100vh",
+                         height: "100%",
+                         width: "100%",
+                         backgroundColor: theme.palette.content.main,
+                         display: "flex",
+                         justifyContent: "center",
+                         alignItems: "center",
+                         padding: "15px 0"
+                     }}
+                >
+                    <Box component="article"
+                         sx={{
+                             width: "350px",
+                             backgroundColor: theme.palette.content.main,
+                             display: "flex",
+                             flexDirection: "column",
+                             justifyContent: "center",
+                             "> *": {
+                                 marginTop: "15px"
+                             }
+                         }}
+                    >
+                        <Typography variant="h6" color={theme.palette.secondary.main}>Новый аккаунт</Typography>
+                        <Logo/>
+
+                        <Box>
+                            <Typography variant="h5" color={theme.palette.secondary.main}>Добро пожаловать</Typography>
+                            <Typography variant="h6" color={theme.palette.secondary.main}>Мы рады что вы выбрали нас!</Typography>
+                        </Box>
+                        <Box sx={{display:"flex", alignItems:"center",marginTop:"15px","> *": {marginRight:"10px"}}}>
+                            <EmailOutlinedIcon htmlColor={theme.palette.golden.main}/>
+                            <Field as={OutlinedInput} name="login" variant="filled" label="Эл. почта"/>
+                        </Box>
+                        <Box sx={{display:"flex", alignItems:"center",marginTop:"15px","> *": {marginRight:"10px"}}}>
+                            <LockOutlinedIcon htmlColor={theme.palette.golden.main}/>
+                            <Field as={OutlinedInput} type="password" name="first" variant="filled" label="Пароль"/>
+                        </Box>
+                        <Box sx={{display:"flex", alignItems:"center",marginTop:"15px","> *": {marginRight:"10px"}}}>
+                            <LockOutlinedIcon htmlColor={theme.palette.golden.main}/>
+                            <Field as={OutlinedInput} type="password" name="second" variant="filled" label="Повторите пароль"/>
+                        </Box>
+                        <CleverButton type="submit" text="Отправить" isReady={isReady}/>
+                        <Link to="/signin" style={{textDecoration: "none"}} ><Typography color={theme.palette.golden.main}>У меня уже есть аккаунт</Typography></Link>
+                    </Box>
+                </Box>
+            </Form>
+        </Formik>
+    )
+}

src/pages/dashboard/Content/index.tsx

@@ -1,51 +0,0 @@
-import * as React from "react";
-import { Box } from "@mui/material";
-import Users from "./Users";
-import Entities from "./Entities";
-import Tariffs from "./Tariffs";
-import DiscountManagement from "./DiscountManagement";
-import PromocodeManagement from "./PromocodeManagement";
-
-
-import Support from "./Support";
-import Error404 from "../../Error404";
-
-
-export interface MWProps {
-  section: number
-}
-
-const Content: React.FC<MWProps> = ({ section }) =>  {
-  const componentsArray = [ 
-    <Error404 />, 
-    <Users />, 
-    <Entities />,
-    <Tariffs />, 
-    <DiscountManagement />, 
-    <PromocodeManagement />, 
-    <Error404 />, 
-    <Error404 />, 
-    <Support />
-  ];
-
-  return (
-    <React.Fragment>
-      <Box sx={{
-        width: "100%",
-        height: "100vh",
-        display: "flex",
-        flexDirection: "column",
-        alignItems: "center",
-        overflow: "auto",
-        overflowY: "auto",
-        padding: "160px 5px"
-      }}>
-        
-        { componentsArray[ section ] }
-      </Box>
-    </React.Fragment>
-  );
-}
-
-
-export default Content;

src/pages/dashboard/index.tsx

@@ -1,59 +1,57 @@
 import * as React from "react";
-import { Box } from "@mui/material";
+import { Outlet } from 'react-router-dom'
-import { ThemeProvider } from "@mui/material";
+import {useTheme} from '@mui/material/styles';
+import {Box} from "@mui/material";
+import {ThemeProvider} from "@mui/material";
 import CssBaseline from '@mui/material/CssBaseline';
 import Menu from "./Menu";
 import Header from "./Header";
-import Content from "./Content";
 import ModalAdmin from "./ModalAdmin";
 import ModalUser from "./ModalUser";
 import ModalEntities from "./ModalEntities";
-import theme from "../../theme";
+import {useMatch} from "react-router-dom";
-import { useMatch } from "react-router-dom";
 
 
 export interface MWProps {
-  section: number
+    section: number
 }
 
-const LoggedIn: React.FC<MWProps> = ({ section }) =>  {
+const LoggedIn: React.FC<MWProps> = ({section}) => {
-  return (
+    const theme = useTheme()
-    <React.Fragment>
+    return (
-      <ThemeProvider theme={theme}>
+        <React.Fragment>
-      <CssBaseline />
+            <Box sx={{
-        <Box sx={{
+                backgroundColor: theme.palette.primary.main,
-            backgroundColor: theme.palette.primary.main,
+                color: theme.palette.secondary.main,
-            color: theme.palette.secondary.main,
+                height: "100%"
-            height: "100%"
+            }}
-        }}>
+            >
-          <Box sx={{
+                <Box sx={{
-            backgroundColor: theme.palette.content.main,
+                    backgroundColor: theme.palette.content.main,
-            display: "flex",
+                    display: "flex",
-            width: "100%",
+                    width: "100%",
-            height: "100%"
+                    height: "100%"
-          }}>
+                }}>
 
-            <Menu />
+                    <Menu/>
-            <Box sx={{ 
+                    <Box sx={{
-                width: "100%",
+                        width: "100%",
-                display: "flex",
+                        display: "flex",
-                flexDirection: "column",
+                        flexDirection: "column",
-                justifyContent: "space-between",
+                        justifyContent: "space-between",
-                alignItems: "center"
+                        alignItems: "center"
-            }}>
+                    }}>
-              {/*<Header />*/}
+                        <Outlet />
-              <Content section={ section } />
+                    </Box>
+                </Box>
             </Box>
-          </Box>
-        </Box>
 
-      <ModalAdmin open={useMatch('/modalAdmin') !== null}/>
+            <ModalAdmin open={useMatch('/modalAdmin') !== null}/>
-      <ModalUser open={useMatch('/modalUser') !== null}/>
+            <ModalUser open={useMatch('/modalUser') !== null}/>
-      <ModalEntities open={useMatch('/modalEntities') !== null}/>
+            <ModalEntities open={useMatch('/modalEntities') !== null}/>
-        
+</React.Fragment>
-      </ThemeProvider>
+)
-    </React.Fragment>
+    ;
-  );
 }
 
 

src/theme.ts

@@ -28,6 +28,9 @@ declare module '@mui/material/styles' {
             content: {
                 main: string;
             },
+            hover: {
+                main: string;
+            },
             grayLight: {
                 main: string;
             },
@@ -83,7 +86,7 @@ declare module '@mui/material/styles' {
 const fontFamily: string = "GilroyRegular";
 const fontWeight: string = "600";
 
-const options1 = {
+const paletteColor = {
     palette: {
         primary: {
             main: "#111217"
@@ -123,7 +126,7 @@ const options1 = {
         }
     },
 }
-const options2 = {
+const theme = {
     typography: {
         body1: {
             fontFamily: fontFamily
@@ -169,12 +172,12 @@ const options2 = {
         MuiButton: {
             styleOverrides: {
                 root: {
-                    color: options1.palette.secondary.main,
+                    color: paletteColor.palette.secondary.main,
-                    backgroundColor: options1.palette.menu.main,
+                    backgroundColor: paletteColor.palette.menu.main,
                     padding: "12px",
                     fontSize: "13px",
                     "&:hover": {
-                        backgroundColor: options1.palette.hover.main,
+                        backgroundColor: paletteColor.palette.hover.main,
                     }
                 }
             },
@@ -184,11 +187,11 @@ const options2 = {
                         variant: 'enter'
                     },
                     style: {
-                        color: options1.palette.secondary.main,
+                        color: paletteColor.palette.secondary.main,
-                        backgroundColor: options1.palette.content.main,
+                        backgroundColor: paletteColor.palette.content.main,
                         padding: '12px 48px',
                         "&:hover": {
-                            backgroundColor: options1.palette.hover.main,
+                            backgroundColor: paletteColor.palette.hover.main,
                         }
 
                     },
@@ -202,7 +205,7 @@ const options2 = {
                         variant: "bar"
                     },
                     style: {
-                        backgroundColor: options1.palette.grayMedium.main,
+                        backgroundColor: paletteColor.palette.grayMedium.main,
                         padding: "15px",
                         width: "100%"
                     }
@@ -213,5 +216,4 @@ const options2 = {
 
 
 };
-const theme = createTheme(deepmerge(options1, options2));
+export default createTheme(deepmerge(paletteColor, theme));
-export default theme;

tsconfig.extend.json

@@ -5,7 +5,8 @@
             "@theme": ["./theme.ts"],
             "@root/*": ["./*"],
             "@kitUI/*": ["./kitUI/*"],
-            "@stores/*": ["./stores/*"]
+            "@stores/*": ["./stores/*"],
+            "@pages/*": ["./pages/*"]
         }
     }
 }