Match show page to order index page

src/components/OrderShowDetails.tsx

@@ -37,13 +37,13 @@ const OrderShowDetails = (props: any) => {
     
     return (
         items ? 
-            <Table variant="striped" colorScheme="messenger" size="lg">
+            <Table variant="striped" colorScheme="gray" size="md">
                 <Thead >
                     <Tr className="table-header" >
-                        <Th fontSize="21px" color="rgba(255, 166, 0, 0.897)">ID</Th>
-                        <Th fontSize="21px" color="rgba(255, 166, 0, 0.897)">Price</Th>
-                        <Th fontSize="21px" color="rgba(255, 166, 0, 0.897)">Quantity</Th>
-                        <Th fontSize="21px" color="rgba(255, 166, 0, 0.897)">SKU</Th>
+                        <Th fontSize="16px" >Item ID</Th>
+                        <Th fontSize="16px" >Price</Th>
+                        <Th fontSize="16px" >Quantity</Th>
+                        <Th fontSize="16px" >SKU</Th>
                     </Tr>
                 </Thead>
                 <Tbody>

src/index.css

@@ -90,27 +90,31 @@ input[type=text]:focus {
 
 .index-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);
   padding-top: 10px;
 }
 
-.show-div {
+/* .show-div {
   padding: 80px 100px;
+} */
+
+.show-div-header {
+  padding-top: 20px;
 }
 
 
 .show-table {
-  border: 1px solid rgb(110, 106, 106);
-  padding: 0 10px 15px 10px;
+  /* 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);
 } 
 
 
 .table-header {
-  background-color: #00557ddc;
+  background-color: ;
 }
 
 

src/pages/OrderShowPage.tsx

@@ -6,9 +6,10 @@ import { useOrder } from 'hooks'
 import { OrderService } from 'services'
 import {
     Flex,
-    Box
+    Box,
+    Tag
   } from "@chakra-ui/react"
-
+import { tagColorMap } from '../pages/OrdersPage/index'
 
 
 const OrderShowPage = (props: any) => {
@@ -30,14 +31,16 @@ const OrderShowPage = (props: any) => {
     if (!order) {
         return(<></>);
     }
+    const statusText = order.orderStatus
     
     return (
         <>
             <div className="show-div">
-                <Flex justify="space-around">
+                <Flex justify="space-around" className="show-div-header">
                     <Box><strong>Order Date:</strong> {new Date(order.orderCreatedAt).toLocaleDateString()}</Box>
                     <Box><strong>Order Number:</strong> {order.id}</Box>
-                    <Box><strong>Order Status:</strong> {order.orderStatus}</Box>
+                    <Box><strong>Status:</strong><Tag colorScheme={tagColorMap.get(statusText.toUpperCase())}>{statusText}</Tag></Box>
+                    
                 </Flex>
                 <br/>
                 <div className="show-table">