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

@@ -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

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',
         }}

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>
   )
 }