GREG-41: Updating themes

frontend/.env

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

frontend/src/App.tsx

@@ -7,6 +7,7 @@ import { Button } from './components/button'
 
 import { appTimezone, appVersion, appTheme } from './appConfig'
 import Link from './components/link'
+import Footer from "./Footer";
 
 const App = () => {
   const [apiHealth, setApiHealth] = useState('not yet')
@@ -71,6 +72,7 @@ const App = () => {
           <Link to='test6' external={true} underline={false} noUnderline={true}>External link</Link>
           <Link to='test5' external={false} noUnderline={true}>Another internal link</Link>
       </header>
+      <Footer/>
     </div>
   )
 }

frontend/src/appConfig.ts

@@ -20,3 +20,11 @@ export const appName: string = process.env.REACT_APP_NAME as string
 export const appTheme: string = env.REACT_APP_THEME
   ? (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

@@ -7,7 +7,20 @@ declare module 'styled-components' {
       main: string
       secondary: string
     }
+    appMaxWidth: string
+    horizontalPadding: string
     linkExternalColor: string
     linkInternalColor: string
+    footerBackgroundColor: string
+    footerTextColor: string
+    footerJustifyContent: 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'
+}

frontend/src/themes/default.ts

 import { DefaultTheme } from 'styled-components/macro'
+import {Color} from "./color";
 
-const white = '#FFFFFF'
-const hotPink = '#FF69B4'
-const blueish = '#2771bb'
 
 const defaultTheme: DefaultTheme = {
   borderRadius: '10px',
   colors: {
-    main: hotPink,
-    secondary: white,
+    main: Color.hotPink,
+    secondary: Color.white,
   },
-  linkInternalColor: white,
-  linkExternalColor: blueish,
+  appMaxWidth: '110rem',
+  horizontalPadding: '2rem',
+  linkInternalColor: Color.white,
+  linkExternalColor: Color.blueish,
+  footerBackgroundColor: Color.lightOliveGreen,
+  footerTextColor: Color.white,
+  footerJustifyContent: 'flex-end',
+  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'
+import {Color} from "./color";
+import defaultTheme from "./default";
 
-const white = '#FFFFFF'
-const hotPink = '#FF69B4'
-const blueish = '#2771bb'
-
-const uibTheme: DefaultTheme = {
-  borderRadius: '10px',
-  colors: {
-    main: hotPink,
-    secondary: white,
-  },
-  linkInternalColor: white,
-  linkExternalColor: blueish,
-}
+const uibTheme: DefaultTheme = Object.assign({}, defaultTheme)
+uibTheme.footerBackgroundColor = 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,
+    main: Color.hotPink,
+    secondary: Color.white,
   },
-  linkInternalColor: white,
-  linkExternalColor: blueish,
+  appMaxWidth: '110rem',
+  horizontalPadding: '2rem',
+  linkInternalColor: Color.white,
+  linkExternalColor: Color.blueish,
+  footerBackgroundColor: Color.lightOliveGreen,
+  footerTextColor: Color.white,
+  footerJustifyContent: 'flex-end',
+  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