Commit 1d9750ed authored by bekzat kapan's avatar bekzat kapan

3# Достилизовал компоненты чтобы не было горизонтального скролла и интерфейс был адаптивным

parent 8aa25f20
...@@ -17,25 +17,33 @@ export default function InputField({ name, value, onChange }: Props) { ...@@ -17,25 +17,33 @@ export default function InputField({ name, value, onChange }: Props) {
labelText = `Encoded message`; labelText = `Encoded message`;
break; break;
case "Password": case "Password":
labelText = name; labelText = "";
break; break;
default: default:
break; break;
} }
return ( return (
<Grid2 container alignItems="center" paddingY={2}> <Grid2 container alignItems="center" paddingY={2} spacing={2}>
<Grid2 size={name === "Password" ? 8 : 4}> <Grid2 flexGrow={1}>
<Typography <Typography
component="label" component="label"
htmlFor={`${name}-input`} htmlFor={`${name}-input`}
sx={{ fontSize: 20, display: "block" }} sx={{
fontSize: {
xs: "16px",
sm: "20px",
},
}}
> >
{labelText} {labelText}
</Typography> </Typography>
</Grid2> </Grid2>
<Grid2 size={name === "Password" ? 4 : 8}> <Grid2
size={name === "Password" ? 6 : 8}
sx={{ "@media (max-width: 900px)": { width: "100%" } }}
>
<TextField <TextField
fullWidth fullWidth
multiline={name !== "Password"} multiline={name !== "Password"}
......
...@@ -32,8 +32,25 @@ export default function Home() { ...@@ -32,8 +32,25 @@ export default function Home() {
return ( return (
<div className="App"> <div className="App">
<Container sx={{ marginTop: 2 }} maxWidth="lg"> <Container sx={{ marginTop: 2 }} maxWidth="lg">
<Typography variant="h3">Cypher Coder/Decoder</Typography> <Typography
variant="h3"
sx={{
fontSize: {
xs: "24px",
sm: "36px",
},
}}
>
Cypher Coder/Decoder
</Typography>
<Box <Box
sx={{
maxWidth: {
xs: "90%",
sm: "80%",
lg: "70%",
},
}}
component="form" component="form"
autoComplete="off" autoComplete="off"
onSubmit={submitFormHandler} onSubmit={submitFormHandler}
...@@ -45,7 +62,16 @@ export default function Home() { ...@@ -45,7 +62,16 @@ export default function Home() {
value={formData.decoded} value={formData.decoded}
onChange={onInputChangeHandler} onChange={onInputChangeHandler}
/> />
<Grid2 container alignItems="center" justifyContent="space-between"> <Grid2
container
alignItems="center"
sx={{
flexDirection: {
xs: "column",
md: "row",
},
}}
>
<Grid2 size={7}> <Grid2 size={7}>
<InputField <InputField
name="Password" name="Password"
...@@ -53,22 +79,42 @@ export default function Home() { ...@@ -53,22 +79,42 @@ export default function Home() {
onChange={onInputChangeHandler} onChange={onInputChangeHandler}
/> />
</Grid2> </Grid2>
<Grid2 size={2} justifyContent="center"> <Grid2 container justifyContent={{}}>
<Button variant="contained" startIcon={<ArrowDownwardIcon />}> <Grid2>
<Button
size="small"
variant="contained"
startIcon={<ArrowDownwardIcon />}
>
<Typography
sx={{
display: { xs: "none", md: "inline" },
}}
>
Encode Encode
</Typography>
</Button> </Button>
</Grid2> </Grid2>
<Grid2 size={2} justifyContent="center">
<Grid2>
<Button <Button
size="small"
variant="contained" variant="contained"
startIcon={ startIcon={
<ArrowDownwardIcon sx={{ transform: "rotate(180deg)" }} /> <ArrowDownwardIcon sx={{ transform: "rotate(180deg)" }} />
} }
>
<Typography
sx={{
display: { xs: "none", md: "inline" },
}}
> >
Decode Decode
</Typography>
</Button> </Button>
</Grid2> </Grid2>
</Grid2> </Grid2>
</Grid2>
<InputField <InputField
name="Encoded" name="Encoded"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment