🚧 Add more styling to index order page

src/components/Footer.tsx

+import React from 'react'
+import { Flex, Spacer  } from "@chakra-ui/react"
+
+const Footer = () => {
+    return (
+        <Flex justify="center" className="footer">
+            Copyright © All Rights Reserved
+        </Flex>
+    )
+}
+
+export default Footer

src/components/Nav.tsx

@@ -6,24 +6,44 @@ import { faUser } from '@fortawesome/free-solid-svg-icons'
 import { Box, Heading, Flex, Spacer, Button, Image, Avatar } from "@chakra-ui/react"
 import Logo from '../img/logo.png'
 
+
 const Nav = () => {
     const { isSignedIn, signOut, signIn, manager } = useGoogleAuth();
     const handleAuth = () => { isSignedIn ? signOut() : signIn();}
     const authLinkText = useMemo(() => isSignedIn ? "Logout" : "Login", [isSignedIn]);
     const userIcon = isSignedIn ? 
-    <Avatar name={manager.firstName + " " + manager.lastName} boxSize="40px" borderRadius="full"  src={manager.imageUrl} alt="profile"/> : 
-    <FontAwesomeIcon icon={faUser} />
+    <Avatar name={manager.firstName + " " + manager.lastName} boxSize="40px" borderRadius="full"  src={manager.imageUrl} alt="profile"/> : null
 
     return (
-        <Flex>
+        <Flex className="header">
             <Box className="left-nav">
-                <Link to="/"><Image src={Logo} alt="project logo"/></Link>
+                <Link to="/"><Image src={Logo} alt="project logo" height="90%" width="80%" /></Link>
             </Box>
             <Spacer />
             <Flex className="right-nav">
                 <Link className="nav-link" to="/account">{userIcon}</Link>
-                <Button><Link to="/orders">All orders</Link></Button>
-                <Button onClick={handleAuth}>{authLinkText}</Button>
+                <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>
+                <Button
+                    p={2}
+                    size="sm"
+                    color="white"
+                    fontWeight="bold"
+                    borderRadius="sm"
+                    bgGradient="linear(to-r, teal.500,blue.500)"
+                    _hover={{
+                        bgGradient: "linear(to-r, yellow.500, blue.500)",
+                    }}
+                    onClick={handleAuth}>{authLinkText}</Button>
             </Flex>
         </Flex>
     )

src/components/OrderShowDetails.tsx

@@ -40,11 +40,11 @@ const OrderShowDetails = (props: any) => {
             <div className="table-div">
                 <Table variant="striped" colorScheme="messenger" size="lg">
                     <Tbody>
-                        <Tr>
-                            <Th>ID</Th>
-                            <Th>Price</Th>
-                            <Th>Quantity</Th>
-                            <Th>SKU</Th>
+                        <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>

src/components/index.ts

 export {default as AccountForm} from './AccountForm'
 export {default as LoginForm} from './LoginForm'
 export {default as Nav} from './Nav'
+export {default as Footer} from './Footer'
 export {default as OrderDetails} from './OrderDetails'
 export {default as SignUpForm} from './SignUpForm'
 export {default as OrderShowDetails} from './OrderShowDetails'

src/index.css

@@ -7,74 +7,35 @@ body {
   -moz-osx-font-smoothing: grayscale;
   background-color: gray;
   color: ghostwhite;
+  letter-spacing: 1px;
 }
 
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
 
+/* homepage */
 
-
-/* tbody, tr, th, span, td {
-  border: 2px solid orangered;
-}
-
-span {
-  display: flex;
-  justify-content: space-around;
-}
-
-header {
-  display: flex;
-  height: 50px;
-  background-color: gray;
-}
-
-ul {
-  list-style-type: none;
-  display: flex;
-  margin: auto;
-  height: 100%;
+.homepage {
+  padding: 200px 0;
 }
 
-table {
-  width: 100%;
-  padding: 20px;
-}
-
-td {
-  height: 100px;
-}
+/* .svg-inline--fa {
+  display: inline-block;
+  font-size: 24px;
+  height: 1.7em;
+  overflow: visible;
+  vertical-align: -0.325em;
+} */
 
-li {
-  border-left: 2px solid green;
-  margin: 0;
-  height: 100%;
-  display: flex;
-  align-items: center;
-}
 
-.order-management {
-  padding-left: -30px;
-  padding-right: 75px;
-  margin: auto;
-  justify-content: left;
-}
+/* header */
 
-.nav-link {
-  margin: auto;
-  padding: 10px;
-  text-decoration: none;
-  color: ghostwhite;
-  background-color: lightslategray;
-  
+.header {
+  border-bottom: 1.5px solid orange;
 }
 
-.nav-link:hover {
-  background-color: black;
-} */
 
 .left-nav {
   padding: 10px 0px 0px 50px;
@@ -85,12 +46,22 @@ li {
   padding: 30px 120px 0px 0px;
 }
 
+.right-nav Button {
+  background-color: rgb(235, 221, 178);
+  margin-right: 15px;
+  margin-top: 4px;
+}
+
 
 .nav-link {
   margin-right: 15px;
 }
 
 
+
+
+/* body */
+
 .table-div {
   padding: 150px;
   padding-top: 80px;
@@ -112,4 +83,19 @@ li {
   /* 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 {
+  background-color: rgba(228, 158, 67, 0.5);
+  color: black;
+}
+
+
+
+/* footer */
+
+.footer {
+  padding: 10px 0;
+  border-top: 1.5px solid orange;
 }
\ No newline at end of file

src/pages/AccountPage.tsx

@@ -6,7 +6,7 @@ const AccountPage = () => {
         <Center>
             <Box>
                 <Box>
-                    <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>
                     Email: {manager.email}

src/pages/HomePage.tsx

@@ -3,7 +3,7 @@ import { Box, Center, Text, Heading } from '@chakra-ui/react'
 
 const HomePage = () => {
     return (
-        <Center>
+        <Center className="homepage">
             <Box>
                 <Box>
                     <Text>Welcome to the Order Management System Console</Text>

src/pages/OrderIndexPage.tsx

@@ -8,7 +8,7 @@ import {
     Tbody,
     Tr,
     Th,
-    Input
+    Input,
   } from "@chakra-ui/react"
 
 const OrderIndexPage = () => {
@@ -68,12 +68,12 @@ const OrderIndexPage = () => {
             </Input>
             <br/>
             <div className="index-table">
-                <Table variant="striped" colorScheme="messenger" size="md">
+                <Table variant="striped" colorScheme="messenger" size="sm">
                     <Thead>
-                        <Tr>
-                            <Th>Order number</Th>
-                            <Th>Order Date</Th>
-                            <Th>Order Status</Th>
+                        <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>

src/router/MainRouter.tsx

 import { BrowserRouter, Switch } from "react-router-dom";
 
-import { Nav } from 'components'
+import { Nav, Footer } from 'components'
 import { AccountPage, HomePage, OrderIndexPage, OrderShowPage } from 'pages';
 import { GoogleAuthProvider } from 'hooks'
 import { PublicRoute, PrivateRoute } from 'router'
@@ -21,6 +21,7 @@ const MainRouter: React.FC = () => {
                             {/* <Route component={NotFoundPage} /> */}
                         </Switch>
                     </main>
+                    <Footer />
                 </GoogleAuthProvider>
             </BrowserRouter>
 

src/styles/StyleProvider.tsx

 import { ChakraProvider } from "@chakra-ui/react"
-import {Nav} from 'components'