diff --git a/package.json b/package.json
index f00d700b652e2b8e55772bfa697c801f937c808c..d19f8b02602004f718d0beb5f3d27e61ae0fd5a4 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
"private": true,
"proxy": "http://localhost:8080",
"dependencies": {
+ "@chakra-ui/icons": "^1.0.13",
"@chakra-ui/react": "^1.6.0",
"@emotion/react": "^11",
"@emotion/styled": "^11",
diff --git a/src/components/Nav.tsx b/src/components/Nav.tsx
index 58ddd90ae2081af38b63cecf7943353ee74ee231..83d0107081390aad5a7dd34d0e35f1c8f6c3b76f 100644
--- a/src/components/Nav.tsx
+++ b/src/components/Nav.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useRef} from 'react'
+import React, { useMemo, useRef, useState, useEffect } from 'react'
import { Link } from 'react-router-dom'
import {useGoogleAuth} from 'hooks'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@@ -16,27 +16,49 @@ import {
useDisclosure
} from "@chakra-ui/react"
+ import {
+ Menu,
+ MenuButton,
+ MenuList,
+ MenuItem,
+ MenuItemOption,
+ MenuGroup,
+ MenuOptionGroup,
+ MenuIcon,
+ MenuCommand,
+ MenuDivider,
+ } from "@chakra-ui/react"
+
+ import { ChevronDownIcon } from '@chakra-ui/icons'
+
const Nav = () => {
const { isSignedIn, signOut, signIn, manager } = useGoogleAuth();
const handleAuth = () => { isSignedIn ? signOut() : signIn();}
+ const loginIcon = faUser
const authLinkText = useMemo(() => isSignedIn ? "Logout" : "Login", [isSignedIn]);
const { isOpen, onOpen, onClose } = useDisclosure();
const btnRef = useRef<HTMLButtonElement>(null);
+ const userName = isSignedIn ? <p>{manager.firstName} {manager.lastName}</p> : null
const userIcon = isSignedIn ?
- <Avatar name={manager.firstName + " " + manager.lastName} boxSize="40px" borderRadius="full" src={manager.imageUrl} alt="profile"/> : null
+ <Avatar boxSize="40px" borderRadius="full" src={manager.imageUrl} alt="profile"/> : <div>{authLinkText}</div>
+
+
return (
- <Flex className="header">
- <Box className="left-nav">
- <Link to="/"><Image src={Logo} alt="project logo"height="110%" width="55%" /></Link>
+ <Flex className="header" justifyContent="space-between">
+ <Box >
+ <h1 className="header-title">Ascend Final Project</h1>
+ </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>
+ {/* <Link to="/"><h1>Order Management</h1></Link> */}
+ </HStack>
</Box>
- <Spacer />
- <HStack className="right-nav" spacing="1px">
- <Box><button>
- <Link to="/orders">Orders</Link></button></Box>
- <Box><span>|</span></Box>
+ {/* <HStack className="right-nav" spacing="1px">
<Box><button onClick={handleAuth}>{authLinkText}</button></Box>
<Box><button ref={btnRef} onClick={onOpen}>{userIcon}</button></Box>
<Drawer
@@ -54,7 +76,23 @@ const Nav = () => {
</DrawerBody>
</DrawerContent>
</Drawer>
- </HStack>
+ </HStack> */}
+ <Box >
+ <Menu>
+ <MenuButton rightIcon={<ChevronDownIcon />} onClick={onOpen} width="300px" className="right-nav">
+ <HStack>
+ <span>{userIcon}</span>
+ <span>{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>
+ </MenuList>
+ </Menu>
+ </Box>
</Flex>
)
}
diff --git a/src/components/OrderShowDetails.tsx b/src/components/OrderShowDetails.tsx
index 7c03b43906d55c1eb495d249c6b255bb8391044a..5204a28cc6ef438033663371216e93392d16610e 100644
--- a/src/components/OrderShowDetails.tsx
+++ b/src/components/OrderShowDetails.tsx
@@ -38,12 +38,12 @@ const OrderShowDetails = (props: any) => {
return (
items ?
<Table variant="striped" colorScheme="messenger" size="lg">
- <Thead>
- <Tr className="table-header">
- <Th fontSize="22px" color="gray">ID</Th>
- <Th fontSize="22px" color="gray">Price</Th>
- <Th fontSize="22px" color="gray">Quantity</Th>
- <Th fontSize="22px" color="gray">SKU</Th>
+ <Thead >
+ <Tr className="table-header" >
+ <Th fontSize="21px" color="rgba(255, 166, 0, 0.897)">ID</Th>
+ <Th fontSize="21px" color="rgba(255, 166, 0, 0.897)">Price</Th>
+ <Th fontSize="21px" color="rgba(255, 166, 0, 0.897)">Quantity</Th>
+ <Th fontSize="21px" color="rgba(255, 166, 0, 0.897)">SKU</Th>
</Tr>
</Thead>
<Tbody>
diff --git a/src/img/logo.png b/src/img/logo.png
index e01200a0e19884bc858fbf373eafd9708d4119c9..4f245d273d2722c5663d6ba7d5baa3a697f1c3d1 100644
Binary files a/src/img/logo.png and b/src/img/logo.png differ
diff --git a/src/index.css b/src/index.css
index 8b105c48639df9f3cb78340b5b657e66acd679f7..1bdaaf0e1dcf1fa0339deaf3719a4d36f58d2978 100644
--- a/src/index.css
+++ b/src/index.css
@@ -43,35 +43,62 @@ body {
.header {
border-top: 1.5px solid rgba(80, 76, 69, 0.603);
- background-color: rgba(216, 130, 32, 0.404);
- height: 60px;
+ background-color: #00567D;
+ height: 50px;
+ color: #EBEBEB;
+}
+
+
+.header-title {
+ margin-left: 70px;
+ margin-top: 10px;
+}
+
+
+.header h1 {
+ color: #EBEBEB;
+}
+
+
+.header span {
+ color: #EBEBEB;
+}
+
+.center-nav {
+ padding: 0 0 0 10px;
+}
+
+
+.center-nav p {
+ margin-left: -250px;
+}
+
+.logoImg {
+ width: 150px;
+ height: 45px;
}
-.left-nav {
- padding: 0 0 0 40px;
- /* background-color: blueviolet; */
+.left-nav Link {
+ color: red;
}
.right-nav {
- padding: 30px 70px 0px 0px;
- /* background-color: rgb(109, 109, 204); */
- align-items: center;
- align-content: center;
+ margin-top: 2.5px;
}
-.right-nav button {
+/* .right-nav button {
background-color: transparent;
margin-right: 15px;
margin-top: 4px;
-}
+} */
-.right-nav span {
+/* .right-nav span {
margin-left: 10px;
margin-right: 25px;
font-weight: 600;
-}
+} */
.chakra-stack.right-nav.css-193rmy8 {
@@ -79,6 +106,12 @@ body {
}
+.chakra-menu__menu-button.css-59llwj {
+ /* margin-right: 500px; */
+ width: 250px;
+}
+
+
.nav-link {
margin-right: 15px;
margin-left: 15px;
@@ -99,13 +132,6 @@ body {
padding: 2px;
}
-/* .searchbar {
- width: 220px;
- margin-right: 150px;
- border: 1px solid blue;
- border-radius: 2px;
-} */
-
input[type=text] {
@@ -133,7 +159,7 @@ input[type=text]:focus {
}
.body-content-div {
- padding: 124px;
+ padding: 120px;
padding-top: 20px;
}
@@ -159,8 +185,7 @@ input[type=text]:focus {
.table-header {
- background-color: rgba(236, 157, 65, 0.534);
- color: black;
+ background-color: #00557ddc;
}
diff --git a/src/pages/OrderIndexPage.tsx b/src/pages/OrderIndexPage.tsx
index 0dabc3ba976c8e5ad79264d6423ac4634ea9b264..82ae07e2c88f19d2c749c468f66e2a5354336742 100644
--- a/src/pages/OrderIndexPage.tsx
+++ b/src/pages/OrderIndexPage.tsx
@@ -71,12 +71,12 @@ const OrderIndexPage = () => {
</div>
<br/>
<div className="index-table">
- <Table variant="striped" colorScheme="messenger" size="sm">
+ <Table variant="striped" colorScheme="messenger" size="md">
<Thead>
<Tr className="table-header">
- <Th fontSize="26px" color="gray">Order number</Th>
- <Th fontSize="26px" color="gray">Order Date</Th>
- <Th fontSize="26px" color="gray">Order Status</Th>
+ <Th fontSize="24px" color="rgba(255, 166, 0, 0.897)">Order number</Th>
+ <Th fontSize="24px" color="rgba(255, 166, 0, 0.897)">Order Date</Th>
+ <Th fontSize="24px" color="rgba(255, 166, 0, 0.897)">Order Status</Th>
</Tr>
</Thead>
<Tbody>
diff --git a/src/router/MainRouter.tsx b/src/router/MainRouter.tsx
index 5f60794d4d8a576747d46f118353377df5231499..0d4f916a2dab9e9f9b576533f3c66e512c19b222 100644
--- a/src/router/MainRouter.tsx
+++ b/src/router/MainRouter.tsx
@@ -15,7 +15,7 @@ const MainRouter: React.FC = () => {
<Nav />
<main className="content">
<Switch>
- {/* <PrivateRoute path="/account" component={AccountPage} /> */}
+ <PrivateRoute path="/account" component={AccountPage} />
<PublicRoute exact path="/" component={HomePage} />
<PrivateRoute path="/orders/:id" component={OrderShowPage} />
<PrivateRoute path="/orders" component={OrderIndexPage} />
diff --git a/yarn.lock b/yarn.lock
index 3ce4f1d57cbfa7e67cb28b2af7b12c67ca3f059b..3bb247d7c4370642917ac77bb6421c26863d08b4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1285,6 +1285,21 @@
dependencies:
"@chakra-ui/utils" "1.7.0"
+"@chakra-ui/icon@1.1.9":
+ version "1.1.9"
+ resolved "https://registry.yarnpkg.com/@chakra-ui/icon/-/icon-1.1.9.tgz#fbd6e82abf58b890f5bcc728bb75dda25d7b6c63"
+ integrity sha512-lmZHK4O+Wo7LwxRsQb0KmtOwq2iACESxwQgackuj7NPHbAsdF2/y3t2f7KCD+dTKGxoauEMgU2nVLePZWjtpTQ==
+ dependencies:
+ "@chakra-ui/utils" "1.8.0"
+
+"@chakra-ui/icons@^1.0.13":
+ version "1.0.13"
+ resolved "https://registry.yarnpkg.com/@chakra-ui/icons/-/icons-1.0.13.tgz#d8eb04479b048d8023ae90d76205cd4a0bf7dd79"
+ integrity sha512-twDpFz2uPVboMTEI4QA2y3EJND3G4+/9AVs730fgnnfhTw4EOJt0Lhfm4Spq1qi1LgHF16x4/Lao1E2imB5lWw==
+ dependencies:
+ "@chakra-ui/icon" "1.1.9"
+ "@types/react" "^17.0.0"
+
"@chakra-ui/image@1.0.14":
version "1.0.14"
resolved "https://registry.npmjs.org/@chakra-ui/image/-/image-1.0.14.tgz"
@@ -1653,6 +1668,16 @@
framesync "5.3.0"
lodash.mergewith "4.6.2"
+"@chakra-ui/utils@1.8.0":
+ version "1.8.0"
+ resolved "https://registry.yarnpkg.com/@chakra-ui/utils/-/utils-1.8.0.tgz#f7aad8175cc5a26a1d2795dc78691bbc21fd539e"
+ integrity sha512-BWIhKcXnLbOIwCTKeNcOStNwk9RyYVA9xRRFPGK6Kp3EhrxP0rDwAbu4D3o3qAc+yhIDhGmPaIj1jRXHB5DTfg==
+ dependencies:
+ "@types/lodash.mergewith" "4.6.6"
+ css-box-model "1.2.1"
+ framesync "5.3.0"
+ lodash.mergewith "4.6.2"
+
"@chakra-ui/visually-hidden@1.0.11":
version "1.0.11"
resolved "https://registry.npmjs.org/@chakra-ui/visually-hidden/-/visually-hidden-1.0.11.tgz"