адаптивность для тарифов и страницы пользователей

This commit is contained in:
Tamara 2022-12-19 23:15:00 +03:00
parent 5d147cdf1e
commit 0d687779eb
8 changed files with 94 additions and 76 deletions

@ -36,8 +36,7 @@ const Contractor: React.FC<MWProps> = ({ openModal }) => {
onClick={ () => openModal(3, 1) }
sx={{
backgroundColor: theme.palette.menu.main,
width: "320px",
height: "82px",
padding: '11px 65px',
fontWeight: "normal",
fontSize: "17px",
"&:hover": {
@ -51,8 +50,7 @@ const Contractor: React.FC<MWProps> = ({ openModal }) => {
onClick={ () => openModal(3, 1) }
sx={{
backgroundColor: theme.palette.menu.main,
width: "320px",
height: "82px",
padding: '11px 65px',
fontWeight: "normal",
fontSize: "17px",
"&:hover": {
@ -65,8 +63,7 @@ const Contractor: React.FC<MWProps> = ({ openModal }) => {
variant = "contained"
sx={{
backgroundColor: theme.palette.menu.main,
width: "320px",
height: "52px",
padding: '11px 65px',
fontWeight: "normal",
fontSize: "17px",
"&:hover": {

@ -305,7 +305,7 @@ console.log(amount)
}
return (
<Box style={{ width: "100%" }}>
<Box style={{ width: "93%" }}>
<Box style={{ height: 400 }}>
<DataGrid
checkboxSelection={true}
@ -348,12 +348,13 @@ console.log(amount)
onClick={ () => openModal() }
sx={{
backgroundColor: theme.palette.menu.main,
width: "320px",
height: "42px",
padding: "6px 30px",
fontWeight: "normal",
fontSize: "17px",
marginTop: "45px",
marginBottom: "15px",
maxWidth: '320px',
width: '100%',
"&:hover": {
backgroundColor: theme.palette.grayMedium.main
}
@ -366,8 +367,7 @@ console.log(amount)
onClick={ () => handleToBasket() }
sx={{
backgroundColor: theme.palette.menu.main,
width: "320px",
height: "42px",
padding: "6px 69px",
fontWeight: "normal",
fontSize: "17px",
marginBottom: "95px",
@ -386,8 +386,9 @@ console.log(amount)
alignItems: "center",
marginBottom: "45px",
}}>
<Box sx={{
width: "480px",
<Box sx={{
maxWidth: "480px",
width: '100%',
display: "flex",
justifyContent: "space-between",
}}>
@ -488,7 +489,8 @@ console.log(amount)
display: "flex",
marginTop: "15px",
marginBottom: "15px",
width: "350px",
maxWidth: "350px",
width: '100%',
justifyContent: "space-between"
}}>
<FormControlLabel control={
@ -526,7 +528,9 @@ console.log(amount)
<List sx={{
border: "1px solid",
borderColor: theme.palette.secondary.main
borderColor: theme.palette.secondary.main,
maxWidth: '745px',
width: '100%',
}}>
<ListItem>
<ListItemAvatar>
@ -539,15 +543,28 @@ console.log(amount)
</ListItemAvatar>
<ListItemText
primary="Название"
sx={{ textAlign: "center", minWidth: "250px", maxWidth: "250px" }}
sx={{
textAlign: "center",
// minWidth: "250px",
maxWidth: "250px",
padding: '0 10px'
}}
/>
<ListItemText
primary="Цена"
sx={{ textAlign: "center", minWidth: "200px", maxWidth: "200px" }}
sx={{
textAlign: "center",
// minWidth: "200px",
padding: '0 10px',
maxWidth: "200px" }}
/>
<ListItemText
primary="Скидки"
sx={{ textAlign: "center", minWidth: "200px", maxWidth: "400px" }}
sx={{
textAlign: "center",
// minWidth: "200px",
padding: '0 10px',
maxWidth: "400px" }}
/>
<IconButton edge="end" aria-label="delete">
<DeleteIcon sx={{

@ -36,8 +36,7 @@ const Quiz: React.FC<MWProps> = ({ openModal }) => {
onClick={ () => openModal(2, 1) }
sx={{
backgroundColor: theme.palette.menu.main,
width: "320px",
height: "52px",
padding: "11px 43px",
fontWeight: "normal",
fontSize: "17px",
"&:hover": {
@ -51,8 +50,7 @@ const Quiz: React.FC<MWProps> = ({ openModal }) => {
onClick={ () => openModal(2, 0) }
sx={{
backgroundColor: theme.palette.menu.main,
width: "320px",
height: "52px",
padding: '11px 43px',
fontWeight: "normal",
fontSize: "17px",
"&:hover": {
@ -65,8 +63,7 @@ const Quiz: React.FC<MWProps> = ({ openModal }) => {
variant = "contained"
sx={{
backgroundColor: theme.palette.menu.main,
width: "320px",
height: "52px",
padding: '11px 43px',
fontWeight: "normal",
fontSize: "17px",
"&:hover": {

@ -36,10 +36,9 @@ const Templater: React.FC<MWProps> = ({ openModal }) => {
onClick={ () => openModal(1, 1) }
sx={{
backgroundColor: theme.palette.menu.main,
width: "320px",
height: "52px",
fontWeight: "normal",
fontSize: "17px",
padding: '11px 25px',
"&:hover": {
backgroundColor: theme.palette.grayMedium.main
}
@ -51,8 +50,7 @@ const Templater: React.FC<MWProps> = ({ openModal }) => {
onClick={ () => openModal(1, 0) }
sx={{
backgroundColor: theme.palette.menu.main,
width: "320px",
height: "52px",
padding: '11px 25px',
fontWeight: "normal",
fontSize: "17px",
"&:hover": {
@ -66,8 +64,7 @@ const Templater: React.FC<MWProps> = ({ openModal }) => {
onClick={ () => openModal(1, 2) }
sx={{
backgroundColor: theme.palette.menu.main,
width: "320px",
height: "52px",
padding: '11px 25px',
fontWeight: "normal",
fontSize: "17px",
"&:hover": {
@ -80,8 +77,7 @@ const Templater: React.FC<MWProps> = ({ openModal }) => {
variant = "contained"
sx={{
backgroundColor: theme.palette.menu.main,
width: "320px",
height: "52px",
padding: '11px 25px',
fontWeight: "normal",
fontSize: "17px",
"&:hover": {

@ -64,8 +64,7 @@ const Users: React.FC = () => {
variant="text"
onClick={ () => navigate("/modalAdmin") }
sx={{
width: "90%",
height: "60px",
width: "84%",
display: "flex",
flexDirection: "column",
justifyContent: "center",
@ -84,7 +83,7 @@ const Users: React.FC = () => {
<Accordion sx={{
width: "90%",
width: "84%",
backgroundColor: theme.palette.content.main
}} expanded={ accordionState }>
<AccordionSummary
@ -256,18 +255,27 @@ const Users: React.FC = () => {
color: theme.palette.secondary.main
} }}
/>
<Button
variant = "text"
<Box
sx={{
backgroundColor: theme.palette.content.main,
color: theme.palette.secondary.main,
width: "20%",
"&:hover": {
backgroundColor: theme.palette.content.main
}
}}>
НАЙТИ
</Button>
display: 'flex',
justifyContent: 'center',
maxWidth: '317px',
width: '100%'
}}
>
<Button
variant = "text"
sx={{
backgroundColor: theme.palette.content.main,
color: theme.palette.secondary.main,
// width: "20%",
"&:hover": {
backgroundColor: theme.palette.content.main
}
}}>
НАЙТИ
</Button>
</Box>
</Box>
<Box sx={{ display: "flex" }}>
@ -291,18 +299,27 @@ const Users: React.FC = () => {
color: theme.palette.secondary.main
} }}
/>
<Button
variant = "text"
sx={{
backgroundColor: theme.palette.content.main,
color: theme.palette.secondary.main,
width: "20%",
"&:hover": {
backgroundColor: theme.palette.content.main
}
}}>
СБРОСИТЬ
</Button>
<Box
sx={{
display: 'flex',
justifyContent: 'center',
maxWidth: '317px',
width: '100%'
}}
>
<Button
variant = "text"
sx={{
backgroundColor: theme.palette.content.main,
color: theme.palette.secondary.main,
width: "20%",
"&:hover": {
backgroundColor: theme.palette.content.main
}
}}>
СБРОСИТЬ
</Button>
</Box>
</Box>
</Box>

@ -38,7 +38,7 @@ const Content: React.FC<MWProps> = ({ section }) => {
alignItems: "center",
overflow: "auto",
overflowY: "auto",
padding: "60px"
padding: "60px 0"
}}>
{ componentsArray[ section ] }

@ -11,11 +11,13 @@ const Header: React.FC = () => {
<Box sx={{
backgroundColor: theme.palette.menu.main,
width: "100%",
height: "85px",
minHeight: "85px",
borderBottom: "1px solid",
borderColor: theme.palette.grayDark.main,
display: "flex",
justifyContent: "space-between"
justifyContent: "space-between",
flexWrap: 'wrap',
paddingLeft: '5px'
}}>
<Box sx={{
width: "150px",
@ -32,7 +34,7 @@ const Header: React.FC = () => {
<Typography
variant="h6"
sx={{
width: "230px",
maxWidth: "230px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
@ -44,12 +46,12 @@ const Header: React.FC = () => {
</Typography>
<Box sx={{
width: "85px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
cursor: "pointer"
cursor: "pointer",
padding: '0 31px'
}}>
<ExitToAppOutlinedIcon sx={{
color: theme.palette.golden.main,

@ -71,11 +71,9 @@ const Authorization: React.FC = () => {
</Box>
<Button
variant = "contained"
variant = "enter"
sx={{
backgroundColor: theme.palette.content.main,
width: "50%",
height: "62px",
"&:hover": {
backgroundColor: theme.palette.menu.main
}
@ -99,11 +97,9 @@ const Authorization: React.FC = () => {
</Box>
<Button
variant = "contained"
variant = "enter"
sx={{
backgroundColor: theme.palette.content.main,
width: "50%",
height: "62px",
"&:hover": {
backgroundColor: theme.palette.menu.main
}
@ -127,11 +123,9 @@ const Authorization: React.FC = () => {
</Box>
<Button
variant = "contained"
variant = "enter"
sx={{
backgroundColor: theme.palette.content.main,
width: "50%",
height: "62px",
"&:hover": {
backgroundColor: theme.palette.menu.main
}
@ -155,11 +149,9 @@ const Authorization: React.FC = () => {
</Box>
<Button
variant = "contained"
variant = "enter"
sx={{
backgroundColor: theme.palette.content.main,
width: "50%",
height: "62px",
"&:hover": {
backgroundColor: theme.palette.menu.main
}