changed footer

client/src/App.js

@@ -41,6 +41,7 @@ export const App = () => {
     return (
         <Router>
             <Navbar />
+            <div style={{ minHeight: "88vh" }}>
                 <Switch>
                     <Route exact path="/dashboard" component={Dashboard} />
                     <Route exact path="/credits" component={Credits} />
@@ -51,6 +52,7 @@ export const App = () => {
                     {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,14 +1,16 @@
 @import "../../index.scss";
+
 .footer {
-    text-align:right;
-    width: 100%;;
-    height: 4vh;
+    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;
+    color: rgb(100, 100, 100);
+    font-size: 0.9em;
     cursor: pointer;
+    transition: color 0.3s ease;
     &:hover {
         color: black;
     }