Merge branch 'GREG-155-no-red-links' into 'master'

Reduce use of red in styling

See merge request !216

frontend/src/routes/components/footer.tsx

@@ -58,6 +58,14 @@ const LogoSection = styled('div')(({ theme }) => ({
   padding: '1rem 0 1rem 2rem',
 }))
 
+const StyledLink = styled(Link)({
+  color: 'white',
+})
+
+StyledLink.defaultProps = {
+  underline: 'hover',
+}
+
 const LogoContainer = styled('div')({})
 
 function Footer() {
@@ -70,31 +78,31 @@ function Footer() {
         <LinkContainer>
           <LinkSection>
             <LinkHeader>{t('footer:link.terms.header')}</LinkHeader>
-            <Link href={ITRulesLink} sx={{ color: 'white' }}>
+            <StyledLink href={ITRulesLink}>
               {t('footer:link.terms.ITRules')}
-            </Link>
-            <Link href={privacyPolicyLink} sx={{ color: 'white' }}>
+            </StyledLink>
+            <StyledLink href={privacyPolicyLink}>
               {t('footer:link.terms.privacy')}
-            </Link>
+            </StyledLink>
           </LinkSection>
 
           <LinkSection>
             <LinkHeader>{t('footer:link.help.header')}</LinkHeader>
-            <Link href={helpLink} sx={{ color: 'white' }}>
+            <StyledLink href={helpLink}>
               {t('footer:link.help.contact')}
-            </Link>
-            <Link href={documentationLink} sx={{ color: 'white' }}>
+            </StyledLink>
+            <StyledLink href={documentationLink}>
               {t('footer:link.help.doc')}
-            </Link>
+            </StyledLink>
           </LinkSection>
 
           <LinkSection>
             <LinkHeader>
               {t('footer:link.responsibleOrganization.header')}
             </LinkHeader>
-            <Link href={responsibleOrganizationLink} sx={{ color: 'white' }}>
+            <StyledLink href={responsibleOrganizationLink}>
               {responsibleOrganization}
-            </Link>
+            </StyledLink>
           </LinkSection>
         </LinkContainer>
       </InfoSection>

frontend/src/routes/components/sponsorGuestButtons.tsx

@@ -43,7 +43,7 @@ export default function SponsorGuestButtons(props: SponsorGuestButtonsProps) {
       <StyledIconButton
         onClick={goToOverview}
         sx={{
-          color: () => (yourGuestsActive ? 'primary.main' : ''),
+          color: () => (yourGuestsActive ? 'black' : undefined),
           textDecorationLine: () => (yourGuestsActive ? 'underline' : ''),
         }}
       >
@@ -69,7 +69,7 @@ export default function SponsorGuestButtons(props: SponsorGuestButtonsProps) {
       <StyledIconButton
         onClick={goToRegister}
         sx={{
-          color: () => (registerNewGuestActive ? 'primary.main' : ''),
+          color: () => (registerNewGuestActive ? 'black' : undefined),
           textDecorationLine: () => (registerNewGuestActive ? 'underline' : ''),
         }}
       >

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

@@ -46,14 +46,14 @@ interface FrontPageProps {
   guests: Guest[]
 }
 
-const StyledTableRow = styled(TableRow)(({ theme }) => ({
+const StyledTableRow = styled(TableRow)({
   borderTop: '0',
   borderLeft: '0',
   borderRight: '0',
   borderBottom: '2px solid',
-  borderColor: theme.palette.primary.main,
+  borderColor: 'black',
   borderRadius: '0',
-}))
+})
 
 const StyledAccordion = styled(Accordion)({
   borderStyle: 'none',
@@ -186,9 +186,9 @@ const GuestTable = ({ guests, emptyText }: GuestTableProps) => {
               ))
             )
           ) : (
-            <TableRow>
+            <StyledTableRow>
               <TableCell> {emptyText}</TableCell>
-            </TableRow>
+            </StyledTableRow>
           )}
         </TableBody>
       </Table>
@@ -213,7 +213,9 @@ const InvitedGuests = ({ persons }: GuestProps) => {
         setActiveExpanded(!activeExpanded)
       }}
     >
-      <StyledAccordionSummary expandIcon={<ArrowUpwardIcon color="primary" />}>
+      <StyledAccordionSummary
+        expandIcon={<ArrowUpwardIcon sx={{ fill: 'black' }} />}
+      >
         <h2>{t('common:sentInvitations')}</h2>
       </StyledAccordionSummary>
       <AccordionDetails>
@@ -240,7 +242,9 @@ const ActiveGuests = ({ persons }: GuestProps) => {
         setActiveExpanded(!activeExpanded)
       }}
     >
-      <StyledAccordionSummary expandIcon={<ArrowUpwardIcon color="primary" />}>
+      <StyledAccordionSummary
+        expandIcon={<ArrowUpwardIcon sx={{ fill: 'black' }} />}
+      >
         <h2>{t('common:activeGuests')}</h2>
       </StyledAccordionSummary>
       <AccordionDetails>
@@ -268,7 +272,9 @@ const WaitingGuests = ({ persons }: GuestProps) => {
         setWaitingExpanded(!waitingExpanded)
       }}
     >
-      <StyledAccordionSummary expandIcon={<ArrowUpwardIcon color="primary" />}>
+      <StyledAccordionSummary
+        expandIcon={<ArrowUpwardIcon sx={{ fill: 'black' }} />}
+      >
         <h2>
           {t('common:waitingGuests')}{' '}
           {guests.length > 0 && (