[AFP-98} 🚧 Continue styling order index [@svalencia]

src/components/OrderDetails.tsx

 import React from 'react'
 import { Link } from 'react-router-dom'
 
+
 const OrderDetails = (props: any) => {
     const orderNumber = props.orderNumber
     const date = props.date;

src/components/OrderShowDetails.tsx

 import React, { useState, useEffect } from 'react';
 import { Item } from 'Order';
+import {
+    Table,
+    Thead,
+    Tbody,
+    Tfoot,
+    Tr,
+    Th,
+    Td,
+    TableCaption,
+    Input,
+    Wrap,
+    WrapItem
+  } from "@chakra-ui/react"
 
 const OrderShowDetails = (props: any) => {
     const [items, setItems] = useState<Item[]>()
@@ -24,17 +37,17 @@ const OrderShowDetails = (props: any) => {
     
     return (
         items ? 
-            <table>
-                <tbody>
-                    <tr>
-                        <th>ID</th>
-                        <th>Price</th>
-                        <th>Quantity</th>
-                        <th>SKU</th>
-                    </tr>
+            <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>
+                </Tbody>
+            </Table>
         :
             <div className="Order without items">
                 This order didn't contain any items.

src/components/SearchOrder.tsx

 import React, { useState, useEffect } from 'react'
 import { Link } from 'react-router-dom'
 import { OrderDetails } from 'components'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faSearch } from '@fortawesome/free-solid-svg-icons'
 import {
     Table,
     Thead,
@@ -10,6 +12,9 @@ import {
     Th,
     Td,
     TableCaption,
+    Input,
+    Wrap,
+    WrapItem
   } from "@chakra-ui/react"
 
 
@@ -22,6 +27,8 @@ const SearchOrder = (props: any) => {
 
     console.log("ORDERS", orders)
 
+    const searchIcon = <FontAwesomeIcon icon={faSearch} />
+
 
     const handleSearchInput = (event: any) => {
         setSearchInput(event.target.value);
@@ -47,19 +54,33 @@ const SearchOrder = (props: any) => {
 
     return (
         <div>
-            <h1>Search</h1>
-            <input
-                type="text"
-                placeholder="Search"
-                value={searchInput}
-                onChange={handleSearchInput}
-            />
-            <Table variant="striped" colorScheme="linkedin" size="lg">
+            <Wrap>
+                {/* <WrapItem>
+                    <span>Search</span> 
+                </WrapItem> */}
+                <WrapItem>
+                    {/* <input
+                        type="text"
+                        placeholder="Search"
+                        value={searchInput}
+                        onChange={handleSearchInput}
+                    /> */}
+                    <Input 
+                        focusBorderColor="gray.400" 
+                        type="text"
+                        placeholder="Search <%=searchIcon%>"
+                        value={searchInput}
+                        onChange={handleSearchInput}
+                    />
+                </WrapItem>
+
+            </Wrap>
+            <Table variant="striped" colorScheme="messenger" size="lg">
                 <Tbody>
                     <Tr>
-                        {/* <Th>Order number</Th>
+                        <Th>Order number</Th>
                         <Th>Created</Th>
-                        <Th>Order Status</Th> */}
+                        <Th>Order Status</Th>
                     </Tr>
                     {searchResultArr}
                 </Tbody>

src/index.css

@@ -15,6 +15,8 @@ code {
     monospace;
 }
 
+
+
 /* tbody, tr, th, span, td {
   border: 2px solid orangered;
 }
@@ -76,5 +78,13 @@ li {
 
 
 .table-div {
+  padding: 150px;
   padding-top: 80px;
+}
+
+.index-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/OrderIndexPage.tsx

@@ -29,16 +29,18 @@ const OrderIndexPage = () => {
     return (
         <div className="table-div">
             <SearchOrder orders={orders}/>
-            <Table variant="striped" colorScheme="linkedin" size="lg">
-                <Tbody>
-                    <Tr>
-                        <Th>Order number</Th>
-                        <Th>Created</Th>
-                        <Th>Order Status</Th>
-                    </Tr>
-                    {orderDetailsArr}
-                </Tbody>
-            </Table>
+            <div className="index-table">
+                <Table variant="striped" colorScheme="messenger" size="lg">
+                    <Tbody>
+                        <Tr>
+                            <Th>Order number</Th>
+                            <Th>Created</Th>
+                            <Th>Order Status</Th>
+                        </Tr>
+                        {orderDetailsArr}
+                    </Tbody>
+                </Table>
+            </div>
         </div>
     )
 }