feat: Standardize icons - Milestone-14 - Final PR with clean up (#2669)

fylein · Jan 16, 2024 · 2b9a6ce · 2b9a6ce
1 parent 44417f3
commit 2b9a6ce
Show file tree

Hide file tree

Showing 141 changed files with 374 additions and 465 deletions.
diff --git a/src/app/auth/switch-org/switch-org.page.html b/src/app/auth/switch-org/switch-org.page.html
@@ -50,7 +50,7 @@
         </div>
         <ion-icon
           class="switch-org__content-container__content__icon"
-          src="../../../assets/svg/fy-search.svg"
+          src="../../../assets/svg/search.svg"
           (click)="openSearchBar()"
         ></ion-icon>
       </div>
@@ -65,7 +65,7 @@
             <mat-icon
               class="switch-org__searchbar-container__searchbar__search-icon"
               matPrefix
-              svgIcon="fy-search"
+              svgIcon="search"
             ></mat-icon>
             <input
               #searchOrgsInput
@@ -84,7 +84,7 @@
               mat-icon-button
               matSuffix
             >
-              <mat-icon svgIcon="fy-clear"></mat-icon>
+              <mat-icon svgIcon="clear"></mat-icon>
             </button>
           </div>
         </mat-form-field>

diff --git a/src/app/auth/switch-org/switch-org.page.spec.ts b/src/app/auth/switch-org/switch-org.page.spec.ts
@@ -410,7 +410,7 @@ describe('SwitchOrgPage', () => {
     const msg = 'message';
     const props = {
       data: {
-        icon: 'tick-square-filled',
+        icon: 'check-square-fill',
         showCloseButton: true,
         message: msg,
       },

diff --git a/src/app/core/mock-data/action-sheet-options.data.ts b/src/app/core/mock-data/action-sheet-options.data.ts
@@ -24,24 +24,24 @@ export const expectedActionSheetButtonRes = [
   {
     text: 'Capture Receipt',
     icon: 'assets/svg/camera.svg',
-    cssClass: 'camera',
+    cssClass: 'capture-receipt',
     handler: undefined,
   },
   {
     text: 'Add Manually',
-    icon: 'assets/svg/fy-expense.svg',
+    icon: 'assets/svg/expense.svg',
     cssClass: 'capture-receipt',
     handler: undefined,
   },
   {
     text: 'Add Mileage',
     icon: 'assets/svg/mileage.svg',
-    cssClass: 'mileage',
+    cssClass: 'capture-receipt',
     handler: undefined,
   },
   {
     text: 'Add Per Diem',
-    icon: 'assets/svg/fy-calendar.svg',
+    icon: 'assets/svg/calendar.svg',
     cssClass: 'capture-receipt',
     handler: undefined,
   },
@@ -51,19 +51,19 @@ export const expectedActionSheetButtonsWithMileage = [
   {
     text: 'Capture Receipt',
     icon: 'assets/svg/camera.svg',
-    cssClass: 'camera',
+    cssClass: 'capture-receipt',
     handler: undefined,
   },
   {
     text: 'Add Manually',
-    icon: 'assets/svg/fy-expense.svg',
+    icon: 'assets/svg/expense.svg',
     cssClass: 'capture-receipt',
     handler: undefined,
   },
   {
     text: 'Add Mileage',
     icon: 'assets/svg/mileage.svg',
-    cssClass: 'mileage',
+    cssClass: 'capture-receipt',
     handler: undefined,
   },
 ];
@@ -72,18 +72,18 @@ export const expectedActionSheetButtonsWithPerDiem = [
   {
     text: 'Capture Receipt',
     icon: 'assets/svg/camera.svg',
-    cssClass: 'camera',
+    cssClass: 'capture-receipt',
     handler: undefined,
   },
   {
     text: 'Add Manually',
-    icon: 'assets/svg/fy-expense.svg',
+    icon: 'assets/svg/expense.svg',
     cssClass: 'capture-receipt',
     handler: undefined,
   },
   {
     text: 'Add Per Diem',
-    icon: 'assets/svg/fy-calendar.svg',
+    icon: 'assets/svg/calendar.svg',
     cssClass: 'capture-receipt',
     handler: undefined,
   },

diff --git a/src/app/core/models/task-icon.enum.ts b/src/app/core/models/task-icon.enum.ts
@@ -1,5 +1,5 @@
 export enum TaskIcon {
-  REPORT = 'fy-expense',
+  REPORT = 'expense',
   WARNING = 'warning-outline',
   ADVANCE = 'wallet',
   MOBILE = 'phone',

diff --git a/src/app/core/services/snackbar-properties.service.spec.ts b/src/app/core/services/snackbar-properties.service.spec.ts
@@ -19,7 +19,7 @@ describe('SnackbarPropertiesService', () => {
     //act
     const properties = service.setSnackbarProperties('success', { message: 'Success message' });
     //assert
-    expect(properties.data.icon).toEqual('tick-square-filled');
+    expect(properties.data.icon).toEqual('check-square-fill');
   });
 
   it('should return the correct icon for a failure toast message', () => {

diff --git a/src/app/core/services/snackbar-properties.service.ts b/src/app/core/services/snackbar-properties.service.ts
@@ -22,7 +22,7 @@ export class SnackbarPropertiesService {
   ): SnackbarProperties {
     if (!snackbarIcon) {
       if (toastMessageType === 'success') {
-        snackbarIcon = 'tick-square-filled';
+        snackbarIcon = 'check-square-fill';
       } else if (toastMessageType === 'failure') {
         snackbarIcon = 'warning-fill';
       }

diff --git a/src/app/core/services/status.service.ts b/src/app/core/services/status.service.ts
@@ -45,20 +45,20 @@ export class StatusService {
       case lowerCaseComment.indexOf('automatically merged') > -1:
         statusCategory = {
           category: 'Expense automatically merged',
-          icon: 'fy-merge',
+          icon: 'merge',
         };
         break;
       case /(merged (\d+) expenses)/.test(lowerCaseComment):
         const regexMatch = lowerCaseComment.match(/merged (\d+) expenses/);
         statusCategory = {
           category: regexMatch[1] + ' expenses merged to this expense',
-          icon: 'fy-merge',
+          icon: 'merge',
         };
         break;
       case lowerCaseComment.indexOf('merged') > -1:
         statusCategory = {
           category: 'Expense merged',
-          icon: 'fy-merge',
+          icon: 'merge',
         };
         break;
       case lowerCaseComment.indexOf('created') > -1 && lowerCaseComment.indexOf('reversal') > -1:
@@ -118,7 +118,7 @@ export class StatusService {
       case lowerCaseComment.indexOf('removed from the report') > -1:
         statusCategory = {
           category: 'Expense removed',
-          icon: 'fy-delete',
+          icon: 'bin',
         };
         break;
       case lowerCaseComment.indexOf('name was changed from') > -1:
@@ -154,7 +154,7 @@ export class StatusService {
       case lowerCaseComment.indexOf('verified') > -1:
         statusCategory = {
           category: 'Verified',
-          icon: 'success-tick',
+          icon: 'check-square-fill',
         };
         break;
       case lowerCaseComment.indexOf('approver_inquiry') > -1:
@@ -172,7 +172,7 @@ export class StatusService {
       case lowerCaseComment.indexOf('approved') > -1:
         statusCategory = {
           category: type + ' Approved',
-          icon: 'success-tick',
+          icon: 'check-square-fill',
         };
         break;
       case lowerCaseComment.indexOf('payment_processing') > -1:
@@ -184,7 +184,7 @@ export class StatusService {
       case lowerCaseComment.indexOf('to paid') > -1:
         statusCategory = {
           category: 'Paid',
-          icon: 'success-tick',
+          icon: 'check-square-fill',
         };
         break;
       case lowerCaseComment.indexOf('expense issues') > -1:
@@ -196,7 +196,7 @@ export class StatusService {
       case lowerCaseComment.indexOf('policies ran successfully') > -1:
         statusCategory = {
           category: 'Policies Ran Successfully',
-          icon: 'success-tick',
+          icon: 'check-square-fill',
         };
         break;
       case lowerCaseComment.indexOf('auto-matched by') > -1:

diff --git a/src/app/core/test-data/status.service.spec.data.ts b/src/app/core/test-data/status.service.spec.data.ts
@@ -782,7 +782,7 @@ export const updateReponseWithFlattenedEStatus: ExtendedStatus[] = [
     isOthersComment: true,
     st: {
       category: 'Expense automatically merged',
-      icon: 'fy-merge',
+      icon: 'merge',
     },
   },
   {
@@ -802,7 +802,7 @@ export const updateReponseWithFlattenedEStatus: ExtendedStatus[] = [
     isOthersComment: true,
     st: {
       category: '2 expenses merged to this expense',
-      icon: 'fy-merge',
+      icon: 'merge',
     },
   },
   {
@@ -822,7 +822,7 @@ export const updateReponseWithFlattenedEStatus: ExtendedStatus[] = [
     isOthersComment: true,
     st: {
       category: 'Expense merged',
-      icon: 'fy-merge',
+      icon: 'merge',
     },
   },
   {
@@ -902,7 +902,7 @@ export const updateReponseWithFlattenedEStatus: ExtendedStatus[] = [
     isOthersComment: true,
     st: {
       category: 'Expense removed',
-      icon: 'fy-delete',
+      icon: 'bin',
     },
   },
   {
@@ -1002,7 +1002,7 @@ export const updateReponseWithFlattenedEStatus: ExtendedStatus[] = [
     isOthersComment: true,
     st: {
       category: 'Verified',
-      icon: 'success-tick',
+      icon: 'check-square-fill',
     },
   },
   {
@@ -1062,7 +1062,7 @@ export const updateReponseWithFlattenedEStatus: ExtendedStatus[] = [
     isOthersComment: true,
     st: {
       category: 'reports Approved',
-      icon: 'success-tick',
+      icon: 'check-square-fill',
     },
   },
   {
@@ -1102,7 +1102,7 @@ export const updateReponseWithFlattenedEStatus: ExtendedStatus[] = [
     isOthersComment: true,
     st: {
       category: 'Paid',
-      icon: 'success-tick',
+      icon: 'check-square-fill',
     },
   },
   {
@@ -1162,7 +1162,7 @@ export const updateReponseWithFlattenedEStatus: ExtendedStatus[] = [
     isOthersComment: true,
     st: {
       category: 'Policies Ran Successfully',
-      icon: 'success-tick',
+      icon: 'check-square-fill',
     },
   },
   {
@@ -1700,7 +1700,7 @@ export const estatusSample = [
     isOthersComment: true,
     st: {
       category: 'Expense merged',
-      icon: 'fy-merge',
+      icon: 'merge',
     },
     has_details: true,
   },
@@ -1791,7 +1791,7 @@ export const eStatusWithReimbursible = [
     isOthersComment: true,
     st: {
       category: 'Expense merged',
-      icon: 'fy-merge',
+      icon: 'merge',
     },
     has_details: true,
   },

diff --git a/src/app/fyle/add-edit-advance-request/add-edit-advance-request.page.html b/src/app/fyle/add-edit-advance-request/add-edit-advance-request.page.html
@@ -6,7 +6,7 @@
       [ngClass]="{'add-edit-advance-request--header-btn-container-sm': isDeviceWidthSmall}"
     >
       <ion-button (click)="goBack()">
-        <ion-icon class="fy-icon-close" [src]="'../../../../assets/svg/fy-close.svg'" slot="icon-only"></ion-icon>
+        <ion-icon class="fy-icon-close" [src]="'../../../../assets/svg/cross.svg'" slot="icon-only"></ion-icon>
       </ion-button>
     </ion-buttons>
 
@@ -35,7 +35,7 @@
           class="add-edit-advance-request--header-btn-container__btn"
           (click)="delete()"
         >
-          <ion-icon [src]="'../../../assets/svg/fy-delete.svg'" slot="icon-only"></ion-icon>
+          <ion-icon [src]="'../../../assets/svg/bin.svg'" slot="icon-only"></ion-icon>
         </ion-button>
       </ng-container>
     </ion-buttons>

diff --git a/...equest/fy-currency/fy-currency-choose-currency/fy-currency-choose-currency.component.html b/...equest/fy-currency/fy-currency-choose-currency/fy-currency-choose-currency.component.html
@@ -1,12 +1,12 @@
 <ion-header mode="md">
-  <mat-icon class="fy-modal-top-bar" svgIcon="fy-rectangle"></mat-icon>
+  <mat-icon class="fy-modal-top-bar" svgIcon="notch"></mat-icon>
   <ion-toolbar mode="md" class="fy-modal-toolbar">
     <ion-title>
       <div class="selection-modal--title">Select Currency</div>
     </ion-title>
     <ion-buttons slot="start">
       <ion-button (click)="onDoneClick()">
-        <mat-icon class="fy-icon-close" svgIcon="fy-close"></mat-icon>
+        <mat-icon class="fy-icon-close" svgIcon="cross"></mat-icon>
       </ion-button>
     </ion-buttons>
   </ion-toolbar>

diff --git a/src/app/fyle/add-edit-expense/add-edit-expense-2.spec.ts b/src/app/fyle/add-edit-expense/add-edit-expense-2.spec.ts
@@ -1574,7 +1574,7 @@ export function TestCases2(getTestBed) {
     it('showSnackBarToast(): should show snackbar with relevant properties', () => {
       const properties = {
         data: {
-          icon: 'tick-square-filled',
+          icon: 'check-square-fill',
           showCloseButton: true,
           message: 'Message',
         },

diff --git a/src/app/fyle/add-edit-expense/add-edit-expense.page.html b/src/app/fyle/add-edit-expense/add-edit-expense.page.html
@@ -7,7 +7,7 @@
     </ion-buttons>
     <ion-buttons *ngIf="!navigateBack" mode="md" slot="start">
       <ion-button (click)="showClosePopup()">
-        <ion-icon class="fy-icon-close" [src]="'../../../../assets/svg/fy-close.svg'" slot="icon-only"></ion-icon>
+        <ion-icon class="fy-icon-close" [src]="'../../../../assets/svg/cross.svg'" slot="icon-only"></ion-icon>
       </ion-button>
     </ion-buttons>
 
@@ -42,7 +42,7 @@
       <ng-container *ngIf="(reviewList?.length || mode === 'edit') && !isCccExpense && etxn$|async as etxn">
         <ng-container *ngIf="canRemoveFromReport || (!isRedirectedFromReport && !etxn.tx.report_id)">
           <ion-button class="add-edit-expense--header-btn-container__btn" (click)="deleteExpense(etxn.tx.report_id)">
-            <ion-icon [src]="'../../../assets/svg/fy-delete.svg'" slot="icon-only"></ion-icon>
+            <ion-icon [src]="'../../../assets/svg/bin.svg'" slot="icon-only"></ion-icon>
           </ion-button>
         </ng-container>
       </ng-container>
@@ -116,7 +116,7 @@
 
           <ng-container *ngIf="isAmountCapped$|async">
             <div class="capped-info" *ngIf="!(isCriticalPolicyViolated$|async)">
-              <mat-icon class="capped-icon" svgIcon="fy-info"></mat-icon>
+              <mat-icon class="capped-icon" svgIcon="info-circle-fill"></mat-icon>
               <div class="capped-message">
                 Claimed amount {{etxn.tx.user_amount | currency: etxn.tx.currency: '' }} was capped to {{etxn.tx.amount
                 | currency: etxn.tx.currency: '' }} due to policy
@@ -132,7 +132,7 @@
               class="add-edit-expense--split-info-container add-edit-expense--split-info-container__with-border"
               *ngIf="(!(etxn?.tx?.report_id) && !(reviewList?.length > 1)) && (isCorporateCreditCardEnabled && canRemoveCardExpense)"
             >
-              <mat-icon class="add-edit-expense--split-info-icon" svgIcon="fy-info"></mat-icon>
+              <mat-icon class="add-edit-expense--split-info-icon" svgIcon="info-circle-fill"></mat-icon>
               <div class="add-edit-expense--split-info-message">
                 If the expense is merged with incorrect card details, click on Options (<span
                   ><ion-icon

diff --git a/src/app/fyle/add-edit-expense/suggested-duplicates/suggested-duplicates.component.html b/src/app/fyle/add-edit-expense/suggested-duplicates/suggested-duplicates.component.html
@@ -1,5 +1,5 @@
 <ion-header mode="md">
-  <mat-icon class="fy-modal-top-bar" svgIcon="fy-rectangle"></mat-icon>
+  <mat-icon class="fy-modal-top-bar" svgIcon="notch"></mat-icon>
 </ion-header>
 
 <ion-content>

diff --git a/src/app/fyle/add-edit-expense/suggested-duplicates/suggested-duplicates.component.spec.ts b/src/app/fyle/add-edit-expense/suggested-duplicates/suggested-duplicates.component.spec.ts
@@ -109,7 +109,7 @@ describe('SuggestedDuplicatesComponent', () => {
   it('should show success toast message when called', () => {
     const snackbarProperties = {
       data: {
-        icon: 'tick-square-filled',
+        icon: 'check-square-fill',
         showCloseButton: true,
         message: 'Duplicates was successfully dismissed',
       },