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,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,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) => {