diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/App.scss | 20 | ||||
| -rw-r--r-- | src/components/tables/client-table.js | 17 | ||||
| -rw-r--r-- | src/components/tables/scss/_colors.scss | 3 | ||||
| -rw-r--r-- | src/components/tables/scss/client-table.scss | 55 |
4 files changed, 72 insertions, 23 deletions
diff --git a/src/App.scss b/src/App.scss index 4955af6..489d354 100644 --- a/src/App.scss +++ b/src/App.scss @@ -21,17 +21,20 @@ font-family: 'Open Sans', sans-serif; } +$primaryAccentColor: #bd93f9; +$backgroundColor: #282a36; +$linkColor: $primaryAccentColor; +$fgColor: #f8f8f2; + body { margin: 0; padding: 0; - //background-color: #dfe0e8; - background-color: #282a36; - color: #f8f8f2; + background-color: $backgroundColor; + color: $fgColor; } main { - //background-color: #FDFDFD; - background-color: #282a36; + background-color: $backgroundColor; width: 100%; max-width: 1500px; margin: 0 auto; @@ -42,5 +45,10 @@ main { hr { border: none; - border-top: 1px solid #bd93f9; + border-top: 1px solid $primaryAccentColor; +} + +a { + color: $linkColor; + text-decoration: none; } diff --git a/src/components/tables/client-table.js b/src/components/tables/client-table.js index 8249003..0060184 100644 --- a/src/components/tables/client-table.js +++ b/src/components/tables/client-table.js @@ -17,8 +17,6 @@ import './scss/client-table.scss'; import { deleteClient } from './../../classes/client'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faPencil, faTrashCan } from '@fortawesome/free-solid-svg-icons' const ClientTable = (props) => { const handleEdit = (i) => { @@ -49,9 +47,8 @@ const ClientTable = (props) => { <div className={"paragraph-wrapper"}> <div className={"contact-details"}> - <p><strong>Contact: </strong>{i.Contact.Name}</p> + <p className={"heading"}><strong>Contact: </strong>{i.Contact.Name}</p> <p> - <br/> Phone Number{i.Contact.Phones.length === 1 ? '' : 's'}: {i.Contact.Phones.map((j, id) => ` ${j}${id + 1 === i.Contact.Phones.length ? '' : ','}`)} <br/> @@ -68,16 +65,16 @@ const ClientTable = (props) => { </div> <div className={"billing-address"}> - <p><strong>Billing Address: </strong></p> + <p className={"heading"}><strong>Billing Address: </strong></p> <p className={"multiline"}>{i.BillingAddress.Text}</p> <p>{i.BillingAddress.City}, {i.BillingAddress.State} - {i.BillingAddress.PostalCode} ({i.BillingAddress.Country})</p> </div> {i.ShippingAddresses.length > 0 && // if billing address != shipping address JSON.stringify(i.ShippingAddresses[0]) !== JSON.stringify(i.BillingAddress) && <div className={"shipping-addresses"}> - {i.ShippingAddresses.map(j => - <div className={"shipping-address"}> - <p><strong>Shipping Address: </strong></p> + {i.ShippingAddresses.map((j, id) => + <div key={id} className={"shipping-address"}> + <p><strong>{`Shipping Address ${i.ShippingAddresses.length === 1 ? '' : id + 1}`}</strong></p> <p className={"multiline"}>{j.Text}</p> <p>{j.City}, {j.State} - {j.PostalCode} ({j.Country})</p> </div> @@ -87,8 +84,8 @@ const ClientTable = (props) => { </div> <div className={"buttons"}> - <FontAwesomeIcon icon={faPencil} onClick={() => handleEdit(i)}/> - <FontAwesomeIcon icon={faTrashCan} onClick={() => handleDelete(i)}/> + <input type="button" value="Edit" onClick={() => handleEdit(i)}/> + <input type="button" value="Delete" onClick={() => handleDelete(i)}/> </div> <hr/> diff --git a/src/components/tables/scss/_colors.scss b/src/components/tables/scss/_colors.scss index 39e6c48..98634bb 100644 --- a/src/components/tables/scss/_colors.scss +++ b/src/components/tables/scss/_colors.scss @@ -21,7 +21,8 @@ $secondaryAccentColor: #d0afff; $linkColor: $primaryAccentColor; $fgColor: white; -$fgColorAlt: lightgray; +$fgColorAlt: black; +$fgColorDisabled: lightgray; $inputBackgroundColor: #00000000; diff --git a/src/components/tables/scss/client-table.scss b/src/components/tables/scss/client-table.scss index d285c47..68b7e39 100644 --- a/src/components/tables/scss/client-table.scss +++ b/src/components/tables/scss/client-table.scss @@ -21,25 +21,49 @@ display: flex; flex-direction: column; align-items: center; + .client { - margin: 1rem auto; + position: relative; width: 90%; - a { - color: $linkColor; - text-decoration: none; + hr { + margin-top: 3.5rem; } .client-name { font-size: 1.4rem; font-weight: bold; } + .client-gstin { - color: $fgColorAlt; + color: $fgColorDisabled; font-size: 1.3rem; margin-left: 0.3rem; } + .buttons { + position: absolute; + display: flex; + justify-content: space-between; + width: 8.7rem; + input { + padding: 0.2rem 0; + width: 4rem; + background-color: $inputBackgroundColor; + border: 1px solid $primaryAccentColor; + color: $fgColor; + border-radius: 4px; + transition: background-color 0.4s, color 0.4s; + } + input:hover { + background-color: $primaryAccentColor; + color: $fgColorAlt; + } + bottom: 2rem; + right: 2rem; + margin: auto; + } + .paragraph-wrapper { display: flex; justify-content: left; @@ -47,9 +71,28 @@ margin: 0.2rem auto; line-height: 1.4; } + p.heading { + margin-bottom: 0.7rem; + } + strong { + margin-bottom: 0.4rem; + } div { margin: auto 1rem; - max-width: 22rem; + min-width: 20rem; + max-width: 24rem; + } + + .shipping-addresses { + display: flex; + overflow-x: scroll; + max-width: 35rem; + margin: 0; + padding: 0; + div { + margin: 0; + padding: 0; + } } } } |