footer changes

Author: Gimleux

src/components/App.tsx

@@ -19,6 +19,7 @@ import { checkForCookie } from "../background/api/auth";
 import { TopBanner } from "./basicElements/TopBanner";
 import { FFLoading } from "./basicElements/Loading";
 import { CookieStatus } from "../background/redux/actions/tokenTypes";
+import {BottomBanner} from "./basicElements/BottomBanner";
 
 // this takes the redux store and maps everything that is needed to the function props
 const mapState = (state: SystemState) => ({
@@ -64,6 +65,7 @@ function App(props: Props): ReactElement {
               </main>
             </div>
             <Footer />
+            <BottomBanner/>
             <PermanentAssets />
           </BrowserRouter>
         </div>

src/components/Router/Router.tsx

@@ -5,6 +5,7 @@ import Error404 from "../pages/errors/Error404";
 import Login from "../basicElements/Login";
 import Registration from "../pages/Registration";
 import FileSystem, {filesBaseUrl} from "../pages/filesytem/Filesystem";
+import Profile from "../pages/profile/Profile";
 
 export default function Router(): ReactElement {
 
@@ -20,6 +21,7 @@ export default function Router(): ReactElement {
                 <Redirect to={"/"}/>
             </Route>
             <Route path={"/registration"} component={Registration}/>
+            <Route path={"/profile"} component={Profile}/>
             <Route path={"*"} component={Error404}/>
         </Switch>
     )

src/components/basicElements/BottomBanner.tsx

@@ -0,0 +1,9 @@
+import React, {ReactElement} from "react";
+
+export function BottomBanner():ReactElement {
+    return(
+        <div className="d-flex justify-content-center bg-dark queer-banner p-1">
+            Queer Lives Matter
+        </div>
+    )
+}

src/components/pages/profile/Profile.tsx

@@ -0,0 +1,15 @@
+import React, {Props, ReactElement, useState} from "react";
+import {Container} from "react-bootstrap";
+import {genitiveOfWord} from "../../../background/methods/grammar/germanGrammar";
+import {SystemState} from "../../../background/redux/actions/sytemState";
+
+export default function Profile() : ReactElement {
+
+    return (
+        <Container>
+            <h2>
+                Profile
+            </h2>
+        </Container>
+    );
+}

src/style/helpers.scss

@@ -1,3 +1,36 @@
 .text-shadow-none{
   text-shadow: none;
 }
+
+.queer-banner{
+  color:white;
+  border-top: 5px solid $primary;
+  text-align: center;
+  background: linear-gradient(
+                  124deg,
+                  #000000,
+                  #784f16,
+                  #fe0000,
+                  #fe8c01,
+                  #ffe500,
+                  #11a00b,
+                  #0643b3,
+                  #c32ede
+  );
+  background-size: 1800% 1800%;
+  animation: rainbow 18s ease infinite;
+  @keyframes rainbow {
+    0%{
+      color: white;
+      background-position:0 82%;
+    }
+    50%{
+      color: black;
+      background-position:100% 19%;
+    }
+    100%{
+      color: white;
+      background-position:0 82%;
+    }
+  }
+}