Standardise icons - 3 (#480)

fylein · Jan 29, 2024 · 0f3c9f8 · 0f3c9f8
1 parent 84e1749
commit 0f3c9f8
Show file tree

Hide file tree

Showing 31 changed files with 49 additions and 52 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -4,7 +4,7 @@
     <ng-template let-message pTemplate="message">
         <div class="tw-flex tw-justify-between tw-items-center tw-h-44-px tw-text-14-px" [ngClass]="message.severity === 'success' ? 'tw-bg-success-toast' : 'tw-bg-alert-toast'">
             <div class="tw-flex">
-                <svg-icon-sprite *ngIf="message.severity === 'success'" src="check-circle-outline" width="20px" height="20px" class="tw-text-white tw-pl-14-px tw-pr-10-px tw-pt-2-px"></svg-icon-sprite>
+                <svg-icon-sprite *ngIf="message.severity === 'success'" src="check-circle-outline-medium" width="20px" height="20px" class="tw-text-white tw-pl-14-px tw-pr-10-px tw-pt-2-px"></svg-icon-sprite>
                 <svg-icon-sprite *ngIf="message.severity !== 'success'" src="warning-outline" width="20px" height="20px" class="tw-text-white tw-pl-14-px tw-pr-10-px tw-pt-2-px"></svg-icon-sprite>
                 {{ message.summary }}
             </div>

diff --git a/src/app/integrations/bamboo-hr/bamboo-hr.component.html b/src/app/integrations/bamboo-hr/bamboo-hr.component.html
@@ -2,7 +2,7 @@
     <ng-template let-message pTemplate="message">
         <div class="tw-flex tw-justify-between tw-items-center tw-h-44-px tw-text-14-px" [ngClass]="message.severity === 'success' ? 'tw-bg-success-toast' : 'tw-bg-alert-toast'">
             <div class="tw-flex">
-                <svg-icon-sprite *ngIf="message.severity === 'success'" src="check-circle-outline" width="20px" height="20px" class="tw-text-white tw-pl-14-px tw-pr-10-px tw-pt-2-px"></svg-icon-sprite>
+                <svg-icon-sprite *ngIf="message.severity === 'success'" src="check-circle-outline-medium" width="20px" height="20px" class="tw-text-white tw-pl-14-px tw-pr-10-px tw-pt-2-px"></svg-icon-sprite>
                 <svg-icon-sprite *ngIf="message.severity !== 'success'" src="warning-outline" width="20px" height="20px" class="tw-text-white tw-pl-14-px tw-pr-10-px tw-pt-2-px"></svg-icon-sprite>
                 {{ message.summary }}
             </div>

diff --git a/src/app/integrations/bamboo-hr/configuration/configuration.component.html b/src/app/integrations/bamboo-hr/configuration/configuration.component.html
@@ -69,7 +69,7 @@
                             <div class="tw-flex tw-pt-24-px tw-w-27-vw max-lg:tw-w-20-vw">
                                 <p class="tw-text-slightly-normal-text-color tw-text-14-px tw-pr-12-px">or</p>
                                 <div class="tw-flex tw-cursor-pointer" (click)="openDialog()">
-                                    <svg-icon-sprite src="add" width="18px" height="18px"
+                                    <svg-icon-sprite src="plus-square-medium" width="18px" height="18px"
                                         class="tw-text-mandatory-field-color">
                                     </svg-icon-sprite>
                                     <p class="tw-pl-6-px tw-text-slightly-normal-text-color tw-text-14-px">Add new Email address</p>

diff --git a/src/app/integrations/gusto/gusto-configuration/gusto-configuration.component.html b/src/app/integrations/gusto/gusto-configuration/gusto-configuration.component.html
@@ -29,7 +29,7 @@ <h5 class="!tw-text-faded-text-color tw-text-14-px tw-pt-8-px !tw-font-400 !tw-l
                         <tbody>
                           <tr *ngFor="let field of configurationFields"> 
                             <td><input type="text" [value]="field" class="gusto-configuration-fields" disabled></td>
-                            <td class="right-arrow tw-content-center "><svg-icon-sprite src="arrow" width="60px" hight="10px" class="tw-text-box-color"></svg-icon-sprite></td>
+                            <td class="right-arrow tw-content-center "><svg-icon-sprite src="arrow-line" width="60px" hight="10px" class="tw-text-box-color"></svg-icon-sprite></td>
                             <td><input type="text" [value]="field" class="gusto-configuration-fields" disabled></td>
                           </tr>
                         </tbody>
@@ -45,7 +45,7 @@ <h5 class="!tw-text-faded-text-color tw-text-14-px tw-pt-8-px !tw-font-400 !tw-l
                     [mandatoryErrorListName]="'email for export'"
                     [subLabel]="'Select or add an email address to notify upon import failure or integration error.'"
                     [options]="additionalEmails"
-                    [iconPath]="'email'"
+                    [iconPath]="'envelope'"
                     [placeholder]="'Select email address'"
                     [formControllerName]="'email'">
                 </app-email-multi-select-field>

diff --git a/src/app/integrations/si/main/dashboard/dashboard.component.html b/src/app/integrations/si/main/dashboard/dashboard.component.html
@@ -17,7 +17,7 @@ <h3 class="tw-text-20-px tw-font-500 tw-text-slightly-normal-text-color" *ngIf="
                         <h3 class="tw-text-20-px tw-font-500 tw-text-slightly-normal-text-color" *ngIf="exportInProgress"> Exporting {{ processedCount }} of {{ exportableExpenseGroupIds.length }} expense{{exportableExpenseGroupIds.length > 1 ? 's' : ''}} to your Sage Intacct Account</h3>
                         <h3 class="tw-text-20-px tw-font-500 tw-text-slightly-normal-text-color" *ngIf="!exportInProgress && exportableExpenseGroupIds.length"> {{ exportableExpenseGroupIds.length }} expense{{exportableExpenseGroupIds.length > 1 ? 's' : ''}} ready to export</h3>
                         <h3 class="tw-text-20-px tw-font-500 tw-text-slightly-normal-text-color" *ngIf="!exportInProgress && !exportableExpenseGroupIds.length && lastExport?.successful_expense_groups_count">You are all caught up!</h3>
-                        <svg-icon-sprite src="info" width="16px" height="16px" class="tw-text-info tw-ml-4-px" pTooltip="All expenses that have reached your export state in {{brandingConfig.brandName}} will be automatically imported and kept ready for export"></svg-icon-sprite>
+                        <svg-icon-sprite src="info-circle-fill" width="16px" height="16px" class="tw-text-info tw-ml-4-px" pTooltip="All expenses that have reached your export state in {{brandingConfig.brandName}} will be automatically imported and kept ready for export"></svg-icon-sprite>
                     </div>
                     <h5 class="tw-text-14-px tw-font-400 tw-text-slightly-normal-text-color tw-pl-34-px tw-pt-8-px" *ngIf="!exportInProgress && !exportableExpenseGroupIds.length && !lastExport">No new expenses to export in the configured state of export in {{brandingConfig.brandName}}. Once you start processing payments or closing your expenses, they will be automatically available here.</h5>
                     <h5 class="tw-text-14-px tw-font-400 tw-text-slightly-normal-text-color tw-pl-34-px tw-pt-8-px" *ngIf="exportInProgress">This may take a few minutes...</h5>
@@ -97,7 +97,7 @@ <h4 class="tw-font-500 tw-text-18-px">Your last export</h4>
                     </div>
                     <div class="tw-flex tw-items-center tw-mt-8-px tw-justify-between">
                         <div class="tw-flex">
-                            <svg-icon-sprite src="error-outlined" width="18px" height="18px" class="tw-text-alert-toast tw-mr-16-px"></svg-icon-sprite>
+                            <svg-icon-sprite src="danger-outline" width="18px" height="18px" class="tw-text-alert-toast tw-mr-16-px"></svg-icon-sprite>
                             <p class="tw-text-14-px tw-font-500 tw-mt-2-px tw-text-slightly-normal-text-color">Failed Expenses</p>
                             <span class="tw-w-150-px tw-text-right tw-mt-2-px tw-text-faded-text-color">
                                 {{ lastExport?.failed_expense_groups_count ? lastExport?.failed_expense_groups_count : 0 }}
@@ -144,7 +144,7 @@ <h5 class="!tw-text-faded-text-color tw-text-14-px tw-pt-10-px !tw-font-400 !tw-
                                     Resolve
                                 </button>
                                 <div class="tw-flex" *ngIf="groupedErrorStat.EMPLOYEE_MAPPING && groupedErrorStat.EMPLOYEE_MAPPING.resolvedCount === groupedErrorStat.EMPLOYEE_MAPPING.totalCount">
-                                    <svg-icon-sprite src="check-circle-outline-standard" width="24px" height="24px" class="tw-text-success-toast tw-pr-6-px"></svg-icon-sprite>
+                                    <svg-icon-sprite src="check-circle-outline" width="24px" height="24px" class="tw-text-success-toast tw-pr-6-px"></svg-icon-sprite>
                                     <p class="tw-text-faded-text-color tw-text-14-px">
                                       Resolved
                                     </p>
@@ -166,7 +166,7 @@ <h5 class="!tw-text-faded-text-color tw-text-14-px tw-pt-10-px !tw-font-400 !tw-
                                     Resolve
                                 </button>
                                 <div class="tw-flex" *ngIf="groupedErrorStat.CATEGORY_MAPPING && groupedErrorStat.CATEGORY_MAPPING.resolvedCount === groupedErrorStat.CATEGORY_MAPPING.totalCount">
-                                    <svg-icon-sprite src="check-circle-outline-standard" width="24px" height="24px" class="tw-text-success-toast tw-pr-6-px"></svg-icon-sprite>
+                                    <svg-icon-sprite src="check-circle-outline" width="24px" height="24px" class="tw-text-success-toast tw-pr-6-px"></svg-icon-sprite>
                                     <p class="tw-text-faded-text-color tw-text-14-px">
                                       Resolved
                                     </p>

diff --git a/src/app/integrations/si/main/mapping/category-mapping/category-mapping.component.html b/src/app/integrations/si/main/mapping/category-mapping/category-mapping.component.html
@@ -43,7 +43,7 @@
                         <tr>
                             <td>
                                 <div class="tw-flex tw-items-center">
-                                    <svg-icon-sprite *ngIf="mapping.auto_mapped" pTooltip="Auto-mapped" tooltipPosition="top" src="flash" width="12px" height="12px" class="tw-mr-12-px tw-text-placeholder"></svg-icon-sprite>
+                                    <svg-icon-sprite *ngIf="mapping.auto_mapped" pTooltip="Auto-mapped" tooltipPosition="top" src="flash-on" width="12px" height="12px" class="tw-mr-12-px tw-text-placeholder"></svg-icon-sprite>
                                     <span [ngClass]="{'tw-pl-24-px': !mapping.auto_mapped}">{{ mapping.value }}</span>
                                 </div>
                             </td>

diff --git a/src/app/integrations/si/main/mapping/employee-mapping/employee-mapping.component.html b/src/app/integrations/si/main/mapping/employee-mapping/employee-mapping.component.html
@@ -50,7 +50,7 @@
                     <tr>
                         <td>
                             <div class="tw-flex tw-items-center">
-                                <svg-icon-sprite *ngIf="mapping.auto_mapped" pTooltip="Auto-mapped" tooltipPosition="top" src="flash" width="12px" height="12px" class="tw-mr-12-px tw-text-placeholder"></svg-icon-sprite>
+                                <svg-icon-sprite *ngIf="mapping.auto_mapped" pTooltip="Auto-mapped" tooltipPosition="top" src="flash-on" width="12px" height="12px" class="tw-mr-12-px tw-text-placeholder"></svg-icon-sprite>
                                 <span [ngClass]="{'tw-pl-24-px': !mapping.auto_mapped}">{{ mapping.value }}</span>
                             </div>
                         </td>

diff --git a/src/app/integrations/si/main/mapping/generic-mapping/generic-mapping.component.html b/src/app/integrations/si/main/mapping/generic-mapping/generic-mapping.component.html
@@ -42,7 +42,7 @@
                     <tr>
                         <td>
                             <div class="tw-flex tw-items-center">
-                                <svg-icon-sprite *ngIf="mapping.auto_mapped" pTooltip="Auto-mapped" tooltipPosition="top" src="flash" width="12px" height="12px" class="tw-mr-12-px tw-text-placeholder"></svg-icon-sprite>
+                                <svg-icon-sprite *ngIf="mapping.auto_mapped" pTooltip="Auto-mapped" tooltipPosition="top" src="flash-on" width="12px" height="12px" class="tw-mr-12-px tw-text-placeholder"></svg-icon-sprite>
                                 <span [ngClass]="{'tw-pl-24-px': !mapping.auto_mapped}">{{ mapping.value }}</span>
                             </div>
                         </td>

diff --git a/...onents/configuration/configuration-import-field/configuration-import-field.component.html b/...onents/configuration/configuration-import-field/configuration-import-field.component.html
@@ -4,7 +4,7 @@
         <div class="fields-header-text tw-w-30-vw">{{brandingConfig.brandName}} Fields</div>
         <div class="fields-header-text tw-flex tw-w-[10vw] tw-whitespace-nowrap">
             Import to {{brandingConfig.brandName}}
-            <svg-icon-sprite src="info" width="16px" height="16px" class="tw-text-faded-text-color" tooltipPosition="top"
+            <svg-icon-sprite src="info-circle-fill" width="16px" height="16px" class="tw-text-faded-text-color" tooltipPosition="top"
                 [pTooltip]="'Importing a dimension syncs active values from ' + appName + ' every 24 hours. Deactivated values in ' + appName + ' will also be disabled in ' + brandingConfig.brandName + ''">
             </svg-icon-sprite>
         </div>
@@ -75,7 +75,7 @@ <h5 *ngIf="!isCloneSettingView" class="!tw-text-faded-text-color tw-text-14-px t
                         optionLabel="display_name" optionValue="attribute_type" [ngClass]="{'selectedItem': expenseField.value.source_field, 'filterDropdown': !expenseField.value.source_field}" dropdownIcon="pi pi-chevron-down">
                             <ng-template let-option pTemplate="item">
                             <div [ngClass]="{'custom-option': option.attribute_type === 'custom_field'}">
-                                <svg-icon-sprite *ngIf="option.attribute_type === 'custom_field'" src="add" width="18px" height="18px" class="icon-align"></svg-icon-sprite>
+                                <svg-icon-sprite *ngIf="option.attribute_type === 'custom_field'" src="plus-square-medium" width="18px" height="18px" class="icon-align"></svg-icon-sprite>
                                 {{ option.display_name }}
                             </div>
                             </ng-template>
@@ -116,7 +116,7 @@ <h5 *ngIf="!isCloneSettingView" class="!tw-text-faded-text-color tw-text-14-px t
                             <p-dropdown appendTo="body" class="tw-w-28-vw" [formControlName]="dependentField.formController" [options]="dependentField.options" optionLabel="attribute_type" placeholder="Select Expense Field" [disabled]="dependentField.isDisabled" dropdownIcon="pi pi-chevron-down">
                                 <ng-template let-option pTemplate="item">
                                     <div [ngClass]="{'custom-option': option.attribute_type === 'custom_field'}">
-                                      <svg-icon-sprite *ngIf="option.attribute_type === 'custom_field'" src="add" width="18px" height="18px" class="icon-align"></svg-icon-sprite>
+                                      <svg-icon-sprite *ngIf="option.attribute_type === 'custom_field'" src="plus-square-medium" width="18px" height="18px" class="icon-align"></svg-icon-sprite>
                                       {{ option.display_name }}
                                     </div>
                                   </ng-template>
@@ -133,7 +133,7 @@ <h5 *ngIf="!isCloneSettingView" class="!tw-text-faded-text-color tw-text-14-px t
     </div>               
     </div>
     <div *ngIf="showOrHideAddButton() && !isDestinationFixedImport" class="add-button-container">
-        <svg-icon-sprite src="add" width="18px" height="18px" class="add-row-text" (click)="addExpenseField()"></svg-icon-sprite>
+        <svg-icon-sprite src="plus-square-medium" width="18px" height="18px" class="add-row-text" (click)="addExpenseField()"></svg-icon-sprite>
         <a class="add-row-text tw-pl-2" (click)="addExpenseField()">
             Add more fields
         </a>

diff --git a/...mponents/configuration/configuration-skip-export/configuration-skip-export.component.html b/...mponents/configuration/configuration-skip-export/configuration-skip-export.component.html
@@ -111,7 +111,7 @@
           </div>
         </div>
         <div class="tw-flex items-center tw-text-mandatory-field-color tw-pt-12-px tw-pb-24-px" *ngIf="showAddButton">
-          <svg-icon-sprite src="add" width="18px" height="18px" (click)="updateAdditionalFilterVisibility(true)"></svg-icon-sprite>
+          <svg-icon-sprite src="plus-square-medium" width="18px" height="18px" (click)="updateAdditionalFilterVisibility(true)"></svg-icon-sprite>
           <a class="add-row-text tw-cursor-pointer tw-pl-8-px tw-text-14-px" (click)="updateAdditionalFilterVisibility(true)">
             Add More Fields
           </a>

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
@@ -58,7 +58,7 @@ <h5 class="!tw-text-faded-text-color tw-text-14-px tw-pt-8-px !tw-font-400 !tw-l
             <div class="tw-flex tw-pt-18-px">
                 <p class="tw-text-slightly-normal-text-color tw-text-14-px tw-pr-12-px">or</p>
                 <div class="tw-flex tw-cursor-pointer" (click)="openDialog()">
-                    <svg-icon-sprite src="add" width="18px" height="18px"
+                    <svg-icon-sprite src="plus-square-medium" width="18px" height="18px"
                         class="tw-text-mandatory-field-color">
                     </svg-icon-sprite>
                     <p class="tw-pl-6-px tw-text-slightly-normal-text-color tw-text-14-px">Add new Email address</p>

diff --git a/...hared/components/dashboard/dashboard-error-section/dashboard-error-section.component.html b/...hared/components/dashboard/dashboard-error-section/dashboard-error-section.component.html
@@ -27,7 +27,7 @@ <h5 class="!tw-text-faded-text-color tw-text-14-px tw-pt-10-px !tw-font-400 !tw-
                                     Resolve
                                 </button>
                                 <div class="tw-flex" *ngIf="groupedErrorStat.EMPLOYEE_MAPPING && groupedErrorStat.EMPLOYEE_MAPPING.resolvedCount === groupedErrorStat.EMPLOYEE_MAPPING.totalCount">
-                                    <svg-icon-sprite src="check-circle-outline-standard" width="24px" height="24px" class="tw-text-success-toast tw-pr-6-px"></svg-icon-sprite>
+                                    <svg-icon-sprite src="check-circle-outline" width="24px" height="24px" class="tw-text-success-toast tw-pr-6-px"></svg-icon-sprite>
                                     <p class="tw-text-faded-text-color tw-text-14-px">
                                     Resolved
                                     </p>
@@ -49,7 +49,7 @@ <h5 class="!tw-text-faded-text-color tw-text-14-px tw-pt-10-px !tw-font-400 !tw-
                                     Resolve
                                 </button>
                                 <div class="tw-flex" *ngIf="groupedErrorStat.CATEGORY_MAPPING && groupedErrorStat.CATEGORY_MAPPING.resolvedCount === groupedErrorStat.CATEGORY_MAPPING.totalCount">
-                                    <svg-icon-sprite src="check-circle-outline-standard" width="24px" height="24px" class="tw-text-success-toast tw-pr-6-px"></svg-icon-sprite>
+                                    <svg-icon-sprite src="check-circle-outline" width="24px" height="24px" class="tw-text-success-toast tw-pr-6-px"></svg-icon-sprite>
                                     <p class="tw-text-faded-text-color tw-text-14-px">
                                     Resolved
                                     </p>

diff --git a/...red/components/dashboard/dashboard-export-section/dashboard-export-section.component.html b/...red/components/dashboard/dashboard-export-section/dashboard-export-section.component.html
@@ -10,7 +10,7 @@ <h3 class="tw-text-20-px tw-font-500 tw-text-slightly-normal-text-color" *ngIf="
                         <h3 class="tw-text-20-px tw-font-500 tw-text-slightly-normal-text-color" *ngIf="isExportInProgress"> Exporting {{ processedCount }} of {{ exportableAccountingExportIds.length }} expense{{exportableAccountingExportIds.length > 1 ? 's' : ''}} to your {{appName}} account</h3>
                         <h3 class="tw-text-20-px tw-font-500 tw-text-slightly-normal-text-color" *ngIf="!isExportInProgress && exportableAccountingExportIds.length"> {{ exportableAccountingExportIds.length }} expense{{exportableAccountingExportIds.length > 1 ? 's' : ''}} ready to export</h3>
                         <h3 class="tw-text-20-px tw-font-500 tw-text-slightly-normal-text-color" *ngIf="!isExportInProgress && !exportableAccountingExportIds.length && accountingExportSummary?.successful_accounting_export_count">You are all caught up!</h3>
-                        <svg-icon-sprite src="info" width="16px" height="16px" class="tw-text-info tw-ml-4-px" pTooltip="All expenses that have reached your export state in {{brandingConfig.brandName}} will be automatically imported and kept ready for export."></svg-icon-sprite>
+                        <svg-icon-sprite src="info-circle-fill" width="16px" height="16px" class="tw-text-info tw-ml-4-px" pTooltip="All expenses that have reached your export state in {{brandingConfig.brandName}} will be automatically imported and kept ready for export."></svg-icon-sprite>
                     </div>
                     <h5 class="tw-text-14-px tw-font-400 tw-text-slightly-normal-text-color tw-pl-34-px tw-pt-8-px" *ngIf="!isExportInProgress && !exportableAccountingExportIds.length && !accountingExportSummary">
                         No new expenses to export right now