Increase margins around text

frontend/src/routes/sponsor/frontpage/index.tsx

@@ -233,7 +233,10 @@ const InvitedGuests = ({ persons }: GuestProps) => {
         </Typography>
       </StyledAccordionSummary>
       <AccordionDetails>
-        <Typography variant="body1">
+        <Typography
+          variant="body1"
+          sx={{ marginTop: '1rem', marginBottom: '1rem' }}
+        >
           {t('common:sentInvitationsDescription')}
         </Typography>
         <GuestTable guests={guests} emptyText={t('common:noInvitations')} />
@@ -266,7 +269,10 @@ const ActiveGuests = ({ persons }: GuestProps) => {
         </Typography>
       </StyledAccordionSummary>
       <AccordionDetails>
-        <Typography variant="body1">
+        <Typography
+          variant="body1"
+          sx={{ marginTop: '1rem', marginBottom: '1rem' }}
+        >
           {t('common:activeGuestsDescription')}
         </Typography>
         <GuestTable guests={guests} emptyText={t('common:noActiveGuests')} />
@@ -305,7 +311,10 @@ const WaitingGuests = ({ persons }: GuestProps) => {
         </Typography>
       </StyledAccordionSummary>
       <AccordionDetails>
-        <Typography variant="body1">
+        <Typography
+          variant="body1"
+          sx={{ marginTop: '1rem', marginBottom: '1rem' }}
+        >
           <Trans i18nKey="common:waitingGuestsDescription">
             Her godkjenner du gjester som har <b>registrert seg manuelt</b>.
             Gjester som har FEIDE-bruker trenger ikke godkjenning.

frontend/src/routes/sponsor/guest/guestInfo/index.tsx

@@ -162,8 +162,10 @@ export default function GuestInfo({
       <SponsorInfoButtons to="/sponsor" name={`${guest.first} ${guest.last}`} />
       <form onSubmit={onSubmit}>
         <Box sx={{ marginBottom: '2rem' }}>
-          <Typography variant="h2">{t('guestInfo.contactInfo')}</Typography>
-          <Typography variant="body1">
+          <Typography sx={{ marginBottom: '1rem' }} variant="h2">
+            {t('guestInfo.contactInfo')}
+          </Typography>
+          <Typography sx={{ marginBottom: '1rem' }} variant="body1">
             {t('guestInfo.contactInfoBody')}
           </Typography>
 
@@ -173,7 +175,6 @@ export default function GuestInfo({
                 <TableRow>
                   <TableHeadCell align="left" colSpan={2}>
                     {t('guestInfo.contactInfoTableText')}
-
                   </TableHeadCell>
                 </TableRow>
               </TableHead>
@@ -204,7 +205,7 @@ export default function GuestInfo({
                         defaultValue={guest.email}
                         inputRef={ref}
                         onChange={onChange}
-                          {...inputProps}
+                        {...inputProps}
                       />
 
                       {/* If the guest has not completed the registration process, he should have an invitation he has not responded to */}
@@ -284,8 +285,12 @@ export default function GuestInfo({
           </Button>
         </Box>
       </form>
-      <Typography variant="h2">{t('guestInfo.roleInfoHead')}</Typography>
-      <Typography variant="body1">{t('guestInfo.roleInfoBody')}</Typography>
+      <Typography sx={{ marginBottom: '1rem' }} variant="h2">
+        {t('guestInfo.roleInfoHead')}
+      </Typography>
+      <Typography sx={{ marginBottom: '1rem' }} variant="body1">
+        {t('guestInfo.roleInfoBody')}
+      </Typography>
       <TableContainer>
         <Table sx={{ minWidth: 650 }} aria-label="simple table">
           <TableHead>

frontend/src/routes/sponsor/guest/guestRoleInfo/index.tsx

@@ -84,7 +84,7 @@ const TableCell = styled(TableCellMui)({
 })
 
 const TableContainer = styled(TableContainerMui)({
-  marginBottom: '0.8rem',
+  marginBottom: '1rem',
   borderRadius: '1%',
   borderStyle: 'solid',
   borderColor: 'black',
@@ -194,8 +194,12 @@ export default function GuestRoleInfo({
         to={`/sponsor/guest/${pid}`}
         name={`${guest.first} ${guest.last}`}
       />
-      <Typography variant="h2">{t('sponsor.roleInfoHead')}</Typography>
-      <Typography variant="body1">{t('sponsor.roleInfoText')}</Typography>
+      <Typography sx={{ marginBottom: '1rem' }} variant="h2">
+        {t('sponsor.roleInfoHead')}
+      </Typography>
+      <Typography sx={{ marginBottom: '1rem' }} variant="body1">
+        {t('sponsor.roleInfoText')}
+      </Typography>
       <form onSubmit={onSubmit}>
         <TableContainer>
           <Table sx={{ minWidth: 650 }} aria-label="simple table">

frontend/src/routes/sponsor/guest/newGuestRole/index.tsx

@@ -182,8 +182,12 @@ function NewGuestRole({ guest, reloadGuestInfo }: NewGuestRoleProps) {
         to={`/sponsor/guest/${pid}`}
         name={`${guest.first} ${guest.last}`}
       />
-      <Typography variant="h2">{t('guest.headerText')}</Typography>
-      <Typography variant="body1">{t('guest.bodyText')}</Typography>
+      <Typography sx={{ marginBottom: '1rem' }} variant="h2">
+        {t('guest.headerText')}
+      </Typography>
+      <Typography sx={{ marginBottom: '1rem' }} variant="body1">
+        {t('guest.bodyText')}
+      </Typography>
       <form onSubmit={onSubmit}>
         <Stack spacing={2}>
           <FormControl>

frontend/src/routes/sponsor/register/frontPage.tsx

@@ -57,14 +57,19 @@ function FrontPage() {
   return (
     <Page>
       <SponsorGuestButtons registerNewGuestActive />
-      <Typography variant="h2">{t('register.registerHeading')}</Typography>
-      <Typography variant="body1">{t('register.registerText')}</Typography>
+      <Typography variant="h2" sx={{ marginBottom: '1rem' }}>
+        {t('register.registerHeading')}
+      </Typography>
+      <Typography variant="body1" sx={{ marginBottom: '1rem' }}>
+        {t('register.registerText')}
+      </Typography>
       <Box
         sx={{
           borderStyle: () => (guests.length > 0 ? 'solid' : 'none'),
           borderRadius: '0.3125rem',
           borderColor: 'secondary.main',
           padding: '0.4375 0.75rem',
+          marginBottom: '2rem',
         }}
       >
         <TextField
@@ -105,7 +110,6 @@ function FrontPage() {
           })
         )}
       </Box>
-      <br />
       <Button
         variant="contained"
         color="secondary"