frontend/src/components/link/link.test.tsx

+import React from 'react'
+import { render, waitFor, screen } from '@testing-library/react'
+import Link from './index'
+
+
+describe('Tests for Link component', () => {
+  test('External link prefixes route link with //', async () => {
+    render(<Link external to='example.org' />)
+
+    await waitFor(() => screen.getByRole('link'))
+
+    expect(screen.getByRole('link')).toHaveAttribute('href', '//example.org')
+  })
+})
\ No newline at end of file

frontend/src/components/logobars/LogoBar.tsx

+import React from 'react'
+import { appTheme } from 'appConfig'
+import UiOLogoBar from './UiO'
+import UiBLogoBar from './UiB'
+
+
+function LogoBar() {
+  switch (appTheme) {
+    case 'uio':
+      return <UiOLogoBar />
+    case 'uib':
+      return <UiBLogoBar />
+    default:
+      return <UiOLogoBar />
+  }
+}
+
+export default LogoBar
\ No newline at end of file

frontend/src/components/logobars/UiB.tsx

+import React from 'react'
+import styled from 'styled-components/macro'
+
+
+const LogoBarWrapper = styled.div`
+  background-color: ${(props) => props.theme.colors.secondary});
+`
+
+const LogoBar = styled.div`
+  margin: 0 auto;
+  max-width: ${({ theme }) => theme.appMaxWidth});
+  padding: 0 ${({ theme }) => theme.horizontalMdPadding});
+`
+
+function UiBLogoBar() {
+  return (
+    <LogoBarWrapper>
+      <LogoBar>
+        Insert UiB logo here
+      </LogoBar>
+    </LogoBarWrapper>
+  )
+}
+
+export default UiBLogoBar

frontend/src/components/logobars/UiO.tsx

+import React from 'react'
+import styled from 'styled-components/macro'
+
+import { useTranslation } from 'react-i18next'
+
+
+const LogoBarWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  background-color: ${({ theme }) => theme.page.headerBackgroundColor};
+`
+
+type Language = {
+  language: string
+}
+
+const Logo = styled.div<Language>`
+  background: ${props => props.language === 'en' ? 'url("/uio/uio-app-logo-en.png") left center no-repeat' : 'url("/uio/uio-app-logo-nb.png") left center no-repeat'};
+  min-width: 20rem;
+  height: 2rem;
+`
+
+function UiOLogoBar() {
+  const { i18n } = useTranslation(['common', 'footer'])
+
+  return (
+    <LogoBarWrapper>
+      <Logo language={i18n.language} />
+    </LogoBarWrapper>
+  )
+}
+
+export default UiOLogoBar

frontend/src/components/page/index.tsx

 import Page from 'components/page/page'
 
-export { Page }
+export default Page

frontend/src/index.tsx

@@ -8,8 +8,8 @@ import 'i18n'
 import getTheme from 'themes'
 import GlobalStyle from 'globalStyles'
 import App from 'routes'
-import reportWebVitals from './reportWebVitals'
 import Loading from 'components/loading'
+import reportWebVitals from './reportWebVitals'
 
 function appRoot() {
   return (

frontend/src/routes/components/footer.tsx

 import React from 'react'
 import styled from 'styled-components/macro'
+import { useTranslation } from 'react-i18next'
+import {
+  appStagingWarning,
+  appTechnicalSupportLink,
+  reponsibleOrganization, responsibleOrganizationLink,
+} from '../../appConfig'
+import Link from '../../components/link'
 
-// Placeholder footer component
 
-const StyledFooter = styled.footer`
+const FooterWrapper = styled.footer`
   background: ${({ theme }) => theme.footer.backgroundColor};
-  padding: 4rem 0;
+  height: fit-content;
+  padding: 0rem ${({ theme }) => theme.horizontalPadding};
   margin-top: auto;
 `
 
-const FooterWrapper = styled.div`
-  background: ${({ theme }) => theme.footer.backgroundColor};
-  color: white;
-  height: fit-content;
-  max-width: ${({ theme }) => theme.appMaxWidth};
-  margin: 0 auto;
-  padding: 0rem ${({ theme }) => theme.horizontalPadding};
+const FooterSection = styled.section`
+  header {
+    margin-bottom: 0.5rem;
+    font-size: 1.5rem;
+  }
+
+  padding-left: 1rem;
+`
+
+
+const FooterSectionContent = styled.div`
+  font-size: 1rem;
+  padding-left: 0.3rem;
+`
+
+const ContentContainer = styled.div`
+  width: fit-content;
+  color: ${({ theme }) => theme.footerTextColor};
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  margin: auto;
+  padding-top: 1rem;
+  padding-right: 1rem;
+  padding-bottom: 1rem;
 `
 
-export default function Footer() {
+const Footer: React.FunctionComponent = () => {
+  const { t } = useTranslation(['common', 'footer'])
+
   return (
-    <StyledFooter>
-      <FooterWrapper>Footer 123</FooterWrapper>
-    </StyledFooter>
+    <>
+      <FooterWrapper>
+        <ContentContainer>
+          <FooterSection>
+            <header>{t('footer:contactSectionHeader')}</header>
+            <FooterSectionContent>
+              <Link
+                external
+                to={appTechnicalSupportLink}
+                inheritColor
+                underline
+              >
+                {t('footer:contactHelp')}
+              </Link>
+            </FooterSectionContent>
+          </FooterSection>
+
+          <FooterSection>
+            <header>{t('footer:responsibleOrganizationHeader')}</header>
+            <FooterSectionContent>
+              <Link
+                external
+                to={responsibleOrganizationLink}
+                inheritColor
+                underline
+              >
+                {reponsibleOrganization}
+              </Link>
+            </FooterSectionContent>
+          </FooterSection>
+        </ContentContainer>
+      </FooterWrapper>
+      {appStagingWarning && (
+        <div className='alert'>
+          {t('staging')}
+        </div>
+      )}
+    </>
   )
 }
+
+export default Footer

frontend/src/routes/components/header.tsx

 import React from 'react'
 import styled from 'styled-components/macro'
+import { useTranslation } from 'react-i18next'
+import LogoBar from '../../components/logobars/LogoBar'
+import LanguageSelector from '../../components/languageselector'
 
-// Placeholder header component!
 
 const MainWrapper = styled.div`
-  background-color: green;
+  color: ${({ theme }) => theme.page.headerColor};
+  background-color: ${({ theme }) => theme.page.headerBackgroundColor};
 `
 
 const Main = styled.div`
+  display: flex;
+  justify-content: space-between;
   margin: 0 auto;
-  max-width: ${({ theme }) => theme.maxWidth};
-  height: ${({ theme }) => theme.header.height};
-  padding: 2.5rem ${({ theme }) => theme.horizontalPadding} 3rem
-    ${({ theme }) => theme.horizontalPadding};
+  max-width: ${props => props.theme.appMaxWidth};
+  padding: ${props => `0.5rem ${props.theme.horizontalPadding} 1rem ${props.theme.horizontalPadding}`};
+`
+
+const Menu = styled.ul`
+  list-style-type: none;
+`
+
+const MenuItem = styled.div`
+  font-size: 1rem;
+  display: inline;
 `
 
-const MainRow = styled.div`
+const TitleBox = styled.div`
   display: flex;
-  justify-content: space-between;
+  flex-direction: column;
+  padding-left: 3rem;
 `
 
-const PageTitle = styled.div`
-  color: blue;
+const ShortTitle = styled.div`
+  font-size: 2rem;
 `
-const H2 = styled.h2`
-  font-size: 2.8rem;
-  line-height: 4.5rem;
+
+const LongTitle = styled.div`
+  font-size: 1rem;
 `
 
-export default function Header() {
+function Header() {
+  const { t } = useTranslation('common')
+
   return (
     <header>
+      <LogoBar />
       <MainWrapper>
         <Main>
-          <MainRow>
-            <PageTitle>
-              <H2>Greg!</H2>
-            </PageTitle>
-          </MainRow>
+          <TitleBox>
+            <ShortTitle>{t('header.applicationTitleShort')}</ShortTitle>
+            <LongTitle>{t('header.applicationTitleLong')}</LongTitle>
+          </TitleBox>
+          <Menu>
+            <MenuItem>
+              <LanguageSelector/>
+            </MenuItem>
+          </Menu>
         </Main>
       </MainWrapper>
     </header>
   )
 }
+
+export default Header

frontend/src/routes/components/notFound.tsx

 import React from 'react'
-import { Page } from 'components/page'
+import Page from 'components/page'
 
 export default function NotFound() {
   return (

frontend/src/routes/frontpage/index.tsx

 import React, { useState } from 'react'
 
-import { Page } from 'components/page'
+import Page from 'components/page'
 import { appTimezone, appVersion, appTheme } from 'appConfig'
 
 export default function FrontPage() {
@@ -18,9 +18,9 @@ export default function FrontPage() {
           setApiHealth(result)
         }
       })
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
       .catch((error) => {
         setApiHealth('error')
-        console.log(error)
       })
   }
   return (

frontend/src/routes/register/index.tsx

 import React from 'react'
 
-import { Page } from 'components/page'
+import Page from 'components/page'
 
 export default function Register() {
   return (

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

 import React from 'react'
 
-import { Page } from 'components/page'
+import Page from 'components/page'
 
 function FrontPage() {
   return (

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

 import React from 'react'
 import { useParams } from 'react-router-dom'
 
-import {Page} from 'components/page'
+import Page from 'components/page'
 
 type GuestInfoParams = {
   id: string

frontend/src/setupProxy.js

 const { createProxyMiddleware } = require('http-proxy-middleware')
 
-module.exports = function (app) {
+module.exports = (app) => {
   app.use(
     '/api',
     createProxyMiddleware({

frontend/src/styled.d.ts

@@ -7,6 +7,7 @@ declare module 'styled-components' {
     colors: {
       main: string
       secondary: string
+      dropDownMenuBackground: string
     }
     footer: {
       backgroundColor: string
@@ -17,9 +18,14 @@ declare module 'styled-components' {
     horizontalPadding: string
     linkExternalColor: string
     linkInternalColor: string
+    footerBackgroundColor: string
+    footerTextColor: string
+    footerJustifyContent: string
+    horizontalMdPadding: string
     maxWidth: string
     page: {
       headerColor: string
+      headerBackgroundColor: string
       horizontalPadding: string
     }
   }

frontend/src/test-utils.tsx

@@ -5,9 +5,7 @@ import { ThemeProvider } from 'styled-components/macro'
 import mainTheme from 'themes/main'
 
 // Providers used in test rendering
-const AllTheProviders = ({ children }: any) => {
-  return <ThemeProvider theme={mainTheme}> {children} </ThemeProvider>
-}
+const AllTheProviders = ({ children }: any) => <ThemeProvider theme={mainTheme}> {children} </ThemeProvider>
 
 // Custom testing-library/react renderer using our providers.
 const customRender = (ui: React.ReactElement, options?: any) =>

frontend/src/themes/color.ts

+
+export module Color {
+    export const white = '#FFFFFF'
+    export const hotPink = '#FF69B4'
+    export const blueish = '#2771bb'
+    export const lightOliveGreen = '#91BD60'
+    export const black = '#000000'
+    export const darkGray = '#2D2D2E'
+    export const lighterBlack = '#282c34'
+}

frontend/src/themes/main.ts

@@ -6,6 +6,7 @@ const mainTheme: DefaultTheme = {
   colors: {
     main: 'hotPink',
     secondary: 'white',
+    dropDownMenuBackground: 'grey'
   },
   footer: {
     backgroundColor: 'black',
@@ -17,8 +18,13 @@ const mainTheme: DefaultTheme = {
   linkInternalColor: 'white',
   linkExternalColor: 'blueish',
   maxWidth: '110rem',
+  footerBackgroundColor: 'green',
+  footerTextColor: 'white',
+  footerJustifyContent: 'flex-end',
+  horizontalMdPadding: '6.5rem',
   page: {
-    headerColor: 'grey',
+    headerColor: 'white',
+    headerBackgroundColor: 'black',
     horizontalPadding: '0rem',
   },
 }

frontend/src/themes/uib.ts

@@ -2,6 +2,7 @@ const uibTheme = {
   colors: {
     main: 'hotPink',
     secondary: 'black',
+    dropDownMenuBackground: 'grey'
   },
 }
 

frontend/src/themes/uio.ts

@@ -2,6 +2,7 @@ const uioTheme = {
   colors: {
     main: 'hotPink',
     secondary: 'white',
+    dropDownMenuBackground: 'grey'
   },
 }