Skip to content

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

Merge branch 'styling' into 'dev' 

[AFP-137] 💄 Fix searchbar styling as well as header, footer and user account [@svalencia]

See merge request !17
parents bfab959a fe5fc2d9
Show whitespace changes
Inline Side-by-side
Showing with 219 additions and 128 deletions
src/components/Nav.tsx
View file @ c091178f
...@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom' ...@@ -3,7 +3,7 @@ import { Link } from 'react-router-dom'
import {useGoogleAuth} from 'hooks' import {useGoogleAuth} from 'hooks'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faUser } from '@fortawesome/free-solid-svg-icons' import { faUser } from '@fortawesome/free-solid-svg-icons'
import { Box, Heading, Flex, Spacer, Button, Image, Avatar } from "@chakra-ui/react" import { Box, Heading, Flex, Spacer, Button, Image, Avatar, HStack } from "@chakra-ui/react"
import Logo from '../img/logo.png' import Logo from '../img/logo.png'
...@@ -15,37 +15,41 @@ const Nav = () => { ...@@ -15,37 +15,41 @@ const Nav = () => {
<Avatar name={manager.firstName + " " + manager.lastName} boxSize="40px" borderRadius="full" src={manager.imageUrl} alt="profile"/> : null <Avatar name={manager.firstName + " " + manager.lastName} boxSize="40px" borderRadius="full" src={manager.imageUrl} alt="profile"/> : null
return ( return (
<div >
<Flex className="header"> <Flex className="header">
<Box className="left-nav"> <Box className="left-nav">
<Link to="/"><Image src={Logo} alt="project logo"height="90%" width="80%" /></Link> <Link to="/"><Image src={Logo} alt="project logo"height="110%" width="55%" /></Link>
</Box> </Box>
<Spacer /> <Spacer />
<Flex className="right-nav"> <HStack className="right-nav" spacing="1px">
<Link className="nav-link" to="/account">{userIcon}</Link> <Box><button
<Button // p={2}
p={2} // size="sm"
size="sm" // color="white"
color="white" // fontWeight="bold"
fontWeight="bold" // borderRadius="sm"
borderRadius="sm" // bgGradient="linear(to-r, teal.500,blue.500)"
bgGradient="linear(to-r, teal.500,blue.500)" // _hover={{
_hover={{ // bgGradient: "linear(to-r, blue.500, yellow.500)",
bgGradient: "linear(to-r, blue.500, yellow.500)", // }}
}} >
><Link to="/orders">Orders</Link></Button> <Link to="/orders">Orders</Link></button></Box>
<Button <Box><span>|</span></Box>
p={2} <Box><button
size="sm" // p={2}
color="white" // size="sm"
fontWeight="bold" // color="white"
borderRadius="sm" // fontWeight="bold"
bgGradient="linear(to-r, teal.500,blue.500)" // borderRadius="sm"
_hover={{ // bgGradient="linear(to-r, teal.500,blue.500)"
bgGradient: "linear(to-r, blue.500, yellow.500)", // _hover={{
}} // bgGradient: "linear(to-r, blue.500, yellow.500)",
onClick={handleAuth}>{authLinkText}</Button> // }}
</Flex> onClick={handleAuth}>{authLinkText}</button></Box>
<Box><Link className="nav-link" to="/account">{userIcon}</Link></Box>
</HStack>
</Flex> </Flex>
</div>
) )
} }
......
src/components/OrderShowDetails.tsx
View file @ c091178f
...@@ -23,12 +23,12 @@ const OrderShowDetails = (props: any) => { ...@@ -23,12 +23,12 @@ const OrderShowDetails = (props: any) => {
const itemMap = (items: Item[]) => { const itemMap = (items: Item[]) => {
return items.map((item: Item, idx: number) => { return items.map((item: Item, idx: number) => {
return ( return (
<tr key={idx}> <Tr key={idx} >
<Td >{item.itemId}</Td > <Td >{item.itemId}</Td >
<Td >{item.itemPrice}</Td > <Td >{item.itemPrice}</Td >
<Td >{item.itemQuantity}</Td > <Td >{item.itemQuantity}</Td >
<Td >{item.itemSku}</Td > <Td >{item.itemSku}</Td >
</tr> </Tr>
) )
}); });
} }
...@@ -37,19 +37,19 @@ const OrderShowDetails = (props: any) => { ...@@ -37,19 +37,19 @@ const OrderShowDetails = (props: any) => {
return ( return (
items ? items ?
<div className="table-div">
<Table variant="striped" colorScheme="messenger" size="lg"> <Table variant="striped" colorScheme="messenger" size="lg">
<Tbody> <Thead>
<Tr className="table-header"> <Tr className="table-header">
<Th fontSize="22px" color="gray">ID</Th> <Th fontSize="22px" color="gray">ID</Th>
<Th fontSize="22px" color="gray">Price</Th> <Th fontSize="22px" color="gray">Price</Th>
<Th fontSize="22px" color="gray">Quantity</Th> <Th fontSize="22px" color="gray">Quantity</Th>
<Th fontSize="22px" color="gray">SKU</Th> <Th fontSize="22px" color="gray">SKU</Th>
</Tr> </Tr>
</Thead>
<Tbody>
{itemDetails} {itemDetails}
</Tbody> </Tbody>
</Table> </Table>
</div>
: :
<div className="Order without items"> <div className="Order without items">
This order didn't contain any items. This order didn't contain any items.
......
src/index.css
View file @ c091178f
...@@ -15,46 +15,73 @@ code { ...@@ -15,46 +15,73 @@ code {
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
} }
html, body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
min-height: calc(100vh - 70px);
}
/* homepage */ /* homepage */
.homepage { .homepage {
padding: 200px 0; padding: 200px 0;
} }
/* .svg-inline--fa {
display: inline-block;
font-size: 24px;
height: 1.7em;
overflow: visible;
vertical-align: -0.325em;
} */
/* header */ /* header */
.header { .header {
border-bottom: 1.5px solid orange; border-top: 1.5px solid rgba(80, 76, 69, 0.603);
background-color: rgba(216, 130, 32, 0.404);
height: 60px;
} }
.left-nav { .left-nav {
padding: 10px 0px 0px 50px; padding: 0 0 0 40px;
/* background-color: blueviolet; */
} }
.right-nav { .right-nav {
padding: 30px 120px 0px 0px; padding: 30px 70px 0px 0px;
/* background-color: rgb(109, 109, 204); */
align-items: center;
align-content: center;
} }
.right-nav Button { .right-nav button {
background-color: rgb(235, 221, 178); background-color: transparent;
margin-right: 15px; margin-right: 15px;
margin-top: 4px; margin-top: 4px;
} }
.right-nav span {
margin-left: 10px;
margin-right: 25px;
font-weight: 600;
}
.chakra-stack.right-nav.css-193rmy8 {
margin-bottom: 50%;
}
.nav-link { .nav-link {
margin-right: 15px; margin-right: 15px;
margin-left: 15px;
} }
...@@ -62,20 +89,42 @@ code { ...@@ -62,20 +89,42 @@ code {
/* body */ /* body */
.body-div { .content {
padding-top: 50px; flex: 1 0 auto;
} }
.search-div { .search-div {
padding: 5px; padding: 2px;
} }
.searchbar { /* .searchbar {
width: 300px; width: 220px;
margin-right: 150px; margin-right: 150px;
border: 1px solid blue; border: 1px solid blue;
border-radius: 2px; border-radius: 2px;
} */
input[type=text] {
width: 220px;
border: 2px solid rgb(184, 180, 180);
border-radius: 4px;
font-size: 14px;
background-color: white;
background-image: url('./img/searchicon.png');
background-size: 18px;
background-position: 10px 8px;
background-repeat: no-repeat;
padding: 12px 20px 12px 40px;
transition: width 0.4s ease-in-out;
height: 35px;
}
input[type=text]:focus {
width: 100%;
} }
...@@ -83,8 +132,8 @@ code { ...@@ -83,8 +132,8 @@ code {
outline: none; outline: none;
} }
.table-div { .body-content-div {
padding: 150px; padding: 124px;
padding-top: 20px; padding-top: 20px;
} }
...@@ -97,12 +146,13 @@ code { ...@@ -97,12 +146,13 @@ code {
} }
.show-div { .show-div {
padding: 80px 150px; padding: 80px 100px;
} }
.show-table { .show-table {
border: 1px solid rgb(110, 106, 106); border: 1px solid rgb(110, 106, 106);
/* padding: 0 10px 15px 10px; */ padding: 0 10px 15px 10px;
border-radius: 2px; border-radius: 2px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
} }
...@@ -115,7 +165,7 @@ code { ...@@ -115,7 +165,7 @@ code {
.account { .account {
padding: 250px 0; padding: 50px 0;
} }
...@@ -123,6 +173,9 @@ code { ...@@ -123,6 +173,9 @@ code {
/* footer */ /* footer */
.footer { .footer {
padding: 10px 0; padding: 5px 0;
border-top: 1.5px solid orange; border-bottom: 1.5px solid rgba(80, 76, 69, 0.603);
background-color: rgba(216, 130, 32, 0.404);
flex-shrink: 0;
font-size: 12px;
} }
\ No newline at end of file
src/pages/AccountPage.tsx
View file @ c091178f
import { Box, Avatar, Center } from '@chakra-ui/react' import { Box, Avatar, Center, VStack, StackDivider, Spacer, Flex } from '@chakra-ui/react'
import {useGoogleAuth} from 'hooks' import {useGoogleAuth} from 'hooks'
const AccountPage = () => { const AccountPage = () => {
const { manager } = useGoogleAuth(); const { manager } = useGoogleAuth();
return ( return (
<Center className="account"> <Center className="account">
<Box> <Flex>
<Box> <Box w="170px" h="10">
<Avatar name={manager.firstName + " " + manager.lastName} size="2xl" src={manager.imageUrl} alt="profile" /> <Avatar name={manager.firstName + " " + manager.lastName} size="2xl" src={manager.imageUrl} alt="profile" />
</Box> </Box>
<Box> <Spacer />
Email: {manager.email} <Box w="270px" >
<VStack
divider={<StackDivider borderColor="gray.200" />}
spacing={4}
align="stretch"
>
<Box h="40px" // p={2}
size="sm"
color="white"
fontWeight="bold"
borderRadius="sm"
bgGradient="linear(to-r, teal.500,blue.500)"
// _hover={{
// bgGradient: "linear(to-r, orange.500, green.500)",
// }}
>Email: {manager.email }
</Box> </Box>
<Box> <Box h="40px"
First Name: {manager.firstName} size="sm"
color="white"
fontWeight="bold"
borderRadius="sm"
bgGradient="linear(to-r, blue.500,yellow.500)"
// _hover={{
// bgGradient: "linear(to-r, blue.500, yellow.500)",
// }}>
>First Name: {manager.firstName}
</Box> </Box>
<Box> <Box h="40px"
Last Name: {manager.lastName} size="sm"
color="white"
fontWeight="bold"
borderRadius="sm"
bgGradient="linear(to-r, teal.500,purple.400)"
// _hover={{
// bgGradient: "linear(to-r, blue.500, yellow.500)",
// }}>
>Last Name: {manager.lastName}
</Box> </Box>
</VStack>
</Box> </Box>
</Flex>
</Center> </Center>
) )
} }
......
src/pages/OrderIndexPage.tsx
View file @ c091178f
...@@ -19,11 +19,12 @@ const OrderIndexPage = () => { ...@@ -19,11 +19,12 @@ const OrderIndexPage = () => {
const [orderDetailsArr, setOrderDetailsArr] = useState<any>([]) const [orderDetailsArr, setOrderDetailsArr] = useState<any>([])
const orderDetailsArrCreator = (orders: Order[]) => { const orderDetailsArrCreator = (orders: Order[]) => {
return orders.map((order: Order, idx: any) => { return orders.map((order: Order, idx: any) => {
return <Tr key={idx}><OrderDetails return <Tr key={idx}>
<OrderDetails
date={new Date(order.orderCreatedAt).toLocaleDateString()} date={new Date(order.orderCreatedAt).toLocaleDateString()}
orderNumber={order.id} orderNumber={order.id}
status={order.orderStatus} status={order.orderStatus}/>
/></Tr> </Tr>
}) })
} }
...@@ -56,12 +57,11 @@ const OrderIndexPage = () => { ...@@ -56,12 +57,11 @@ const OrderIndexPage = () => {
} }
return ( return (
<div className="body-div"> <div className="body-content-div">
<div className="table-div">
<div className="search-div"> <div className="search-div">
<input <input
type="text" type="text"
placeholder=" Search by Order Number" placeholder="Search Order Number"
value={searchInput} value={searchInput}
onChange={handleChange} onChange={handleChange}
onKeyDown={handleChange} onKeyDown={handleChange}
...@@ -85,7 +85,6 @@ const OrderIndexPage = () => { ...@@ -85,7 +85,6 @@ const OrderIndexPage = () => {
</Table> </Table>
</div> </div>
</div> </div>
</div>
) )
} }
......
src/router/MainRouter.tsx
View file @ c091178f
...@@ -11,8 +11,9 @@ const MainRouter: React.FC = () => { ...@@ -11,8 +11,9 @@ const MainRouter: React.FC = () => {
<StyleProvider> <StyleProvider>
<BrowserRouter> <BrowserRouter>
<GoogleAuthProvider> <GoogleAuthProvider>
<body>
<Nav /> <Nav />
<main> <main className="content">
<Switch> <Switch>
<PrivateRoute path="/account" component={AccountPage} /> <PrivateRoute path="/account" component={AccountPage} />
<PublicRoute exact path="/" component={HomePage} /> <PublicRoute exact path="/" component={HomePage} />
...@@ -22,6 +23,7 @@ const MainRouter: React.FC = () => { ...@@ -22,6 +23,7 @@ const MainRouter: React.FC = () => {
</Switch> </Switch>
</main> </main>
<Footer /> <Footer />
</body>
</GoogleAuthProvider> </GoogleAuthProvider>
</BrowserRouter> </BrowserRouter>
......
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