Skip to content

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

Merge branch 'fix-header' into 'dev' 

💄 Fix header styling, add userIcon to login and move header.css to stylesheets folder [@svalencia]

See merge request !25
parents 98f9ac9b 3aeb29ee
Hide whitespace changes
Inline Side-by-side
Showing with 89 additions and 121 deletions
src/components/Nav.tsx
View file @ 686bf130
......@@ -7,17 +7,8 @@ import { AccountPage } from 'pages'
import { Box, Heading, Flex, Spacer, Button, Image, Avatar, HStack, Input } from "@chakra-ui/react"
import AppLogo from '../img/logo.png'
import NisumLogo from '../img/nisum.jpeg'
import '../styles/stylesheets/header.css'
import {
Drawer,
DrawerBody,
DrawerHeader,
DrawerOverlay,
DrawerContent,
DrawerCloseButton,
useDisclosure
} from "@chakra-ui/react"
import {
Menu,
MenuButton,
MenuList,
......@@ -28,16 +19,17 @@ import {
MenuIcon,
MenuCommand,
MenuDivider,
useDisclosure
} from "@chakra-ui/react"
import { ChevronDownIcon } from '@chakra-ui/icons'
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 authLinkText = useMemo(() => isSignedIn ? "Logout" : <FontAwesomeIcon icon={faUser} className="user-icon"/>, [isSignedIn]);
const authMenuText = 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
......@@ -49,55 +41,33 @@ const Nav = () => {
return (
<Flex className="header" justifyContent="space-between">
<Box >
<Box paddingTop="7px" paddingLeft="3px">
<Image
mt="-4px"
src={NisumLogo}
alt="Nisum - Celebrating 20+ years logo"
height="45px"
// width="950px"
height="40px"
/>
</Box>
<Box className="center-nav" display="-ms-inline-flexbox">
<HStack>
<Link to="/"><Image src={AppLogo} alt="Order Management Console PRO logo" className="logoImg"/></Link>
<Link to="/"><Image src={AppLogo} alt="Order Management Console PRO logo" className="logo-img"/></Link>
<h1>Order Management</h1>
{/* <Link to="/"><h1>Order Management</h1></Link> */}
</HStack>
</Box>
{/* <HStack className="right-nav" spacing="1px">
<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> */}
<Box >
<Box marginTop="2.9px">
<Menu>
<MenuButton rightIcon={<ChevronDownIcon />} onClick={onOpen} width="300px" className="right-nav">
<MenuButton rightIcon={<ChevronDownIcon />} onClick={onOpen} paddingRight="10px">
<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>
<MenuItem color="black"><button onClick={handleAuth}>{authMenuText}</button></MenuItem>
</MenuList>
</Menu>
</Box>
......
src/index.css
View file @ 686bf130
index.css
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
......@@ -39,85 +43,6 @@ body {
/* header */
.header {
border-top: 1.5px solid rgba(80, 76, 69, 0.603);
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 Link {
color: red;
}
.right-nav {
margin-top: 2.5px;
}
/* .right-nav button {
background-color: transparent;
margin-right: 15px;
margin-top: 4px;
} */
/* .right-nav span {
margin-left: 10px;
margin-right: 25px;
font-weight: 600;
} */
.chakra-stack.right-nav.css-193rmy8 {
margin-bottom: 50%;
}
.chakra-menu__menu-button.css-59llwj {
/* margin-right: 500px; */
width: 250px;
}
.nav-link {
margin-right: 15px;
margin-left: 15px;
}
/* body */
......@@ -190,7 +115,7 @@ input[type=text]:focus {
/* User Drawer */
/* User Account */
.account {
padding: 40px 0;
......
src/styles/stylesheets/header.css 0 → 100644
View file @ 686bf130
.header {
border-top: 1.5px solid rgba(80, 76, 69, 0.603);
background-color: #00567D;
height: 50px;
color: #EBEBEB;
}
nisum-logo {
padding-top: 55px;
}
.header h1 {
color: #EBEBEB;
}
.header span {
color: #EBEBEB;
}
.center-nav {
padding: 0 0 0 10px;
margin-left: 40px;
}
.center-nav p {
margin-left: -250px;
}
.logo-img {
width: 150px;
height: 45px;
}
.left-nav Link {
color: red;
}
.chakra-stack.right-nav.css-193rmy8 {
margin-bottom: 50%;
}
.chakra-menu__menu-button.css-59llwj {
width: 250px;
}
.chakra-menu__menu-button.right-nav.css-1sdauq3 {
font-size: 30px;
margin-top: 8px;
}
.user-icon {
font-size: 20px;
margin-top: 9px;
}
.nav-link {
margin-right: 15px;
margin-left: 15px;
}
\ No newline at end of file
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