PenaSide/adminFront
3
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

техподдержка - на ревью

Browse Source
This commit is contained in:
Nikolai 2022-09-12 13:32:05 +03:00
parent da8a296e6d
commit 37fefc83c6
7 changed files with 386 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/Components/Content/index.tsx
View File

@ -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>
);

4
src/Components/Error404/index.tsx
View File

@ -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;
export default Error404;

3
src/Components/Header/index.tsx
View File

@ -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"
}}>

41
src/Components/Pagination/index.tsx Normal file
View File

@ -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;

306
src/Components/Support/index.tsx Normal file
View File

@ -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;

13
src/Components/Users/index.tsx
View File

@ -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: {

27
src/theme.ts
View File

@ -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 {