c1: icons replacement based on env (#479)

* svg icon component for white lableing * c1 svg white lableing changes * c1 svg white lableing changes * PR comments fix * fixing the svg across all the apps * PR comments fix * fixing the svg across all the apps * c1 icon mappings (#482) * c1 icon mappings * fix lint * add all icons * fix size * update icon --------- Co-authored-by: Fyle <[email protected]> Co-authored-by: ashwin1111 <[email protected]> Co-authored-by: Ashwin Thanaraj <[email protected]>
fylein · Jan 31, 2024 · 4f8c3a3 · 4f8c3a3
1 parent 8082ce7
commit 4f8c3a3
Show file tree

Hide file tree

Showing 100 changed files with 595 additions and 272 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -2,14 +2,14 @@
 </router-outlet>
 <p-toast position="bottom-center" [baseZIndex]="5000">
     <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-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 class="tw-flex tw-justify-between tw-items-center tw-h-44-px tw-text-14-px tw-px-10-px" [ngClass]="message.severity === 'success' ? 'tw-bg-success-toast' : 'tw-bg-alert-toast'">
+            <div class="tw-inline-flex tw-items-center">
+                <app-svg-icon *ngIf="message.severity === 'success'" [svgSource]="'check-circle-outline-medium'" [width]="'20px'" [height]="'20px'" [styleClasses]="'tw-text-white tw-pl-14-px tw-pr-10-px tw-pt-2-px'"></app-svg-icon>
+                <app-svg-icon *ngIf="message.severity !== 'success'" [svgSource]="'warning-outline'" [width]="'20px'" [height]="'20px'" [styleClasses]="'tw-text-white tw-pl-14-px tw-pr-10-px tw-pt-2-px'"></app-svg-icon>
+                <span class="tw-pl-10-px">{{ message.summary }}</span>
             </div>
-            <div class="tw-flex tw-items-center tw-cursor-pointer">
-                <svg-icon-sprite (click)="closeToast()" src="cross-medium" width="16px" height="16px" class="tw-pr-22-px tw-text-white"></svg-icon-sprite>
+            <div class="tw-inline-flex tw-items-center tw-cursor-pointer">
+                <app-svg-icon (iconClick)="closeToast()" [svgSource]="'cross-medium'" [width]="'16px'" [height]="'16px'" [styleClasses]="'tw-text-white'"></app-svg-icon>
             </div>
         </div>
     </ng-template>

diff --git a/src/app/integrations/bamboo-hr/bamboo-hr.component.html b/src/app/integrations/bamboo-hr/bamboo-hr.component.html
@@ -2,12 +2,12 @@
     <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-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>
+                <app-svg-icon *ngIf="message.severity === 'success'" [svgSource]="'check-circle-outline-medium'" [width]="'20px'" [height]="'20px'" [styleClasses]="'tw-text-white tw-pl-14-px tw-pr-10-px tw-pt-2-px'"></app-svg-icon>
+                <app-svg-icon *ngIf="message.severity !== 'success'" [svgSource]="'warning-outline'" [width]="'20px'" [height]="'20px'" [styleClasses]="'tw-text-white tw-pl-14-px tw-pr-10-px tw-pt-2-px'"></app-svg-icon>
                 {{ message.summary }}
             </div>
             <div class="tw-flex tw-items-center tw-cursor-pointer">
-            <svg-icon-sprite (click)="closeToast()" src="cross-medium" width="16px" height="16px" class="tw-pr-22-px tw-text-white"></svg-icon-sprite>
+                <app-svg-icon (iconClick)="closeToast()" [svgSource]="'cross-medium'" [width]="'16px'" [height]="'16px'" [styleClasses]="'tw-pr-22-px tw-text-white'"></app-svg-icon>
             </div>
         </div>
     </ng-template>

diff --git a/src/app/integrations/bamboo-hr/configuration/configuration.component.html b/src/app/integrations/bamboo-hr/configuration/configuration.component.html
@@ -14,7 +14,7 @@
                 <div class="tw-p-24-px">
                     <div class="tw-flex tw-justify-between">
                         <div class="tw-flex">
-                            <svg-icon-sprite src="envelope" width="24px" height="24px" class="tw-text-mandatory-field-color tw-mr-20-px"></svg-icon-sprite>
+                            <app-svg-icon [svgSource]="'envelope'" [width]="'24px'" [height]="'24px'" [styleClasses]="'tw-text-mandatory-field-color tw-mr-20-px'"></app-svg-icon>
                             <div class="tw-text-14-px tw-w-360-px max-lg:tw-w-260-px">
                                 <p class="tw-text-slightly-normal-text-color">
                                     Send email notification to
@@ -33,8 +33,8 @@
                                         class="tw-flex tw-text-12-px tw-h-22-px tw-rounded-12-px tw-text-slightly-normal-text-color tw-border-1-px tw-border-box-color tw-bg-white">
                                         <p class="tw-pt-2-px tw-pl-12-px tw-pr-6-px">{{ selectedEmail }}</p>
                                         <p class="tw-w-1-px tw-mr-8-px tw-bg-separator"></p>
-                                        <svg-icon-sprite (click)="removeEmail()" src="cross-small" width="12px" height="12px"
-                                            class="tw-pr-10-px tw-pt-6-px tw-text-slightly-normal-text-color"></svg-icon-sprite>
+                                        <app-svg-icon (iconClick)="removeEmail()" [svgSource]="'cross-small'" [width]="'12px'" [height]="'12px'"
+                                            [styleClasses]="'tw-pr-10-px tw-pt-6-px tw-text-slightly-normal-text-color'"></app-svg-icon>
                                     </div>
                                     <div *ngIf="selectedEmail && cofigurationForm.value.emails.length > 1" class="tw-pl-8-px">
                                         <p class="tw-flex tw-justify-center tw-items-center tw-p-5-px tw-h-24-px tw-w-24-px tw-bg-disabled-bg-color tw-text-12-px tw-text-faded-text-color tw-rounded-12-px">
@@ -51,10 +51,10 @@
                                             <i class="pi pi-search"></i>
                                             <input type="text" class="!tw-h-32-px !tw-w-300-px" (keyup)="options.filter($event)"
                                                 pInputText placeholder="Search by Name / Email" formControlName="search" />
-                                            <svg-icon-sprite src="cross" width="24px" height="24px"
-                                                class="tw-text-faded-text-color tw-absolute tw-top-10-px tw-right-12-px tw-cursor-pointer"
-                                                (click)="clearSearch(options)">
-                                            </svg-icon-sprite>
+                                            <app-svg-icon [svgSource]="'cross'" [width]="'24px'" [height]="'24px'"
+                                                [styleClasses]="'tw-text-faded-text-color tw-absolute tw-top-10-px tw-right-12-px tw-cursor-pointer'"
+                                                (iconClick)="clearSearch(options)">
+                                            </app-svg-icon>
                                         </div>
                                     </div>
                                 </ng-template>
@@ -69,9 +69,9 @@
                             <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="plus-square-medium" width="18px" height="18px"
-                                        class="tw-text-mandatory-field-color">
-                                    </svg-icon-sprite>
+                                    <app-svg-icon [svgSource]="'plus-square-medium'" [width]="'18px'" [height]="'18px'"
+                                        [styleClasses]="'tw-text-mandatory-field-color'">
+                                    </app-svg-icon>
                                     <p class="tw-pl-6-px tw-text-slightly-normal-text-color tw-text-14-px">Add new Email address</p>
                                 </div>
                             </div>

diff --git a/src/app/integrations/landing/landing.component.html b/src/app/integrations/landing/landing.component.html
@@ -32,25 +32,29 @@
             <div class="tw-flex">
                 <div *ngIf="!exposeOnlyQBOApp">
                     <div class="landing--accounting-app tw-mr-20-px" (click)="openAccountingIntegrationApp(AccountingIntegrationApp.NETSUITE)">
-                        <img src="assets/logos/netsuite-logo.png" width="110px" height="60px" />
+                        <img src="assets/logos/netsuite-logo.png" width="120px" height="60px" />
                         <span class="landing--accounting-app-name">
                             NetSuite
-                            <svg-icon-sprite src="open-in-new-tab" width="16px" height="16px" class="landing--accounting-app-open"></svg-icon-sprite>
+                            <div class="landing--accounting-app-open">
+                                <app-svg-icon [svgSource]="'open-in-new-tab'" [width]="'16px'" [height]="'16px'"></app-svg-icon>
+                            </div>
                         </span>
                     </div>
                     <div class="landing--accounting-app tw-mr-20-px tw-mt-20-px" (click)="openInAppIntegration(InAppIntegration.QBD)">
-                        <img src="assets/logos/quickbooks-desktop.svg" class="tw-mt-[-20px]" width="100px" height="60px" />
+                        <img src="assets/logos/quickbooks-desktop.svg" class="tw-mt-[-20px]" width="120px" height="60px" />
                         <span class="landing--accounting-app-name">
                             QuickBooks Desktop
                         </span>
                     </div>
                 </div>
                 <div *ngIf="!exposeOnlyQBOApp">
                     <div class="landing--accounting-app tw-mr-20-px" (click)="openAccountingIntegrationApp(AccountingIntegrationApp.SAGE_INTACCT)">
-                        <img src="assets/logos/intacct-logo.png" width="110px" height="60px" />
+                        <img src="assets/logos/intacct-logo.png" width="120px" height="60px" />
                         <span class="landing--accounting-app-name">
                             Sage Intacct
-                            <svg-icon-sprite *ngIf="!exposeIntacctNewApp" src="open-in-new-tab" width="16px" height="16px" class="landing--accounting-app-open"></svg-icon-sprite>
+                            <div class="landing--accounting-app-open">
+                                <app-svg-icon *ngIf="!exposeIntacctNewApp" [svgSource]="'open-in-new-tab'" [width]="'16px'" [height]="'16px'"></app-svg-icon>
+                            </div>
                         </span>
                     </div>
                     <!-- <div class="landing--accounting-app tw-mr-20-px tw-mt-20-px" (click)="openInAppIntegration(InAppIntegration.BUSINESS_CENTRAL)">
@@ -65,7 +69,9 @@
                         <img src="assets/logos/quickbooks-logo.png" width="180px"  />
                         <span class="landing--accounting-app-name">
                             QuickBooks Online
-                            <svg-icon-sprite *ngIf="!exposeOnlyQBOApp" src="open-in-new-tab" width="16px" height="16px" class="landing--accounting-app-open"></svg-icon-sprite>
+                            <div class="landing--accounting-app-open">
+                                <app-svg-icon *ngIf="!exposeOnlyQBOApp" [svgSource]="'open-in-new-tab'" [width]="'16px'" [height]="'16px'"></app-svg-icon>
+                            </div>
                         </span>
                     </div>
                     <!-- <div class="landing--accounting-app tw-mr-20-px tw-mt-20-px" (click)="openInAppIntegration(InAppIntegration.SAGE300)">
@@ -76,10 +82,12 @@
                     </div> -->
                 </div>
                 <div *ngIf="!exposeOnlyQBOApp" class="landing--accounting-app" (click)="openAccountingIntegrationApp(AccountingIntegrationApp.XERO)">
-                    <img src="assets/logos/xero-logo.png" class="tw-mt-[-20px]" width="50px" height="60px" />
+                    <img src="assets/logos/xero-logo.png" class="tw-mt-[-20px]" width="65px" height="60px" />
                     <span class="landing--accounting-app-name">
                         Xero
-                        <svg-icon-sprite src="open-in-new-tab" width="16px" height="16px" class="landing--accounting-app-open"></svg-icon-sprite>
+                        <div class="landing--accounting-app-open">
+                            <app-svg-icon [svgSource]="'open-in-new-tab'" [width]="'16px'" [height]="'16px'"></app-svg-icon>
+                        </div>
                     </span>
                 </div>
             </div>

diff --git a/src/app/integrations/landing/landing.component.scss b/src/app/integrations/landing/landing.component.scss
@@ -1,46 +0,0 @@
-.landing {
-    &--active-tag {
-        @apply tw-bg-slightly-normal-text-color tw-h-2-px tw-w-[100%] tw-rounded-tr-4-px tw-rounded-tl-4-px;
-    }
-
-    &--tab {
-        @apply tw-mt-20-px tw-flex tw-flex-col tw-justify-between tw-items-center tw-h-36-px tw-cursor-pointer;
-    }
-
-    &--divider {
-        @apply tw-h-1-px tw-w-[100%] tw-bg-separator;
-    }
-
-    &--section-divider {
-        @extend .landing--divider;
-        @apply tw-my-40-px;
-    }
-
-    &--accounting-app {
-        @apply tw-flex tw-flex-col tw-w-20-vw tw-h-168-px tw-items-center tw-justify-center tw-cursor-pointer tw-rounded-4-px tw-border-1-px tw-shadow-app-card;
-    }
-
-    &--accounting-app-name {
-        @apply tw-pt-22-px tw-text-14-px tw-flex;
-    }
-
-    &--accounting-app-open {
-        @apply tw-pl-6-px tw-pt-3-px tw-text-slightly-normal-text-color;
-    }
-
-    &--section-heading {
-        @apply tw-text-18-px tw-pb-8-px;
-    }
-
-    &--section-caption {
-        @apply tw-text-sub-text-color tw-text-14-px tw-pb-24-px;
-    }
-
-    &--other-integrations {
-        @apply tw-grid tw-grid-cols-3 tw-mt-50-px;
-    }
-
-    &--other-integration-app {
-        @apply tw-flex tw-items-center tw-justify-center;
-    }
-}

diff --git a/src/app/integrations/qbd/main/dashboard/dashboard.component.html b/src/app/integrations/qbd/main/dashboard/dashboard.component.html
@@ -52,7 +52,7 @@ <h4 class="tw-font-500">IIF file logs</h4>
             </div>
             <div *ngIf="isRecordPresent" [formGroup]="exportLogForm" class="tw-flex tw-justify-start tw-items-center tw-border tw-border-box-color tw-pl-16-px tw-rounded-4-px drop-down">
                 <div>
-                    <svg-icon-sprite src="calendar" width="24px" height="24px" class="tw-text-placeholder"></svg-icon-sprite>
+                    <app-svg-icon [svgSource]="'calendar'" [width]="'24px'" [height]="'24px'" [styleClasses]="'tw-text-placeholder'"></app-svg-icon>
                 </div>
                 <p-dropdown appendTo="body" [options]="dateOptions" formControlName="dateRange" (onChange)="dateFilter($event)" (click)="dropDownWatcher()">
                     <ng-template let-item pTemplate="selectedItem">
@@ -79,7 +79,7 @@ <h4 class="tw-font-500">IIF file logs</h4>
 
             </div>
         </div>
-        <div class="tw-pt-24-px tw-border-y-2-px tw-border-y-separator tw-box-border tw-px-24-px tw-pt-24-px">
+        <div class="tw-pt-24-px tw-border-y-2-px tw-border-y-separator tw-box-border tw-px-24-px">
             <div *ngIf="accountingExports.count > 0">
                 <p-table [value]="accountingExports.results">
                     <ng-template pTemplate="header">
@@ -100,7 +100,7 @@ <h4 class="tw-font-500">IIF file logs</h4>
                             <td>{{getExpenseType(exports.fund_source)| titlecase }}</td>
                             <td>
                                 <div *ngIf="!downloadingExportId[i]">
-                                    <button (click)="getDownloadLink(exports,i)" pTooltip="Download" tooltipPosition="top"><svg-icon-sprite class="tw-pt-5-px" src="download" width="24px" height="24px"></svg-icon-sprite></button>
+                                    <button (click)="getDownloadLink(exports,i)" pTooltip="Download" tooltipPosition="top"><app-svg-icon [styleClasses]="'tw-pt-5-px'" [svgSource]="'download'" [width]="'24px'" [height]="'24px'"></app-svg-icon></button>
                                 </div>
                                 <div *ngIf="downloadingExportId[i]" class="tw-flex tw-items-center">
                                     <i class="pi pi-spin pi-spinner tw-text-sub-text-color tw-text-16-px"></i>