fix: Display exact amount DQA fixes (#3395)

fylein · Jan 6, 2025 · b7e67ba · b7e67ba
1 parent d4498f0
commit b7e67ba
Show file tree

Hide file tree

Showing 35 changed files with 165 additions and 88 deletions.
diff --git a/src/app/fyle/dashboard/tasks/tasks-card/tasks-card.component.scss b/src/app/fyle/dashboard/tasks/tasks-card/tasks-card.component.scss
@@ -3,44 +3,9 @@
 .task {
   background-color: $pure-white;
   &--icon {
-    font-size: 24px;
+    font-size: 20px;
     padding-top: 4px;
     color: $blue-black;
-
-    &__warning {
-      font-size: 20px;
-      position: relative;
-      top: -2px;
-      left: -5px;
-    }
-
-    &__expense {
-      font-size: 20px;
-      position: relative;
-      top: -6px;
-      left: -8px;
-    }
-
-    &__card {
-      font-size: 20px;
-      position: relative;
-      top: -6px;
-      left: -8px;
-    }
-
-    &__advance {
-      position: relative;
-      top: -6px;
-      left: -8px;
-      font-size: 20px;
-    }
-
-    &__mobile {
-      position: relative;
-      bottom: 4px;
-      right: 6px;
-      font-size: 20px;
-    }
   }
 
   &--row {
@@ -104,7 +69,7 @@
     line-height: 23px;
     font-weight: 500;
     color: $blue-black;
-    padding: 4px 0 0 0;
+    padding: 6px 0 0 0;
   }
 
   &--subheader {

diff --git a/src/app/fyle/my-advances/my-advances-card/my-advances-card.component.html b/src/app/fyle/my-advances/my-advances-card/my-advances-card.component.html
@@ -8,7 +8,7 @@
     <div class="advance-card--purpose-amount-date-block">
       <!-- Icon -->
       <div class="advance-card--icon-container">
-        <mat-icon class="advance-card--list-icon" svgIcon="list"></mat-icon>
+        <mat-icon class="advance-card--list-icon" svgIcon="list-new"></mat-icon>
       </div>
 
       <div class="advance-card--purpose-amount-date-container">

diff --git a/src/app/fyle/my-advances/my-advances-card/my-advances-card.component.scss b/src/app/fyle/my-advances/my-advances-card/my-advances-card.component.scss
@@ -35,7 +35,9 @@ $advance_rejected_color: #d50000;
 
   &--list-icon {
     width: 16px;
+    height: 16px;
     padding-top: 2px;
+    color: $black-light;
   }
 
   &--purpose {
@@ -66,7 +68,7 @@ $advance_rejected_color: #d50000;
   &--currency {
     color: $black-light;
     font-weight: 500;
-    font-size: 16px;
+    font-size: 14px;
   }
 
   &--amount {

diff --git a/src/app/fyle/my-create-report/my-create-report.page.html b/src/app/fyle/my-create-report/my-create-report.page.html
@@ -9,8 +9,10 @@
       <div class="my-create-report--title-container text-center">
         <div class="my-create-report--title">Create New Report</div>
         <div class="my-create-report--sub-title">
-          {{ selectedElements?.length }} {{ selectedElements?.length > 1 ? 'Expenses' : 'Expense' }} - {{
-          selectedTotalAmount || 0 | humanizeCurrency: homeCurrency }}
+          {{ selectedElements?.length }} {{ selectedElements?.length > 1 ? 'Expenses' : 'Expense' }}
+          <span class="my-create-report--amount">
+            ({{ { value: selectedTotalAmount || 0, currencyCode: homeCurrency } | exactCurrency }})
+          </span>
         </div>
       </div>
     </ion-toolbar>
@@ -47,7 +49,7 @@
       </div>
     </div>
 
-    <div *ngIf="readyToReportExpenses?.length > 0" class="my-create-report--heading">EXPENSES</div>
+    <div *ngIf="readyToReportExpenses?.length > 0" class="my-create-report--heading">Expenses</div>
     <div *ngIf="readyToReportExpenses?.length > 0" class="my-create-report--select-all-checkbox">
       <mat-checkbox
         class="custom-mat-checkbox create-new-report--checkbox"

diff --git a/src/app/fyle/my-create-report/my-create-report.page.scss b/src/app/fyle/my-create-report/my-create-report.page.scss
@@ -14,17 +14,31 @@
     color: $black;
     font-weight: 500;
     margin-left: -10%;
+    padding: 12px;
   }
 
   &--title {
-    font-size: 20px;
-    line-height: 1.28;
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 28px;
   }
 
   &--sub-title {
-    font-size: 14px;
-    line-height: 1.28;
     margin-top: 4px;
+    font-weight: 500;
+    color: $blue-black;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 4px;
+  }
+
+  &--amount {
+    font-size: 12px;
+    margin-top: 2px;
+    font-weight: 400;
+    color: $blue-black;
   }
 
   &--mandatory {
@@ -82,7 +96,7 @@
   }
 
   &--heading {
-    color: $grey-light;
+    color: $black-light;
     font-size: 14px;
     padding: 16px 16px;
     background-color: $white;

diff --git a/src/app/fyle/my-create-report/my-create-report.page.spec.ts b/src/app/fyle/my-create-report/my-create-report.page.spec.ts
@@ -21,6 +21,7 @@ import { LoaderService } from 'src/app/core/services/loader.service';
 import { TransactionService } from 'src/app/core/services/transaction.service';
 import { FyCurrencyPipe } from 'src/app/shared/pipes/fy-currency.pipe';
 import { HumanizeCurrencyPipe } from 'src/app/shared/pipes/humanize-currency.pipe';
+import { ExactCurrencyPipe } from 'src/app/shared/pipes/exact-currency.pipe';
 import { StorageService } from '../../core/services/storage.service';
 import { TrackingService } from '../../core/services/tracking.service';
 import { MyCreateReportPage } from './my-create-report.page';
@@ -63,7 +64,7 @@ describe('MyCreateReportPage', () => {
     ]);
 
     TestBed.configureTestingModule({
-      declarations: [MyCreateReportPage, HumanizeCurrencyPipe],
+      declarations: [MyCreateReportPage, HumanizeCurrencyPipe, ExactCurrencyPipe],
       imports: [IonicModule.forRoot(), RouterTestingModule, FormsModule, MatCheckboxModule],
       providers: [
         FyCurrencyPipe,

diff --git a/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.html b/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.html
@@ -1,7 +1,7 @@
 <ion-header>
   <div class="report-list--header">
     <mat-icon class="fy-modal-top-bar report-list--header--handle-bar-icon" svgIcon="notch"></mat-icon>
-    <ion-grid>
+    <ion-grid class="report-list--header--top-nav-container">
       <ion-row>
         <ion-col size="1" class="report-list--header--row-icon-container">
           <ion-icon
@@ -31,7 +31,7 @@
         <ion-grid class="ion-no-padding">
           <ion-row class="report-list--report-card">
             <ion-col size="0.75">
-              <mat-icon class="report-list--list-icon" svgIcon="list"></mat-icon>
+              <mat-icon class="report-list--list-icon" svgIcon="list-new"></mat-icon>
             </ion-col>
             <ion-col size="8.25" class="ion-no-padding">
               <div class="report-list--purpose">{{ report.purpose }}</div>

diff --git a/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.scss b/src/app/fyle/my-expenses/add-txn-to-report-dialog/add-txn-to-report-dialog.component.scss
@@ -8,16 +8,24 @@ $reports_sent_back_color: #da1e28;
     color: $black;
     font-weight: 500;
     border-bottom: 1px solid $grey;
+    display: flex;
+    flex-direction: column;
+
+    &--top-nav-container {
+      width: 100%;
+    }
 
     &--row-icon-container {
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 20px;
+      width: 100%;
     }
 
     &--handle-bar-icon {
-      margin: 0 0 2px 0;
+      margin: 0 0 4px 0;
+      align-self: center;
     }
   }
 
@@ -28,6 +36,7 @@ $reports_sent_back_color: #da1e28;
   &--list-icon {
     width: 16px;
     height: 16px;
+    color: $black-light;
   }
 
   &--currency-amount-container {
@@ -37,9 +46,8 @@ $reports_sent_back_color: #da1e28;
   &--currency {
     color: $black-light;
     font-weight: 500;
-    font-size: 16px;
+    font-size: 14px;
     line-height: 1.3;
-    margin-right: 2px;
   }
 
   &--amount {

diff --git a/src/app/fyle/my-view-advance-request/my-view-advance-request.page.scss b/src/app/fyle/my-view-advance-request/my-view-advance-request.page.scss
@@ -118,7 +118,7 @@
   }
 
   &--currency {
-    font-size: 16px;
+    font-size: 14px;
     font-weight: 500;
     color: $grey-light-2;
     width: 40%;

diff --git a/src/app/fyle/my-view-advance/my-view-advance.page.scss b/src/app/fyle/my-view-advance/my-view-advance.page.scss
@@ -16,7 +16,7 @@
   }
 
   &--currency {
-    font-size: 16px;
+    font-size: 14px;
     font-weight: 500;
     color: $grey-light-2;
     width: 80px;

diff --git a/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.html b/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.html
@@ -6,9 +6,9 @@
       <div *ngIf="selectedElements?.length > 0" class="add-expenses-to-report--title-container text-center">
         <div class="add-expenses-to-report--title">
           {{ selectedElements?.length }} {{ selectedElements?.length > 1 ? 'Expenses' : 'Expense' }}
-        </div>
-        <div class="add-expenses-to-report--total-amount">
-          {{ { value: selectedTotalAmount || 0, currencyCode: homeCurrency } | exactCurrency }}
+          <span class="add-expenses-to-report--total-amount">
+            ({{ { value: selectedTotalAmount || 0, currencyCode: homeCurrency } | exactCurrency }})
+          </span>
         </div>
       </div>
     </ion-title>

diff --git a/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.scss b/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.scss
@@ -14,6 +14,11 @@
   &--title {
     font-size: 14px;
     margin-bottom: 4px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 4px;
   }
 
   &--total-amount {

diff --git a/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.spec.ts b/src/app/fyle/my-view-report/add-expenses-to-report/add-expenses-to-report.component.spec.ts
@@ -199,14 +199,14 @@ describe('AddExpensesToReportComponent', () => {
     component.selectedElements = [expense1, expense2];
     fixture.detectChanges();
 
-    expect(getTextContent(getElementBySelector(fixture, '.add-expenses-to-report--title'))).toEqual('2 Expenses');
+    expect(getTextContent(getElementBySelector(fixture, '.add-expenses-to-report--title'))).toContain('2 Expenses');
   });
 
   it('should show total amount', () => {
     component.selectedElements = [expense1, expense2];
     fixture.detectChanges();
 
-    expect(getTextContent(getElementBySelector(fixture, '.add-expenses-to-report--total-amount'))).toEqual('$500.00');
+    expect(getTextContent(getElementBySelector(fixture, '.add-expenses-to-report--total-amount'))).toEqual('($500.00)');
   });
 
   it('should zero state message if no unreported expense exist', () => {

diff --git a/src/app/fyle/my-view-report/my-view-report.page.html b/src/app/fyle/my-view-report/my-view-report.page.html
@@ -85,7 +85,10 @@
             </ion-col>
             <ion-col size="4">
               <div class="view-reports--view-info" (click)="openViewReportInfoModal()">
-                <ion-icon class="view-reports--view-info__icon" src="../../../assets/svg/info-gradient.svg"></ion-icon>
+                <ion-icon
+                  class="view-reports--view-info__icon"
+                  src="../../../assets/svg/info-circle-gradient.svg"
+                ></ion-icon>
                 <span class="view-reports--view-info__content">View Info</span>
               </div>
             </ion-col>

diff --git a/src/app/fyle/my-view-report/my-view-report.page.scss b/src/app/fyle/my-view-report/my-view-report.page.scss
@@ -101,6 +101,10 @@
   &--amount {
     color: $white;
     font-size: 18px;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    gap: 1px;
   }
 
   &--purpose-state {
@@ -125,6 +129,11 @@
       font-size: 18px;
       font-weight: 500;
     }
+
+    &__currency {
+      font-size: 14px;
+      line-height: 1.5;
+    }
   }
 
   &--date-info-block {

diff --git a/src/app/fyle/personal-cards-matched-expenses/personal-cards-matched-expenses.page.scss b/src/app/fyle/personal-cards-matched-expenses/personal-cards-matched-expenses.page.scss
@@ -113,6 +113,7 @@
     line-height: 1.25;
     margin-right: -2px;
     vertical-align: text-bottom;
+    font-size: 14px;
   }
 
   &--amount {

diff --git a/src/app/fyle/team-advance/team-adv-card/team-adv-card.component.html b/src/app/fyle/team-advance/team-adv-card/team-adv-card.component.html
@@ -8,7 +8,7 @@
     <div class="advance-card--purpose-amount-date-block">
       <!-- Icon -->
       <div class="advance-card--icon-container">
-        <mat-icon class="advance-card--list-icon" svgIcon="list"></mat-icon>
+        <mat-icon class="advance-card--list-icon" svgIcon="list-new"></mat-icon>
       </div>
 
       <!-- Purpose -->

diff --git a/src/app/fyle/team-advance/team-adv-card/team-adv-card.component.scss b/src/app/fyle/team-advance/team-adv-card/team-adv-card.component.scss
@@ -37,6 +37,7 @@ $advance_rejected_color: #d50000;
     width: 16px;
     height: 16px;
     padding-top: 2px;
+    color: $black-light;
   }
 
   &--purpose {
@@ -66,7 +67,7 @@ $advance_rejected_color: #d50000;
   &--currency {
     color: $black-light;
     font-weight: 500;
-    font-size: 16px;
+    font-size: 14px;
   }
 
   &--amount {

diff --git a/src/app/fyle/view-team-advance-request/view-team-advance-request.page.scss b/src/app/fyle/view-team-advance-request/view-team-advance-request.page.scss
@@ -140,7 +140,7 @@
   }
 
   &--currency {
-    font-size: 16px;
+    font-size: 14px;
     font-weight: 500;
     color: #4a4a4a;
     width: 40%;

diff --git a/src/app/fyle/view-team-report/view-team-report.page.html b/src/app/fyle/view-team-report/view-team-report.page.html
@@ -90,7 +90,10 @@
             </ion-col>
             <ion-col size="4" class="view-reports--view-info-container">
               <div class="view-reports--view-info" (click)="openViewReportInfoModal()">
-                <ion-icon class="view-reports--view-info__icon" src="../../../assets/svg/info-gradient.svg"></ion-icon>
+                <ion-icon
+                  class="view-reports--view-info__icon"
+                  src="../../../assets/svg/info-circle-gradient.svg"
+                ></ion-icon>
                 <span class="view-reports--view-info__content">View Info</span>
               </div>
             </ion-col>