Add styling to top navigation bar

Changes:
- Update brand icon size to 40x40
- Add IBM Plex Sans in buttons and brand text
- Fix layout and centering of navbar elements
- Remove navigation pills and items

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

@@ -10,41 +10,32 @@ const TopBar: React.FC = () => {
   return (
     <>
       <Navbar
-        className="justify-content-center"
+        className="top-bar"
         sticky="top"
         expand="lg"
         variant="light"
-        bg="light"
       >
-        <Container>
-          <Navbar.Brand href="#">
-            <img
-              src={logo}
-              width="30"
-              height="30"
-              className="d-inline-block align-top"
-              alt="React Bootstrap logo"
-            />{" "}
+        <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>
 
-          <Nav variant="pills" activeKey="/">
-            <Nav.Item>
-              <Nav.Link href="/">Courses</Nav.Link>
-            </Nav.Item>
+        <Navbar className="page-button-group m-auto" id="responsive-navbar-nav">
+            <Nav.Link active href="/" className="page-button">Courses</Nav.Link>
 
-            <Nav.Item>
-              <Nav.Link eventKey="link-1">Timetable</Nav.Link>
-            </Nav.Item>
+            <Nav.Link eventKey="link-1" className="page-button">Timetable</Nav.Link>
 
-            <Nav.Item>
-              <Nav.Link eventKey="link-2">Exams</Nav.Link>
-            </Nav.Item>
+            <Nav.Link eventKey="link-2" className="page-button">Exams</Nav.Link>
 
-            <Nav.Item>
-              <Nav.Link eventKey="link-3">Other</Nav.Link>
-            </Nav.Item>
-          </Nav>
+            <Nav.Link eventKey="link-3" className="page-button">Other</Nav.Link>
+        </Navbar>
 
           <img
             src={userPic}

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

+@import "scss/custom";
+
+//-----------------------------------Top Bar-----------------------------------
+
+.top-bar {
+    padding: 10px 16px;
+    background: #FFF;
+    border-bottom: 1px solid #CDD4DB;
+}
+
+
+//------------------------------------Brand------------------------------------
+
+.brand-image {
+    margin-right: 10px;
+}
+
+.brand-container {
+    font-family: 'IBM Plex Sans';
+    font-weight: 500;
+    font-size: 28px;
+    color: #000;
+    text-align: left;
+    padding: 0px;
+    display: flex;
+    justify-content: left;
+    align-items: center;
+    margin: 0px;
+}
+
+//--------------------------------Page Buttons---------------------------------
+
+.page-button {
+    background: $gray-100;
+    border-radius: 5px;
+    font-family: 'IBM Plex Sans';
+    font-size: 18px;
+    color: $black;
+    text-align: center;
+    line-height: 22px;
+    width: 120px;
+    height: 36px;
+    margin-right: 10px;
+    margin-left: 10px;
+}
+
+.page-button:hover {
+    background: $gray-200;
+    color: $black; 
+}
+
+.page-button:active {
+    background: $black;
+    font-weight: 500;
+    color: $white;
+}
+
+.page-button-group {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}