Improved Navbar style and fixed port selection on Windows 10

Author: AdvaitDhingra

client/package.json

@@ -23,7 +23,7 @@
     "comment": "`proxy` works only on dev mode"
   },
   "scripts": {
-    "start": "PORT=8000 react-scripts start",
+    "start": "set PORT=8000 && react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

client/src/components/NavBar.jsx

@@ -1,30 +1,40 @@
 import React, { Component } from 'react'
 import styled from 'styled-components'
 
+import Appbar from '@material-ui/core/AppBar'
+import Toolbar from '@material-ui/core/Toolbar'
+
 import Logo from './Logo'
 import Links from './Links'
 
-const Container = styled.div.attrs({
-    className: 'container-fluid',
-})``
-
 const Nav = styled.nav.attrs({
-    className: 'navbar navbar-expand-lg navbar-dark bg-dark',
+    className: 'navbar navbar-expand-lg navbar-dark',
 })`
     margin-bottom: 20 px;
 `
 
 class NavBar extends Component {
     render() {
         return (
-            <Container>
+            <Appbar position = "static" style = {{
+                backgroundColor: "gray"
+            }}>
+                <Toolbar >
+                    <Logo/>
+                    <Nav><Links/></Nav>
+                    
+                </Toolbar>
+            </Appbar>
+        )
+    }
+}
+
+export default NavBar
+/*
+<Container>
                 <Nav>
                     <Logo />
                     <Links />
                 </Nav>
             </Container>
-        )
-    }
-}
-
-export default NavBar
+*/