changed footer

client/src/App.js

@@ -41,16 +41,18 @@ export const App = () => {
     return (
         <Router>
             <Navbar />
-            <Switch>
-                <Route exact path="/dashboard" component={Dashboard} />
-                <Route exact path="/credits" component={Credits} />
-                <Route exact path="/">
-                    <Home />
-                </Route>
-                <Route exact path="/create" component={CreateEvent} />
-                {routes}
-                <Route component={NotFound} />
-            </Switch>
+            <div style={{ minHeight: "88vh" }}>
+                <Switch>
+                    <Route exact path="/dashboard" component={Dashboard} />
+                    <Route exact path="/credits" component={Credits} />
+                    <Route exact path="/">
+                        <Home />
+                    </Route>
+                    <Route exact path="/create" component={CreateEvent} />
+                    {routes}
+                    <Route component={NotFound} />
+                </Switch>
+            </div>
             <Footer />
         </Router>
     );

client/src/components/Footer/index.js

@@ -5,7 +5,7 @@ export const Footer = () => {
     return (
         <div className={styles.footer}>
             <Link aria-label="Credits" to="/credits" style={{ textDecoration: "none" }}>
-                <span className={styles.txt}>credits</span>
+                <span className={styles.txt}>Credits</span>
             </Link>
         </div>
     );

client/src/components/Footer/index.module.scss

@@ -1,15 +1,17 @@
 @import "../../index.scss";
-.footer{
-    text-align:right;
-    width: 100%;;
-    height: 4vh;
+
+.footer {
+    position: relative;
+    text-align: center;
+    width: 100%;
+    margin: 5px 0;
 }
-.txt{
-    color:rgba(0, 0, 0, 0.70);
-    margin-right: 4vw;
-    font-size: 1.2em;
-    cursor:pointer;
-    &:hover{
-        color:black;
+.txt {
+    color: rgb(100, 100, 100);
+    font-size: 0.9em;
+    cursor: pointer;
+    transition: color 0.3s ease;
+    &:hover {
+        color: black;
     }
-}
+}