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,12 +199,33 @@ 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,31 +3,34 @@ import {useGoogleAuth} from 'hooks'
 const AccountPage = () => {
     const { manager } = useGoogleAuth();
     return (
-        <VStack className="account">
-            <Avatar name={manager.firstName + " " + manager.lastName} size="2xl" src={manager.imageUrl} alt="profile" />
-            <Box w="270px" >
-                <VStack 
-                    divider={<StackDivider borderColor="gray.200" />}
-                    spacing={4}
-                    align="center"
-                >
-                <Box h="5px" className="user-name">{manager.firstName} {manager.lastName}</Box>
-                <Box h="28px"
-                    w="280px"                      
-                    size="sm"
-                    align="center"
-                    color="white"
-                    fontWeight="bold"
-                    borderRadius="md"
-                    bgGradient="linear(to-r, teal.500,blue.500)"
-                    // _hover={{
-                    //     bgGradient: "linear(to-r, blue.500, yellow.500)",
-                    // }}
-                    >{manager.email }
+        <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 
+                        divider={<StackDivider borderColor="gray.200" />}
+                        spacing={4}
+                        align="center"
+                    >
+                    <Box h="5px" className="user-name">{manager.firstName} {manager.lastName}</Box>
+                    <Box h="28px"
+                        w="280px"                      
+                        size="sm"
+                        align="center"
+                        color="white"
+                        fontWeight="bold"
+                        borderRadius="md"
+                        bgGradient="linear(to-r, teal.500,blue.500)"
+                        // _hover={{
+                        //     bgGradient: "linear(to-r, blue.500, yellow.500)",
+                        // }}
+                        >{manager.email }
+                    </Box>
+                    </VStack>
                 </Box>
-                </VStack>
-            </Box>
-        </VStack>
+            </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())
 }