Merge pull request #2946 from shubhamkumar9199/fix/currency-spacing-search-bar

WEB-512: Fix spacing and alignment of search box and add button on Ma…

src/app/organization/currencies/manage-currencies/manage-currencies.component.html

@@ -1,13 +1,8 @@
 <div class="container">
   <mat-card>
-    <div #currencyFormRef>
+    <div #currencyFormRef class="currency-form-container">
-      <form
+      <form #formRef="ngForm" [formGroup]="currencyForm" class="layout-row gap-20px" (ngSubmit)="addCurrency()">
-        #formRef="ngForm"
+        <mat-form-field class="currency-search-field">
-        [formGroup]="currencyForm"
-        class="layout-row align-start-baseline gap-20px flex-48"
-        (ngSubmit)="addCurrency()"
-      >
-        <mat-form-field class="flex-fill flex-90-minus-20px">
           <mat-label>{{ 'labels.inputs.Currency' | translate }}</mat-label>
           <mat-select required formControlName="currency">
             <mat-option>
@@ -30,10 +25,13 @@
         </mat-form-field>
 
         <button
+          type="button"
           mat-raised-button
-          class="flex-fill"
+          class="add-currency-button"
           color="primary"
           [disabled]="!currencyForm.valid"
+          [attr.aria-label]="'labels.buttons.Add Currency' | translate"
+          [title]="'labels.buttons.Add Currency' | translate"
           *mifosxHasPermission="'UPDATE_CURRENCY'"
         >
           <fa-icon icon="plus"></fa-icon>
@@ -47,9 +45,12 @@
           <div class="grid-container">
             <div>
               <button
+                type="button"
                 mat-button
                 color="warn"
                 (click)="deleteCurrency(currency.code, i)"
+                [attr.aria-label]="'labels.buttons.Delete' | translate"
+                [title]="'labels.buttons.Delete' | translate"
                 *mifosxHasPermission="'UPDATE_CURRENCY'"
               >
                 <fa-icon icon="trash"></fa-icon>

src/app/organization/currencies/manage-currencies/manage-currencies.component.scss

@@ -2,6 +2,29 @@
   width: 74rem;
 }
 
+.currency-form-container {
+  padding: 16px 24px;
+  margin-bottom: 16px;
+}
+
+.currency-search-field {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin-right: 20px;
+}
+
+.add-currency-button {
+  flex-shrink: 0;
+  min-width: 56px;
+  width: 56px;
+  padding: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: flex-end;
+  margin-bottom: 2.1em;
+}
+
 .currency-grid {
   max-width: 40%;
   justify-content: left !important;