Skip to content

O
order-management-react
Commit 6351007e authored by Shanelle Valencia's avatar Shanelle Valencia
Browse files
Options

Merge branch 'restyle-showpage' into 'dev' 

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

See merge request !27
parents 3787a534 8a9a69fa
Hide whitespace changes
Inline Side-by-side
Showing with 104 additions and 110 deletions
src/components/OrderShowDetails.tsx
View file @ 6351007e
......@@ -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
View file @ 6351007e
......@@ -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
View file @ 6351007e
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
View file @ 6351007e
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
View file @ 6351007e
......@@ -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
View file @ 6351007e
......@@ -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
View file @ 6351007e
......@@ -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 0 → 100644
View file @ 6351007e
/* 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
View file @ 6351007e
......@@ -37,9 +37,7 @@
}
.left-nav Link {
color: red;
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment