Merge branch 'restyle-showpage' into 'dev'

Move body.css styling to stylesheets folder [@svalencia]

See merge request !27

src/components/OrderShowDetails.tsx

@@ -34,16 +34,16 @@ const OrderShowDetails = (props: any) => {
     }
 
     const itemDetails = items ? itemMap(items) : <></>
+    const tableHeaders = ['Item ID', 'Price', 'Quantity', 'SKU']
     
     return (
         items ? 
             <Table variant="striped" colorScheme="gray" size="md">
                 <Thead >
-                    <Tr className="table-header" >
-                        <Th fontSize="16px" >Item ID</Th>
-                        <Th fontSize="16px" >Price</Th>
-                        <Th fontSize="16px" >Quantity</Th>
-                        <Th fontSize="16px" >SKU</Th>
+                    <Tr className="table-header">
+                        {tableHeaders.map((text, idx) => (
+                            <Th key={idx} fontSize="16px" color="#EBEBEB">{text}</Th>
+                        ))}
                     </Tr>
                 </Thead>
                 <Tbody>

src/index.css

@@ -35,107 +35,8 @@ body {
   min-height: calc(100vh - 70px);
 }
 
-/* homepage */
-
-.homepage {
-  padding: 200px 0;
-}
-
-
-
-
-
-/* body */
-
-.content {
-  flex: 1 0 auto;
-}
-
-
-
-.search-div {
-  padding: 2px;
-}
-
-
-
-/* input[type=text] {
-  width: 220px;
-  border: 2px solid rgb(184, 180, 180);
-  border-radius: 4px;
-  font-size: 14px;
-  background-color: white;
-  background-image: url('./img/searchicon.png');
-  background-size: 18px;
-  background-position: 10px 8px; 
-  background-repeat: no-repeat;
-  padding: 12px 20px 12px 40px;
-  transition: width 0.4s ease-in-out;
-  height: 35px;
-}
-
-input[type=text]:focus {
-  width: 100%;
-} */
-
-
-.searchbar:focus {
-  outline: none;
-}
-
-.body-content-div {
-  padding: 120px;
-  padding-top: 20px;
-}
-
-.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);
-  padding-top: 10px;
-}
-
-/* .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-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: ;
-}
-
-
-
-/* User Account */
-
-.account {
-  padding: 40px 0;
-  border-top: 1px solid rgba(68, 64, 64, 0.363);
-  border-bottom: 1px solid rgba(68, 64, 64, 0.363);
-}
-
-
-/* .user-name {
-  padding-top: 3.5px;
-} */
 
 
-/* .chakra-stack__divider.css-vhtjkn {
-  height: -140px;
-} */
 
 
 /* footer */

src/pages/AccountPage.tsx

 import { Box, Avatar, Center, VStack, StackDivider, Spacer, Flex } from '@chakra-ui/react'
 import {useGoogleAuth} from 'hooks'
+import '../styles/stylesheets/body.css'
+
 const AccountPage = () => {
     const { manager } = useGoogleAuth();
     return (

src/pages/HomePage.tsx

 import React from 'react'
 import { Box, Center, Text, Heading } from '@chakra-ui/react'
+import '../styles/stylesheets/body.css'
+
 
 const HomePage = () => {
     return (

src/pages/OrderShowPage.tsx

@@ -10,6 +10,7 @@ import {
     Tag
   } from "@chakra-ui/react"
 import { tagColorMap } from '../pages/OrdersPage/index'
+import '../styles/stylesheets/body.css'
 
 
 const OrderShowPage = (props: any) => {

src/pages/OrdersPage/OrderSearchBar.component.tsx

@@ -29,6 +29,7 @@ const OrderSearchBar = ({ searchFilters, setSearchFilters, status, STATUSES } :
         setSearchBy(value)
     }
 
+
     const boolToBin = (value: any) => Boolean(value) ? 1 : 0
 
     return (
@@ -44,6 +45,7 @@ const OrderSearchBar = ({ searchFilters, setSearchFilters, status, STATUSES } :
                     // focusBorderColor="telegram.400"
                     value={searchQuery} 
                     onChange={handleInputChange}
+            
                 />
             </InputGroup>
             <Select maxWidth="10rem" defaultValue="customerEmailAddress" onChange={handleSelectChange}>

src/pages/OrdersPage/OrdersPage.component.tsx

@@ -27,7 +27,7 @@ const OrderRow = ({
     } 
 }: { order: Order }) => {
     return (
-        <Tr>
+        <Tr >
             <Td fontSize="sm" fontWeight="semibold"><Link to={`/orders/${id}`}>{id}</Link></Td>
             <Td><Tag colorScheme={tagColorMap.get(orderStatus)}>{orderStatus}</Tag></Td>
             <Td fontSize="sm" paddingX={10}>{orderItems.length} item{orderItems.length > 1 && "s"}</Td>
@@ -102,9 +102,9 @@ const OrdersPage = () => {
             <div>
                 <Table variant="striped">
                     <Thead>
-                        <Tr>
+                        <Tr className="table-header">
                             {tableHeaders.map((headerText, idx) => (
-                                <Th key={idx}>
+                                <Th key={idx} fontSize="14px" color="#EBEBEB">
                                     <Text>{headerText}</Text>
                                 </Th>
                             ))}

src/styles/stylesheets/body.css

+/* body */
+
+.content {
+    flex: 1 0 auto;
+  }
+  
+  
+  
+  .search-div {
+    padding: 2px;
+  }
+  
+  
+  
+  /* input[type=text] {
+    width: 220px;
+    border: 2px solid rgb(184, 180, 180);
+    border-radius: 4px;
+    font-size: 14px;
+    background-color: white;
+    background-image: url('./img/searchicon.png');
+    background-size: 18px;
+    background-position: 10px 8px; 
+    background-repeat: no-repeat;
+    padding: 12px 20px 12px 40px;
+    transition: width 0.4s ease-in-out;
+    height: 35px;
+  }
+  
+  input[type=text]:focus {
+    width: 100%;
+  } */
+  
+  
+  .searchbar:focus {
+    outline: none;
+  }
+  
+  .body-content-div {
+    padding: 120px;
+    padding-top: 20px;
+  }
+  
+  .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);
+    padding-top: 10px;
+  }
+  
+  /* .show-div {
+    padding: 80px 100px;
+  } */
+  
+  .show-div-header {
+    padding-top: 20px;
+  }
+  
+  
+  .show-table {
+    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: #00567D;
+  }
+  
+  
+
+/* User Account */
+
+.account {
+    padding: 40px 0;
+    border-top: 1px solid rgba(68, 64, 64, 0.363);
+    border-bottom: 1px solid rgba(68, 64, 64, 0.363);
+}
+
+
+
+/* homepage */
+
+.homepage {
+    padding: 200px 0;
+  }
+  
\ No newline at end of file

src/styles/stylesheets/header.css

@@ -37,9 +37,7 @@
   }
   
   
-  .left-nav Link {
-    color: red;
-  }
+