diff --git a/src/Components/Authorization/index.tsx b/src/Components/Authorization/index.tsx index 3521f6d..3826af3 100644 --- a/src/Components/Authorization/index.tsx +++ b/src/Components/Authorization/index.tsx @@ -1,259 +1,211 @@ import * as React from "react"; -import { CssBaseline, Box, Typography, TextField, Checkbox, Button } from "@mui/material"; +import { Box, Typography, TextField, Checkbox, Button } from "@mui/material"; import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined"; import LockOutlinedIcon from "@mui/icons-material/LockOutlined"; import theme from "../../theme"; +import Logo from "../Logo"; const Authorization: React.FC = () => { return ( - + + + Добро пожаловать + + + Мы рады что вы выбрали нас! + + + + - - - - PENA - - - HUB - - - - - - Добро пожаловать - - - Мы рады что вы выбрали нас! - - - - + + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - Запомнить этот компьютер - - - - - - - Забыли пароль? - - - - + } }} + InputLabelProps={{ + style: { + color: theme.palette.secondary.main + } }} + /> - - - - - - - - У вас нет аккаунта? - - - Зарегистрируйтесь - - - - + + + + + + + + + + + + + + + + + + + + + Запомнить этот компьютер + + + + + + + Забыли пароль? + + + + + + + + + + + + + У вас нет аккаунта? + + + Зарегистрируйтесь + + ); } diff --git a/src/Components/CenterBox/index.tsx b/src/Components/CenterBox/index.tsx new file mode 100644 index 0000000..0dfe74f --- /dev/null +++ b/src/Components/CenterBox/index.tsx @@ -0,0 +1,34 @@ +import * as React from "react"; +import { Box } from "@mui/material"; +import theme from "../../theme"; +import Authorization from "../Authorization"; + + +const CenterBox: React.FC = () => { + return ( + + + + + + + + ); +} + + +export default CenterBox; \ No newline at end of file diff --git a/src/Components/Content/index.tsx b/src/Components/Content/index.tsx new file mode 100644 index 0000000..6c84f78 --- /dev/null +++ b/src/Components/Content/index.tsx @@ -0,0 +1,26 @@ +import * as React from "react"; +import { Box } from "@mui/material"; +import theme from "../../theme"; +import Users from "../Users"; + + +const Content: React.FC = () => { + return ( + + + хочу быть 100% высоты + + + ); +} + + +export default Content; \ No newline at end of file diff --git a/src/Components/Header/index.tsx b/src/Components/Header/index.tsx new file mode 100644 index 0000000..4a9db72 --- /dev/null +++ b/src/Components/Header/index.tsx @@ -0,0 +1,65 @@ +import * as React from "react"; +import { Box, Typography } from "@mui/material"; +import theme from "../../theme"; +import ExitToAppOutlinedIcon from '@mui/icons-material/ExitToAppOutlined'; +import Logo from "../Logo"; + + +const Header: React.FC = () => { + return ( + + + + + + + + + Добро пожаловать, Администратор сервиса + + + + + + + + + ); +} + + +export default Header; \ No newline at end of file diff --git a/src/Components/LoggedIn/index.tsx b/src/Components/LoggedIn/index.tsx new file mode 100644 index 0000000..997b4bb --- /dev/null +++ b/src/Components/LoggedIn/index.tsx @@ -0,0 +1,36 @@ +import * as React from "react"; +import { Box } from "@mui/material"; +import theme from "../../theme"; +import Menu from "../Menu"; +import Header from "../Header"; +import Content from "../Content"; + + +const CenterBox: React.FC = () => { + return ( + + + + +
+ + + + + ); +} + + +export default CenterBox; \ No newline at end of file diff --git a/src/Components/Logo/index.tsx b/src/Components/Logo/index.tsx new file mode 100644 index 0000000..a3e8793 --- /dev/null +++ b/src/Components/Logo/index.tsx @@ -0,0 +1,40 @@ +import * as React from "react"; +import { Box, Typography } from "@mui/material"; +import theme from "../../theme"; + + +const Authorization: React.FC = () => { + return ( + + + + PENA + + + HUB + + + + ); +} + + +export default Authorization; \ No newline at end of file diff --git a/src/Components/Menu/index.tsx b/src/Components/Menu/index.tsx new file mode 100644 index 0000000..b198fe5 --- /dev/null +++ b/src/Components/Menu/index.tsx @@ -0,0 +1,155 @@ +import * as React from "react"; +import { Box } from "@mui/material"; +import MenuOutlinedIcon from '@mui/icons-material/MenuOutlined'; +import PersonOutlineOutlinedIcon from '@mui/icons-material/PersonOutlineOutlined'; +import SettingsOutlinedIcon from '@mui/icons-material/SettingsOutlined'; +import BathtubOutlinedIcon from '@mui/icons-material/BathtubOutlined'; +import AddPhotoAlternateOutlinedIcon from '@mui/icons-material/AddPhotoAlternateOutlined'; +import NaturePeopleOutlinedIcon from '@mui/icons-material/NaturePeopleOutlined'; +import SettingsIcon from '@mui/icons-material/Settings'; +import CameraIcon from '@mui/icons-material/Camera'; +import HeadsetMicOutlinedIcon from '@mui/icons-material/HeadsetMicOutlined'; +import theme from "../../theme"; + + +const Menu: React.FC = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +} + + +export default Menu; \ No newline at end of file diff --git a/src/Components/Sections/index.tsx b/src/Components/Sections/index.tsx index f1b852e..9cff2a1 100644 --- a/src/Components/Sections/index.tsx +++ b/src/Components/Sections/index.tsx @@ -1,201 +1,153 @@ import * as React from "react"; -import { Box, Typography, TextField, Checkbox, Button } from "@mui/material"; -import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined"; -import LockOutlinedIcon from "@mui/icons-material/LockOutlined"; +import { Box, Typography, Button } from "@mui/material"; import theme from "../../theme"; +import Logo from "../Logo"; const Authorization: React.FC = () => { return ( + - - - - - PENA - - - HUB - - - - - - - Все пользователи - - - - - - - - - - Общая статистика - - - - - - - - - - Шаблонизатор документов - - - - - - - - - - Конструктор опросов - - - - - - - - - - Сокращатель ссылок - - - - - - + + + Все пользователи + + + + + + + Общая статистика + + + + + + + + + + Шаблонизатор документов + + + + + + + + + + Конструктор опросов + + + + + + + + + + Сокращатель ссылок + + + + + ); } diff --git a/src/Components/Users/index.tsx b/src/Components/Users/index.tsx new file mode 100644 index 0000000..f486f97 --- /dev/null +++ b/src/Components/Users/index.tsx @@ -0,0 +1,55 @@ +import * as React from "react"; +import { Box, Typography } from "@mui/material"; +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import TableCell from '@mui/material/TableCell'; +import TableRow from '@mui/material/TableRow'; +import theme from "../../theme"; + + +const Users: React.FC = () => { + return ( + + + ИНФОРМАЦИЯ О ПРОЕКТЕ + + + + + + + admin + + + Администратор сервиса + + + чек + + + +
+ + + ); +} + + +export default Users; \ No newline at end of file diff --git a/src/index.tsx b/src/index.tsx index 59d3065..080807c 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -1,11 +1,11 @@ import * as React from "react"; -// import * as ReactDOM from "react-dom"; -import Authorization from "./Components/Authorization"; -import Sections from "./Components/Sections"; +import { Box } from "@mui/material"; import { ThemeProvider } from "@mui/material"; -import CssBaseline from '@mui/material/CssBaseline'; import theme from "./theme"; import { createRoot } from 'react-dom/client'; +import CssBaseline from '@mui/material/CssBaseline'; +import LoggedIn from "./Components/LoggedIn"; + const container = document.getElementById('root'); const root = createRoot(container!); @@ -13,7 +13,13 @@ root.render( - + + + ); \ No newline at end of file diff --git a/src/theme.ts b/src/theme.ts index a384cc1..862a269 100644 --- a/src/theme.ts +++ b/src/theme.ts @@ -31,7 +31,8 @@ const theme = createTheme({ }, subtitle2: { fontFamily: fontFamily, - fontSize: 25 + fontSize: 25, + textAlign: "center" }, caption: { fontFamily: fontFamily, @@ -46,7 +47,8 @@ const theme = createTheme({ h6: { fontFamily: fontFamily, fontWeight: fontWeight, - fontSize: 18 + fontSize: 18, + textAlign: "center" }, button: { fontFamily: fontFamily,