remove unused SCSS definitions and update app with a footer

webapp/src/App.tsx

@@ -2,7 +2,7 @@ import React, { ReactElement } from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import Landing from "./pages/Landing";
 import ExternalPageNavBar from "./components/global/ExternalPageNavBar";
-import About from "./pages/About";
+import GeantFooter from "./components/global/GeantFooter";
 import DataAnalysis from "./pages/DataAnalysis";
 import AnnualReport from "./pages/AnnualReport";
 import CompendiumData from "./pages/CompendiumData";
@@ -12,19 +12,20 @@ import ChargingStructurePage from "./pages/ChargingStructure";
 
 function App(): ReactElement {
   return (
-    <div>
+    <div className="app">
       <Router>
         <ExternalPageNavBar />
         <Routes>
           <Route path="/data" element={<CompendiumData />} />
-          <Route path="/about" element={<About />} />
           <Route path="/analysis" element={<DataAnalysis />} />
           <Route path="/report" element={<AnnualReport />} />
           <Route path="/funding" element={<FundingSourcePage />} />
           <Route path="/charging" element={<ChargingStructurePage />} />
           <Route path="*" element={<Landing />} />
         </Routes>
+        <GeantFooter/>
       </Router>
+      
     </div>
   );
 }

webapp/src/components/global/GeantFooter.tsx

+import React, { ReactElement } from "react";
+import { Container, Row, Col } from "react-bootstrap";
+import GeantLogo from "../../images/geant_logo_colored.svg";
+import EULogo from "../../images/eu_logo.png";
+
+
+
+function GeantFooter(): ReactElement {
+    return <footer className="page-footer">
+        <Container>
+            <Row>
+                <Col align="left">
+                    <h5 style={{ color: "#fff" }}>GÉANT Compendium</h5>
+                    <p style={{ color: "#f5f5f5" }}>The global reach of the GÉANT network enables scientists and academics in Europe to exchange data and collaborate with their peers across the world through links to National Research and Education Networks in 65 countries around the world.</p>
+                    <p style={{ color: "#f5f5f5" }}>To learn more about the organisations that make up the GÉANT community, navigate the reports presented on this site.</p>
+                </Col>
+            </Row>
+        </Container>
+        <Container>
+            <Row>
+                <div>
+                    <p style={{ color: "#f5f5f5" }}>
+                        The project is co-funded by Europe's NRENs and the EU.
+                    </p>
+                </div>
+                <Row>
+                    <div>
+                        <img src={EULogo} />
+                    </div>
+                </Row>
+                <Row>
+                    <div className="col s1">
+                        <a href="https://geant.org">
+                            <img src={GeantLogo} style={{maxWidth: "100px", paddingTop:"20px"}} />
+                        </a>
+                    </div>
+                    <div className="col s10 offset-s1">
+                        <p style={{ color: "#f5f5f5" }}>
+                            The contents of this site are the sole responsibility
+                            of GÉANT and can under no circumstances be regarded
+                            as reflecting the views of the European Union</p>
+                    </div>
+                </Row>
+
+            </Row>
+        </Container>
+    </footer>;
+}
+
+export default GeantFooter
\ No newline at end of file

webapp/src/main.scss

 @import 'scss/base/text';
 @import 'scss/layout/components';
 
-table {
-  min-width: 650px;
-}
-
-thead {
-  background-color: lightgray;
-}
-
-.state_true {
-  background-color: lightgreen;
-}
-
-.state_false {
-  background-color: red;
-}
-
-$border-color: #064c6e !default;
-$text-color: #377592 !default;
-$queue_link_hover: #ffffff !default;
-
-.title-background {
-  background-image: url("images/compendium_header.png");
-  background-color: #064c6e;
-  vertical-align: center;
-  padding-bottom: 15px;
-  padding-bottom: 15px;
-}
-
-$footer-height: 75px !default;
-
-.footer-img {
-  width: 55px;
-  height: 38px
-}
-
-.footer {
-  margin-top: 8px;
-  background-color: #064c6e;
-  font-size: 8px;
-  height: 75px;
-  color: black;
-  width: 100%;
-  padding: 15px;
-  clear: both;
-}
-
-.footer-text {
-  color: white;
-  margin-left: 30px;
-}
-
-.px {
-  padding-left: 55px;
-}
-
-.header-naviagtion {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  min-width: 10vh;
-  background: #064c6e;
-  color: white
-}
-
-.nav-links {
-  width: 50%;
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  list-style: none;
-}
-
 .external-page-nav-bar {
   background-color: #003753;
   color: #b0cde1;
-  padding-top: 10px;
+  height: 60px;
+  display: flex;
+  -webkit-box-align: center;
+  align-items: center;
 
   img {
     float: left;
+    margin-right: 15px;
   }
 
   ul {
+    line-height: 1.3;
+    text-transform: uppercase;
     list-style: none;
-    float: left;
-    margin-bottom: 0;
 
     li {
       float: left;
-      padding: 10px;
 
       a {
+        border-radius: 2px;
+        float: left;
         font-family: "Open Sans";
-        font-size: 14px;
-        font-weight: 400;
+        font-size: 0.9rem;
+        font-weight: 600;
         text-decoration: none;
         color: #b0cde1;
+        padding: 10px;
+      }
+
+      a:hover {
+        color: #003753;
+        background-color: #b0cde1;
+      }
     }
   }
 }
+
+.app {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+}
+
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
\ No newline at end of file