Merge branch 'styling' into 'dev'

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

See merge request !19

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",

src/components/Nav.tsx

-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

@@ -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/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;
 }
 
 

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>

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} />

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"