Add more styling

src/components/Nav.tsx

@@ -6,6 +6,7 @@ import { faUser } from '@fortawesome/free-solid-svg-icons'
 import { AccountPage } from 'pages'
 import { Box, Heading, Flex, Spacer, Button, Image, Avatar, HStack, Input } from "@chakra-ui/react"
 import Logo from '../img/logo.png'
+import Nisum from '../img/nisum.jpeg'
 import {
     Drawer,
     DrawerBody,
@@ -50,11 +51,12 @@ const Nav = () => {
         <Flex className="header" justifyContent="space-between">
             <Box >
                 <h1 className="header-title">Ascend Final Project</h1>
+                {/* <Image src={Nisum} alt="project logo" className="nisumImg"/> */}
             </Box>
             <Box className="center-nav" display="-ms-inline-flexbox">
                 <HStack>
                     <Link to="/"><Image src={Logo} alt="project logo" className="logoImg"/></Link>
-                    <h1>Order Management</h1>
+                    <h1>Order Management PRO</h1>
                     {/* <Link to="/"><h1>Order Management</h1></Link> */}
                 </HStack>
             </Box>
@@ -80,16 +82,16 @@ const Nav = () => {
             <Box >
                 <Menu>
                     <MenuButton rightIcon={<ChevronDownIcon />} onClick={onOpen} width="300px" className="right-nav">
-                        <HStack>
-                            <span>{userIcon}</span> 
-                            <span>{userName}</span>
+                        <HStack className="dropdown-icon">
+                            <span className="dropdown-icon">{userIcon}</span> 
+                            <span className="dropdown-icon">{userName}</span>
                             {/* <span>{authLinkText}</span> */}
                         </HStack>
                     </MenuButton>
                     <MenuList>
-                        <MenuItem color="black"><Link to="/orders">Orders</Link></MenuItem>
-                        <MenuItem color="black"><Link to="/account">Account</Link></MenuItem>
-                        <MenuItem color="black"><button onClick={handleAuth}>{authLinkText}</button></MenuItem>
+                        <MenuItem color="black"><Link to="/orders" className="dropdown">Orders</Link></MenuItem>
+                        <MenuItem color="black"><Link to="/account" className="dropdown">Account</Link></MenuItem>
+                        <MenuItem color="black"><button onClick={handleAuth} className="dropdown">{authLinkText}</button></MenuItem>
                     </MenuList>
                 </Menu>
             </Box>

src/index.css

@@ -79,6 +79,12 @@ body {
 }
 
 
+.nisumImg {
+  height: 100px;
+  width: 50px;
+}
+
+
 .left-nav Link {
   color: red;
 }
@@ -193,11 +199,32 @@ input[type=text]:focus {
 /* User Drawer */
 
 .account {
-  padding: 40px 0;
+  padding: 80px 0;
+  /* padding: 150px; */
   border-top: 1px solid rgba(68, 64, 64, 0.363);
-  border-bottom: 1px solid rgba(68, 64, 64, 0.363);
+  /* border-bottom: 1px solid rgba(68, 64, 64, 0.363); */
 }
 
+.account h1 {
+  padding-top: 50px;
+}
+
+
+.dropdown-icon span :hover {
+    /* color: #cccdcf; */
+    color: red;
+    /* background-color: #cccdcf; */
+    transition: 0.3s;
+}
+
+.dropdown:hover {
+  color: #cccdcf;
+  background-color: #e9ecef;
+  transition: 0.4s;
+  border-radius: 2px;
+  padding: 0 2px;
+  /* width: 80px; */
+}
 
 /* .user-name {
   padding-top: 3.5px;

src/pages/AccountPage.tsx

@@ -3,7 +3,9 @@ import {useGoogleAuth} from 'hooks'
 const AccountPage = () => {
     const { manager } = useGoogleAuth();
     return (
+        <div>
             <VStack className="account">
+                <h1>Account Info</h1>
                 <Avatar name={manager.firstName + " " + manager.lastName} size="2xl" src={manager.imageUrl} alt="profile" />
                 <Box w="270px" >
                     <VStack 
@@ -28,6 +30,7 @@ const AccountPage = () => {
                     </VStack>
                 </Box>
             </VStack>
+        </div>
     )
 }
 

src/pages/OrderShowPage.tsx

@@ -15,7 +15,8 @@ const OrderShowPage = (props: any) => {
     // const { id } = useParams<any>();
     // const { order } = useOrder(id)
     const location = props.match.params.id;
-    const apiUrl = 'http://localhost:8080/api/orders/' + location;
+    const apiUrl = 'http://localhost:8080/api/orders';
+    // const apiUrl = 'http://138.91.251.222:8086/api/orders/' + location;
     const [order, setOrder] = useState<Order>();
     const [items, setItems] = useState<Item[]>()
 

src/router/MainRouter.tsx

@@ -22,7 +22,7 @@ const MainRouter: React.FC = () => {
                                 {/* <Route component={NotFoundPage} /> */}
                             </Switch>
                         </main>
-                        <Footer />
+                        {/* <Footer /> */}
                     </body>
                 </GoogleAuthProvider>
             </BrowserRouter>

src/services/OrderService.ts

@@ -3,6 +3,7 @@ import { Order } from 'Order';
 
 export const allOrders = () => {
     const apiUrl = 'http://localhost:8080/api/orders';
+    // const apiUrl = 'http://138.91.251.222:8086/api/orders';
     return fetch(apiUrl).then((response) => response.json())
 }