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

Style СardPrivilegie

Browse Source
This commit is contained in:
ArtChaos189 2023-05-25 15:06:46 +03:00
parent 7ee5df05f2
commit 84091dc994
2 changed files with 220 additions and 213 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/pages/Setting/CardPrivilegie.tsx
View File

@ -67,14 +67,14 @@ export const СardPrivilegie = ({ name, type, price, description, value, privile
key={type} key={type}
sx={{ sx={{
px: "20px", px: "20px",
py: "25px",
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
border: "1px solid gray", border: "1px solid gray",
}} }}
> >
<Box sx={{ display: "flex" }}> <Box sx={{ display: "flex", borderRight: "1px solid gray" }}>
<Box sx={{ width: "200px", borderRight: "1px solid black" }}> <Box sx={{ width: "200px", py: "25px" }}>
<Typography <Typography
variant="h6" variant="h6"
sx={{ sx={{
@ -85,9 +85,17 @@ export const СardPrivilegie = ({ name, type, price, description, value, privile
> >
{name} {name}
</Typography> </Typography>
<Tooltip placement="top" title={description}> <Tooltip
<IconButton> sx={{
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"> span: {
fontSize: "1rem",
},
}}
placement="top"
title={<Typography sx={{ fontSize: "16px" }}>{description}</Typography>}
>
<IconButton disableRipple>
<svg width="40" height="40" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path <path
d="M9.25 9.25H10V14.5H10.75" d="M9.25 9.25H10V14.5H10.75"
stroke="#7E2AEA" stroke="#7E2AEA"
@ -103,7 +111,7 @@ export const СardPrivilegie = ({ name, type, price, description, value, privile
</IconButton> </IconButton>
</Tooltip> </Tooltip>
<IconButton onClick={() => setInputOpen(!inputOpen)}> <IconButton onClick={() => setInputOpen(!inputOpen)}>
<ModeEditOutlineOutlinedIcon /> <ModeEditOutlineOutlinedIcon sx={{ color: "gray" }} />
</IconButton> </IconButton>
</Box> </Box>
</Box> </Box>

409
src/theme.ts
View File

@ -1,225 +1,224 @@
import { Theme } from '@mui/material/styles'; import { Theme } from "@mui/material/styles";
import { createTheme, PaletteColorOptions, ThemeOptions } from "@mui/material"; import { createTheme, PaletteColorOptions, ThemeOptions } from "@mui/material";
import { deepmerge } from '@mui/utils'; import { deepmerge } from "@mui/utils";
//import { createTheme } from "./types"; //import { createTheme } from "./types";
declare module '@mui/material/Button' { declare module "@mui/material/Button" {
interface ButtonPropsVariantOverrides { interface ButtonPropsVariantOverrides {
enter: true; enter: true;
} }
} }
declare module '@mui/material/Paper' { declare module "@mui/material/Paper" {
interface PaperPropsVariantOverrides { interface PaperPropsVariantOverrides {
bar: true; bar: true;
} }
} }
declare module '@mui/material/styles' { declare module "@mui/material/styles" {
interface Theme { interface Theme {
palette: { palette: {
primary: { primary: {
main: string; main: string;
}, };
secondary: { secondary: {
main: string; main: string;
}, };
menu: { menu: {
main: string; main: string;
}, };
content: { content: {
main: string; main: string;
}, };
hover: { hover: {
main: string; main: string;
}, };
grayLight: { grayLight: {
main: string; main: string;
}, };
grayDark: { grayDark: {
main: string; main: string;
}, };
grayMedium: { grayMedium: {
main: string; main: string;
}, };
grayDisabled: { grayDisabled: {
main: string; main: string;
}, };
golden: { golden: {
main: string; main: string;
}, };
goldenDark: { goldenDark: {
main: string; main: string;
}, };
goldenMedium: { goldenMedium: {
main: string; main: string;
}, };
caption: { caption: {
main: string; main: string;
}; };
}; };
} }
interface PaletteOptions { interface PaletteOptions {
menu?: PaletteColorOptions; menu?: PaletteColorOptions;
content?: PaletteColorOptions; content?: PaletteColorOptions;
grayLight?: PaletteColorOptions; grayLight?: PaletteColorOptions;
grayDark?: PaletteColorOptions; grayDark?: PaletteColorOptions;
grayMedium?: PaletteColorOptions; grayMedium?: PaletteColorOptions;
grayDisabled?: PaletteColorOptions; grayDisabled?: PaletteColorOptions;
golden?: PaletteColorOptions; golden?: PaletteColorOptions;
goldenDark?: PaletteColorOptions; goldenDark?: PaletteColorOptions;
goldenMedium?: PaletteColorOptions; goldenMedium?: PaletteColorOptions;
hover?: PaletteColorOptions; hover?: PaletteColorOptions;
} }
// allow configuration using `createTheme` // allow configuration using `createTheme`
interface TypographyVariants { interface TypographyVariants {
body1: React.CSSProperties; body1: React.CSSProperties;
subtitle1: React.CSSProperties; subtitle1: React.CSSProperties;
subtitle2: React.CSSProperties; subtitle2: React.CSSProperties;
caption: React.CSSProperties; caption: React.CSSProperties;
h5: React.CSSProperties; h5: React.CSSProperties;
h6: React.CSSProperties; h6: React.CSSProperties;
button: React.CSSProperties; button: React.CSSProperties;
} }
} }
const fontFamily: string = "GilroyRegular"; const fontFamily: string = "GilroyRegular";
const fontWeight: string = "600"; const fontWeight: string = "600";
const paletteColor = { const paletteColor = {
palette: { palette: {
primary: { primary: {
main: "#111217" main: "#111217",
},
secondary: {
main: "#e6e8ec"
},
menu: {
main: "#2f3339"
},
content: {
main: "#26272c"
},
hover: {
main: "#191a1e"
},
grayLight: {
main: "#707070"
},
grayDark: {
main: "#45494c"
},
grayMedium: {
main: "#424242"
},
grayDisabled: {
main: "#c0c1c3"
},
golden: {
main: "#eaba5b"
},
goldenDark: {
main: "#fe9903"
},
goldenMedium: {
main: "#2a2b1d"
}
}, },
secondary: {
main: "#e6e8ec",
},
menu: {
main: "#2f3339",
},
content: {
main: "#26272c",
},
hover: {
main: "#191a1e",
},
grayLight: {
main: "#707070",
},
grayDark: {
main: "#45494c",
},
grayMedium: {
main: "#424242",
},
grayDisabled: {
main: "#c0c1c3",
},
golden: {
main: "#eaba5b",
},
goldenDark: {
main: "#fe9903",
},
goldenMedium: {
main: "#2a2b1d",
},
},
}; };
const theme: ThemeOptions = { const theme: ThemeOptions = {
typography: { typography: {
body1: { body1: {
fontFamily: fontFamily fontFamily: fontFamily,
},
subtitle1: {
fontFamily: fontFamily,
fontWeight: fontWeight,
fontSize: 25
},
subtitle2: {
fontFamily: fontFamily,
fontSize: 25,
textAlign: "center"
},
caption: {
fontFamily: fontFamily,
fontWeight: fontWeight,
fontSize: 21
},
h5: {
fontFamily: fontFamily,
fontWeight: fontWeight,
fontSize: 35
},
h6: {
fontFamily: fontFamily,
fontWeight: fontWeight,
fontSize: 18
},
button: {
fontFamily: fontFamily,
fontWeight: fontWeight,
fontSize: 22
},
h4: {
fontFamily: fontFamily,
fontWeight: fontWeight,
fontSize: 16
}
}, },
subtitle1: {
components: { fontFamily: fontFamily,
MuiButton: { fontWeight: fontWeight,
styleOverrides: { fontSize: 25,
root: {
color: paletteColor.palette.secondary.main,
backgroundColor: paletteColor.palette.menu.main,
padding: "12px",
fontSize: "13px",
"&:hover": {
backgroundColor: paletteColor.palette.hover.main,
}
}
},
variants: [
{
props: {
variant: 'enter'
},
style: {
color: paletteColor.palette.secondary.main,
backgroundColor: paletteColor.palette.content.main,
padding: '12px 48px',
"&:hover": {
backgroundColor: paletteColor.palette.hover.main,
}
},
},
],
},
MuiPaper: {
variants: [
{
props: {
variant: "bar"
},
style: {
backgroundColor: paletteColor.palette.grayMedium.main,
padding: "15px",
width: "100%"
}
}
]
},
MuiButtonBase: {
styleOverrides: {
root: {
fontFamily,
fontSize: "16px",
}
},
},
}, },
subtitle2: {
fontFamily: fontFamily,
fontSize: 25,
textAlign: "center",
},
caption: {
fontFamily: fontFamily,
fontWeight: fontWeight,
fontSize: 21,
},
h5: {
fontFamily: fontFamily,
fontWeight: fontWeight,
fontSize: 35,
},
h6: {
fontFamily: fontFamily,
fontWeight: fontWeight,
fontSize: 18,
},
button: {
fontFamily: fontFamily,
fontWeight: fontWeight,
fontSize: 22,
},
h4: {
fontFamily: fontFamily,
fontWeight: fontWeight,
fontSize: 16,
},
},
components: {
MuiButton: {
styleOverrides: {
root: {
color: paletteColor.palette.secondary.main,
backgroundColor: paletteColor.palette.menu.main,
padding: "12px",
fontSize: "13px",
"&:hover": {
backgroundColor: paletteColor.palette.hover.main,
},
},
},
variants: [
{
props: {
variant: "enter",
},
style: {
color: paletteColor.palette.secondary.main,
backgroundColor: paletteColor.palette.content.main,
padding: "12px 48px",
"&:hover": {
backgroundColor: paletteColor.palette.hover.main,
},
},
},
],
},
MuiPaper: {
variants: [
{
props: {
variant: "bar",
},
style: {
backgroundColor: paletteColor.palette.grayMedium.main,
padding: "15px",
width: "100%",
},
},
],
},
MuiButtonBase: {
styleOverrides: {
root: {
fontFamily,
fontSize: "16px",
},
},
},
},
}; };
export default createTheme(deepmerge(paletteColor, theme)); export default createTheme(deepmerge(paletteColor, theme));