From 4a1adaeab2e4e4ef9538f51982341a66d63044eb Mon Sep 17 00:00:00 2001 From: nimbleghost <132819643+nimbleghost@users.noreply.github.com> Date: Mon, 26 Jun 2023 23:34:22 +0200 Subject: [PATCH] Make login and sign up form responsive --- web/src/components/AvatarBox.jsx | 27 ++++++++++++++------------- web/src/components/Login.jsx | 2 +- web/src/components/Signup.jsx | 2 +- 3 files changed, 16 insertions(+), 15 deletions(-) diff --git a/web/src/components/AvatarBox.jsx b/web/src/components/AvatarBox.jsx index 10378683..37c85d4e 100644 --- a/web/src/components/AvatarBox.jsx +++ b/web/src/components/AvatarBox.jsx @@ -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) => ( - + {props.children} - + ); export default AvatarBox; diff --git a/web/src/components/Login.jsx b/web/src/components/Login.jsx index 4efec255..5c1af249 100644 --- a/web/src/components/Login.jsx +++ b/web/src/components/Login.jsx @@ -45,7 +45,7 @@ const Login = () => { return ( {t("login_title")} - + { return ( {t("signup_title")} - +