💄 Style header with proper format and fix show page style

src/components/Nav.tsx

@@ -3,7 +3,7 @@ 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 } from "@chakra-ui/react"
+import { Box, Heading, Flex, Spacer, Button, Image, Avatar, HStack } from "@chakra-ui/react"
 import Logo from '../img/logo.png'
 
 
@@ -17,13 +17,12 @@ const Nav = () => {
     return (
         <div >
             <Flex className="header">
-                {/* <Box className="left-nav">
-                    <Link to="/"><Image src={Logo} alt="project logo"height="90%" width="80%" /></Link>
-                </Box> */}
+                <Box className="left-nav">
+                    <Link to="/"><Image src={Logo} alt="project logo"height="110%" width="55%" /></Link>
+                </Box>
                 <Spacer />
-                <Flex className="right-nav">
-                    <Link className="nav-link" to="/account">{userIcon}</Link>
-                    <button
+                <HStack className="right-nav" spacing="1px">
+                    <Box><button
                         // p={2}
                         // size="sm"
                         // color="white"
@@ -34,8 +33,9 @@ const Nav = () => {
                         //     bgGradient: "linear(to-r, blue.500, yellow.500)",
                         // }}
                         >
-                        <Link to="/orders">Orders</Link></button>
-                    <button
+                        <Link to="/orders">Orders</Link></button></Box>
+                    <Box><span>|</span></Box>
+                    <Box><button
                         // p={2}
                         // size="sm"
                         // color="white"
@@ -45,9 +45,9 @@ const Nav = () => {
                         // _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>
         </div>
     )

src/components/OrderShowDetails.tsx

@@ -23,12 +23,12 @@ const OrderShowDetails = (props: any) => {
     const itemMap = (items: Item[]) => {
         return items.map((item: Item, idx: number) => {
             return (
-                <tr key={idx}>
+                <Tr key={idx} >
                     <Td >{item.itemId}</Td >
                     <Td >{item.itemPrice}</Td >
                     <Td >{item.itemQuantity}</Td >
                     <Td >{item.itemSku}</Td >
-                </tr>
+                </Tr>
             )
         });
     }
@@ -37,19 +37,19 @@ const OrderShowDetails = (props: any) => {
     
     return (
         items ? 
-            <div className="table-div">
-                <Table variant="striped" colorScheme="messenger" size="lg">
-                    <Tbody>
-                        <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>
-                        </Tr>
-                        {itemDetails}
-                    </Tbody>
-                </Table>
-            </div>
+            <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>
+                    </Tr>
+                </Thead>
+                <Tbody>
+                    {itemDetails}
+                </Tbody>
+            </Table>
         :
             <div className="Order without items">
                 This order didn't contain any items.

src/index.css

@@ -37,42 +37,51 @@ body {
   padding: 200px 0;
 }
 
-/* .svg-inline--fa {
-  display: inline-block;
-  font-size: 24px;
-  height: 1.7em;
-  overflow: visible;
-  vertical-align: -0.325em;
-} */
 
 
 /* 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 {
-  padding: 10px 0px 0px 50px;
+  padding: 0 0 0 40px;
+  /* background-color: blueviolet; */
 }
 
 
 .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 {
-  background-color: rgb(235, 221, 178);
+.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%;
+}
+
 
 .nav-link {
   margin-right: 15px;
+  margin-left: 15px;
 }
 
 
@@ -84,9 +93,6 @@ body {
   flex: 1 0 auto;
 }
 
-.body-div {
-  padding-top: 50px;
-}
 
 
 .search-div {
@@ -126,8 +132,8 @@ input[type=text]:focus {
   outline: none;
 }
 
-.table-div {
-  padding: 120px;
+.body-content-div {
+  padding: 124px;
   padding-top: 20px;
 }
 
@@ -140,15 +146,16 @@ input[type=text]:focus {
 }
 
 .show-div {
-  padding: 80px 150px;
+  padding: 80px 100px;
 }
 
+
 .show-table {
   border: 1px solid rgb(110, 106, 106);
-  /* padding: 0 10px 15px 10px; */
+  padding: 0 10px 15px 10px;
   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);
-}
+} 
 
 
 .table-header {
@@ -167,7 +174,7 @@ input[type=text]:focus {
 
 .footer {
   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;

src/pages/OrderIndexPage.tsx

@@ -19,11 +19,12 @@ const OrderIndexPage = () => {
     const [orderDetailsArr, setOrderDetailsArr] = useState<any>([])
     const orderDetailsArrCreator = (orders: Order[]) => {
         return orders.map((order: Order, idx: any) => {
-            return <Tr key={idx}><OrderDetails
-            date={new Date(order.orderCreatedAt).toLocaleDateString()} 
-            orderNumber={order.id}
-            status={order.orderStatus}
-            /></Tr>
+            return <Tr key={idx}>
+                <OrderDetails
+                    date={new Date(order.orderCreatedAt).toLocaleDateString()} 
+                    orderNumber={order.id}
+                    status={order.orderStatus}/>
+            </Tr>
         })
     }
 
@@ -56,35 +57,33 @@ const OrderIndexPage = () => {
     }
 
     return (
-        <div className="body-div">
-            <div className="table-div">
-                <div className="search-div">
-                    <input 
-                        type="text" 
-                        placeholder="Search Order Number"
-                        value={searchInput} 
-                        onChange={handleChange} 
-                        onKeyDown={handleChange}
-                        className="searchbar"
-                        >
-                    </input>
-                </div>
-            <br/>
-                <div className="index-table">
-                    <Table variant="striped" colorScheme="messenger" size="sm">
-                        <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>
-                            </Tr>
-                        </Thead>
-                        <Tbody>
-                            { orderDetailsArr }
-                        </Tbody>
-                    </Table>
-                </div>
-        </div>
+        <div className="body-content-div">
+            <div className="search-div">
+                <input 
+                    type="text" 
+                    placeholder="Search Order Number"
+                    value={searchInput} 
+                    onChange={handleChange} 
+                    onKeyDown={handleChange}
+                    className="searchbar"
+                    >
+                </input>
+            </div>
+        <br/>
+            <div className="index-table">
+                <Table variant="striped" colorScheme="messenger" size="sm">
+                    <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>
+                        </Tr>
+                    </Thead>
+                    <Tbody>
+                        { orderDetailsArr }
+                    </Tbody>
+                </Table>
+            </div>
         </div>
     )
 }