Skip to content

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

Merge branch 'styling' into 'dev' 

💄 Change user account to display drawer [@svalencia]

See merge request !18
parents c091178f 1a7e862a
Hide whitespace changes
Inline Side-by-side
Showing with 85 additions and 89 deletions
src/components/Nav.tsx
View file @ 9bbf8248
import React, { useMemo} from 'react'
import React, { useMemo, useRef} from 'react'
import { Link } from 'react-router-dom'
import {useGoogleAuth} from 'hooks'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faUser } from '@fortawesome/free-solid-svg-icons'
import { Box, Heading, Flex, Spacer, Button, Image, Avatar, HStack } from "@chakra-ui/react"
import { AccountPage } from 'pages'
import { Box, Heading, Flex, Spacer, Button, Image, Avatar, HStack, Input } from "@chakra-ui/react"
import Logo from '../img/logo.png'
import {
Drawer,
DrawerBody,
DrawerHeader,
DrawerOverlay,
DrawerContent,
DrawerCloseButton,
useDisclosure
} from "@chakra-ui/react"
const Nav = () => {
const { isSignedIn, signOut, signIn, manager } = useGoogleAuth();
const handleAuth = () => { isSignedIn ? signOut() : signIn();}
const authLinkText = useMemo(() => isSignedIn ? "Logout" : "Login", [isSignedIn]);
const { isOpen, onOpen, onClose } = useDisclosure();
const btnRef = useRef<HTMLButtonElement>(null);
const userIcon = isSignedIn ?
<Avatar name={manager.firstName + " " + manager.lastName} boxSize="40px" borderRadius="full" src={manager.imageUrl} alt="profile"/> : null
return (
<div >
<Flex className="header">
<Box className="left-nav">
<Link to="/"><Image src={Logo} alt="project logo"height="110%" width="55%" /></Link>
</Box>
<Spacer />
<HStack className="right-nav" spacing="1px">
<Box><button
// p={2}
// size="sm"
// color="white"
// fontWeight="bold"
// borderRadius="sm"
// bgGradient="linear(to-r, teal.500,blue.500)"
// _hover={{
// bgGradient: "linear(to-r, blue.500, yellow.500)",
// }}
>
<Link to="/orders">Orders</Link></button></Box>
<Box><span>|</span></Box>
<Box><button
// p={2}
// size="sm"
// color="white"
// fontWeight="bold"
// borderRadius="sm"
// bgGradient="linear(to-r, teal.500,blue.500)"
// _hover={{
// bgGradient: "linear(to-r, blue.500, yellow.500)",
// }}
onClick={handleAuth}>{authLinkText}</button></Box>
<Box><Link className="nav-link" to="/account">{userIcon}</Link></Box>
</HStack>
</Flex>
</div>
<Flex className="header">
<Box className="left-nav">
<Link to="/"><Image src={Logo} alt="project logo"height="110%" width="55%" /></Link>
</Box>
<Spacer />
<HStack className="right-nav" spacing="1px">
<Box><button>
<Link to="/orders">Orders</Link></button></Box>
<Box><span>|</span></Box>
<Box><button onClick={handleAuth}>{authLinkText}</button></Box>
<Box><button ref={btnRef} onClick={onOpen}>{userIcon}</button></Box>
<Drawer
isOpen={isOpen}
placement="right"
onClose={onClose}
finalFocusRef={btnRef}
>
<DrawerOverlay />
<DrawerContent>
<DrawerCloseButton size="sm"/>
<DrawerHeader align="center" >User Account</DrawerHeader>
<DrawerBody>
<AccountPage />
</DrawerBody>
</DrawerContent>
</Drawer>
</HStack>
</Flex>
)
}
......
src/index.css
View file @ 9bbf8248
......@@ -159,22 +159,36 @@ input[type=text]:focus {
.table-header {
background-color: rgba(228, 158, 67, 0.5);
background-color: rgba(236, 157, 65, 0.534);
color: black;
}
/* User Drawer */
.account {
padding: 50px 0;
padding: 40px 0;
border-top: 1px solid rgba(68, 64, 64, 0.363);
border-bottom: 1px solid rgba(68, 64, 64, 0.363);
}
/* .user-name {
padding-top: 3.5px;
} */
/* .chakra-stack__divider.css-vhtjkn {
height: -140px;
} */
/* footer */
.footer {
padding: 5px 0;
border-bottom: 1.5px solid rgba(80, 76, 69, 0.603);
border-bottom: 2.5px solid rgba(80, 76, 69, 0.603);
background-color: rgba(216, 130, 32, 0.404);
flex-shrink: 0;
font-size: 12px;
......
src/pages/AccountPage.tsx
View file @ 9bbf8248
......@@ -3,55 +3,31 @@ import {useGoogleAuth} from 'hooks'
const AccountPage = () => {
const { manager } = useGoogleAuth();
return (
<Center className="account">
<Flex>
<Box w="170px" h="10">
<Avatar name={manager.firstName + " " + manager.lastName} size="2xl" src={manager.imageUrl} alt="profile" />
<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 }
</Box>
<Spacer />
<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 h="40px"
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 h="40px"
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>
</VStack>
</Box>
</Flex>
</Center>
</VStack>
</Box>
</VStack>
)
}
......
src/router/MainRouter.tsx
View file @ 9bbf8248
......@@ -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} />
......
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