[AFP-98] 🚧 Fix import logo [@svalencia]

package.json

@@ -6,6 +6,9 @@
     "@chakra-ui/react": "^1.6.0",
     "@emotion/react": "^11",
     "@emotion/styled": "^11",
+    "@fortawesome/fontawesome-svg-core": "^1.2.35",
+    "@fortawesome/free-solid-svg-icons": "^5.15.3",
+    "@fortawesome/react-fontawesome": "^0.1.14",
     "@hookform/resolvers": "^2.4.0",
     "@reduxjs/toolkit": "^1.5.1",
     "@testing-library/jest-dom": "^5.11.4",

src/components/Nav.tsx

 import React, { useMemo} 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 } from "@chakra-ui/react"
+
+
 const Nav = () => {
     const { isSignedIn, signOut, signIn } = useGoogleAuth();
 
@@ -8,16 +13,22 @@ const Nav = () => {
 
     const authLinkText = useMemo(() => isSignedIn ? "Logout" : "Login", [isSignedIn]);
 
+    const userIcon = <FontAwesomeIcon icon={faUser} />
+
+    const logo =  require("../img/logo.png");
 
     return (
-        <header className="nav-bar" role="navigation">
-            <div className="order-management">Order Management Console PRO</div>
-            <ul className="nav-list">
-                <li><Link className="nav-link" to="/orders">All orders</Link></li>
-                <li><Link className="nav-link" to="/account">(account logo here)</Link></li>
-                <li><button onClick={handleAuth}>{authLinkText}</button></li>
-            </ul>
-        </header>
+        <Flex>
+            <Box>
+                <Heading>logo</Heading>
+            </Box>
+            <Spacer />
+            <Box>
+                <Link className="nav-link" to="/account">{userIcon}</Link>
+                <Button><Link className="nav-link" to="/orders">All orders</Link></Button>
+                <Button onClick={handleAuth}>{authLinkText}</Button>
+            </Box>
+        </Flex>
     )
 }
 

src/index.css

@@ -73,3 +73,8 @@ li {
 .nav-link:hover {
   background-color: black;
 } */
+
+
+.table-div {
+  padding-top: 80px;
+}
\ No newline at end of file

src/pages/OrderIndexPage.tsx

@@ -27,8 +27,8 @@ const OrderIndexPage = () => {
     })
 
     return (
-        <>
-            <Table variant="striped" colorScheme="teal" size="lg">
+        <div className="table-div">
+            <Table variant="striped" colorScheme="linkedin" size="lg">
                 <Tbody>
                     <Tr>
                         <Th>Order number</Th>
@@ -39,7 +39,7 @@ const OrderIndexPage = () => {
                 </Tbody>
             </Table>
             <SearchOrder orders={orders}/>
-        </>
+        </div>
     )
 }
 

src/styles/StyleProvider.tsx

@@ -15,12 +15,14 @@ const colors = {
 
 
 
+
+
 const theme = extendTheme({ colors })
 
-const StyleProvider: React.FC = ({children}) => {
+const StyleProvider: React.FC = ({ children }) => {
     return (
         <ChakraProvider theme={theme}>
-            {children}
+            { children }
         </ChakraProvider>
     )
 }

yarn.lock

@@ -1817,6 +1817,32 @@
     minimatch "^3.0.4"
     strip-json-comments "^3.1.1"
 
+"@fortawesome/fontawesome-common-types@^0.2.35":
+  version "0.2.35"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.35.tgz#01dd3d054da07a00b764d78748df20daf2b317e9"
+  integrity sha512-IHUfxSEDS9dDGqYwIW7wTN6tn/O8E0n5PcAHz9cAaBoZw6UpG20IG/YM3NNLaGPwPqgjBAFjIURzqoQs3rrtuw==
+
+"@fortawesome/fontawesome-svg-core@^1.2.35":
+  version "1.2.35"
+  resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-1.2.35.tgz#85aea8c25645fcec88d35f2eb1045c38d3e65cff"
+  integrity sha512-uLEXifXIL7hnh2sNZQrIJWNol7cTVIzwI+4qcBIq9QWaZqUblm0IDrtSqbNg+3SQf8SMGHkiSigD++rHmCHjBg==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.35"
+
+"@fortawesome/free-solid-svg-icons@^5.15.3":
+  version "5.15.3"
+  resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.3.tgz#52eebe354f60dc77e0bde934ffc5c75ffd04f9d8"
+  integrity sha512-XPeeu1IlGYqz4VWGRAT5ukNMd4VHUEEJ7ysZ7pSSgaEtNvSo+FLurybGJVmiqkQdK50OkSja2bfZXOeyMGRD8Q==
+  dependencies:
+    "@fortawesome/fontawesome-common-types" "^0.2.35"
+
+"@fortawesome/react-fontawesome@^0.1.14":
+  version "0.1.14"
+  resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.14.tgz#bf28875c3935b69ce2dc620e1060b217a47f64ca"
+  integrity sha512-4wqNb0gRLVaBm/h+lGe8UfPPivcbuJ6ecI4hIgW0LjI7kzpYB9FkN0L9apbVzg+lsBdcTf0AlBtODjcSX5mmKA==
+  dependencies:
+    prop-types "^15.7.2"
+
 "@hapi/address@2.x.x":
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.1.4.tgz#5d67ed43f3fd41a69d4b9ff7b56e7c0d1d0a81e5"