[AFP-98} 🚧 Style show page [@svalencia]

src/components/Nav.tsx

@@ -18,11 +18,11 @@ const Nav = () => {
 
     return (
         <Flex>
-            <Box>
+            <Box className="left-nav">
                 <Link to="/"><img src={Logo}/></Link>
             </Box>
             <Spacer />
-            <Box>
+            <Box className="right-nav">
                 <Link className="nav-link" to="/account">{userIcon}</Link>
                 <Button><Link className="nav-link" to="/orders">All orders</Link></Button>
                 <Button onClick={handleAuth}>{authLinkText}</Button>

src/index.css

@@ -76,6 +76,15 @@ li {
   background-color: black;
 } */
 
+.left-nav {
+  padding: 10px 0px 0px 50px;
+}
+
+
+.right-nav {
+  padding: 30px 120px 0px 0px;
+}
+
 
 .table-div {
   padding: 150px;
@@ -87,4 +96,15 @@ 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);
+}
+
+.show-div {
+  padding: 80px 150px;
+}
+
+.show-table {
+  border: 1px solid rgb(110, 106, 106);
+  /* 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);
 }
\ No newline at end of file

src/pages/OrderShowPage.tsx

@@ -5,8 +5,8 @@ import { Order, Item } from 'Order';
 import { useOrder } from 'hooks'
 import { OrderService } from 'services'
 import {
-    Wrap,
-    WrapItem
+    Flex,
+    Box
   } from "@chakra-ui/react"
 
 
@@ -32,15 +32,20 @@ const OrderShowPage = (props: any) => {
     }
     
     return (
-        <div className="table-div">
-            <Wrap>
-                <WrapItem>Order Date: {order.orderCreatedAt}</WrapItem>
-                <WrapItem>Order Number: {order.id}</WrapItem>
-                <WrapItem>Order Status: {order.orderStatus}</WrapItem>
-            </Wrap>
-            
-            <OrderShowDetails items={order.orderItems}/>
-        </div>
+        <>
+            <div className="show-div">
+                <Flex justify="space-around">
+                    <Box><strong>Order Date:</strong> {order.orderCreatedAt}</Box>
+                    <Box><strong>Order Number:</strong> {order.id}</Box>
+                    <Box><strong>Order Status:</strong> {order.orderStatus}</Box>
+                </Flex>
+                <br/>
+                <div className="show-table">
+                    <OrderShowDetails items={order.orderItems}/>
+                </div>
+                
+            </div>
+        </>
     )
 }