Setup bottom navigation bar

Changes:
- Create a bottom bar folder and setup the required files
- Fix the top navigation bar styling (reduce height)

frontend/src/components/App.tsx

@@ -2,12 +2,14 @@ import React from "react";
 import "./App.scss";
 import ExamplePage from "./pages/ExamplePage";
 import TopBar from "./organisms/TopBar/TopBar";
+import BottomBar from "./organisms/BottomBar/BottomBar";
 
 const App: React.FC = () => {
   return (
     <>
       <TopBar />
       <ExamplePage />
+      <BottomBar />
     </>
   );
 };

frontend/src/components/organisms/BottomBar/BottomBar.tsx

+import React from "react";
+import Container from "react-bootstrap/Container";
+import Navbar from "react-bootstrap/Navbar";
+import Nav from "react-bootstrap/Nav";
+import "./style.scss";
+
+const BottomBar: React.FC = () => {
+    return (
+        <>
+        </>
+  );
+};
+
+export default BottomBar;

frontend/src/components/organisms/TopBar/TopBar.tsx

@@ -7,47 +7,51 @@ import userPic from "images/user.png";
 import "./style.scss";
 
 const TopBar: React.FC = () => {
-  return (
-    <>
-      <Navbar
-        className="top-bar"
-        sticky="top"
-        expand="lg"
-        variant="light"
-      >
-        <Container fluid>
-          <Navbar.Brand href="#" className="brand-container">
-              <img
-                src={logo}
-                width="40"
-                height="40"
-                className="d-inline-block align-center brand-image"
-                alt="React Bootstrap logo"
-              />{" "}
-            Scientia
-          </Navbar.Brand>
+    return (
+        <Navbar className="top-bar" sticky="top" expand="lg" variant="light">
+            <Container fluid>
+                <Navbar.Brand href="#" className="brand-container">
+                    <img
+                        src={logo}
+                        width="30"
+                        height="30"
+                        className="d-inline-block align-center brand-image"
+                        alt="React Bootstrap logo"
+                    />{" "}
+                    Scientia
+                </Navbar.Brand>
 
-        <Navbar className="page-button-group m-auto" id="responsive-navbar-nav">
-            <Nav.Link active href="/" className="page-button">Courses</Nav.Link>
+                <Navbar
+                    className="page-button-group m-auto"
+                    id="responsive-navbar-nav"
+                >
+                    <Nav.Link active href="/" className="page-button">
+                        Courses
+                    </Nav.Link>
 
-            <Nav.Link eventKey="link-1" className="page-button">Timetable</Nav.Link>
+                    <Nav.Link eventKey="link-1" className="page-button">
+                        Timetable
+                    </Nav.Link>
 
-            <Nav.Link eventKey="link-2" className="page-button">Exams</Nav.Link>
+                    <Nav.Link eventKey="link-2" className="page-button">
+                        Exams
+                    </Nav.Link>
 
-            <Nav.Link eventKey="link-3" className="page-button">Other</Nav.Link>
-        </Navbar>
+                    <Nav.Link eventKey="link-3" className="page-button">
+                        Other
+                    </Nav.Link>
+                </Navbar>
 
-          <img
-            src={userPic}
-            width="40"
-            height="40"
-            className="d-inline-block align-top"
-            alt="userPic"
-          />
-        </Container>
-      </Navbar>
-    </>
-  );
+                <img
+                    src={userPic}
+                    width="30"
+                    height="30"
+                    className="d-inline-block align-top"
+                    alt="userPic"
+                />
+            </Container>
+        </Navbar>
+    );
 };
 
 export default TopBar;

frontend/src/components/organisms/TopBar/style.scss

@@ -3,7 +3,7 @@
 //-----------------------------------Top Bar-----------------------------------
 
 .top-bar {
-    padding: 10px 16px;
+    padding: 12px 16px;
     background: #FFF;
     border-bottom: 1px solid #CDD4DB;
 }
@@ -18,7 +18,7 @@
 .brand-container {
     font-family: 'IBM Plex Sans';
     font-weight: 500;
-    font-size: 28px;
+    font-size: 24px;
     color: #000;
     text-align: left;
     padding: 0px;