improve responsiveness
This commit is contained in:
nflnkr
parent
e49f7d90c7
commit
0935f4de4d
@ -1,5 +1,4 @@
|
||||
import { Box, CssBaseline, IconButton, Link, ThemeProvider, Typography } from "@mui/material";
|
||||
import theme from "../utils/themes/light";
|
||||
import { Box, IconButton, Link, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||
import CustomButton from "../components/CustomButton";
|
||||
import InputTextfield from "../components/InputTextfield";
|
||||
import PenaLogo from "../components/PenaLogo";
|
||||
@ -7,94 +6,108 @@ import CloseIcon from "@mui/icons-material/Close";
|
||||
import { useState } from "react";
|
||||
|
||||
|
||||
// TODO wrap links with react-router
|
||||
export default function Signin() {
|
||||
const [login, setLogin] = useState<string>("");
|
||||
const [password, setPassword] = useState<string>("");
|
||||
const theme = useTheme();
|
||||
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
<CssBaseline />
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
height: "100vh",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
width: upMd ? "600px" : "100%",
|
||||
height: upMd ? "auto" : "100%",
|
||||
backgroundColor: "white",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
height: "100vh",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
width: "600px",
|
||||
backgroundColor: "white",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
flexDirection: "column",
|
||||
p: "50px",
|
||||
pb: "40px",
|
||||
gap: "15px",
|
||||
borderRadius: "12px",
|
||||
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
|
||||
flexDirection: "column",
|
||||
p: upMd ? "50px" : "18px",
|
||||
pb: upMd ? "40px" : "30px",
|
||||
gap: "15px",
|
||||
borderRadius: "12px",
|
||||
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
|
||||
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
|
||||
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
|
||||
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
|
||||
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
|
||||
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
sx={{
|
||||
position: "absolute",
|
||||
right: "15px",
|
||||
top: "15px",
|
||||
p: 0,
|
||||
}}>
|
||||
<CloseIcon sx={{ transform: "scale(1.5)" }} />
|
||||
</IconButton>
|
||||
<Box sx={{ mt: "65px" }}>
|
||||
<PenaLogo width={upMd ? 233 : 196} />
|
||||
</Box>
|
||||
<Typography
|
||||
sx={{
|
||||
color: theme.palette.grey3.main,
|
||||
mt: "5px",
|
||||
mb: upMd ? "35px" : "33px",
|
||||
}}
|
||||
>Вход в личный кабинет</Typography>
|
||||
<InputTextfield
|
||||
value={login}
|
||||
onChange={e => setLogin(e.target.value)}
|
||||
label="Телефон или E-mail"
|
||||
placeholder="+7 900 000 00 00 или username@penahub.com"
|
||||
id="login"
|
||||
gap={upMd ? "15px" : "12px"}
|
||||
/>
|
||||
<InputTextfield
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
label="Пароль"
|
||||
placeholder="Не менее 8 символов"
|
||||
id="password"
|
||||
gap={upMd ? "15px" : "12px"}
|
||||
/>
|
||||
<CustomButton
|
||||
fullWidth
|
||||
variant="contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.brightPurple.main,
|
||||
textColor: "white",
|
||||
width: "100%",
|
||||
mt: upMd ? undefined : "10px",
|
||||
}}
|
||||
py="12px"
|
||||
>Войти</CustomButton>
|
||||
<Link href="#"
|
||||
sx={{
|
||||
color: theme.palette.grey3.main,
|
||||
mb: "30px",
|
||||
mt: upMd ? undefined : "5px",
|
||||
}}
|
||||
>Забыли пароль?</Link>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
gap: "10px",
|
||||
mt: "auto",
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
sx={{
|
||||
position: "absolute",
|
||||
right: "15px",
|
||||
top: "15px",
|
||||
p: 0,
|
||||
}}>
|
||||
<CloseIcon sx={{ transform: "scale(1.5)" }} />
|
||||
</IconButton>
|
||||
<PenaLogo width={233} />
|
||||
<Typography sx={{ color: theme.palette.grey3.main, mt: "5px", mb: "15px" }}>Вход в личный кабинет</Typography>
|
||||
<InputTextfield
|
||||
value={login}
|
||||
label="Телефон или E-mail"
|
||||
placeholder="+7 900 000 00 00 или username@penahub.com"
|
||||
gap="10px"
|
||||
id="login"
|
||||
onChange={e => setLogin(e.target.value)}
|
||||
/>
|
||||
<InputTextfield
|
||||
value={password}
|
||||
label="Пароль"
|
||||
placeholder="Не менее 8 символов"
|
||||
gap="10px"
|
||||
id="password"
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
/>
|
||||
<CustomButton
|
||||
fullWidth
|
||||
variant="contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.brightPurple.main,
|
||||
textColor: "white",
|
||||
width: "100%",
|
||||
}}
|
||||
py="12px"
|
||||
>Войти</CustomButton>
|
||||
<Link href="#" sx={{ color: theme.palette.grey3.main }}>Забыли пароль?</Link>
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
alignItems: "center",
|
||||
gap: "10px",
|
||||
mt: "15px",
|
||||
}}
|
||||
>
|
||||
<Typography sx={{ color: theme.palette.brightPurple.main }}>Вы еще не присоединились?</Typography>
|
||||
<Link href="#" sx={{ color: theme.palette.brightPurple.main }}>Регистрация</Link>
|
||||
</Box>
|
||||
<Typography sx={{ color: theme.palette.brightPurple.main }}>Вы еще не присоединились?</Typography>
|
||||
<Link href="#" sx={{ color: theme.palette.brightPurple.main }}>Регистрация</Link>
|
||||
</Box>
|
||||
</Box>
|
||||
</ThemeProvider>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
@ -1,5 +1,4 @@
|
||||
import { Box, CssBaseline, IconButton, Link, ThemeProvider, Typography } from "@mui/material";
|
||||
import theme from "../utils/themes/light";
|
||||
import { Box, IconButton, Link, Typography, useMediaQuery, useTheme } from "@mui/material";
|
||||
import CustomButton from "../components/CustomButton";
|
||||
import InputTextfield from "../components/InputTextfield";
|
||||
import PenaLogo from "../components/PenaLogo";
|
||||
@ -7,104 +6,115 @@ import CloseIcon from "@mui/icons-material/Close";
|
||||
import { useState } from "react";
|
||||
|
||||
|
||||
// TODO wrap links with react-router
|
||||
export default function Signup() {
|
||||
const [email, setEmail] = useState<string>("");
|
||||
const [phonenumber, setPhonenumber] = useState<string>("");
|
||||
const [password, setPassword] = useState<string>("");
|
||||
const [repeatPassword, setRepeatPassword] = useState<string>("");
|
||||
const theme = useTheme();
|
||||
const upMd = useMediaQuery(theme.breakpoints.up("md"));
|
||||
|
||||
return (
|
||||
<ThemeProvider theme={theme}>
|
||||
<CssBaseline />
|
||||
<Box
|
||||
sx={{
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
height: "100vh",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
width: upMd ? "600px" : "100%",
|
||||
height: upMd ? "auto" : "100%",
|
||||
backgroundColor: "white",
|
||||
display: "flex",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
height: "100vh",
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
position: "relative",
|
||||
width: "600px",
|
||||
backgroundColor: "white",
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
flexDirection: "column",
|
||||
p: "50px",
|
||||
pb: "40px",
|
||||
gap: "15px",
|
||||
borderRadius: "12px",
|
||||
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
|
||||
flexDirection: "column",
|
||||
p: upMd ? "50px" : "18px",
|
||||
pb: upMd ? "40px" : "30px",
|
||||
gap: "15px",
|
||||
borderRadius: "12px",
|
||||
boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
|
||||
0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
|
||||
0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
|
||||
0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12),
|
||||
0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343),
|
||||
0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
sx={{
|
||||
position: "absolute",
|
||||
right: "15px",
|
||||
top: "15px",
|
||||
p: 0,
|
||||
}}
|
||||
>
|
||||
<IconButton
|
||||
sx={{
|
||||
position: "absolute",
|
||||
right: "15px",
|
||||
top: "15px",
|
||||
p: 0,
|
||||
}}>
|
||||
<CloseIcon sx={{ transform: "scale(1.5)" }} />
|
||||
</IconButton>
|
||||
<PenaLogo width={233}/>
|
||||
<Typography sx={{ color: theme.palette.grey3.main, mt: "5px", mb: "35px" }}>Регистрация</Typography>
|
||||
<InputTextfield
|
||||
value={email}
|
||||
onChange={e => setEmail(e.target.value)}
|
||||
bold
|
||||
id="email"
|
||||
label="E-mail"
|
||||
placeholder="username@penahub.com"
|
||||
gap="15px"
|
||||
/>
|
||||
<InputTextfield
|
||||
value={phonenumber}
|
||||
onChange={e => setPhonenumber(e.target.value)}
|
||||
bold
|
||||
id="phonenumber"
|
||||
label="Телефон"
|
||||
placeholder="+7 900 000 00 00"
|
||||
gap="15px"
|
||||
/>
|
||||
<InputTextfield
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
bold
|
||||
id="password"
|
||||
label="Пароль"
|
||||
placeholder="Не менее 8 символов"
|
||||
gap="15px"
|
||||
/>
|
||||
<InputTextfield
|
||||
value={repeatPassword}
|
||||
onChange={e => setRepeatPassword(e.target.value)}
|
||||
bold
|
||||
id="repeat-password"
|
||||
label="Повторить пароль"
|
||||
placeholder="Не менее 8 символов"
|
||||
gap="15px"
|
||||
/>
|
||||
<CustomButton
|
||||
fullWidth
|
||||
variant="contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.brightPurple.main,
|
||||
textColor: "white",
|
||||
width: "100%",
|
||||
}}
|
||||
py="12px"
|
||||
>Войти</CustomButton>
|
||||
<Link href="#" sx={{ color: theme.palette.brightPurple.main }}>Вход в личный кабинет</Link>
|
||||
<CloseIcon sx={{ transform: "scale(1.5)" }} />
|
||||
</IconButton>
|
||||
<Box sx={{ mt: "65px" }}>
|
||||
<PenaLogo width={upMd ? 233 : 196} />
|
||||
</Box>
|
||||
<Typography
|
||||
sx={{
|
||||
color: theme.palette.grey3.main,
|
||||
mt: "5px",
|
||||
mb: upMd ? "35px" : "33px",
|
||||
}}
|
||||
>Регистрация</Typography>
|
||||
<InputTextfield
|
||||
value={email}
|
||||
onChange={e => setEmail(e.target.value)}
|
||||
id="email"
|
||||
label="E-mail"
|
||||
placeholder="username@penahub.com"
|
||||
gap={upMd ? "15px" : "10px"}
|
||||
/>
|
||||
<InputTextfield
|
||||
value={phonenumber}
|
||||
onChange={e => setPhonenumber(e.target.value)}
|
||||
id="phonenumber"
|
||||
label="Телефон"
|
||||
placeholder="+7 900 000 00 00"
|
||||
gap={upMd ? "15px" : "10px"}
|
||||
/>
|
||||
<InputTextfield
|
||||
value={password}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
id="password"
|
||||
label="Пароль"
|
||||
placeholder="Не менее 8 символов"
|
||||
gap={upMd ? "15px" : "10px"}
|
||||
/>
|
||||
<InputTextfield
|
||||
value={repeatPassword}
|
||||
onChange={e => setRepeatPassword(e.target.value)}
|
||||
id="repeat-password"
|
||||
label="Повторить пароль"
|
||||
placeholder="Не менее 8 символов"
|
||||
gap={upMd ? "15px" : "10px"}
|
||||
/>
|
||||
<CustomButton
|
||||
fullWidth
|
||||
variant="contained"
|
||||
sx={{
|
||||
backgroundColor: theme.palette.brightPurple.main,
|
||||
textColor: "white",
|
||||
width: "100%",
|
||||
mt: upMd ? undefined : "10px",
|
||||
}}
|
||||
py="12px"
|
||||
>Войти</CustomButton>
|
||||
<Link
|
||||
href="#"
|
||||
sx={{
|
||||
color: theme.palette.brightPurple.main,
|
||||
mt: "auto",
|
||||
}}
|
||||
>Вход в личный кабинет</Link>
|
||||
</Box>
|
||||
</ThemeProvider>
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user