invoice card UI

src/components/passbook/_common.scss

@@ -0,0 +1,7 @@
+%card {
+    background-color: white;
+    box-shadow: 0px 0px 10px -3px var(--light-grey);
+    border-radius: 20px;
+    display: flex;
+    margin: 20px auto;
+}

src/components/passbook/invoice-card/invoice.module.scss

@@ -0,0 +1,95 @@
+@import '../common';
+
+
+.card {
+    @extend %card;
+    overflow: hidden;
+
+    figure {
+        background-color: var(--lighter-grey);
+        width: 30%;
+        max-width: 80px;
+        padding: 10px;
+
+        img {
+            display: block;
+            width: 100%;
+            height: 100%;
+            object-fit: contain;
+        }
+    }
+
+    .contentHolder {
+        flex-grow: 1;
+        padding: 5px 10px;
+
+        h6 {
+            font-size: 11px;
+            color: var(--dark-grey);
+            font-weight: 500;
+            margin-top: 5px;
+        }
+
+        h2 {
+            color: var(--teal);
+            font-size: 18px;
+            font-weight: 400;
+            margin: 15px 0px 5px 0px;
+        }
+
+        p {
+            font-size: 11px;
+            color: var(--grey);
+            font-weight: 500;
+        }
+    }
+
+    .status {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 15px;
+
+        span {            
+            font-size: 12px;
+            color: var(--grey);
+            font-weight: 500;
+            letter-spacing: 0.5px;
+            text-transform: capitalize;
+
+            &::before {
+                content: '';
+                vertical-align: middle;
+                display: inline-block;
+                width: 7px;
+                height: 7px;
+                border-radius: 50%;
+                background-color: var(--grey);
+            }
+
+            &.due {
+                color: var(--warning);
+
+                &::before {
+                    background-color: var(--warning);
+                }
+            }
+
+            &.overdue {
+                color: var(--red);
+
+                &::before {
+                    background-color: var(--red);
+                }
+            }
+
+            &.paid {
+                color: var(--teal);
+
+                &::before {
+                    background-color: var(--teal);
+                }
+            }
+        }
+    }
+}

src/components/passbook/invoice-card/invoice.tsx

@@ -23,17 +23,27 @@ type OwnProps = {
 }
 
 export const InvoiceCard: React.FC<OwnProps> = (props) => {
+    let statusClass = '';
+
+    switch (props.invoice.status) {
+        case 'due': statusClass = styles.due; break;
+        case 'over due': statusClass = styles.overDue; break;
+        case 'paid': statusClass = styles.paid; break;
+        case 'cancelled': statusClass = styles.cancelled; break;
+        default: break; 
+    }
+
     return <section className={styles.card}>
         <figure>
             <img src={props.client.logo} alt="logo"/>
         </figure>
-        <div className="content-holder">
+        <div className={styles.contentHolder}>
             <h6> Invoice ID: { props.invoice.id } </h6>
             <h2> ₹ { props.client.project.contract.amount } </h2>
             <p> { props.client.project.contract.name } </p>
         </div>
-        <div className="status">
-            <span className={props.invoice.status}> { props.invoice.status } </span>
+        <div className={styles.status}>
+            <span className={statusClass}> { props.invoice.status } </span>
         </div>
     </section>
 }

src/pages/accounts/accounts.module.scss

@@ -34,7 +34,7 @@
     padding: 5px 15px;
     background-color: var(--black-medium);
     // Writing this to avoid lines that show up in certain phone
-    margin: -5px 0;    
+    margin: -5px 0;
 
     button {
         padding: 5px 12px;
@@ -103,10 +103,11 @@
 .actions {
     white-space: nowrap;
     overflow-x: auto;
-    padding: 20px;
+    padding: 15px 20px;
 
     li {
         display: inline-block;
+        vertical-align: middle;
         margin: 0 10px;
 
         button {
@@ -132,11 +133,29 @@
     background-color: var(--black);
 }
 
+.allTransactions {
+    background-color: white;
+    border-top-right-radius: 30px;
+    padding: 20px 0;
+}
+
 .transactionCard {
-    padding: 0 15px;
+    padding: 0 20px;
+    
     header {
         display: flex;
         align-items: center;
         justify-content: space-between;
+
+        h5 {
+            font-size: 12px;
+            font-weight: 500;
+            color: var(--grey);
+        }
+
+        a {
+            color: var(--teal);
+            font-size: 12px;
+        }
     }
 }

src/theme/variables.css

@@ -84,6 +84,7 @@ http://ionicframework.com/docs/theming/ */
     --dark-grey: #565656;
     --grey: #898989;
     --light-grey: #bcbcbc;
+    --lighter-grey: #fafafa;
     --warning: #ce7f01;
 
 
@@ -112,4 +113,8 @@ ul {
     list-style: none;
     padding: 0;
     margin: 0;
+}
+
+figure, p {
+    margin: 0;
 }