From 36b84202cf6881570224c767cce7f9323ad078fc Mon Sep 17 00:00:00 2001
From: Jan Krcmar <honza801@google.com>
Date: Wed, 7 Sep 2022 13:49:47 +0200
Subject: [PATCH] Add Footer element at the bottom of the index page

This allows users to put customized text via environment variable REACT_APP_FOOTER onto the page (fe. policies)

Signed-off-by: Jan Krcmar <honza801@gmail.com>
---
 client/src/app.tsx                |  3 +++
 client/src/components/footer.scss |  8 ++++++++
 client/src/components/footer.tsx  | 10 ++++++++++
 client/src/scss/index.scss        |  2 +-
 client/src/scss/settings.scss     |  4 ++++
 5 files changed, 26 insertions(+), 1 deletion(-)
 create mode 100644 client/src/components/footer.scss
 create mode 100644 client/src/components/footer.tsx

diff --git a/client/src/app.tsx b/client/src/app.tsx
index 8cecb10..f2fb562 100755
--- a/client/src/app.tsx
+++ b/client/src/app.tsx
@@ -2,6 +2,7 @@ import React, {Component, Fragment, ReactNode} from 'react';
 import Menu from './components/menu';
 import {Notifier} from './components/notifier';
 import Error from './components/error';
+import Footer from './components/footer';
 import {initRouter} from './router';
 import log from './utils/log';
 import Button from './components/button';
@@ -61,6 +62,8 @@ class App extends Component<{}, State> {
                 </div>
 
                 <Notifier />
+
+                <Footer />
             </>
         );
     }
diff --git a/client/src/components/footer.scss b/client/src/components/footer.scss
new file mode 100644
index 0000000..c3e7cc9
--- /dev/null
+++ b/client/src/components/footer.scss
@@ -0,0 +1,8 @@
+@import '../scss/settings.scss';
+
+#footer {
+    height: $footer-height;
+	text-align: center;
+    z-index: 1;
+}
+
diff --git a/client/src/components/footer.tsx b/client/src/components/footer.tsx
new file mode 100644
index 0000000..29b3aa9
--- /dev/null
+++ b/client/src/components/footer.tsx
@@ -0,0 +1,10 @@
+import './footer.scss';
+import React from 'react';
+
+export default function Footer() {
+    if (process.env.REACT_APP_FOOTER) {
+        document.body.style.setProperty("--footer-height", "17px");
+        return <div id='footer'>{process.env.REACT_APP_FOOTER}</div>;
+    }
+    return null;
+}
diff --git a/client/src/scss/index.scss b/client/src/scss/index.scss
index 86bcf7f..cfe6e7c 100755
--- a/client/src/scss/index.scss
+++ b/client/src/scss/index.scss
@@ -36,7 +36,7 @@ html {
 
 #shell {
 	display: flex;
-	min-height: calc(100vh - 55px);
+	min-height: calc(100vh - 55px - $footer-height);
 }
 
 #menu {
diff --git a/client/src/scss/settings.scss b/client/src/scss/settings.scss
index f17833d..157843e 100755
--- a/client/src/scss/settings.scss
+++ b/client/src/scss/settings.scss
@@ -37,6 +37,8 @@ $media-xsmall: 700px;
 $media-small: 812px;
 $media-medium: 1200px;
 
+$footer-height: var(--footer-height);
+
 body {
     --color-lightest: #F0F0F0;
     --color-light: #AAA;
@@ -52,6 +54,8 @@ body {
     --color-icon-inactive: #{$color-dark};
 
     --box-shadow-size: 4px;
+    
+    --footer-height: 0px;
 }
 
 body.dark-mode {