Add basic theming support.

- Add global styling. Remove the old css file.
- Start on the themes

Issue: GREG-40

frontend/src/App.tsx

-import React, { useState, Suspense } from 'react'
+import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import './App.css'
 
-import './i18n'
 import { Button } from './components/button'
 
 import { appTimezone, appVersion, appTheme } from './appConfig'
@@ -31,48 +30,41 @@ const App = () => {
   }
 
   return (
-    <Suspense fallback="loading">
-      <div className="App">
-        <header className="App-header">
-          <Button href="https://example.com" target="_blank" rel="noopener">
-            Knapp
-          </Button>
-          <Button
-            href="https://example.com"
-            target="_blank"
-            rel="noopener"
-            pink
-          >
-            Rosa knapp
-          </Button>
+    <div className="App">
+      <header className="App-header">
+        <Button href="https://example.com" target="_blank" rel="noopener">
+          Knapp
+        </Button>
+        <Button href="https://example.com" target="_blank" rel="noopener">
+          Rosa knapp
+        </Button>
 
-          <p>{t('common:test')}</p>
-          <p>{t('common:nested.test')}</p>
-          <p>{t('footer:footerInfo')}</p>
+        <p>{t('common:test')}</p>
+        <p>{t('common:nested.test')}</p>
+        <p>{t('footer:footerInfo')}</p>
 
-          <Button
-            onClick={() =>
-              i18n.language === 'en'
-                ? i18n.changeLanguage('nb')
-                : i18n.changeLanguage('en')
-            }
-          >
-            {t('common:language.change', {
-              lang: i18n.language === 'en' ? 'Norsk' : 'Engelsk',
-            })}
-          </Button>
-          <p>
-            Version {appVersion}
-            <br />
-            Timezone {appTimezone}
-            <br />
-            Theme {appTheme}
-            <br />
-            API reachable? {apiHealth}
-          </p>
-        </header>
-      </div>
-    </Suspense>
+        <Button
+          onClick={() =>
+            i18n.language === 'en'
+              ? i18n.changeLanguage('nb')
+              : i18n.changeLanguage('en')
+          }
+        >
+          {t('common:language.change', {
+            lang: i18n.language === 'en' ? 'Norsk' : 'Engelsk',
+          })}
+        </Button>
+        <p>
+          Version {appVersion}
+          <br />
+          Timezone {appTimezone}
+          <br />
+          Theme {appTheme}
+          <br />
+          API reachable? {apiHealth}
+        </p>
+      </header>
+    </div>
   )
 }
 

frontend/src/components/button/index.tsx

-import styled from 'styled-components/macro'
+import styled, { DefaultTheme } from 'styled-components/macro'
 
 type ButtonProps = {
-  pink?: boolean
+  theme: DefaultTheme
 }
 
 export const Button = styled.a<ButtonProps>`
@@ -13,11 +13,9 @@ export const Button = styled.a<ButtonProps>`
   background: black;
   color: white;
   border: 2px solid white;
-
-  ${(props) =>
-    props.pink &&
-    `
-      background: pink;
-      color: black;
-    `}
+  :hover {
+    background: ${(props) => props.theme.colors.secondary};
+    color: black;
+  }
+  background: ${(props) => props.theme.colors.main};
 `

frontend/src/globalStyles.ts

+import { createGlobalStyle } from 'styled-components'
+
+const GlobalStyle = createGlobalStyle`
+  body {
+    margin: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+      'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+      monospace;
+  }
+`
+
+export default GlobalStyle

frontend/src/index.css

-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

frontend/src/index.tsx

-import React from 'react'
+import React, { Suspense } from 'react'
 import ReactDOM from 'react-dom'
-import './index.css'
+import { ThemeProvider } from 'styled-components'
+
+import 'i18n'
+import getCurrentTheme from 'theme'
+import GlobalStyle from 'globalStyles'
 import App from './App'
 import reportWebVitals from './reportWebVitals'
 
-ReactDOM.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-  document.getElementById('root')
-)
+function appRoot() {
+  return (
+    <>
+      <React.StrictMode>
+        <GlobalStyle />
+        <Suspense fallback="loading">
+          <ThemeProvider theme={getCurrentTheme()}>
+            <App />
+          </ThemeProvider>
+        </Suspense>
+      </React.StrictMode>
+    </>
+  )
+}
+
+ReactDOM.render(React.createElement(appRoot), document.getElementById('root'))
 
 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))

frontend/src/styled.d.ts

+import 'styled-components'
+
+declare module 'styled-components' {
+  export interface DefaultTheme {
+    borderRadius: string
+    colors: {
+      main: string
+      secondary: string
+    }
+  }
+}

frontend/src/theme.ts

+import { appTheme } from 'appConfig'
+import { defaultTheme, uibTheme, uioTheme } from 'themes'
+
+const getCurrentTheme = () => {
+  switch (appTheme) {
+    case 'uib':
+      return uibTheme
+    case 'uio':
+      return uioTheme
+    case 'default':
+      return defaultTheme
+    default:
+      return defaultTheme
+  }
+}
+
+export default getCurrentTheme

frontend/src/themes/default.ts

+import { DefaultTheme } from "styled-components";
+
+const white = '#FFFFFF'
+const hotPink = '#FF69B4'
+
+const defaultTheme: DefaultTheme = {
+  borderRadius: '10px',
+  colors: {
+    main: hotPink,
+    secondary: white,
+  }
+}
+
+export default defaultTheme;

frontend/src/themes/index.ts

+import uioTheme from 'themes/uio'
+import uibTheme from 'themes/uib'
+import defaultTheme from 'themes/default'
+
+export { defaultTheme, uioTheme, uibTheme }

frontend/src/themes/uib.ts

+import { DefaultTheme } from 'styled-components'
+
+const white = '#FFFFFF'
+const hotPink = '#FF69B4'
+
+const uibTheme: DefaultTheme = {
+  borderRadius: '10px',
+  colors: {
+    main: hotPink,
+    secondary: white,
+  },
+}
+
+export default uibTheme

frontend/src/themes/uio.ts

+import { DefaultTheme } from "styled-components";
+
+const white = '#FFFFFF'
+const hotPink = '#FF69B4'
+
+const uioTheme: DefaultTheme = {
+  borderRadius: '10px',
+  colors: {
+    main: hotPink,
+    secondary: white,
+  }
+}
+
+export default uioTheme;