(feat) improve wording and layout (#85)

palladiumkenya · Dec 8, 2023 · aa5b343 · aa5b343
1 parent cf91d93
commit aa5b343
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 22 deletions.
diff --git a/packages/esm-billing-app/src/invoice/payments/payment-form/payment-form.component.tsx b/packages/esm-billing-app/src/invoice/payments/payment-form/payment-form.component.tsx
@@ -73,19 +73,12 @@ const PaymentForm: React.FC<PaymentFormProps> = ({ disablePayment }) => {
             name={`payment.${index}.referenceCode`}
             control={control}
             render={({ field }) => (
-              <TextInput light {...field} type="text" labelText={t('referenceNumber', 'Reference number')} />
+              <TextInput light {...field} type="text" labelText={t('referenceNumber', 'Ref number')} />
             )}
           />
-
-          <Button
-            className={styles.removeButton}
-            onClick={handleRemovePaymentMode}
-            size="sm"
-            renderIcon={(props) => <TrashCan size={24} {...props} />}
-            kind="danger--tertiary"
-            iconDescription="TrashCan">
-            {t('delete', 'Delete')}
-          </Button>
+          <div className={styles.removeButtonContainer}>
+            <TrashCan onClick={handleRemovePaymentMode} className={styles.removeButton} size={24} />
+          </div>
         </div>
       ))}
       <Button

diff --git a/packages/esm-billing-app/src/invoice/payments/payment-form/payment-form.scss b/packages/esm-billing-app/src/invoice/payments/payment-form/payment-form.scss
@@ -15,7 +15,7 @@
 
 .paymentMethodContainer {
   display: grid;
-  grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(4, minmax(100px, 1fr));
   align-items: flex-start;
   column-gap: 1rem;
   margin: 0.625rem 0;
@@ -37,8 +37,14 @@
   margin: layout.$spacing-04;
   min-height: layout.$spacing-09;
 }
-
+.removeButtonContainer{
+  display: flex;
+  align-items: center;
+  height: layout.$spacing-09;
+  align-self: center;
+  cursor: pointer;
+}
 .removeButton {
   align-self: center;
-  margin-top: layout.$spacing-03;
+  color: colors.$red-60;
 }
diff --git a/packages/esm-billing-app/src/invoice/payments/payments.component.tsx b/packages/esm-billing-app/src/invoice/payments/payments.component.tsx
@@ -89,16 +89,20 @@ const Payments: React.FC<PaymentProps> = ({ bill }) => {
           />
           <InvoiceBreakDown label={t('discount', 'Discount')} value={'--'} />
           <InvoiceBreakDown label={t('amountDue', 'Amount due')} value={convertToCurrency(amountDue ?? 0)} />
+          <div>
+            <div className={styles.processPayments}>
+              <Button onClick={handleNavigateToBillingDashboard} kind="secondary">
+                {t('discard', 'Discard')}
+              </Button>
+              <Button
+                onClick={() => handleProcessPayment()}
+                disabled={!formValues?.length || !methods.formState.isValid}>
+                {t('processPayment', 'Process Payment')}
+              </Button>
+            </div>
+          </div>
         </div>
       </div>
-      <div className={styles.processPayments}>
-        <Button onClick={handleNavigateToBillingDashboard} kind="danger">
-          {t('discardPayment', 'Discard Payment')}
-        </Button>
-        <Button onClick={() => handleProcessPayment()} disabled={!formValues?.length || !methods.formState.isValid}>
-          {t('processPayment', 'Process Payment')}
-        </Button>
-      </div>
     </FormProvider>
   );
 };

diff --git a/packages/esm-billing-app/src/invoice/payments/payments.scss b/packages/esm-billing-app/src/invoice/payments/payments.scss
@@ -33,5 +33,7 @@
   display: flex;
   justify-content: flex-end;
   margin: layout.$spacing-05;
+  padding-top: layout.$spacing-05;
   column-gap: layout.$spacing-04;
+  border-top: 1px solid colors.$cool-gray-40;
 }