invoice details UI

src/components/passbook/_common.scss

@@ -1,8 +1,42 @@
 %card {
     background-color: white;
-    border: 1px solid #ebebeb;
+    border: 1px solid var(--card-outline);
     overflow: hidden;
     border-radius: 20px;
     display: flex;
     margin: 20px auto;
+}
+
+
+%commonIonInput {
+    font-size: 14px;
+    color: var(--black);
+    --padding-top: 5px;
+    --padding-end: 0;
+    --padding-bottom: 5px;
+    --padding-start: 0px;
+}
+
+%formSubmitIonButton {
+    width: calc(50% - 10px);
+    display: block;
+    margin: 0 auto;
+    height: 40px;
+    font-size: 13px;
+    letter-spacing: 0.5px;
+
+    &.cancel {
+        --border-width: 1px;
+        --border-color: var(--black);
+        color: var(--black);
+    }
+
+    &.approve {
+        --background: var(--teal);
+    }
+
+    &.disabled {
+        pointer-events: none;
+        filter: grayscale(100%);
+    }
 }

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

@@ -98,25 +98,38 @@
     left: 0;
     top: 0;
     z-index: 2;
-    background-color: rgba(0, 0, 0, 0.6);
+    background-color: rgba(0, 0, 0, 0);
     width: 100%;
     height: 100vh;
     display: flex;
     align-items: flex-end;
     justify-content: stretch;
     overflow: auto;
+    transform: translateY(50vh);
+    animation: popFromBottom 0.3s forwards;
+
+    @keyframes popFromBottom {
+        0% {
+            transform: translateY(50vh);
+        } 50% {
+            transform: translateY(0vh);
+            background-color: rgba(0, 0, 0, 0);
+        } 100% {
+            background-color: rgba(0, 0, 0, 0.6);
+            transform: translateY(0vh);
+        }
+    }
     
     .cardDetails {
         border-top-right-radius: 30px;
         border-top-left-radius: 30px;
         background-color: white;
-        padding: 15px;
         width: 100%;
     }
 
     header {
         position: relative;
-        margin-bottom: 30px;
+        padding: 15px;
 
         ion-button {
             width: 30px;
@@ -139,6 +152,9 @@
     }
 
     ul {
+        padding: 15px;
+        border-bottom: 1px solid var(--card-outline);
+
         li {
             display: flex;
             align-items: center;
@@ -162,4 +178,34 @@
             }
         }
     }
+}
+
+.form {
+    padding: 0 15px;
+
+    .inputHolder {
+        display: block;
+        margin: 15px 0;
+
+        label {
+            text-align: left;
+            font-size: 11px;
+            color: var(--grey);
+            font-weight: 500;
+            letter-spacing: 0.5px;
+        }
+
+        ion-input {
+            @extend %commonIonInput;
+        }
+    }
+
+    .buttonsHolder {
+        margin: 15px 0;
+        display: flex;
+
+        ion-button {
+            @extend %formSubmitIonButton;
+        }
+    }
 }

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

@@ -27,6 +27,13 @@ type OwnProps = {
 
 export const InvoiceCard: React.FC<OwnProps> = (props) => {
     const [showDetails, setShowDetails] = useState<boolean>(false);
+    const [formInputs, setFormInputs] = useState<{
+        dateOfPayment: string,
+        referenceNumber: string,
+    }>({
+        dateOfPayment: props.invoice.dateOfPayment ? props.invoice.dateOfPayment.toString() : '',
+        referenceNumber: props.invoice.referenceNumber ? props.invoice.referenceNumber : '',
+    });
 
     let statusClass = '';
 
@@ -94,17 +101,26 @@ export const InvoiceCard: React.FC<OwnProps> = (props) => {
                 <section className={styles.form}>
                     <div className={styles.inputHolder}>
                         <label> Payment Date </label>
-                        <IonDatetime value={props.invoice.dateOfPayment?.toString()} mode={'ios'} placeholder={'DD/MM/YYYY'} displayFormat={'DD/MM/YYYY'}></IonDatetime>
+                        <IonDatetime value={formInputs.dateOfPayment} mode={'ios'} placeholder={'DD/MM/YYYY'} displayFormat={'DD/MM/YYYY'}
+                        onIonChange={(e) => setFormInputs({
+                            dateOfPayment: e.detail.value? e.detail.value.toString() : '',
+                            referenceNumber: formInputs.referenceNumber,
+                        })}></IonDatetime>
                     </div>
 
                     <div className={styles.inputHolder}>
                         <label> Reference No. </label>
-                        <IonInput placeholder={'Enter here'} value={props.invoice.referenceNumber? props.invoice.referenceNumber: ''}></IonInput>
+                        <IonInput placeholder={'Enter here'} value={formInputs.referenceNumber}
+                        onIonChange={(e) => setFormInputs({
+                            dateOfPayment: formInputs.dateOfPayment,
+                            referenceNumber: e.detail.value? e.detail.value.toString() : '',
+                        })}></IonInput>
                     </div>
 
                     {props.invoice.status !== 'cancelled' && props.invoice.status !== 'paid' && <div className={styles.buttonsHolder}>
-                        <IonButton fill={'outline'} shape={'round'}> Cancel Invoice </IonButton>
-                        <IonButton fill={'solid'} shape={'round'}> Paid </IonButton>
+                        <IonButton fill={'outline'} className={styles.cancel} shape={'round'}> Cancel Invoice </IonButton>
+                        <IonButton fill={'solid'} className={styles.approve + ' ' + (formInputs.dateOfPayment && formInputs.referenceNumber ? '' : styles.disabled)} shape={'round'}
+                        onClick={() => setShowDetails(false)}> Paid </IonButton>
                     </div>}
                 </section>
             </section>

src/theme/variables.css

@@ -86,7 +86,7 @@ http://ionicframework.com/docs/theming/ */
     --light-grey: #bcbcbc;
     --lighter-grey: #fafafa;
     --warning: #ce7f01;
-
+    --card-outline: #ebebeb;
 
 
 
@@ -124,7 +124,16 @@ ion-button {
     --padding-start: 0px;
     --padding-end: 0px;
     --padding-top: 0px;
-    --padding-right: 0px;
+    --padding-bottom: 0px;
     margin: 0px;
     margin-inline: 0px;
+    text-transform: none;
+    font-size: 12px;
+    --box-shadow: none;
+}
+
+ion-datetime {
+    padding: 5px 0px;
+    font-size: 14px;
+    color: var(--black);
 }