From 24bb92944849ac2ddf2f777d52c23a150eedffe8 Mon Sep 17 00:00:00 2001 From: Vidhu Kant Sharma Date: Tue, 27 Sep 2022 16:07:39 +0530 Subject: Created fully functioning ClientTable --- src/App.scss | 20 +++++++--- src/components/tables/client-table.js | 17 ++++----- src/components/tables/scss/_colors.scss | 3 +- src/components/tables/scss/client-table.scss | 55 +++++++++++++++++++++++++--- 4 files changed, 72 insertions(+), 23 deletions(-) (limited to 'src') 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) => {
-

Contact: {i.Contact.Name}

+

Contact: {i.Contact.Name}

-
Phone Number{i.Contact.Phones.length === 1 ? '' : 's'}: {i.Contact.Phones.map((j, id) => ` ${j}${id + 1 === i.Contact.Phones.length ? '' : ','}`)}
@@ -68,16 +65,16 @@ const ClientTable = (props) => {

-

Billing Address:

+

Billing Address:

{i.BillingAddress.Text}

{i.BillingAddress.City}, {i.BillingAddress.State} - {i.BillingAddress.PostalCode} ({i.BillingAddress.Country})

{i.ShippingAddresses.length > 0 && // if billing address != shipping address JSON.stringify(i.ShippingAddresses[0]) !== JSON.stringify(i.BillingAddress) &&
- {i.ShippingAddresses.map(j => -
-

Shipping Address:

+ {i.ShippingAddresses.map((j, id) => +
+

{`Shipping Address ${i.ShippingAddresses.length === 1 ? '' : id + 1}`}

{j.Text}

{j.City}, {j.State} - {j.PostalCode} ({j.Country})

@@ -87,8 +84,8 @@ const ClientTable = (props) => {
- handleEdit(i)}/> - handleDelete(i)}/> + handleEdit(i)}/> + handleDelete(i)}/>

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; + } } } } -- cgit v1.2.3