Style СardPrivilegie
This commit is contained in:
ArtChaos189
parent
7ee5df05f2
commit
84091dc994
@ -67,14 +67,14 @@ export const СardPrivilegie = ({ name, type, price, description, value, privile
|
||||
key={type}
|
||||
sx={{
|
||||
px: "20px",
|
||||
py: "25px",
|
||||
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
border: "1px solid gray",
|
||||
}}
|
||||
>
|
||||
<Box sx={{ display: "flex" }}>
|
||||
<Box sx={{ width: "200px", borderRight: "1px solid black" }}>
|
||||
<Box sx={{ display: "flex", borderRight: "1px solid gray" }}>
|
||||
<Box sx={{ width: "200px", py: "25px" }}>
|
||||
<Typography
|
||||
variant="h6"
|
||||
sx={{
|
||||
@ -85,9 +85,17 @@ export const СardPrivilegie = ({ name, type, price, description, value, privile
|
||||
>
|
||||
{name}
|
||||
</Typography>
|
||||
<Tooltip placement="top" title={description}>
|
||||
<IconButton>
|
||||
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<Tooltip
|
||||
sx={{
|
||||
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
|
||||
d="M9.25 9.25H10V14.5H10.75"
|
||||
stroke="#7E2AEA"
|
||||
@ -103,7 +111,7 @@ export const СardPrivilegie = ({ name, type, price, description, value, privile
|
||||
</IconButton>
|
||||
</Tooltip>
|
||||
<IconButton onClick={() => setInputOpen(!inputOpen)}>
|
||||
<ModeEditOutlineOutlinedIcon />
|
||||
<ModeEditOutlineOutlinedIcon sx={{ color: "gray" }} />
|
||||
</IconButton>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
411
src/theme.ts
411
src/theme.ts
@ -1,225 +1,224 @@
|
||||
import { Theme } from '@mui/material/styles';
|
||||
import { Theme } from "@mui/material/styles";
|
||||
import { createTheme, PaletteColorOptions, ThemeOptions } from "@mui/material";
|
||||
import { deepmerge } from '@mui/utils';
|
||||
import { deepmerge } from "@mui/utils";
|
||||
//import { createTheme } from "./types";
|
||||
|
||||
declare module '@mui/material/Button' {
|
||||
interface ButtonPropsVariantOverrides {
|
||||
enter: true;
|
||||
}
|
||||
declare module "@mui/material/Button" {
|
||||
interface ButtonPropsVariantOverrides {
|
||||
enter: true;
|
||||
}
|
||||
}
|
||||
declare module '@mui/material/Paper' {
|
||||
interface PaperPropsVariantOverrides {
|
||||
bar: true;
|
||||
}
|
||||
declare module "@mui/material/Paper" {
|
||||
interface PaperPropsVariantOverrides {
|
||||
bar: true;
|
||||
}
|
||||
}
|
||||
declare module '@mui/material/styles' {
|
||||
interface Theme {
|
||||
palette: {
|
||||
primary: {
|
||||
main: string;
|
||||
},
|
||||
secondary: {
|
||||
main: string;
|
||||
},
|
||||
menu: {
|
||||
main: string;
|
||||
},
|
||||
content: {
|
||||
main: string;
|
||||
},
|
||||
hover: {
|
||||
main: string;
|
||||
},
|
||||
grayLight: {
|
||||
main: string;
|
||||
},
|
||||
grayDark: {
|
||||
main: string;
|
||||
},
|
||||
grayMedium: {
|
||||
main: string;
|
||||
},
|
||||
grayDisabled: {
|
||||
main: string;
|
||||
},
|
||||
golden: {
|
||||
main: string;
|
||||
},
|
||||
goldenDark: {
|
||||
main: string;
|
||||
},
|
||||
goldenMedium: {
|
||||
main: string;
|
||||
},
|
||||
caption: {
|
||||
main: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
declare module "@mui/material/styles" {
|
||||
interface Theme {
|
||||
palette: {
|
||||
primary: {
|
||||
main: string;
|
||||
};
|
||||
secondary: {
|
||||
main: string;
|
||||
};
|
||||
menu: {
|
||||
main: string;
|
||||
};
|
||||
content: {
|
||||
main: string;
|
||||
};
|
||||
hover: {
|
||||
main: string;
|
||||
};
|
||||
grayLight: {
|
||||
main: string;
|
||||
};
|
||||
grayDark: {
|
||||
main: string;
|
||||
};
|
||||
grayMedium: {
|
||||
main: string;
|
||||
};
|
||||
grayDisabled: {
|
||||
main: string;
|
||||
};
|
||||
golden: {
|
||||
main: string;
|
||||
};
|
||||
goldenDark: {
|
||||
main: string;
|
||||
};
|
||||
goldenMedium: {
|
||||
main: string;
|
||||
};
|
||||
caption: {
|
||||
main: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
interface PaletteOptions {
|
||||
menu?: PaletteColorOptions;
|
||||
content?: PaletteColorOptions;
|
||||
grayLight?: PaletteColorOptions;
|
||||
grayDark?: PaletteColorOptions;
|
||||
grayMedium?: PaletteColorOptions;
|
||||
grayDisabled?: PaletteColorOptions;
|
||||
golden?: PaletteColorOptions;
|
||||
goldenDark?: PaletteColorOptions;
|
||||
goldenMedium?: PaletteColorOptions;
|
||||
hover?: PaletteColorOptions;
|
||||
}
|
||||
interface PaletteOptions {
|
||||
menu?: PaletteColorOptions;
|
||||
content?: PaletteColorOptions;
|
||||
grayLight?: PaletteColorOptions;
|
||||
grayDark?: PaletteColorOptions;
|
||||
grayMedium?: PaletteColorOptions;
|
||||
grayDisabled?: PaletteColorOptions;
|
||||
golden?: PaletteColorOptions;
|
||||
goldenDark?: PaletteColorOptions;
|
||||
goldenMedium?: PaletteColorOptions;
|
||||
hover?: PaletteColorOptions;
|
||||
}
|
||||
|
||||
// allow configuration using `createTheme`
|
||||
interface TypographyVariants {
|
||||
body1: React.CSSProperties;
|
||||
subtitle1: React.CSSProperties;
|
||||
subtitle2: React.CSSProperties;
|
||||
caption: React.CSSProperties;
|
||||
h5: React.CSSProperties;
|
||||
h6: React.CSSProperties;
|
||||
button: React.CSSProperties;
|
||||
}
|
||||
// allow configuration using `createTheme`
|
||||
interface TypographyVariants {
|
||||
body1: React.CSSProperties;
|
||||
subtitle1: React.CSSProperties;
|
||||
subtitle2: React.CSSProperties;
|
||||
caption: React.CSSProperties;
|
||||
h5: React.CSSProperties;
|
||||
h6: React.CSSProperties;
|
||||
button: React.CSSProperties;
|
||||
}
|
||||
}
|
||||
|
||||
const fontFamily: string = "GilroyRegular";
|
||||
const fontWeight: string = "600";
|
||||
|
||||
const paletteColor = {
|
||||
palette: {
|
||||
primary: {
|
||||
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"
|
||||
}
|
||||
palette: {
|
||||
primary: {
|
||||
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",
|
||||
},
|
||||
},
|
||||
};
|
||||
const theme: ThemeOptions = {
|
||||
typography: {
|
||||
body1: {
|
||||
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
|
||||
}
|
||||
typography: {
|
||||
body1: {
|
||||
fontFamily: fontFamily,
|
||||
},
|
||||
|
||||
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",
|
||||
}
|
||||
},
|
||||
},
|
||||
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,
|
||||
},
|
||||
},
|
||||
|
||||
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));
|
||||
|
||||
Loading…
Reference in New Issue
Block a user