Skip to content
Snippets Groups Projects
Commit f7d2072f authored by Andreas Ellewsen's avatar Andreas Ellewsen
Browse files

Merge branch 'GREG-133-sponsor-figma-fix' into 'master' 

Modify styling of sponsor frontpage

See merge request !196
parents 2f29c564 ced6ca28
No related branches found
No related tags found
1 merge request!196Modify styling of sponsor frontpage
Pipeline #104065 canceled
Stage: venv update
    Stage: tests and linting
      Hide whitespace changes
      Inline Side-by-side
      frontend/public/locales/en/common.json
      + 11
      − 6
      View file @ f7d2072f
      ......@@ -61,20 +61,25 @@
      "role": "Guest role",
      "period": "Period",
      "ou": "Organisation",
      "department": "Department",
      "choice": "Choices",
      "registerText": "Register new guest",
      "waitingGuests": "Guests waiting for your confirmation",
      "waitingGuestsDescription": "See the table below for guests ",
      "waitingGuests": "Guests waiting for confirmation",
      "waitingGuestsDescription": "Confirm your guests that <1>registered manually</1> here. Guests with FEIDE-user do not need confirmation.",
      "noWaitingGuests": "No waiting guests",
      "activeGuests": "Your active guests",
      "activeGuestsDescription": "Make changes to your existing guests",
      "activeGuests": "Confirmed guests",
      "activeGuestsDescription": "Make changes to guest roles.",
      "noActiveGuests": "No active guests",
      "sentInvitations": "Sent invitations",
      "sentInvitationsDescription": "Invitations awaiting response from guest.",
      "noInvitations": "No invitations",
      "status": "Status",
      "active": "Active",
      "expired": "Expired",
      "statusText": {
      "active": "Active",
      "expired": "Expired",
      "waitingForGuest": "Waiting for guest",
      "waitingForSponsor": "Needs confirmation"
      },
      "details": "Details",
      "nationalIdNumber": "National ID number",
      "validation": {
      ......
      frontend/public/locales/nb/common.json
      + 11
      − 6
      View file @ f7d2072f
      ......@@ -61,20 +61,25 @@
      "role": "Gjesterolle",
      "period": "Periode",
      "ou": "Organisasjon",
      "department": "Avdeling",
      "choice": "Valg",
      "registerText": "Registrer ny gjest",
      "waitingGuests": "Dine gjester som venter på godkjenning",
      "waitingGuestsDescription": "Under er en oversikt over kontoer som venter på godkjenning",
      "waitingGuests": "Gjester som venter på godkjenning",
      "waitingGuestsDescription": "Her godkjenner du gjester som har <1>registrert seg manuelt</1>. Gjester som har FEIDE-bruker trenger ikke godkjenning.",
      "noWaitingGuests": "Ingen gjester til godkjenning",
      "activeGuests": "Dine aktive gjester",
      "activeGuestsDescription": "Her kan du endre på eksisterende gjester",
      "activeGuests": "Godkjente gjester",
      "activeGuestsDescription": "Her kan du endre på gjesteroller",
      "noActiveGuests": "Ingen aktive gjester",
      "sentInvitations": "Sendte invitasjoner",
      "sentInvitationsDescription": "Invitasjoner som venter på at gjesten skal ferdigstille registreringen.",
      "noInvitations": "Ingen invitasjoner",
      "status": "Status",
      "active": "Aktiv",
      "expired": "Utgått",
      "statusText": {
      "active": "Aktiv",
      "expired": "Utgått",
      "waitingForGuest": "Venter på gjest",
      "waitingForSponsor": "Trenger godkjenning"
      },
      "details": "Detaljer",
      "nationalIdNumber": "Fødselsnummer/D-nummer",
      "validation": {
      ......
      frontend/public/locales/nn/common.json
      + 11
      − 6
      View file @ f7d2072f
      ......@@ -62,20 +62,25 @@
      "role": "Gjesterolle",
      "period": "Periode",
      "ou": "Organisasjon",
      "department": "Avdeling",
      "choice": "Valg",
      "registerText": "Registrer ny gjest",
      "waitingGuests": "Dine gjester som venter på godkjenning",
      "waitingGuestsDescription": "Under er en oversikt over kontoer som venter på godkjenning",
      "waitingGuests": "Gjester som venter på godkjenning",
      "waitingGuestsDescription": "Her godkjenner du gjester som har <1>registrert seg manuelt</1>. Gjester som har FEIDE-bruker trenger ikke godkjenning.",
      "noWaitingGuests": "Ingen gjester til godkjenning",
      "activeGuests": "Dine aktive gjester",
      "activeGuestsDescription": "Her kan du endre på eksisterende gjester",
      "activeGuests": "Godkjente gjester",
      "activeGuestsDescription": "Her kan du endre på gjesteroller.",
      "noActiveGuests": "Ingen aktive gjester",
      "sentInvitations": "Sendte invitasjonar",
      "sentInvitationsDescription": "Invitasjonar som venter på at gjesten skal ferdigstille registreringa.",
      "noInvitations": "Ingen invitasjonar",
      "status": "Status",
      "active": "Aktiv",
      "expired": "Utgått",
      "statusText": {
      "active": "Aktiv",
      "expired": "Utgått",
      "waitingForGuest": "Venter på gjest",
      "waitingForSponsor": "Trenger godkjenning"
      },
      "details": "Detaljer",
      "nationalIdNumber": "Fødselsnummer/D-nummer",
      "validation": {
      ......
      frontend/src/routes/components/sponsorGuestButtons.tsx
      + 19
      − 17
      View file @ f7d2072f
      import PersonIcon from '@mui/icons-material/Person'
      import { Box, IconButton, Theme } from '@mui/material'
      import { Box, IconButton, styled, Theme } from '@mui/material'
      import PersonAddIcon from '@mui/icons-material/PersonAdd'
      import React from 'react'
      import { useTranslation } from 'react-i18next'
      ......@@ -10,6 +10,13 @@ interface SponsorGuestButtonsProps {
      registerNewGuestActive?: boolean
      }
      const StyledIconButton = styled(IconButton)({
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      fontSize: '22px',
      })
      export default function SponsorGuestButtons(props: SponsorGuestButtonsProps) {
      const { yourGuestsActive, registerNewGuestActive } = props
      const { t } = useTranslation(['common'])
      ......@@ -30,22 +37,20 @@ export default function SponsorGuestButtons(props: SponsorGuestButtonsProps) {
      flexDirection: 'row',
      justifyContent: 'space-evenly',
      marginBottom: '2rem',
      fontSize: '22px',
      }}
      >
      <IconButton
      <StyledIconButton
      onClick={goToOverview}
      sx={{
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      typography: 'caption',
      color: () => (yourGuestsActive ? 'primary.main' : ''),
      textDecorationLine: () => (yourGuestsActive ? 'underline' : ''),
      }}
      >
      <PersonIcon
      fontSize="large"
      sx={{
      borderRadius: '2rem',
      fontSize: '80px',
      borderRadius: '4rem',
      borderStyle: 'solid',
      borderColor: (theme: Theme) =>
      yourGuestsActive
      ......@@ -59,22 +64,19 @@ export default function SponsorGuestButtons(props: SponsorGuestButtonsProps) {
      }}
      />
      {t('yourGuests')}
      </IconButton>
      </StyledIconButton>
      <IconButton
      <StyledIconButton
      onClick={goToRegister}
      sx={{
      display: 'flex',
      flexDirection: 'column',
      alignItems: 'center',
      typography: 'caption',
      color: () => (registerNewGuestActive ? 'primary.main' : ''),
      textDecorationLine: () => (registerNewGuestActive ? 'underline' : ''),
      }}
      >
      <PersonAddIcon
      fontSize="large"
      sx={{
      borderRadius: '2rem',
      fontSize: '80px',
      borderRadius: '4rem',
      borderStyle: 'solid',
      borderColor: (theme: Theme) =>
      registerNewGuestActive
      ......@@ -88,7 +90,7 @@ export default function SponsorGuestButtons(props: SponsorGuestButtonsProps) {
      }}
      />
      {t('registerNewGuest')}
      </IconButton>
      </StyledIconButton>
      </Box>
      )
      }
      ......
      frontend/src/routes/sponsor/frontpage/index.tsx
      + 173
      − 158
      View file @ f7d2072f
      ......@@ -12,13 +12,15 @@ import {
      AccordionDetails,
      Button,
      } from '@mui/material'
      import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
      import NotificationsActiveIcon from '@mui/icons-material/NotificationsActive'
      import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'
      import { styled } from '@mui/system'
      import Page from 'components/page'
      import { useTranslation } from 'react-i18next'
      import { useTranslation, Trans } from 'react-i18next'
      import { Link } from 'react-router-dom'
      import { Guest, Role } from 'interfaces'
      import { isBefore, format } from 'date-fns'
      import { isBefore } from 'date-fns'
      import SponsorGuestButtons from '../../components/sponsorGuestButtons'
      ......@@ -29,40 +31,118 @@ interface GuestProps {
      interface PersonLineProps {
      person: Guest
      role: Role
      showStatusColumn?: boolean
      }
      const PersonLine = ({ person, role, showStatusColumn }: PersonLineProps) => {
      interface StatusProps {
      status: string
      }
      interface GuestTableProps {
      guests: Guest[]
      emptyText: string
      }
      interface FrontPageProps {
      guests: Guest[]
      }
      const StyledTableRow = styled(TableRow)(({ theme }) => ({
      borderTop: '0',
      borderLeft: '0',
      borderRight: '0',
      borderBottom: '2px solid',
      borderColor: theme.palette.primary.main,
      borderRadius: '0',
      }))
      const StyledAccordion = styled(Accordion)({
      borderStyle: 'none',
      boxShadow: 'none',
      })
      const StyledAccordionSummary = styled(AccordionSummary)({
      borderStyle: 'solid',
      borderColor: 'black',
      borderWidth: '2px',
      borderRadius: '1%',
      })
      const StyledTableHeadCell = styled(TableCell)({
      fontWeight: 'bold',
      })
      const StyledTableHead = styled(TableHead)(({ theme }) => ({
      borderTop: '0',
      borderLeft: '0',
      borderRight: '0',
      borderBottom: '3px solid',
      borderColor: theme.palette.secondary.main,
      borderRadius: '0',
      }))
      const Status = ({ status }: StatusProps) => {
      const { t } = useTranslation('common')
      switch (status) {
      case 'active':
      return (
      <TableCell sx={{ color: 'success.main' }} align="left">
      {t('statusText.active')}
      </TableCell>
      )
      case 'expired':
      return (
      <TableCell sx={{ color: 'error.main' }} align="left">
      {t('statusText.expired')}
      </TableCell>
      )
      case 'waitingForGuest':
      return (
      <TableCell sx={{ color: 'blue' }} align="left">
      {t('statusText.waitingForGuest')}
      </TableCell>
      )
      case 'waitingForSponsor':
      return (
      <TableCell sx={{ color: 'blue' }} align="left">
      {t('statusText.waitingForSponsor')}
      </TableCell>
      )
      default:
      return (
      <TableCell sx={{ color: 'error.main' }} align="left">
      {t('statusText.waiting')}
      </TableCell>
      )
      }
      }
      const PersonLine = ({ person, role }: PersonLineProps) => {
      const [t, i18n] = useTranslation(['common'])
      const today = new Date()
      today.setHours(0, 0, 0, 0)
      let status = ''
      if (!person.registered) {
      status = 'waitingForGuest'
      } else if (person.registered && !person.verified) {
      status = 'waitingForSponsor'
      } else if (person.registered && person.verified) {
      if (!isBefore(role.end_date, today)) {
      status = 'active'
      } else {
      status = 'expired'
      }
      }
      return (
      <TableRow
      key={`${person.first} ${person.last}`}
      sx={{ '&:last-child td, &:last-child th': { border: 0 } }}
      >
      <StyledTableRow key={`${person.first} ${person.last}`}>
      <TableCell component="th" scope="row">
      {`${person.first} ${person.last}`}
      </TableCell>
      <TableCell align="left">
      {i18n.language === 'en' ? role.name_en : role.name_nb}
      </TableCell>
      {showStatusColumn &&
      (!isBefore(role.end_date, today) ? (
      <TableCell sx={{ color: 'green' }} align="left">
      {t('common:active')}
      </TableCell>
      ) : (
      <TableCell sx={{ color: 'red' }} align="left">
      {t('common:expired')}
      </TableCell>
      ))}
      <TableCell align="left">
      {role.start_date ? format(role.start_date, 'yyyy-MM-dd') : null} -{' '}
      {format(role.end_date, 'yyyy-MM-dd')}
      </TableCell>
      <Status status={status} />
      <TableCell align="left">
      {i18n.language === 'en' ? role.ou_en : role.ou_nb}
      </TableCell>
      ......@@ -76,15 +156,47 @@ const PersonLine = ({ person, role, showStatusColumn }: PersonLineProps) => {
      {t('common:details')}
      </Button>
      </TableCell>
      </TableRow>
      </StyledTableRow>
      )
      }
      PersonLine.defaultProps = {
      showStatusColumn: false,
      const GuestTable = ({ guests, emptyText }: GuestTableProps) => {
      const { t } = useTranslation('common')
      return (
      <TableContainer
      component={Paper}
      sx={{ boxShadow: 'none', borderRadius: '0px' }}
      >
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
      <StyledTableHead>
      <TableRow>
      <StyledTableHeadCell>{t('common:name')}</StyledTableHeadCell>
      <StyledTableHeadCell>{t('common:role')}</StyledTableHeadCell>
      <StyledTableHeadCell>{t('common:status')}</StyledTableHeadCell>
      <StyledTableHeadCell>{t('common:department')}</StyledTableHeadCell>
      <StyledTableHeadCell />
      </TableRow>
      </StyledTableHead>
      <TableBody>
      {guests.length > 0 ? (
      guests.map((person) =>
      person.roles.map((role) => (
      <PersonLine role={role} person={person} />
      ))
      )
      ) : (
      <TableRow>
      <TableCell> {emptyText}</TableCell>
      </TableRow>
      )}
      </TableBody>
      </Table>
      </TableContainer>
      )
      }
      const WaitingForGuestRegistration = ({ persons }: GuestProps) => {
      const InvitedGuests = ({ persons }: GuestProps) => {
      const [activeExpanded, setActiveExpanded] = useState(false)
      // Show guests that have not responded to the invite yet
      ......@@ -95,53 +207,20 @@ const WaitingForGuestRegistration = ({ persons }: GuestProps) => {
      }
      const [t] = useTranslation(['common'])
      return (
      <Accordion
      <StyledAccordion
      expanded={activeExpanded}
      onChange={() => {
      setActiveExpanded(!activeExpanded)
      }}
      >
      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
      <StyledAccordionSummary expandIcon={<ArrowUpwardIcon color="primary" />}>
      <h2>{t('common:sentInvitations')}</h2>
      </AccordionSummary>
      </StyledAccordionSummary>
      <AccordionDetails>
      <p>{t('common:sentInvitationsDescription')}</p>
      <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
      <TableHead sx={{ backgroundColor: 'secondary.light' }}>
      <TableRow>
      <TableCell>{t('common:name')}</TableCell>
      <TableCell align="left">{t('common:role')}</TableCell>
      <TableCell align="left">{t('common:period')}</TableCell>
      <TableCell align="left">{t('common:ou')}</TableCell>
      <TableCell align="left">{t('common:choice')}</TableCell>
      </TableRow>
      </TableHead>
      <TableBody>
      {guests.length > 0 ? (
      guests.map((person) =>
      person.roles ? (
      person.roles.map((role) => (
      <PersonLine role={role} person={person} />
      ))
      ) : (
      <></>
      )
      )
      ) : (
      <></>
      )}
      <TableRow>
      <TableCell>
      {guests.length > 0 ? '' : t('common:noActiveGuests')}
      </TableCell>
      </TableRow>
      </TableBody>
      </Table>
      </TableContainer>
      <GuestTable guests={guests} emptyText={t('common:noInvitations')} />
      </AccordionDetails>
      </Accordion>
      </StyledAccordion>
      )
      }
      ......@@ -155,60 +234,20 @@ const ActiveGuests = ({ persons }: GuestProps) => {
      }
      const [t] = useTranslation(['common'])
      return (
      <Accordion
      <StyledAccordion
      expanded={activeExpanded}
      onChange={() => {
      setActiveExpanded(!activeExpanded)
      }}
      >
      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
      <StyledAccordionSummary expandIcon={<ArrowUpwardIcon color="primary" />}>
      <h2>{t('common:activeGuests')}</h2>
      </AccordionSummary>
      </StyledAccordionSummary>
      <AccordionDetails>
      <p>{t('common:activeGuestsDescription')}</p>
      <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
      <TableHead sx={{ backgroundColor: 'secondary.light' }}>
      <TableRow>
      <TableCell>{t('common:name')}</TableCell>
      <TableCell align="left">{t('common:role')}</TableCell>
      <TableCell align="left">{t('common:status')}</TableCell>
      <TableCell align="left">{t('common:period')}</TableCell>
      <TableCell align="left">{t('common:ou')}</TableCell>
      <TableCell align="left">{t('common:choice')}</TableCell>
      </TableRow>
      </TableHead>
      <TableBody>
      {guests.length > 0 ? (
      guests.map((person) =>
      person.roles ? (
      person.roles.map((role) => (
      <PersonLine
      role={role}
      person={person}
      showStatusColumn
      />
      ))
      ) : (
      <></>
      )
      )
      ) : (
      <></>
      )}
      <TableRow>
      <TableCell>
      {guests.length > 0 ? '' : t('common:noActiveGuests')}
      </TableCell>
      </TableRow>
      </TableBody>
      </Table>
      </TableContainer>
      <GuestTable guests={guests} emptyText={t('common:noActiveGuests')} />
      </AccordionDetails>
      </Accordion>
      </StyledAccordion>
      )
      }
      ......@@ -223,67 +262,43 @@ const WaitingGuests = ({ persons }: GuestProps) => {
      const [t] = useTranslation(['common'])
      return (
      <Accordion
      <StyledAccordion
      expanded={waitingExpanded}
      onChange={() => {
      setWaitingExpanded(!waitingExpanded)
      }}
      sx={{ border: 'none' }}
      >
      <AccordionSummary expandIcon={<ExpandMoreIcon />}>
      <h2>{t('common:waitingGuests')}</h2>
      </AccordionSummary>
      <StyledAccordionSummary expandIcon={<ArrowUpwardIcon color="primary" />}>
      <h2>
      {t('common:waitingGuests')}{' '}
      {guests.length > 0 && (
      <NotificationsActiveIcon
      sx={{ color: 'error.main', fontSize: '26px' }}
      />
      )}
      </h2>
      </StyledAccordionSummary>
      <AccordionDetails>
      <p>{t('common:waitingGuestsDescription')}</p>
      <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} aria-label="simple table">
      <TableHead sx={{ backgroundColor: 'secondary.light' }}>
      <TableRow>
      <TableCell>{t('common:name')}</TableCell>
      <TableCell align="left">{t('common:role')}</TableCell>
      <TableCell align="left">{t('common:period')}</TableCell>
      <TableCell align="left">{t('common:ou')}</TableCell>
      <TableCell align="left">{t('common:choice')}</TableCell>
      </TableRow>
      </TableHead>
      <TableBody>
      {guests.length > 0 ? (
      guests.map((person) =>
      person.roles ? (
      person.roles.map((role) => (
      <PersonLine role={role} person={person} />
      ))
      ) : (
      <></>
      )
      )
      ) : (
      <></>
      )}
      <TableRow>
      <TableCell>
      {guests.length > 0 ? '' : t('common:noWaitingGuests')}
      </TableCell>
      </TableRow>
      </TableBody>
      </Table>
      </TableContainer>
      <p>
      <Trans i18nKey="common:waitingGuestsDescription">
      Her godkjenner du gjester som har <b>registrert seg manuelt</b>.
      Gjester som har FEIDE-bruker trenger ikke godkjenning.
      </Trans>
      </p>
      <GuestTable guests={guests} emptyText={t('common:noWaitingGuests')} />
      </AccordionDetails>
      </Accordion>
      </StyledAccordion>
      )
      }
      interface FrontPageProps {
      guests: Guest[]
      }
      function FrontPage({ guests }: FrontPageProps) {
      return (
      <Page>
      <SponsorGuestButtons yourGuestsActive />
      <WaitingForGuestRegistration persons={guests} />
      <InvitedGuests persons={guests} />
      <br />
      <WaitingGuests persons={guests} />
      <br />
      <ActiveGuests persons={guests} />
      </Page>
      )
      ......
      0% or .
      You are about to add 0 people to the discussion. Proceed with caution.
      Finish editing this message first!
      Please register or to comment