From 92ab282ce3116cd44fb652849fd3de1a1abc7590 Mon Sep 17 00:00:00 2001
From: Andreas Ellewsen <ae@uio.no>
Date: Wed, 15 Dec 2021 09:47:46 +0100
Subject: [PATCH] Match loginbox closer to sketches
Boxes are now spaced automatically on the login page, and the box on the
invite page fills the horizontal space.
---
frontend/src/components/loginBox/index.tsx | 9 +++++----
.../src/routes/frontpage/components/loginpage.tsx | 2 +-
frontend/src/routes/invite/index.tsx | 15 +++++++++++----
3 files changed, 17 insertions(+), 9 deletions(-)
diff --git a/frontend/src/components/loginBox/index.tsx b/frontend/src/components/loginBox/index.tsx
index a8e8cc20..b7e0246c 100644
--- a/frontend/src/components/loginBox/index.tsx
+++ b/frontend/src/components/loginBox/index.tsx
@@ -16,21 +16,22 @@ const StyledBox = styled(Box)({
borderColor: 'black',
borderWidth: '2px',
borderRadius: '11px',
- width: '24rem',
- height: '18rem',
})
interface LoginBoxProps {
header: string
info: string
manual?: boolean
+ large?: boolean
}
-const LoginBox = ({ header, info, manual }: LoginBoxProps) => {
+const LoginBox = ({ header, info, manual, large }: LoginBoxProps) => {
const { t } = useTranslation('login')
return (
<StyledBox
sx={{
+ width: large ? '48rem' : '24rem',
+ height: '18rem',
marginBottom: { xs: '2rem', md: '0rem' },
}}
>
@@ -80,5 +81,5 @@ const LoginBox = ({ header, info, manual }: LoginBoxProps) => {
</StyledBox>
)
}
-LoginBox.defaultProps = { manual: false }
+LoginBox.defaultProps = { manual: false, large: false }
export default LoginBox
diff --git a/frontend/src/routes/frontpage/components/loginpage.tsx b/frontend/src/routes/frontpage/components/loginpage.tsx
index 79d2f554..0a1e5ba1 100644
--- a/frontend/src/routes/frontpage/components/loginpage.tsx
+++ b/frontend/src/routes/frontpage/components/loginpage.tsx
@@ -33,7 +33,7 @@ export default function LoginPage() {
<Container
sx={{
display: 'flex',
- justifyContent: 'space-between',
+ justifyContent: 'space-around',
flexDirection: { xs: 'column', md: 'row' },
alignItems: 'center',
}}
diff --git a/frontend/src/routes/invite/index.tsx b/frontend/src/routes/invite/index.tsx
index 2e5975de..f6530323 100644
--- a/frontend/src/routes/invite/index.tsx
+++ b/frontend/src/routes/invite/index.tsx
@@ -6,7 +6,7 @@ import Loading from 'components/loading'
import { useUserContext } from 'contexts'
import { submitJsonOpts } from 'utils'
import LoginBox from 'components/loginBox'
-import { Box } from '@mui/material'
+import { Container } from '@mui/material'
function ChooseRegistrationMethod() {
const { t } = useTranslation(['invite'])
@@ -15,9 +15,16 @@ function ChooseRegistrationMethod() {
<Page>
<h1>{t('header')}</h1>
<p>{t('description')}</p>
- <Box>
- <LoginBox header={t('guest')} info={t('guestInfo')} manual />
- </Box>
+ <Container
+ sx={{
+ display: 'flex',
+ justifyContent: 'space-around',
+ flexDirection: { xs: 'column', md: 'row' },
+ alignItems: 'center',
+ }}
+ >
+ <LoginBox header={t('guest')} info={t('guestInfo')} manual large />
+ </Container>
</Page>
)
}
--
GitLab