Skip to content

O
order-management-react
Commit 0322c786 authored by Shanelle Valencia's avatar Shanelle Valencia
Browse files
Options

💄 Format header to match the other team's styling [@svalencia]

parent 1a7e862a
Hide whitespace changes
Inline Side-by-side
Showing with 134 additions and 45 deletions
package.json
View file @ 0322c786
......@@ -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",
......
src/components/Nav.tsx
View file @ 0322c786
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>
)
}
......
src/components/OrderShowDetails.tsx
View file @ 0322c786
......@@ -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>
......
src/img/logo.png
View replaced file @ 1a7e862a View file @ 0322c786
src/img/logo.png

10.3 KB | W: | H:

src/img/logo.png

4.22 KB | W: | H:

src/img/logo.png
src/img/logo.png
src/img/logo.png
src/img/logo.png
  • 2-up
  • Swipe
  • Onion skin
src/index.css
View file @ 0322c786
......@@ -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;
}
......
src/pages/OrderIndexPage.tsx
View file @ 0322c786
......@@ -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>
......
src/router/MainRouter.tsx
View file @ 0322c786
......@@ -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} />
......
yarn.lock
View file @ 0322c786
......@@ -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"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment