parra/ntfy
parra/ntfy
1
0
Fork 0
mirror of https://github.com/binwiederhier/ntfy.git synced 2024-12-27 12:12:28 +01:00
Code Releases Activity

Make login and sign up form responsive

Browse source
This commit is contained in:
nimbleghost 2023-06-26 23:34:22 +02:00
parent fd5bfd161d
commit 4a1adaeab2
3 changed files with 16 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
web/src/components/AvatarBox.jsx
View file

@ -1,22 +1,23 @@
import * as React from "react"; import * as React from "react";
import { Avatar, Box } from "@mui/material"; import { Avatar, Box, styled } from "@mui/material";
import logo from "../img/ntfy-filled.svg"; import logo from "../img/ntfy-filled.svg";
const AvatarBoxContainer = styled(Box)`
display: flex;
flex-grow: 1;
justify-content: center;
flex-direction: column;
align-content: center;
align-items: center;
height: 100dvh;
max-width: min(400px, 90dvw);
margin: auto;
`;
const AvatarBox = (props) => ( const AvatarBox = (props) => (
<Box <AvatarBoxContainer>
sx={{
display: "flex",
flexGrow: 1,
justifyContent: "center",
flexDirection: "column",
alignContent: "center",
alignItems: "center",
height: "100vh",
}}
>
<Avatar sx={{ m: 2, width: 64, height: 64, borderRadius: 3 }} src={logo} variant="rounded" /> <Avatar sx={{ m: 2, width: 64, height: 64, borderRadius: 3 }} src={logo} variant="rounded" />
{props.children} {props.children}
</Box> </AvatarBoxContainer>
); );
export default AvatarBox; export default AvatarBox;

2
web/src/components/Login.jsx
View file

@ -45,7 +45,7 @@ const Login = () => {
return ( return (
<AvatarBox> <AvatarBox>
<Typography sx={{ typography: "h6" }}>{t("login_title")}</Typography> <Typography sx={{ typography: "h6" }}>{t("login_title")}</Typography>
<Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1, maxWidth: 400 }}> <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
<TextField <TextField
margin="dense" margin="dense"
required required

2
web/src/components/Signup.jsx
View file

@ -52,7 +52,7 @@ const Signup = () => {
return ( return (
<AvatarBox> <AvatarBox>
<Typography sx={{ typography: "h6" }}>{t("signup_title")}</Typography> <Typography sx={{ typography: "h6" }}>{t("signup_title")}</Typography>
<Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1, maxWidth: 400 }}> <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
<TextField <TextField
margin="dense" margin="dense"
required required