aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/App.scss20
-rw-r--r--src/components/tables/client-table.js17
-rw-r--r--src/components/tables/scss/_colors.scss3
-rw-r--r--src/components/tables/scss/client-table.scss55
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;
+ }
}
}
}