diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 33f14aadd44643361f50efd8f3e0c832bd0249f9..2826cb076a9a906b28bb3136657d3a3fabc9b4a9 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -1,9 +1,8 @@
-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>
)
}
diff --git a/frontend/src/components/button/index.tsx b/frontend/src/components/button/index.tsx
index 88caf48ec2e523f62ef09c714aa6d17d0cf60583..a585ca36cfad3bf1a20e8045f7114f403786a1c2 100644
--- a/frontend/src/components/button/index.tsx
+++ b/frontend/src/components/button/index.tsx
@@ -1,7 +1,7 @@
-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};
`
diff --git a/frontend/src/globalStyles.ts b/frontend/src/globalStyles.ts
new file mode 100644
index 0000000000000000000000000000000000000000..d8ce82cb9f611dc17a060974a3fcf0a698afed49
--- /dev/null
+++ b/frontend/src/globalStyles.ts
@@ -0,0 +1,18 @@
+import { createGlobalStyle } from 'styled-components/macro'
+
+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
diff --git a/frontend/src/index.css b/frontend/src/index.css
deleted file mode 100644
index ec2585e8c0bb8188184ed1e0703c4c8f2a8419b0..0000000000000000000000000000000000000000
--- a/frontend/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-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;
-}
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index ba3503c6e89f4cc311e5d0ec52b6b0ab6e7f1239..38d872db9f1fd3f29554275c2b8f272e22051003 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -1,15 +1,29 @@
-import React from 'react'
+import React, { Suspense } from 'react'
import ReactDOM from 'react-dom'
-import './index.css'
+import { ThemeProvider } from 'styled-components/macro'
+
+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))
diff --git a/frontend/src/styled.d.ts b/frontend/src/styled.d.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5e734c377a971d0e8620827d4dcdd09b44acecbf
--- /dev/null
+++ b/frontend/src/styled.d.ts
@@ -0,0 +1,11 @@
+import 'styled-components/macro'
+
+declare module 'styled-components' {
+ export interface DefaultTheme {
+ borderRadius: string
+ colors: {
+ main: string
+ secondary: string
+ }
+ }
+}
diff --git a/frontend/src/theme.ts b/frontend/src/theme.ts
new file mode 100644
index 0000000000000000000000000000000000000000..ffaa284f6d07cdbb29f9683fe3bab5604d03aac0
--- /dev/null
+++ b/frontend/src/theme.ts
@@ -0,0 +1,17 @@
+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
diff --git a/frontend/src/themes/default.ts b/frontend/src/themes/default.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3616c5fb2a643f76747bd25931372eb7d190175a
--- /dev/null
+++ b/frontend/src/themes/default.ts
@@ -0,0 +1,14 @@
+import { DefaultTheme } from 'styled-components/macro'
+
+const white = '#FFFFFF'
+const hotPink = '#FF69B4'
+
+const defaultTheme: DefaultTheme = {
+ borderRadius: '10px',
+ colors: {
+ main: hotPink,
+ secondary: white,
+ },
+}
+
+export default defaultTheme
diff --git a/frontend/src/themes/index.ts b/frontend/src/themes/index.ts
new file mode 100644
index 0000000000000000000000000000000000000000..5cb8639f9ec0052abd12645691364ae1f863ec12
--- /dev/null
+++ b/frontend/src/themes/index.ts
@@ -0,0 +1,5 @@
+import uioTheme from 'themes/uio'
+import uibTheme from 'themes/uib'
+import defaultTheme from 'themes/default'
+
+export { defaultTheme, uioTheme, uibTheme }
diff --git a/frontend/src/themes/uib.ts b/frontend/src/themes/uib.ts
new file mode 100644
index 0000000000000000000000000000000000000000..1ca0d8fe13bce57a28ae08ce4583aae7bbd8ce66
--- /dev/null
+++ b/frontend/src/themes/uib.ts
@@ -0,0 +1,14 @@
+import { DefaultTheme } from 'styled-components'
+
+const white = '#FFFFFF'
+const hotPink = '#FF69B4'
+
+const uibTheme: DefaultTheme = {
+ borderRadius: '10px',
+ colors: {
+ main: hotPink,
+ secondary: white,
+ },
+}
+
+export default uibTheme
diff --git a/frontend/src/themes/uio.ts b/frontend/src/themes/uio.ts
new file mode 100644
index 0000000000000000000000000000000000000000..a7df2f2b761c0b7c1aa989751b5274eabc119634
--- /dev/null
+++ b/frontend/src/themes/uio.ts
@@ -0,0 +1,14 @@
+import { DefaultTheme } from 'styled-components/macro'
+
+const white = '#FFFFFF'
+const hotPink = '#FF69B4'
+
+const uioTheme: DefaultTheme = {
+ borderRadius: '10px',
+ colors: {
+ main: hotPink,
+ secondary: white,
+ },
+}
+
+export default uioTheme