Reduce use of red in styling

Overview buttons now have black text. Sponsor menu arrows are now black.
Links in footer has white underline on hover, otherwise nothing.

Resolves: GREG-15

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

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