Merge pull request #3519 from shubhamkumar9199/fix/export-transactions-button-styling

WEB-925: Fix Generate Report button styling on savings export transactions page

Author: alberto-art3ch

src/app/savings/savings-account-view/transactions-tab/export-transactions/export-transactions.component.html

@@ -8,7 +8,7 @@
 
 <form class="m-t-20 layout-column" [formGroup]="transactionsReportForm" (ngSubmit)="generate()">
   <div class="layout-row layout-align-center gap-3percent">
-    <mat-form-field class="flex-30" (click)="fromDatePicker.open()">
+    <mat-form-field class="flex-fill" (click)="fromDatePicker.open()">
       <mat-label>{{ 'labels.inputs.From Date' | translate }}</mat-label>
       <input
         matInput
@@ -26,7 +26,7 @@
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field class="flex-30" (click)="toDatePicker.open()">
+    <mat-form-field class="flex-fill" (click)="toDatePicker.open()">
       <mat-label>{{ 'labels.inputs.To Date' | translate }}</mat-label>
       <input
         matInput
@@ -45,10 +45,12 @@
     </mat-form-field>
   </div>
 
-  <div class="generate-button layout-row layout-xs-column layout-align-center gap-5percent">
-    <button type="button" mat-raised-button [routerLink]="['../']">{{ 'labels.buttons.Cancel' | translate }}</button>
+  <div class="button-row layout-row layout-xs-column layout-align-center gap-5px">
+    <button type="button" mat-raised-button [routerLink]="['../']">
+      {{ 'labels.buttons.Cancel' | translate }}
+    </button>
     <button mat-raised-button color="primary" [disabled]="!transactionsReportForm.valid">
-      <fa-icon icon="cogs" class="m-r-10"></fa-icon>{{ 'labels.buttons.Generate Report' | translate }} &nbsp;
+      <fa-icon icon="cogs" size="sm" class="m-r-10"></fa-icon>{{ 'labels.buttons.Generate Report' | translate }}
     </button>
   </div>
 </form>

src/app/savings/savings-account-view/transactions-tab/export-transactions/export-transactions.component.scss

@@ -6,8 +6,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 
-.generate-button {
-  max-height: 2%;
-  padding: 1% 0 2% 6%;
+.button-row {
+  padding: 1rem 0;
   align-self: center;
 }