New footer

frontend/public/locales/en/footer.json

 {
-  "footerInfo": "This is a footer namespace value",
-  "contactSectionHeader": "Need help?",
-  "contactHelp": "Contact",
-  "contactHelpMail": "Contact",
-  "responsibleOrganizationHeader": "Maintained by"
+  "applicationTitle": "Guest Service",
+  "link": {
+    "terms": {
+      "header": "TERMS",
+      "ITRules": "IT Rules",
+      "privacy": "Privacy Policy"
+    },
+    "help": {
+      "header": "HELP AND CONTACT",
+      "contact": "Contact Helpdesk",
+      "doc": "Documentation"
+    },
+    "responsibleOrganization": {
+      "header": "RESPONSIBLE FOR THIS SERVICE"
+    }
+  }
 }

frontend/public/locales/nb/footer.json

 {
-  "footerInfo": "Verdi i namespace footer",
-  "contactSectionHeader": "Trenger du hjelp?",
-  "contactHelp": "Kontakt",
-  "contactHelpMail": "Kontaktveileder",
-  "responsibleOrganizationHeader": "Ansvarlig for denne tjenesten"
+  "applicationTitle": "Gjestetjenesten",
+  "link": {
+    "terms": {
+      "header": "VILKÅR",
+      "ITRules": "IT-Reglementet",
+      "privacy": "Personvern"
+    },
+    "help": {
+      "header": "HJELP OG KONTAKT",
+      "contact": "Kontakt helpdesk",
+      "doc": "Dokumentasjon"
+    },
+    "responsibleOrganization": {
+      "header": "ANSVARLIG FOR DENNE TJENESTEN"
+    }
+  }
 }

frontend/public/locales/nn/footer.json

 {
-  "footerInfo": "Verdi i namespace footer",
-  "contactSectionHeader": "Treng du hjelp?",
-  "contactHelp": "Kontakt",
-  "contactHelpMail": "Kontaktrettleiar",
-  "responsibleOrganizationHeader": "Ansvarleg for denne tenesta"
+  "applicationTitle": "Gjestetjenesten",
+  "link": {
+    "terms": {
+      "header": "VILKÅR",
+      "ITRules": "IT-Reglementet",
+      "privacy": "Personvern"
+    },
+    "help": {
+      "header": "HJELP OG KONTAKT",
+      "contact": "Kontakt helpdesk",
+      "doc": "Dokumentasjon"
+    },
+    "responsibleOrganization": {
+      "header": "ANSVARLEG FOR DENNE TJENESTA"
+    }
+  }
 }

frontend/src/appConfig.ts

 declare global {
-    /* tslint:disable */
-    interface Window {
-        ENV: any
-    }
+  /* tslint:disable */
+  interface Window {
+    ENV: any
+  }
 }
 
 /* Locate the client environment */
@@ -21,14 +21,25 @@ export const appInst: string = env.REACT_APP_INST as string
 
 /* Theming */
 export const appTheme: string = env.REACT_APP_THEME
-    ? (env.REACT_APP_THEME as string)
-    : 'default'
+  ? (env.REACT_APP_THEME as string)
+  : 'default'
 
 /* Show warning in the footer about this being a staging/test system */
 export const appStagingWarning: boolean =
-    env.REACT_APP_STAGING_WARNING === 'true'
+  env.REACT_APP_STAGING_WARNING === 'true'
 
 /* Footer content */
-export const appTechnicalSupportLink: string = env.REACT_APP_SUPPORT_URL as string
-export const reponsibleOrganization: string = env.REACT_APP_RESPONSIBLE_ORGANIZATION as string
-export const responsibleOrganizationLink: string = env.REACT_APP_RESPONSIBLE_ORGANIZATION_LINK as string
+export const appTechnicalSupportLink: string =
+  env.REACT_APP_SUPPORT_URL as string
+export const responsibleOrganization: string =
+  env.REACT_APP_RESPONSIBLE_ORGANIZATION as string
+export const responsibleOrganizationLink: string =
+  env.REACT_APP_RESPONSIBLE_ORGANIZATION_LINK as string
+
+export const ITRulesLink: string = env.REACT_APP_IT_RULES_LINK as string
+export const privacyPolicyLink: string =
+  env.REACT_APP_PRIVACY_POLICY_LINK as string
+
+export const helpLink: string = env.REACT_APP_HELP_LINK as string
+export const documentationLink: string =
+  env.REACT_APP_DOCUMENTATION_LINK as string

frontend/src/routes/components/footer.tsx

-import React from 'react'
 import { useTranslation } from 'react-i18next'
 import { styled } from '@mui/material/styles'
 import { Link } from '@mui/material'
 
-import { reponsibleOrganization, responsibleOrganizationLink } from 'appConfig'
+import {
+  responsibleOrganization,
+  responsibleOrganizationLink,
+  ITRulesLink,
+  privacyPolicyLink,
+  helpLink,
+  documentationLink,
+} from 'appConfig'
 
 import { getFooterLogo } from './logos'
 
-const FooterWrapper = styled('footer')(({ theme }) => ({
-  background: theme.palette.primary.main,
+const FooterWrapper = styled('footer')({
   height: 'fit-content',
-  padding: '0rem 3.5rem',
+  padding: '0',
   marginTop: 'auto',
+})
+
+const InfoSection = styled('div')(({ theme }) => ({
+  display: 'flex',
+  flexDirection: 'column',
+  background: theme.greg.footerLinkBgColor,
+  padding: '2rem 2rem 4rem 2rem',
 }))
 
-const FooterSection = styled('section')({
-  paddingLeft: '1rem',
+const FooterHeader = styled('div')({
+  fontSize: '2rem',
+  color: 'white',
+  padding: '1rem 0 2rem 0',
 })
 
-const ContentContainer = styled('div')(({ theme }) => ({
+const LinkContainer = styled('div')({
+  display: 'flex',
+  justifyContent: 'space-between',
+})
+
+const LinkSection = styled('div')({
+  display: 'flex',
+  flexDirection: 'column',
+  color: 'white',
+  fontSize: '1rem',
+})
+
+const LinkHeader = styled('div')({
+  fontSize: '0.8rem',
+  marginBottom: '0.5rem',
+})
+
+const LogoSection = styled('div')(({ theme }) => ({
+  background: theme.palette.primary.main,
   fontSize: '1.5rem',
   color: theme.palette.primary.main,
   display: 'flex',
   flexWrap: 'nowrap',
   justifyContent: 'space-between',
-  padding: '1rem 0rem 1rem 0',
+  padding: '1rem 0 1rem 2rem',
 }))
 
 const LogoContainer = styled('div')({
-  maxWidth: '30rem',
-  minWidth: '20rem',
-})
-
-const FooterHeader = styled('div')({
-  fontsize: '1rem',
+  maxWidth: '15rem',
+  minWidth: '10rem',
 })
 
-const Footer: React.FunctionComponent = () => {
+function Footer() {
   const { t } = useTranslation(['common', 'footer'])
-
   return (
     <FooterWrapper>
-      <ContentContainer>
-        <FooterSection>
-          <LogoContainer>{getFooterLogo()}</LogoContainer>
-        </FooterSection>
+      <InfoSection>
+        <FooterHeader>{t('footer:applicationTitle')}</FooterHeader>
+
+        <LinkContainer>
+          <LinkSection>
+            <LinkHeader>{t('footer:link.terms.header')}</LinkHeader>
+            <Link href={ITRulesLink} sx={{ color: 'white' }}>
+              {t('footer:link.terms.ITRules')}
+            </Link>
+            <Link href={privacyPolicyLink} sx={{ color: 'white' }}>
+              {t('footer:link.terms.privacy')}
+            </Link>
+          </LinkSection>
+
+          <LinkSection>
+            <LinkHeader>{t('footer:link.help.header')}</LinkHeader>
+            <Link href={helpLink} sx={{ color: 'white' }}>
+              {t('footer:link.help.contact')}
+            </Link>
+            <Link href={documentationLink} sx={{ color: 'white' }}>
+              {t('footer:link.help.doc')}
+            </Link>
+          </LinkSection>
 
-        <FooterSection sx={{ paddingTop: '1rem' }}>
-          <FooterHeader>
-            {t('footer:responsibleOrganizationHeader')}
-          </FooterHeader>
-          <Link
-            href={responsibleOrganizationLink}
-            sx={{ color: 'white', fontSize: '1rem' }}
-          >
-            {reponsibleOrganization}
-          </Link>
-        </FooterSection>
-      </ContentContainer>
+          <LinkSection>
+            <LinkHeader>
+              {t('footer:link.responsibleOrganization.header')}
+            </LinkHeader>
+            <Link href={responsibleOrganizationLink} sx={{ color: 'white' }}>
+              {responsibleOrganization}
+            </Link>
+          </LinkSection>
+        </LinkContainer>
+      </InfoSection>
+      <LogoSection>
+        <LogoContainer>{getFooterLogo()}</LogoContainer>
+      </LogoSection>
     </FooterWrapper>
   )
 }

frontend/src/themes/index.ts

@@ -14,6 +14,7 @@ declare module '@mui/material/styles' {
       appMaxWidth: string
       deactivatedColor: string
       textWhite: string
+      footerLinkBgColor: string
     }
   }
 
@@ -24,6 +25,7 @@ declare module '@mui/material/styles' {
       appMaxWidth?: string
       deactivatedColor?: string
       textWhite?: string
+      footerLinkBgColor?: string
     }
   }
 }

frontend/src/themes/main.ts

@@ -8,6 +8,7 @@ const mainTheme: ThemeOptions = {
     appMaxWidth: '110rem',
     deactivatedColor: '#C9C9C9',
     textWhite: 'white',
+    footerLinkBgColor: '#202020', // Move to theme if UiB wants a different color
   },
   // No palette section defined here, it is up to the different institutions to define colours that override the default ones from Material UI
   components: {