GREG-41: Fixing conflicts

frontend/.env

 REACT_APP_VERSION=$npm_package_version
 REACT_APP_NAME=$npm_package_name
+
+REACT_APP_SUPPORT_MAIL=test@example.org
+REACT_APP_INST=uio
+REACT_APP_SUPPORT_URL=https://example.org
+
+REACT_APP_THEME=default
\ No newline at end of file

frontend/public/locales/en/common.json

@@ -6,6 +6,10 @@
   "language": {
     "change": "Change language to {{lang}}"
   },
+  "header": {
+    "headerRow1": "Test row 1",
+    "headerRow2": "Test row 2"
+  },
   "loading": "Loading..."
   },
   "termsHeader": "Terms",

frontend/public/locales/nb/common.json

@@ -6,6 +6,10 @@
   "language": {
     "change": "Bytt språk til {{lang}}"
   },
+  "header":{
+    "headerRow1": "Test row 1",
+    "headerRow2": "Test row 2"
+  },
   "loading": "Laster..."
   },
   "termsHeader": "Vilkår",

frontend/public/locales/nn/common.json

@@ -6,6 +6,10 @@
   "language": {
     "change": "Bytt språk til {{lang}}"
   },
+  "header":{
+    "headerRow1": "Test row 1",
+    "headerRow2": "Test row 2"
+  },
   "loading": "Lastar..."
   },
   "termsHeader": "Vilkår",

frontend/src/App.tsx

 import React, { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 
+import { Button } from './components/button'
 import './App.css'
 
 import { Button } from 'components/button'
@@ -8,6 +9,25 @@ import Loading from 'components/loading'
 
 import { appTimezone, appVersion, appTheme } from './appConfig'
 import Link from './components/link'
+import Footer from "./Footer";
+import Header from "./Header";
+import styled from "styled-components/macro";
+
+
+const StyledApp = styled.div`
+  text-align: center;
+`
+
+const StyledAppBody = styled.a`
+  background-color: ${props => props.theme.colors.appBackground};
+  display: flex;
+  flex-direction: column;
+  font-size: 1.6rem;
+  align-items: center;
+  justify-content: center;
+  color: white;
+`
+
 
 const App = () => {
   const [apiHealth, setApiHealth] = useState('not yet')
@@ -32,8 +52,9 @@ const App = () => {
   }
 
   return (
-    <div className="App">
-      <header className="App-header">
+      <StyledApp>
+      <Header/>
+        <StyledAppBody>
         <Button href="https://example.com" target="_blank" rel="noopener">
           Knapp
         </Button>
@@ -56,7 +77,6 @@ const App = () => {
             lang: i18n.language === 'en' ? 'Norsk' : 'Engelsk',
           })}
         </Button>
-        <Loading />
         <p>
           Version {appVersion}
           <br />
@@ -72,8 +92,9 @@ const App = () => {
           <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>
+      </StyledAppBody>
+      <Footer/>
+    </StyledApp>
   )
 }
 

frontend/src/Footer.tsx

@@ -15,12 +15,11 @@ const FooterWrapper = styled.footer`
     background: ${theme.footerBackgroundColor};
   `
   }
-  padding: 4rem 0;
+  padding: 1rem 0;
 `
 
-
 const FooterInternal = styled.footer`
-  height: 'fit-content',
+  height: fit-content;
   ${({theme}) => `
           max-width: ${theme.appMaxWidth};
           padding: 0rem ${theme.horizontalPadding}
@@ -32,17 +31,14 @@ const FooterInternal = styled.footer`
 const FooterSection = styled.section`
 
   :not(:last-child) {
-    margin-bottom: 3rem;
+    margin-bottom: 1rem;
   }
 
   header {
-    font-size: 2rem;
-    margin-bottom: 1.5rem;
+    margin-bottom: 0.5rem;
   }
 
   .content {
-    font-size: 1.4rem;
-    line-height: 2rem;
 
     :not(:last-child) {
       margin-bottom: 0.5rem;

frontend/src/appConfig.ts

 declare global {
-  /* tslint:disable */
-  interface Window {
-    ENV: any
-  }
+    /* tslint:disable */
+    interface Window {
+        ENV: any
+    }
 }
 
 /* Locate the client environment */
@@ -16,7 +16,18 @@ export const appTimezone: string = 'Europe/Oslo'
 export const appVersion: string = process.env.REACT_APP_VERSION as string
 export const appName: string = process.env.REACT_APP_NAME as string
 
+/* Institution */
+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';
+
+/* Footer content */
+export const appTechnicalSupportLink: string = env.REACT_APP_SUPPORT_URL as string;
+export const appTechnicalSupportMail: string = env.REACT_APP_SUPPORT_MAIL as string;

frontend/src/styled.d.ts

@@ -6,8 +6,25 @@ declare module 'styled-components' {
     colors: {
       main: string
       secondary: string
+      black: string
+      appBackground: string
     }
+    appMaxWidth: string
+    horizontalPadding: string
     linkExternalColor: string
     linkInternalColor: string
+    footerBackgroundColor: string
+    footerTextColor: string
+    footerJustifyContent: string
+    horizontalMdPadding: string
+    headerMainAreaColor: string
+    breakpoints: {
+      lg: string
+      lgQuery: string
+      md: string
+      mdQuery: string
+      sm: string
+      notMobileQuery: string
+    }
   }
 }

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/default.ts

 import { DefaultTheme } from 'styled-components/macro'
+import {Color} from "./color";
+
 
 const white = '#FFFFFF'
 const hotPink = '#FF69B4'
@@ -7,11 +9,30 @@ const blueish = '#2771bb'
 const defaultTheme: DefaultTheme = {
   borderRadius: '10px',
   colors: {
-    main: hotPink,
-    secondary: white,
+    main: Color.hotPink,
+    secondary: Color.white,
+    black: Color.black,
+    appBackground: Color.lighterBlack
   },
   linkInternalColor: white,
   linkExternalColor: blueish,
+  appMaxWidth: '110rem',
+  horizontalPadding: '2rem',
+  linkInternalColor: Color.white,
+  linkExternalColor: Color.blueish,
+  footerBackgroundColor: Color.lightOliveGreen,
+  footerTextColor: Color.white,
+  footerJustifyContent: 'flex-end',
+  horizontalMdPadding: '6.5rem',
+  headerMainAreaColor: Color.darkGray,
+  breakpoints: {
+    lg: '1140px',
+    lgQuery: '@media (min-width:1140px)',
+    md: '768px',
+    mdQuery: '@media (min-width:768px)',
+    sm: '480px',
+    notMobileQuery: '@media (min-width:480px)',
+  }
 }
 
 export default defaultTheme

frontend/src/themes/uib.ts

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

frontend/src/themes/uio.ts

 import { DefaultTheme } from 'styled-components/macro'
+import {Color} from "./color";
 
 const white = '#FFFFFF'
 const hotPink = '#FF69B4'
 const blueish = '#2771bb'
 
 const uioTheme: DefaultTheme = {
-  borderRadius: '10px',
-  colors: {
-    main: hotPink,
-    secondary: white,
-  },
-  linkInternalColor: white,
-  linkExternalColor: blueish,
+    borderRadius: '10px',
+    colors: {
+        main: Color.hotPink,
+        secondary: Color.white,
+        black: Color.black,
+        appBackground: Color.lighterBlack
+    },
+    appMaxWidth: '110rem',
+    horizontalPadding: '2rem',
+    linkInternalColor: Color.white,
+    linkExternalColor: Color.blueish,
+    footerBackgroundColor: Color.lightOliveGreen,
+    footerTextColor: Color.white,
+    footerJustifyContent: 'flex-end',
+    horizontalMdPadding: '6.5rem',
+    headerMainAreaColor: Color.darkGray,
+    breakpoints: {
+        lg: '1140px',
+        lgQuery: '@media (min-width:1140px)',
+        md: '768px',
+        mdQuery: '@media (min-width:768px)',
+        sm: '480px',
+        notMobileQuery: '@media (min-width:480px)',
+    }
 }
 
 export default uioTheme