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

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

Browse Source
This commit is contained in:
krokodilka 2023-03-12 03:16:15 +03:00
parent bb7f6e4a92
commit 00ae7fb567
16 changed files with 47537 additions and 9233 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37914
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

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

70
src/index.tsx
View File

@ -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 Sections from "./pages/Sections";
import LoggedIn from "./pages/dashboard";
import Error404 from "./pages/Error404";
import theme from "./theme";
import PublicRoute from "@kitUI/publicRoute";
import PrivateRoute from "@kitUI/privateRoute";
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>
<Routes>
<Route path="/" element={ <Authorization /> } />
<Route path="/dispatch" element={ <Sections /> } />
<CssBaseline />
<ThemeProvider theme={theme}>
<BrowserRouter>
<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 path="/entities" element={ <LoggedIn section={2} /> } />
<Route path="/tariffs" element={ <LoggedIn section={3} /> } />
<Route path="/discounts" element={ <LoggedIn section={4} /> } />
<Route path="/promocode" element={ <LoggedIn section={5} /> } />
<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>
<Route
path="*"
element={ <Error404 /> }
/>
</Routes>
</BrowserRouter>
</ThemeProvider>
</React.StrictMode>
);

26
src/kitUI/cleverButton.tsx Normal file
View File

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

15
src/kitUI/outlinedInput.tsx Normal file
View File

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

14
src/kitUI/privateRoute.tsx Normal file
View File

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

14
src/kitUI/publicRoute.tsx Normal file
View File

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

252
src/pages/Authorization/index.tsx
View File

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

116
src/pages/Authorization/restore.tsx Normal file
View File

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

100
src/pages/Authorization/signin.tsx Normal file
View File

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

77
src/pages/Authorization/signup.tsx Normal file
View File

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

51
src/pages/dashboard/Content/index.tsx
View File

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

80
src/pages/dashboard/index.tsx
View File

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

24
src/theme.ts
View File

@ -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,
backgroundColor: options1.palette.menu.main,
color: paletteColor.palette.secondary.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,
backgroundColor: options1.palette.content.main,
color: paletteColor.palette.secondary.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 theme;
export default createTheme(deepmerge(paletteColor, theme));

3
tsconfig.extend.json
View File

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

18008
yarn.lock
View File

File diff suppressed because it is too large Load Diff