fix styling

Author: shauryamago12

src/Navigation/Navigation.css

@@ -1,3 +1,16 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+
 #log-out {
    float: right;
 }
+
+.nav{
+  background-color: #4274F3;
+}
+
+.navbar-brand {
+  font-family: "Poppins", sans-serif;
+  font-weight: 800;
+  font-size: 22px !important;
+  padding-left: 10px;
+}

src/Navigation/Navigation.tsx

@@ -1,20 +1,19 @@
-import { Auth } from 'aws-amplify';
-import { Navbar, Nav, Form, Button } from 'react-bootstrap';
+import { Navbar, Nav, Button, Form } from 'react-bootstrap';
+import { Auth, Hub } from 'aws-amplify';
 import './Navigation.css';
 
 export default function Navigation() {
    return (
-      <Navbar collapseOnSelect expand="sm" bg="primary" variant="dark">
+      <Navbar collapseOnSelect expand="sm" className="nav" variant="dark">
          <Navbar.Brand href="/">flipt.ED</Navbar.Brand>
          <Navbar.Toggle aria-controls="responsive-navbar-nav" />
          <Navbar.Collapse id="responsive-navbar-nav">
             <Nav className="container-fluid">
-               <Nav.Link href="/">Dashboard</Nav.Link>
-               <Form inline>
-                  <Button className="ml-auto" type="submit" onClick={() => Auth.signOut()}>
+               <Nav.Item className="ml-auto">
+                  <Button variant="outline" type="submit" onClick={() => Auth.signOut()}>
                      Log Out
                   </Button>
-               </Form>
+               </Nav.Item>
             </Nav>
          </Navbar.Collapse>
       </Navbar>