Whitelabel Icons (#522)

* icon * app svg icon * arrow svgs * chevron tail * removed comment * revert styles scss * removed dup i class * correct svgSource * app-svg for email multi select * magnifier * paginator * pi times * PR Comments * rename of magnifier * chevron/search name changes * svg updated * Fixed Fyle Icons * updated icons * chevron first last * chevron sprite * grv-chevron-last size * removed arrow bars * PR Comments * replace i with app-svg * minor fixes * height and width * height width to cross medium * grv-search * emai multi select 18px for searc * -medium to arrow * arrow size height width to 18px * updated [height]="'18px'" [width]="'18px'"
fylein · Feb 13, 2024 · 5fa73c1 · 5fa73c1
1 parent 1575eb8
commit 5fa73c1
Show file tree

Hide file tree

Showing 26 changed files with 77 additions and 36 deletions.
diff --git a/src/app/integrations/bamboo-hr/configuration/configuration.component.html b/src/app/integrations/bamboo-hr/configuration/configuration.component.html
@@ -48,7 +48,7 @@
                                 <ng-template pTemplate="filter" let-options="options">
                                     <div *ngIf="emails.length" class="p-inputgroup">
                                         <div class="p-input-icon-left">
-                                            <i class="pi pi-search"></i>
+                                            <app-svg-icon [svgSource]="'search-medium'" [height]="'18px'" [width]="'18px'"></app-svg-icon>
                                             <input type="text" class="!tw-h-32-px !tw-w-300-px" (keyup)="options.filter($event)"
                                                 pInputText placeholder="Search by Name / Email" formControlName="search" />
                                             <app-svg-icon [svgSource]="'cross'" [width]="'24px'" [height]="'24px'"

diff --git a/...intacct/intacct-shared/intacct-advanced-settings/intacct-advanced-settings.component.html b/...intacct/intacct-shared/intacct-advanced-settings/intacct-advanced-settings.component.html
@@ -161,7 +161,7 @@ <h5 class="!tw-text-faded-text-color tw-text-14-px tw-pt-8-px !tw-font-400 !tw-l
                                 <span>
                                     {{ item.value }}
                                 </span>
-                                <i [ngClass]="[brandingConfig.brandId === 'fyle' ? 'pi pi-times fyle' : 'pi pi-times co']" (click)="removeFilter(advancedSettingsForm.controls.defaultLocation)"></i>
+                                <app-svg-icon [svgSource]="'cross-medium'" (click)="removeFilter(advancedSettingsForm.controls.defaultLocation)" [height]="'16px'" [width]="'16px'"></app-svg-icon>
                             </div>
                         </ng-template>
                     </p-dropdown>
@@ -182,7 +182,7 @@ <h5 class="!tw-text-faded-text-color tw-text-14-px tw-pt-8-px !tw-font-400 !tw-l
                                 <span>
                                     {{ item.value }}
                                 </span>
-                                <i [ngClass]="[brandingConfig.brandId === 'fyle' ? 'pi pi-times fyle' : 'pi pi-times co']" (click)="removeFilter(advancedSettingsForm.controls.defaultDepartment)"></i>
+                                <app-svg-icon [svgSource]="'cross-medium'" (click)="removeFilter(advancedSettingsForm.controls.defaultDepartment)" [height]="'16px'" [width]="'16px'"></app-svg-icon>
                             </div>
                         </ng-template>
                     </p-dropdown>
@@ -203,7 +203,7 @@ <h5 class="!tw-text-faded-text-color tw-text-14-px tw-pt-8-px !tw-font-400 !tw-l
                                 <span>
                                     {{ item.value }}
                                 </span>
-                                <i [ngClass]="[brandingConfig.brandId === 'fyle' ? 'pi pi-times fyle' : 'pi pi-times co']" (click)="removeFilter(advancedSettingsForm.controls.defaultProject)"></i>
+                                <app-svg-icon [svgSource]="'cross-medium'" (click)="removeFilter(advancedSettingsForm.controls.defaultProject)" [height]="'16px'" [width]="'16px'"></app-svg-icon>
                             </div>
                         </ng-template>
                     </p-dropdown>
@@ -220,7 +220,7 @@ <h5 class="!tw-text-faded-text-color tw-text-14-px tw-pt-8-px !tw-font-400 !tw-l
                                 <span>
                                     {{ item.value }}
                                 </span>
-                                <i [ngClass]="[brandingConfig.brandId === 'fyle' ? 'pi pi-times fyle' : 'pi pi-times co']" (click)="removeFilter(advancedSettingsForm.controls.defaultClass)"></i>
+                                <app-svg-icon [svgSource]="'cross-medium'" (click)="removeFilter(advancedSettingsForm.controls.defaultClass)" [height]="'16px'" [width]="'16px'"></app-svg-icon>
                             </div>
                         </ng-template>
                     </p-dropdown>
@@ -237,7 +237,7 @@ <h5 class="!tw-text-faded-text-color tw-text-14-px tw-pt-8-px !tw-font-400 !tw-l
                                 <span>
                                     {{ item.value }}
                                 </span>
-                                <i [ngClass]="[brandingConfig.brandId === 'fyle' ? 'pi pi-times fyle' : 'pi pi-times co']" (click)="removeFilter(advancedSettingsForm.controls.defaultItems)"></i>
+                                <app-svg-icon [svgSource]="'cross-medium'" (click)="removeFilter(advancedSettingsForm.controls.defaultItems)" [height]="'16px'" [width]="'16px'"></app-svg-icon>
                             </div>
                         </ng-template>
                     </p-dropdown>

diff --git a/...ons/intacct/intacct-shared/intacct-import-settings/intacct-import-settings.component.html b/...ons/intacct/intacct-shared/intacct-import-settings/intacct-import-settings.component.html
@@ -128,7 +128,7 @@ <h5 class="!tw-text-faded-text-color tw-text-14-px tw-pt-8-px !tw-font-400 !tw-l
                                         <span>
                                             {{ item.display_name }}
                                         </span>
-                                        <i [ngClass]="[brandingConfig.brandId === 'fyle' ? 'pi pi-times fyle' : 'pi pi-times co']" (click)="removeFilter(expenseField)"></i>
+                                        <app-svg-icon [svgSource]="'cross-medium'" (click)="removeFilter(expenseField)" [height]="'16px'" [width]="'16px'"></app-svg-icon>
                                     </div>
                                     </ng-template>
                               </p-dropdown>
@@ -204,7 +204,7 @@ <h5 class="!tw-text-faded-text-color tw-text-14-px tw-pt-8-px !tw-font-400 !tw-l
         <div class="tw-p-24-px tw-border-b-1-px tw-border-b-box-color">
             <div class="tw-flex tw-justify-between tw-items-center">
                 <p class="tw-text-20-px tw-font-500">Add new Custom Field</p>
-                <i [ngClass]="[brandingConfig.brandId === 'fyle' ? 'pi pi-times fyle' : 'pi pi-times co']" class="tw-cursor-pointer" style="font-size: 12px" (click)="closeModel()"></i>
+                <app-svg-icon [svgSource]="'cross-medium'" class="tw-cursor-pointer" style="font-size: 12px" (click)="closeModel()" [height]="'16px'" [width]="'16px'"></app-svg-icon>
             </div>
         </div>
         <div *ngIf="existingFields.indexOf(customFieldForm.value.attribute_type?.toLowerCase()) !== -1">
@@ -273,7 +273,7 @@ <h5 class="name-text sub-text-color tw-text-14-px">
                 </div>
                 <p class="tw-text-20-px tw-font-500 tw-text-normal-text-color">Warning</p>
             </div>
-            <i [ngClass]="[brandingConfig.brandId === 'fyle' ? 'pi pi-times fyle' : 'pi pi-times co']" class="tw-cursor-pointer" style="font-size: 12px" (click)="acceptDependentFieldWarning(false)"></i>
+            <app-svg-icon [svgSource]="'cross-medium'" class="tw-cursor-pointer" style="font-size: 12px" (click)="acceptDependentFieldWarning(false)" [height]="'16px'" [width]="'16px'"></app-svg-icon>
         </div>
     </div>
     <div class="tw-pl-24-px tw-pr-10-px tw-pt-16-px tw-pb-24-px">

diff --git a/...grations/intacct/main/export-log/completed-export-log/completed-export-log.component.html b/...grations/intacct/main/export-log/completed-export-log/completed-export-log.component.html
@@ -7,7 +7,7 @@
         <div [formGroup]="exportLogForm" class="tw-flex tw-items-center tw-p-24-px">
 
             <span class="custom-search-field" [ngStyle]="{ 'border-color': isSearchFocused ? 'black' : '#ccc' }">
-                <i class="pi pi-search"></i>
+                <app-svg-icon [svgSource]="'search-medium'" [width]="'18px'" [height]="'18px'"></app-svg-icon>
                 <input class="tw-pb-1 tw-pt-1 tw-text-14-px" type="text" (input)="filterTable($event)" (focus)="isSearchFocused = true" (blur)="isSearchFocused = false" placeholder="Search by Employee Name or Expense ID" />
             </span>
             <div class="tw-flex tw-mr-4"></div>
@@ -32,7 +32,7 @@
                                     </div>
                                 </div>
                             </span>
-                            <i [ngClass]="[brandingConfig.brandId === 'fyle' ? 'pi pi-times fyle' : 'pi pi-times co']" (click)="removeFilter(exportLogForm.controls.dateRange)"></i>
+                            <app-svg-icon [svgSource]="'cross-medium'" (click)="removeFilter(exportLogForm.controls.dateRange)" [height]="'16px'" [width]="'16px'"></app-svg-icon>
                         </div>
                     </ng-template>
                     <ng-template let-date pTemplate="item">

diff --git a/src/app/integrations/intacct/main/export-log/skip-export-log/skip-export-log.component.html b/src/app/integrations/intacct/main/export-log/skip-export-log/skip-export-log.component.html
@@ -4,7 +4,7 @@
         <div [formGroup]="skipExportLogForm" class="tw-flex tw-items-center tw-p-24-px">
 
             <span class="custom-search-field" [ngStyle]="{ 'border-color': isSearchFocused ? 'black' : '#ccc' }">
-                <i class="pi pi-search"></i>
+                <app-svg-icon [svgSource]="'search-medium'" [width]="'18px'" [height]="'18px'"></app-svg-icon>
                 <input class="tw-pb-1 tw-pt-1 tw-text-14-px" type="text" (input)="filterTable($event)" (focus)="isSearchFocused = true" (blur)="isSearchFocused = false" placeholder="Search by Employee Name or Expense ID" />
             </span>
             <div class="tw-flex tw-mr-4"></div>

diff --git a/...on-custom-field-creation-dialog/configuration-custom-field-creation-dialog.component.html b/...on-custom-field-creation-dialog/configuration-custom-field-creation-dialog.component.html
@@ -4,7 +4,7 @@
             <div class="tw-p-24-px tw-border-b-1-px tw-border-b-box-color">
                 <div class="tw-flex tw-justify-between tw-items-center">
                     <p class="tw-text-text-primary tw-text-20-px tw-font-500">Add new Custom Field</p>
-                    <i [ngClass]="[brandingConfig.brandId === 'fyle' ? 'pi pi-times fyle' : 'pi pi-times co']" class="tw-cursor-pointer tw-text-12-px" (click)="closeModel()"></i>
+                    <app-svg-icon [svgSource]="'cross-medium'" class="tw-cursor-pointer tw-text-12-px" (click)="closeModel()" [height]="'16px'" [width]="'16px'"></app-svg-icon>
                 </div>
             </div>
             <div *ngIf="existingFields.indexOf(customFieldForm.value.attribute_type?.toLowerCase()) !== -1">

diff --git a/...onents/configuration/configuration-import-field/configuration-import-field.component.html b/...onents/configuration/configuration-import-field/configuration-import-field.component.html
@@ -90,7 +90,7 @@ <h5 *ngIf="!isCloneSettingView" class="!tw-text-text-muted tw-text-14-px tw-pt-8
                                 <span>
                                     {{ item.display_name }}
                                 </span>
-                                <i [ngClass]="[brandingConfig.brandId === 'fyle' ? 'pi pi-times fyle' : 'pi pi-times co']" (click)="removeFilter(expenseField)"></i>
+                                <app-svg-icon [svgSource]="'cross-medium'" (click)="removeFilter(expenseField)" [height]="'16px'" [width]="'16px'"></app-svg-icon>
                             </div>
                             </ng-template>
                       </p-dropdown>

diff --git a/...onents/configuration/configuration-select-field/configuration-select-field.component.html b/...onents/configuration/configuration-select-field/configuration-select-field.component.html
@@ -133,7 +133,7 @@ <h5 *ngIf="(formControllerName === 'reimbursableExportType' || formControllerNam
                             <span>
                                 {{ item.value }}
                             </span>
-                            <i class="pi pi-times" (click)="removeFilter(form.controls[formControllerName])"></i>
+                            <app-svg-icon [svgSource]="'cross-medium'" (click)="removeFilter(form.controls[formControllerName])" [height]="'16px'" [width]="'16px'"></app-svg-icon>
                         </div>
                     </ng-template>
                 </p-dropdown>

diff --git a/...components/configuration/email-multi-select-field/email-multi-select-field.component.html b/...components/configuration/email-multi-select-field/email-multi-select-field.component.html
@@ -31,10 +31,10 @@ <h5 class="!tw-text-faded-text-color tw-text-14-px tw-pt-8-px !tw-font-400 !tw-l
             <ng-template pTemplate="filter" let-options="options">
                 <div *ngIf="emails.length" class="p-inputgroup">
                     <div class="p-input-icon-left p-input-icon-right">
-                        <i class="pi pi-search !tw-text-placeholder"></i>
+                        <app-svg-icon [svgSource]="'search-medium'" height]="'18px'" [width]="'18px'"></app-svg-icon>
                         <input type="text" class="!tw-h-32-px !tw-w-270-px" (keyup)="options.filter($event)"
                             pInputText placeholder="Search by Name / Email" formControlName="search" />
-                        <i [ngClass]="[brandingConfig.brandId === 'fyle' ? 'pi pi-times fyle' : 'pi pi-times co']" class="tw-cursor-pointer tw-text-16-px" (click)="clearSearch(options)"></i>
+                        <app-svg-icon [svgSource]="'cross-medium'" class="tw-cursor-pointer tw-text-16-px" (click)="clearSearch(options)" [height]="'16px'" [width]="'16px'"></app-svg-icon>
                     </div>
                 </div>
             </ng-template>
@@ -73,7 +73,7 @@ <h5 class="!tw-text-faded-text-color tw-text-14-px tw-pt-8-px !tw-font-400 !tw-l
         <div class="tw-p-24-px tw-border-b-1-px tw-border-b-box-color">
             <div class="tw-flex tw-justify-between tw-items-center">
                 <p class="tw-text-slightly-normal-text-color tw-text-20-px tw-font-500">Add new Email Address</p>
-                <i class="pi pi-times tw-cursor-pointer" style="font-size: 12px" (click)="closeModel()"></i>
+                <app-svg-icon [svgSource]="'cross-medium'" class="tw-cursor-pointer" style="font-size: 12px" (click)="closeModel()" [height]="'16px'" [width]="'16px'"></app-svg-icon>
             </div>
         </div>
         <div class="tw-p-24-px">

diff --git a/src/app/shared/components/core/svg-icon/svg-icon.component.ts b/src/app/shared/components/core/svg-icon/svg-icon.component.ts
@@ -47,7 +47,12 @@ const ICON_MAPPING = {
   'tabs': 'grv-budle',
   'user-plus': 'grv-person',
   'user-two': 'grv-persons',
-  'warning-outline': 'grv-caution-triangle-small'
+  'warning-outline': 'grv-caution-triangle-small',
+  'search-medium': 'grv-search-medium',
+  'arrow-left-medium': 'grv-chevron-left-medium',
+  'arrow-right-medium': 'grv-chevron-right-medium',
+  'arrow-bar-left-medium': 'grv-chevron-first-medium',
+  'arrow-bar-right-medium': 'grv-chevron-last-medium'
 };
 
 @Component({

diff --git a/src/app/shared/components/export-log/export-log-filter/export-log-filter.component.html b/src/app/shared/components/export-log/export-log-filter/export-log-filter.component.html
@@ -1,7 +1,7 @@
 <div [formGroup]="exportLogForm" class="tw-flex tw-items-center tw-p-24-px">
 
     <span class="custom-search-field" [ngStyle]="{ 'border-color': isSearchFocused ? 'black' : '#ccc' }">
-        <i class="pi pi-search"></i>
+        <app-svg-icon [svgSource]="'search-medium'" [width]="'18px'" [height]="'18px'"></app-svg-icon>
         <input class="tw-pb-1 tw-pt-1 tw-text-14-px" type="text" (input)="filterTable($event)" (focus)="isSearchFocused = true" (blur)="isSearchFocused = false" placeholder="Search by Employee Name or Expense ID" />
     </span>
     <div class="tw-flex tw-mr-4"></div>

diff --git a/...ared/components/helper/mapping/generic-mapping-table/generic-mapping-table.component.html b/...ared/components/helper/mapping/generic-mapping-table/generic-mapping-table.component.html
@@ -27,7 +27,7 @@
                     <ng-template pTemplate="filter" let-options="options">
                         <div class="p-inputgroup">
                             <div class="p-input-icon-left">
-                                <i class="pi pi-search"></i>
+                                <app-svg-icon [svgSource]="'search-medium'" [width]="'18px'" [height]="'18px'"></app-svg-icon>
                                 <input type="text" class="!tw-h-32-px !tw-w-260-px" 
                                 (keyup)="options.filter($event)" pInputText />
                             </div>

diff --git a/src/app/shared/components/helper/mapping/mapping-filter/mapping-filter.component.html b/src/app/shared/components/helper/mapping/mapping-filter/mapping-filter.component.html
@@ -2,17 +2,17 @@
     <div class="tw-mr-16-px tw-flex tw-content-center">
         <div *ngIf="!isSearchBoxActive" class="tw-flex tw-justify-start tw-items-center tw-cursor-pointer tw-border tw-border-box-color tw-pt-8-px tw-pb-6-px tw-px-10-px tw-rounded-4-px drop-down" (click)="isSearchBoxActive = true">
             <div>
-                <i class="pi pi-search tw-w-18-px tw-h-18-px"></i>
+                <i [ngClass]="[brandingConfig.brandId === 'fyle' ? 'pi pi-search fyle' : 'pi pi-search co']" class="tw-w-18-px tw-h-18-px"></i>
             </div>
         </div>
         <div *ngIf="isSearchBoxActive">
             <div class="p-inputgroup !tw-h-40-px" (focusout)="onFocusOut($event)">
                 <span class="p-inputgroup-addon !tw-bg-white !tw-border-r-0 !tw-px-0">
-                  <i class="pi pi-search"></i>
+                  <app-svg-icon [svgSource]="'search-medium'" [width]="'18px'" [height]="'18px'"></app-svg-icon>
                 </span>
                 <input pInputText type="text" formControlName="searchOption" class="!tw-py-5-px !tw-pl-0 !tw-border-l-0" [ngClass]="{'textbox': form.controls.searchOption.value !== ''}">
                 <span *ngIf="form.controls.searchOption.value !== ''" class="p-inputgroup-addon !tw-bg-white !tw-border-l-0 !tw-px-0">
-                    <i [ngClass]="[brandingConfig.brandId === 'fyle' ? 'pi pi-times fyle' : 'pi pi-times co']" class="tw-cursor-pointer" (click)="clearSearch()"></i>
+                    <app-svg-icon [svgSource]="'cross-medium'" class="tw-cursor-pointer" (click)="clearSearch()" [width]="'16px'" [height]="'16px'"></app-svg-icon>
                 </span>
             </div>
         </div>
@@ -30,7 +30,7 @@
                 <ng-template let-value pTemplate="selectedItem">
                     <div class="tw-flex tw-justify-between tw-items-center">
                         <p [ngClass]="getSelectedFilter(form.controls.filterOption.value.value)">{{ form.controls.filterOption.value.label }}</p>
-                        <i [ngClass]="[brandingConfig.brandId === 'fyle' ? 'pi pi-times fyle' : 'pi pi-times co']" (click)="removeFilter()"></i>
+                        <app-svg-icon [svgSource]="'cross-medium'" (click)="removeFilter()" [height]="'16px'" [width]="'16px'"></app-svg-icon>
                     </div>
                     <div></div>
                 </ng-template>