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

src/components/OrderDetails.tsx

 import React from 'react'
 import { Link } from 'react-router-dom'
+import {
+    Table,
+    Thead,
+    Tbody,
+    Tfoot,
+    Tr,
+    Th,
+    Td,
+    TableCaption,
+    Input,
+    Wrap,
+    WrapItem
+  } from "@chakra-ui/react"
 
 
 const OrderDetails = (props: any) => {
@@ -8,9 +21,9 @@ const OrderDetails = (props: any) => {
     const status = props.status
     return (
         <>
-            <td><Link to={"/orders/" + orderNumber}>{orderNumber}</Link></td>
-            <td>{date}</td>
-            <td>{status}</td>
+            <Td><Link to={"/orders/" + orderNumber}>{orderNumber}</Link></Td>
+            <Td>{date}</Td>
+            <Td>{status}</Td>
         </>
     )
 }

src/components/OrderShowDetails.tsx

@@ -24,10 +24,10 @@ const OrderShowDetails = (props: any) => {
         return items.map((item: Item, idx: number) => {
             return (
                 <tr key={idx}>
-                    <td>{item.itemId}</td>
-                    <td>{item.itemPrice}</td>
-                    <td>{item.itemQuantity}</td>
-                    <td>{item.itemSku}</td>
+                    <Td >{item.itemId}</Td >
+                    <Td >{item.itemPrice}</Td >
+                    <Td >{item.itemQuantity}</Td >
+                    <Td >{item.itemSku}</Td >
                 </tr>
             )
         });
@@ -37,17 +37,19 @@ const OrderShowDetails = (props: any) => {
     
     return (
         items ? 
-            <Table variant="striped" colorScheme="messenger" size="lg">
-                <Tbody>
-                    <Tr>
-                        <Th>ID</Th>
-                        <Th>Price</Th>
-                        <Th>Quantity</Th>
-                        <Th>SKU</Th>
-                    </Tr>
-                    {itemDetails}
-                </Tbody>
-            </Table>
+            <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>
+                        {itemDetails}
+                    </Tbody>
+                </Table>
+            </div>
         :
             <div className="Order without items">
                 This order didn't contain any items.

src/components/SearchOrder.tsx

@@ -75,13 +75,15 @@ const SearchOrder = (props: any) => {
                 </WrapItem>
 
             </Wrap>
-            <Table variant="striped" colorScheme="messenger" size="lg">
-                <Tbody>
+            <Table variant="striped" colorScheme="messenger" size="md">
+                <Thead>
                     <Tr>
                         <Th>Order number</Th>
                         <Th>Created</Th>
                         <Th>Order Status</Th>
                     </Tr>
+                </Thead>
+                <Tbody>
                     {searchResultArr}
                 </Tbody>
             </Table>

src/pages/OrderIndexPage.tsx

@@ -30,13 +30,15 @@ const OrderIndexPage = () => {
         <div className="table-div">
             <SearchOrder orders={orders}/>
             <div className="index-table">
-                <Table variant="striped" colorScheme="messenger" size="lg">
-                    <Tbody>
+                <Table variant="striped" colorScheme="messenger" size="md">
+                    <Thead>
                         <Tr>
                             <Th>Order number</Th>
                             <Th>Created</Th>
                             <Th>Order Status</Th>
                         </Tr>
+                    </Thead>
+                    <Tbody>
                         {orderDetailsArr}
                     </Tbody>
                 </Table>

src/pages/OrderShowPage.tsx

@@ -4,6 +4,10 @@ import {OrderShowDetails} from 'components';
 import { Order, Item } from 'Order';
 import { useOrder } from 'hooks'
 import { OrderService } from 'services'
+import {
+    Wrap,
+    WrapItem
+  } from "@chakra-ui/react"
 
 
 
@@ -28,12 +32,12 @@ const OrderShowPage = (props: any) => {
     }
     
     return (
-        <div>
-            <span>
-                <h3>Order Date: {order.orderCreatedAt}</h3>
-                <h3>Order Number: {order.id}</h3>
-                <h3>Order Status: {order.orderStatus}</h3>
-            </span>
+        <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>