From 2d5db5b2c3a2dcf5a357316cade4db65038dbdbc Mon Sep 17 00:00:00 2001
From: Tore Brede <Tore.Brede@uib.no>
Date: Mon, 13 Sep 2021 08:55:32 +0200
Subject: [PATCH] GREG-41: Updating themes
---
frontend/.env | 6 ++++++
frontend/src/App.tsx | 2 ++
frontend/src/appConfig.ts | 8 ++++++++
frontend/src/styled.d.ts | 13 +++++++++++++
frontend/src/themes/color.ts | 7 +++++++
frontend/src/themes/default.ts | 25 ++++++++++++++++++-------
frontend/src/themes/uib.ts | 17 ++++-------------
frontend/src/themes/uio.ts | 25 ++++++++++++++++++-------
8 files changed, 76 insertions(+), 27 deletions(-)
create mode 100644 frontend/src/themes/color.ts
diff --git a/frontend/.env b/frontend/.env
index 60a2d2a2..966e3bde 100644
--- a/frontend/.env
+++ b/frontend/.env
@@ -1,2 +1,8 @@
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
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 28d1b701..d7e5050c 100644
--- a/frontend/src/App.tsx
+++ b/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>
)
}
diff --git a/frontend/src/appConfig.ts b/frontend/src/appConfig.ts
index ea76eda4..6e73596c 100644
--- a/frontend/src/appConfig.ts
+++ b/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
diff --git a/frontend/src/styled.d.ts b/frontend/src/styled.d.ts
index 974a5848..b412f3b0 100644
--- a/frontend/src/styled.d.ts
+++ b/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
+ }
}
}
diff --git a/frontend/src/themes/color.ts b/frontend/src/themes/color.ts
new file mode 100644
index 00000000..d3f81881
--- /dev/null
+++ b/frontend/src/themes/color.ts
@@ -0,0 +1,7 @@
+
+export module Color {
+ export const white = '#FFFFFF'
+ export const hotPink = '#FF69B4'
+ export const blueish = '#2771bb'
+ export const lightOliveGreen = '#91BD60'
+}
diff --git a/frontend/src/themes/default.ts b/frontend/src/themes/default.ts
index 2ef77f80..7ca42b83 100644
--- a/frontend/src/themes/default.ts
+++ b/frontend/src/themes/default.ts
@@ -1,17 +1,28 @@
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
diff --git a/frontend/src/themes/uib.ts b/frontend/src/themes/uib.ts
index 7a47b3c7..37b035c5 100644
--- a/frontend/src/themes/uib.ts
+++ b/frontend/src/themes/uib.ts
@@ -1,17 +1,8 @@
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
diff --git a/frontend/src/themes/uio.ts b/frontend/src/themes/uio.ts
index 1ce42f08..46d4a3dc 100644
--- a/frontend/src/themes/uio.ts
+++ b/frontend/src/themes/uio.ts
@@ -1,17 +1,28 @@
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
--
GitLab