mirrors/binwiederhier-ntfy
1
0
Fork 0
mirror of https://github.com/binwiederhier/ntfy.git synced 2024-12-15 17:50:55 +00:00
Code 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 { Avatar, Box } from "@mui/material";
import { Avatar, Box, styled } from "@mui/material";
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) => (
<Box
sx={{
display: "flex",
flexGrow: 1,
justifyContent: "center",
flexDirection: "column",
alignContent: "center",
alignItems: "center",
height: "100vh",
}}
>
<AvatarBoxContainer>
<Avatar sx={{ m: 2, width: 64, height: 64, borderRadius: 3 }} src={logo} variant="rounded" />
{props.children}
</Box>
</AvatarBoxContainer>
);
export default AvatarBox;

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

@ -45,7 +45,7 @@ const Login = () => {
return (
<AvatarBox>
<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
margin="dense"
required

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

@ -52,7 +52,7 @@ const Signup = () => {
return (
<AvatarBox>
<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
margin="dense"
required