From 80ac4b178000f56c8a346b41f0063b41a13bcbcb Mon Sep 17 00:00:00 2001
From: Andreas Ellewsen <ae@uio.no>
Date: Tue, 1 Feb 2022 10:42:49 +0100
Subject: [PATCH] Add air between guest info boxes
---
.../routes/sponsor/guest/guestInfo/index.tsx | 224 +++++++++---------
1 file changed, 114 insertions(+), 110 deletions(-)
diff --git a/frontend/src/routes/sponsor/guest/guestInfo/index.tsx b/frontend/src/routes/sponsor/guest/guestInfo/index.tsx
index 3c95f61e..3aee82c6 100644
--- a/frontend/src/routes/sponsor/guest/guestInfo/index.tsx
+++ b/frontend/src/routes/sponsor/guest/guestInfo/index.tsx
@@ -170,121 +170,125 @@ export default function GuestInfo({
return (
<Page>
<SponsorInfoButtons to="/sponsor" name={`${guest.first} ${guest.last}`} />
- <Typography variant="h2">{t('guestInfo.contactInfo')}</Typography>
- <Typography variant="body1">{t('guestInfo.contactInfoBody')}</Typography>
+ <Box sx={{ marginBottom: '2rem' }}>
+ <Typography variant="h2">{t('guestInfo.contactInfo')}</Typography>
+ <Typography variant="body1">
+ {t('guestInfo.contactInfoBody')}
+ </Typography>
- <TableContainer>
- <Table sx={{ minWidth: 650 }} aria-label="simple table">
- <TableHead>
- <TableRow>
- <TableHeadCell align="left">
- {t('guestInfo.contactInfoTableText')}
- </TableHeadCell>
- <TableHeadCell />
- <TableHeadCell />
- </TableRow>
- </TableHead>
- <TableBody>
- <TableRow>
- <TableCell align="left">{t('input.fullName')}</TableCell>
- <TableCell align="left">
- {`${guest.first} ${guest.last}`}
- </TableCell>
- <TableCell />
- </TableRow>
- <TableRow>
- <TableCell align="left">{t('input.email')}</TableCell>
- <TableCell align="left">
- <Box
- sx={{
- display: 'flex',
- flexDirection: 'row',
- justifyContent: 'flex-start',
- }}
- >
- <Controller
- name="email"
- control={control}
- rules={{
- validate: isValidEmail,
+ <TableContainer>
+ <Table sx={{ minWidth: 650 }} aria-label="simple table">
+ <TableHead>
+ <TableRow>
+ <TableHeadCell align="left">
+ {t('guestInfo.contactInfoTableText')}
+ </TableHeadCell>
+ <TableHeadCell />
+ <TableHeadCell />
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ <TableRow>
+ <TableCell align="left">{t('input.fullName')}</TableCell>
+ <TableCell align="left">
+ {`${guest.first} ${guest.last}`}
+ </TableCell>
+ <TableCell />
+ </TableRow>
+ <TableRow>
+ <TableCell align="left">{t('input.email')}</TableCell>
+ <TableCell align="left">
+ <Box
+ sx={{
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'flex-start',
}}
- render={({ field: { value }, ...rest }) => (
- <TextField
- id="email"
- label={t('input.email')}
- error={!!errors.email}
- helperText={errors.email && errors.email.message}
- value={value}
- {...rest}
- onChange={emailFieldChange}
- />
- )}
- />
-
- {/* If the guest has not completed the registration process, he should have an invitation he has not responded to */}
- {!guest.registered && (
- <Box
- sx={{
- display: 'flex',
- flexDirection: 'row',
- justifyContent: 'flex-end',
+ >
+ <Controller
+ name="email"
+ control={control}
+ rules={{
+ validate: isValidEmail,
}}
- >
- <Button
- color="secondary"
- sx={{ maxHeight: '2.3rem', marginLeft: '1rem' }}
- onClick={resend}
- >
- {t('button.resendInvitation')}
- </Button>
- <Button
- color="secondary"
- sx={{ maxHeight: '2.3rem', marginLeft: '0.5rem' }}
- onClick={handleCancel}
+ render={({ field: { value }, ...rest }) => (
+ <TextField
+ id="email"
+ label={t('input.email')}
+ error={!!errors.email}
+ helperText={errors.email && errors.email.message}
+ value={value}
+ {...rest}
+ onChange={emailFieldChange}
+ />
+ )}
+ />
+
+ {/* If the guest has not completed the registration process, he should have an invitation he has not responded to */}
+ {!guest.registered && (
+ <Box
+ sx={{
+ display: 'flex',
+ flexDirection: 'row',
+ justifyContent: 'flex-end',
+ }}
>
- {t('button.cancelInvitation')}
- </Button>
- </Box>
- )}
- </Box>
- <CancelConfirmationDialog
- open={confirmationDialogOpen}
- onClose={handleDialogClose}
- />
- </TableCell>
- <TableCell />
- </TableRow>
- <TableRow>
- <TableCell align="left">{t('input.mobilePhone')}</TableCell>
- <TableCell align="left">{guest.mobile}</TableCell>
- </TableRow>
- <TableRow>
- <TableCell align="left">{t('feideId')}</TableCell>
- <TableCell align="left">{guest.feide_id}</TableCell>
- </TableRow>
+ <Button
+ color="secondary"
+ sx={{ maxHeight: '2.3rem', marginLeft: '1rem' }}
+ onClick={resend}
+ >
+ {t('button.resendInvitation')}
+ </Button>
+ <Button
+ color="secondary"
+ sx={{ maxHeight: '2.3rem', marginLeft: '0.5rem' }}
+ onClick={handleCancel}
+ >
+ {t('button.cancelInvitation')}
+ </Button>
+ </Box>
+ )}
+ </Box>
+ <CancelConfirmationDialog
+ open={confirmationDialogOpen}
+ onClose={handleDialogClose}
+ />
+ </TableCell>
+ <TableCell />
+ </TableRow>
+ <TableRow>
+ <TableCell align="left">{t('input.mobilePhone')}</TableCell>
+ <TableCell align="left">{guest.mobile}</TableCell>
+ </TableRow>
+ <TableRow>
+ <TableCell align="left">{t('feideId')}</TableCell>
+ <TableCell align="left">{guest.feide_id}</TableCell>
+ </TableRow>
- <IdentityLine
- text={t('input.nationalIdNumber')}
- identity={guest.fnr}
- reloadGuest={reloadGuest}
- reloadGuests={reloadGuests}
- />
- <IdentityLine
- text={t('input.passportNumber')}
- identity={guest.passport}
- reloadGuest={reloadGuest}
- reloadGuests={reloadGuests}
- />
- </TableBody>
- </Table>
- </TableContainer>
- <Button
- color="secondary"
- disabled={!errors.email && !emailDirty}
- onClick={onSubmit}
- >
- {t('button.save')}
- </Button>
+ <IdentityLine
+ text={t('input.nationalIdNumber')}
+ identity={guest.fnr}
+ reloadGuest={reloadGuest}
+ reloadGuests={reloadGuests}
+ />
+ <IdentityLine
+ text={t('input.passportNumber')}
+ identity={guest.passport}
+ reloadGuest={reloadGuest}
+ reloadGuests={reloadGuests}
+ />
+ </TableBody>
+ </Table>
+ </TableContainer>
+ <Button
+ color="secondary"
+ disabled={!errors.email && !emailDirty}
+ onClick={onSubmit}
+ >
+ {t('button.save')}
+ </Button>
+ </Box>
<Typography variant="h2">{t('guestInfo.roleInfoHead')}</Typography>
<Typography variant="body1">{t('guestInfo.roleInfoBody')}</Typography>
<TableContainer>
--
GitLab