Add more styling

src/components/Nav.tsx

@@ -5,8 +5,13 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 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"
+<<<<<<< HEAD
 import AppLogo from '../img/logo.png'
 import NisumLogo from '../img/nisum.jpeg'
+=======
+import Logo from '../img/logo.png'
+import Nisum from '../img/nisum.jpeg'
+>>>>>>> Add more styling
 import {
     Drawer,
     DrawerBody,
@@ -50,6 +55,7 @@ const Nav = () => {
     return (
         <Flex className="header" justifyContent="space-between">
             <Box >
+<<<<<<< HEAD
                 <Image 
                     mt="-4px"
                     src={NisumLogo} 
@@ -63,6 +69,15 @@ const Nav = () => {
                     <Link to="/"><Image src={AppLogo} alt="Order Management Console PRO logo" className="logoImg"/></Link>
                    
                     <h1>Order Management</h1>
+=======
+                <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 PRO</h1>
+>>>>>>> Add more styling
                     {/* <Link to="/"><h1>Order Management</h1></Link> */}
                 </HStack>
             </Box>
@@ -88,16 +103,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,12 @@ const OrderShowPage = (props: any) => {
     // const { id } = useParams<any>();
     // const { order } = useOrder(id)
     const location = props.match.params.id;
+<<<<<<< HEAD
     const apiUrl = 'http://localhost:8084/api/orders/' + location;
+=======
+    const apiUrl = 'http://localhost:8080/api/orders';
+    // const apiUrl = 'http://138.91.251.222:8086/api/orders/' + location;
+>>>>>>> Add more styling
     const [order, setOrder] = useState<Order>();
     const [items, setItems] = useState<Item[]>()
 

src/router/MainRouter.tsx

@@ -21,6 +21,10 @@ const MainRouter: React.FC = () => {
                                 <PrivateRoute path="/orders" component={OrdersPage} />
                             </Switch>
                         </main>
+<<<<<<< HEAD
+=======
+                        {/* <Footer /> */}
+>>>>>>> Add more styling
                     </body>
                 </GoogleAuthProvider>
             </BrowserRouter>

src/services/OrderService.ts

@@ -8,7 +8,13 @@ const URL = (process.env.REACT_APP_BACKEND_URL as string)
 const BASE_PATH = `${URL}/api/orders`
 
 export const allOrders = () => {
+<<<<<<< HEAD
     return fetch(`${BASE_PATH}/`).then((response) => response.json())
+=======
+    const apiUrl = 'http://localhost:8080/api/orders';
+    // const apiUrl = 'http://138.91.251.222:8086/api/orders';
+    return fetch(apiUrl).then((response) => response.json())
+>>>>>>> Add more styling
 }
 
 export const orderById = (apiUrl: string) => {