мини-модалки - на ревью

This commit is contained in:
Nikolai 2022-09-20 18:08:08 +03:00
parent e0a8ef1d76
commit 0cf9066868

@ -1,5 +1,5 @@
import * as React from "react";
import { Box, Modal, Fade, Backdrop, Typography, Button } from "@mui/material";
import { Box, Modal, Fade, Backdrop, Typography, Button, TextField } from "@mui/material";
import theme from "../../../../../theme";
export interface MWProps {
@ -9,7 +9,7 @@ export interface MWProps {
}
const ModalMini = ({open, variant, close}: MWProps ) => {
const variants = [ "Количество", "Срок" ];
const variants = [ "Количество", "Срок (дней)" ];
const units = [ "", "дней" ];
return (
@ -41,50 +41,40 @@ const ModalMini = ({open, variant, close}: MWProps ) => {
justifyContent: "center",
alignItems: "center",
}}>
<Box sx={{
display: "flex",
width: "90%"
}}>
<Typography id="transition-modal-title" sx={{
width: "90%",
display: "flex",
justifyContent: "space-between"
}}>
{ variants[ variant ] }:
</Typography>
<Typography sx={{
width: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
}}>
5 { units[ variant ] }
</Typography>
</Box>
<TextField
id = "standard-basic"
label = { variants[ variant ] }
variant = "filled"
color = "secondary"
sx = {{ width: "80%" }}
InputProps={{
style: {
backgroundColor: theme.palette.content.main,
color: theme.palette.secondary.main,
} }}
InputLabelProps={{
style: {
color: theme.palette.secondary.main
} }}
/>
<TextField
id = "standard-basic"
label = "Цена"
variant = "filled"
color = "secondary"
sx = {{ width: "80%", marginTop: "5px" }}
InputProps={{
style: {
backgroundColor: theme.palette.content.main,
color: theme.palette.secondary.main,
} }}
InputLabelProps={{
style: {
color: theme.palette.secondary.main
} }}
/>
<Box sx={{
display: "flex",
width: "90%",
marginTop: "20px"
}}>
<Typography id="transition-modal-title" sx={{
display: "flex",
width: "90%",
justifyContent: "space-between"
}}>
Цена:
</Typography>
<Typography sx={{
width: "100%",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center"
}}>
100500 $
</Typography>
</Box>
<Button
variant = "contained"