Split theme into main and "override" part.

No longer any need for each theme to be fully defined.
Start on react-router

Issue: GREG-40
Issue: GREG-46

frontend/package.json

@@ -17,6 +17,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-i18next": "^11.11.4",
+    "react-router-dom": "^5.3.0",
     "react-scripts": "4.0.3",
     "styled-components": "^5.3.1",
     "typescript": "^4.4.2",
@@ -47,5 +48,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "@types/react-router-dom": "^5.1.8"
   }
 }

frontend/src/App.tsx

-import React, { useState } from 'react'
-import { useTranslation } from 'react-i18next'
-
-import './App.css'
-
-import { Button } from 'components/button'
-import Loading from 'components/loading'
-
-import { appTimezone, appVersion, appTheme } from './appConfig'
-import Link from './components/link'
-
-const App = () => {
-  const [apiHealth, setApiHealth] = useState('not yet')
-  const [didContactApi, setDidContactApi] = useState(false)
-  const { t, i18n } = useTranslation(['common', 'footer'])
-
-  if (!didContactApi) {
-    setDidContactApi(true)
-    fetch('http://localhost:3000/api/health/')
-      .then((res) => res.text())
-      .then((result) => {
-        if (result === 'OK') {
-          setApiHealth('yes')
-        } else {
-          setApiHealth(result)
-        }
-      })
-      .catch((error) => {
-        setApiHealth('error')
-        console.log(error)
-      })
-  }
-
-  return (
-    <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>
-
-        <Button
-          onClick={() =>
-            i18n.language === 'en'
-              ? i18n.changeLanguage('nb')
-              : i18n.changeLanguage('en')
-          }
-        >
-          {t('common:language.change', {
-            lang: i18n.language === 'en' ? 'Norsk' : 'Engelsk',
-          })}
-        </Button>
-        <Loading />
-        <p>
-          Version {appVersion}
-          <br />
-          Timezone {appTimezone}
-          <br />
-          Theme {appTheme}
-          <br />
-          API reachable? {apiHealth}
-        </p>
-
-
-          <Link to='test@example.org' mail={true}>Mail link</Link>
-          <Link to='test4' external={false} underline={true} noExternalIcon={true}>Internal link</Link>
-          <Link to='test6' external={true} underline={false} noUnderline={true}>External link</Link>
-          <Link to='test5' external={false} noUnderline={true}>Another internal link</Link>
-      </header>
-    </div>
-  )
-}
-
-export default App

frontend/src/index.tsx

 import React, { Suspense } from 'react'
 import ReactDOM from 'react-dom'
 import { ThemeProvider } from 'styled-components/macro'
+import { BrowserRouter as Router } from 'react-router-dom'
+
 import 'i18n'
 
-import getCurrentTheme from 'theme'
+import getTheme from 'themes'
 import GlobalStyle from 'globalStyles'
-import App from './App'
+import App from 'routes'
 import reportWebVitals from './reportWebVitals'
 import Loading from 'components/loading'
 
@@ -13,12 +15,14 @@ function appRoot() {
   return (
     <>
       <React.StrictMode>
-        <GlobalStyle />
-        <Suspense fallback={<Loading />}>
-          <ThemeProvider theme={getCurrentTheme()}>
-            <App />
-          </ThemeProvider>
-        </Suspense>
+        <Router>
+          <GlobalStyle />
+          <Suspense fallback={<Loading />}>
+            <ThemeProvider theme={getTheme()}>
+              <App />
+            </ThemeProvider>
+          </Suspense>
+        </Router>
       </React.StrictMode>
     </>
   )

frontend/src/styled.d.ts

@@ -2,11 +2,14 @@ import 'styled-components/macro'
 
 declare module 'styled-components' {
   export interface DefaultTheme {
+    appMaxWidth: string
     borderRadius: string
     colors: {
       main: string
       secondary: string
     }
+    footerBackgroundColor: string
+    horizontalPadding: string
     linkExternalColor: string
     linkInternalColor: 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/macro'
-
-const white = '#FFFFFF'
-const hotPink = '#FF69B4'
-const blueish = '#2771bb'
-
-const defaultTheme: DefaultTheme = {
-  borderRadius: '10px',
-  colors: {
-    main: hotPink,
-    secondary: white,
-  },
-  linkInternalColor: white,
-  linkExternalColor: blueish,
-}
-
-export default defaultTheme

frontend/src/themes/index.ts

-import uioTheme from 'themes/uio'
 import uibTheme from 'themes/uib'
-import defaultTheme from 'themes/default'
+import uioTheme from 'themes/uio'
+import mainTheme from 'themes/main'
+
+import { appTheme } from 'appConfig'
+
+function getTheme() {
+  switch (appTheme) {
+    case 'uib':
+      return { ...mainTheme, ...uibTheme }
+    case 'uio':
+      return { ...mainTheme, ...uioTheme }
+    case 'default':
+      return mainTheme
+    default:
+      return mainTheme
+  }
+}
 
-export { defaultTheme, uioTheme, uibTheme }
+export default getTheme

frontend/src/themes/main.ts

+import { DefaultTheme } from 'styled-components/macro'
+
+const mainTheme: DefaultTheme = {
+  appMaxWidth: '110rem',
+  borderRadius: '9px',
+  colors: {
+    main: 'hotPink',
+    secondary: 'white',
+  },
+  footerBackgroundColor: 'black',
+  horizontalPadding: '2rem',
+  linkInternalColor: 'white',
+  linkExternalColor: 'blueish',
+}
+
+export default mainTheme

frontend/src/themes/uib.ts

-import { DefaultTheme } from 'styled-components/macro'
-
-const white = '#FFFFFF'
-const hotPink = '#FF69B4'
-const blueish = '#2771bb'
-
-const uibTheme: DefaultTheme = {
-  borderRadius: '10px',
+const uibTheme = {
   colors: {
-    main: hotPink,
-    secondary: white,
+    main: 'hotPink',
+    secondary: 'black',
   },
-  linkInternalColor: white,
-  linkExternalColor: blueish,
 }
 
 export default uibTheme

frontend/src/themes/uio.ts

-import { DefaultTheme } from 'styled-components/macro'
-
-const white = '#FFFFFF'
-const hotPink = '#FF69B4'
-const blueish = '#2771bb'
-
-const uioTheme: DefaultTheme = {
-  borderRadius: '10px',
+const uioTheme = {
   colors: {
-    main: hotPink,
-    secondary: white,
+    main: 'hotPink',
+    secondary: 'white',
   },
-  linkInternalColor: white,
-  linkExternalColor: blueish,
 }
 
 export default uioTheme