C1: QA Fixes - 5 | Shadow (#570)

* C1: QA Fixes - 5 | Shadow * fix few more issues
fylein · Feb 15, 2024 · 2b170d9 · 2b170d9
1 parent 8df483f
commit 2b170d9
Show file tree

Hide file tree

Showing 40 changed files with 66 additions and 50 deletions.
diff --git a/...usiness-central-onboarding-connector/business-central-onboarding-connector.component.html b/...usiness-central-onboarding-connector/business-central-onboarding-connector.component.html
@@ -6,7 +6,7 @@
         <div *ngIf="isLoading" class="tw-flex tw-justify-center tw-items-center tw-h-screen">
             <app-loader></app-loader>
         </div>
-        <div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="{'tw-mx-120-px': brandingConfig.brandId === 'fyle', 'tw-mx-60-px': brandingConfig.brandId === 'co'}">
+        <div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="{'tw-mx-120-px tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-mx-60-px tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}">
             <div>
                 <app-configuration-step-header 
                 [headerText]="'Connect to your Dynamics 365 Business Central account'"

diff --git a/...ared/business-central-advanced-settings/business-central-advanced-settings.component.html b/...ared/business-central-advanced-settings/business-central-advanced-settings.component.html
@@ -1,7 +1,7 @@
 <div *ngIf="isLoading" class="tw-flex tw-justify-center tw-items-center tw-h-screen">
     <app-loader></app-loader>
 </div>
-<div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="{'tw-mx-120-px': brandingConfig.brandId === 'fyle', 'tw-mx-60-px': brandingConfig.brandId === 'co'}">
+<div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="{'tw-mx-120-px tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-mx-60-px tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}">
     <div>
         <app-configuration-step-header 
             [headerText]="'Advanced Settings'"

diff --git a/...l-shared/business-central-export-settings/business-central-export-settings.component.html b/...l-shared/business-central-export-settings/business-central-export-settings.component.html
@@ -1,7 +1,7 @@
 <div *ngIf="isLoading" class="tw-flex tw-justify-center tw-items-center tw-h-screen">
     <app-loader></app-loader>
 </div>
-<div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="{'tw-mx-120-px': brandingConfig.brandId === 'fyle', 'tw-mx-60-px': brandingConfig.brandId === 'co'}">
+<div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="{'tw-mx-120-px tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-mx-60-px tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}">
     <div>
         <app-configuration-step-header 
             [headerText]="'Export Settings'"

diff --git a/...l-shared/business-central-import-settings/business-central-import-settings.component.html b/...l-shared/business-central-import-settings/business-central-import-settings.component.html
@@ -1,7 +1,7 @@
 <div *ngIf="isLoading" class="tw-flex tw-justify-center tw-items-center tw-h-screen">
     <app-loader></app-loader>
 </div>
-<div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="{'tw-mx-120-px': brandingConfig.brandId === 'fyle', 'tw-mx-60-px': brandingConfig.brandId === 'co'}">
+<div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="{'tw-mx-120-px tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-mx-60-px tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}">
     <div>
         <app-configuration-step-header [headerText]="'Import Settings'"
             [contentText]="'In this section, you can choose the fields required to be imported from Dynamics 365 Business Central to ' + brandingConfig.brandName + '. '"

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
@@ -1,7 +1,7 @@
 <div *ngIf="isLoading" class="tw-flex tw-justify-center tw-items-center tw-h-screen">
     <app-loader></app-loader>
 </div>
-<div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="{'tw-mx-120-px': brandingConfig.brandId === 'fyle', 'tw-mx-60-px': brandingConfig.brandId === 'co'}">
+<div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="{'tw-mx-120-px tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-mx-60-px tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}">
     <div>
     <app-configuration-step-header 
     [headerText]="'Advanced Settings'"

diff --git a/...ons/intacct/intacct-shared/intacct-export-settings/intacct-export-settings.component.html b/...ons/intacct/intacct-shared/intacct-export-settings/intacct-export-settings.component.html
@@ -1,7 +1,7 @@
 <div *ngIf="isLoading" class="tw-flex tw-justify-center tw-items-center tw-h-screen">
     <app-loader></app-loader>
 </div>
-<div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="{'tw-mx-120-px': brandingConfig.brandId === 'fyle', 'tw-mx-60-px': brandingConfig.brandId === 'co'}">
+<div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="{'tw-mx-120-px tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-mx-60-px tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}">
     <div>
     <app-configuration-step-header 
     [headerText]="'Export Settings'"

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
@@ -1,7 +1,7 @@
 <div *ngIf="isLoading" class="tw-flex tw-justify-center tw-items-center tw-h-screen">
     <app-loader></app-loader>
 </div>
-<div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="{'tw-mx-120-px': brandingConfig.brandId === 'fyle', 'tw-mx-60-px': brandingConfig.brandId === 'co'}">
+<div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="{'tw-mx-120-px tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-mx-60-px tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}">
     <div>
         <app-configuration-step-header 
         [headerText]="'Import Settings'"

diff --git a/src/app/integrations/landing/landing.component.html b/src/app/integrations/landing/landing.component.html
@@ -20,7 +20,7 @@
 
     <p *ngIf="!exposeOnlyQBOApp" class="tw-mt-1-px landing--divider"></p>
 
-    <div class="tw-pt-40-px" [ngClass]="{'tw-mx-120-px': brandingConfig.brandId === 'fyle', 'tw-mx-60-px': brandingConfig.brandId === 'co'}">
+    <div class="tw-pt-40-px" [ngClass]="{'tw-mx-120-px tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-mx-60-px tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}">
         <div *ngIf="integrationTabs.ALL || integrationTabs.ACCOUNTING">
             <p class="landing--section-heading">
                 Accounting
@@ -31,7 +31,7 @@
 
             <div class="tw-flex">
                 <div *ngIf="!exposeOnlyQBOApp">
-                    <div class="landing--accounting-app tw-mr-20-px" (click)="openAccountingIntegrationApp(AccountingIntegrationApp.NETSUITE)">
+                    <div class="landing--accounting-app tw-mr-20-px" [ngClass]="{'tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}" (click)="openAccountingIntegrationApp(AccountingIntegrationApp.NETSUITE)">
                         <img src="assets/logos/netsuite-logo.png" width="120px" height="60px" />
                         <span class="landing--accounting-app-name">
                             NetSuite
@@ -40,15 +40,15 @@
                             </div>
                         </span>
                     </div>
-                    <div class="landing--accounting-app tw-mr-20-px tw-mt-20-px" (click)="openInAppIntegration(InAppIntegration.QBD)">
+                    <div class="landing--accounting-app tw-mr-20-px tw-mt-20-px" [ngClass]="{'tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}" (click)="openInAppIntegration(InAppIntegration.QBD)">
                         <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)">
+                    <div class="landing--accounting-app tw-mr-20-px" [ngClass]="{'tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}" (click)="openAccountingIntegrationApp(AccountingIntegrationApp.SAGE_INTACCT)">
                         <img src="assets/logos/intacct-logo.png" width="120px" height="60px" />
                         <span class="landing--accounting-app-name">
                             Sage Intacct
@@ -57,28 +57,28 @@
                             </div>
                         </span>
                     </div>
-                    <!-- <div *ngIf="!isINCluster" class="landing--accounting-app tw-mr-20-px tw-mt-20-px" (click)="openInAppIntegration(InAppIntegration.BUSINESS_CENTRAL)">
+                    <!-- <div *ngIf="!isINCluster" class="landing--accounting-app tw-mr-20-px tw-mt-20-px" [ngClass]="{'tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}" (click)="openInAppIntegration(InAppIntegration.BUSINESS_CENTRAL)">
                         <img src="assets/logos/BusinessCentral-logo.svg" class="tw-mt-[-20px]" width="50px" height="60px" />
                         <span class="landing--accounting-app-name">
                             Dynamics 365 Business Central
                         </span>
                     </div> -->
                 </div>
                 <div>
-                    <div class="landing--accounting-app tw-mr-20-px" (click)="openAccountingIntegrationApp(AccountingIntegrationApp.QBO)">
+                    <div class="landing--accounting-app tw-mr-20-px" [ngClass]="{'tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}" (click)="openAccountingIntegrationApp(AccountingIntegrationApp.QBO)">
                         <img src="assets/logos/quickbooks-logo.png" width="120px"  />
                         <span class="landing--accounting-app-name">
                             QuickBooks Online
                         </span>
                     </div>
-                    <!-- <div *ngIf="!isINCluster" class="landing--accounting-app tw-mr-20-px tw-mt-20-px" (click)="openInAppIntegration(InAppIntegration.SAGE300)">
+                    <!-- <div *ngIf="!isINCluster" class="landing--accounting-app tw-mr-20-px tw-mt-20-px" [ngClass]="{'tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}" (click)="openInAppIntegration(InAppIntegration.SAGE300)">
                         <img src="assets/logos/sage300-logo.svg" width="110px" height="60px" />
                         <span class="landing--accounting-app-name">
                             Sage 300 CRE
                         </span>
                     </div> -->
                 </div>
-                <div *ngIf="!exposeOnlyQBOApp" class="landing--accounting-app" (click)="openAccountingIntegrationApp(AccountingIntegrationApp.XERO)">
+                <div *ngIf="!exposeOnlyQBOApp" class="landing--accounting-app" [ngClass]="{'tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}" (click)="openAccountingIntegrationApp(AccountingIntegrationApp.XERO)">
                     <img src="assets/logos/xero-logo.png" class="tw-mt-[-20px]" width="65px" height="60px" />
                     <span class="landing--accounting-app-name">
                         Xero
@@ -100,7 +100,7 @@
             </p>
 
             <div class="tw-flex">
-                <div class="landing--accounting-app tw-mr-20-px" (click)="openInAppIntegration(InAppIntegration.BAMBOO_HR)">
+                <div class="landing--accounting-app tw-mr-20-px" [ngClass]="{'tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}" (click)="openInAppIntegration(InAppIntegration.BAMBOO_HR)">
                     <img src="assets/logos/bamboo-hr-logo.svg" width="160px" height="60px" />
                     <span class="landing--accounting-app-name">
                         BambooHR
@@ -119,7 +119,7 @@
             </p>
 
             <div class="tw-flex">
-                <div class="landing--accounting-app tw-mr-20-px" (click)="openInAppIntegration(InAppIntegration.TRAVELPERK)">
+                <div class="landing--accounting-app tw-mr-20-px" [ngClass]="{'tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}" (click)="openInAppIntegration(InAppIntegration.TRAVELPERK)">
                     <img src="assets/logos/travelperk-logo.svg" width="160px" height="60px" />
                     <span class="landing--accounting-app-name">
                         TravelPerk

diff --git a/...bo/qbo-main/qbo-export-log/qbo-complete-export-log/qbo-complete-export-log.component.html b/...bo/qbo-main/qbo-export-log/qbo-complete-export-log/qbo-complete-export-log.component.html
@@ -2,7 +2,7 @@
     <app-loader></app-loader>
 </div>
 
-<div *ngIf="!isLoading" class="tw-rounded-8-px tw-shadow-app-card tw-bg-white tw-border-1-px tw-border-border-tertiary">
+<div *ngIf="!isLoading" class="tw-rounded-8-px tw-bg-white tw-border-1-px tw-border-border-tertiary" [ngClass]="{'tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}">
     <div>
         <app-export-log-filter *ngIf="totalCount > 0 || selectedDateFilter"
             [exportLogForm]="exportLogForm"

diff --git a/.../qbo/qbo-main/qbo-export-log/qbo-complete-export-log/qbo-complete-export-log.component.ts b/.../qbo/qbo-main/qbo-export-log/qbo-complete-export-log/qbo-complete-export-log.component.ts
@@ -10,6 +10,7 @@ import { ExportLogService } from 'src/app/core/services/common/export-log.servic
 import { PaginatorService } from 'src/app/core/services/common/paginator.service';
 import { WindowService } from 'src/app/core/services/common/window.service';
 import { UserService } from 'src/app/core/services/misc/user.service';
+import { brandingConfig } from 'src/app/branding/branding-config';
 
 @Component({
   selector: 'app-qbo-complete-export-log',
@@ -48,6 +49,8 @@ export class QboCompleteExportLogComponent implements OnInit {
 
   private org_id: string = this.userService.getUserProfile().org_id;
 
+  readonly brandingConfig = brandingConfig;
+
   constructor(
     private formBuilder: FormBuilder,
     private exportLogService: ExportLogService,

diff --git a/.../qbo/qbo-main/qbo-export-log/qbo-skipped-export-log/qbo-skipped-export-log.component.html b/.../qbo/qbo-main/qbo-export-log/qbo-skipped-export-log/qbo-skipped-export-log.component.html
@@ -2,7 +2,7 @@
     <app-loader></app-loader>
 </div>
 
-<div *ngIf="!isLoading" class="tw-rounded-8-px tw-shadow-app-card tw-bg-white tw-border-1-px tw-border-separator">
+<div *ngIf="!isLoading" class="tw-rounded-8-px tw-bg-white tw-border-1-px tw-border-separator" [ngClass]="{'tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}">
     <div>
         <app-export-log-filter *ngIf="totalCount > 0 || selectedDateFilter"
             [exportLogForm]="skipExportLogForm"

diff --git a/...ns/qbo/qbo-main/qbo-export-log/qbo-skipped-export-log/qbo-skipped-export-log.component.ts b/...ns/qbo/qbo-main/qbo-export-log/qbo-skipped-export-log/qbo-skipped-export-log.component.ts
@@ -9,6 +9,7 @@ import { AccountingExportService } from 'src/app/core/services/common/accounting
 import { ExportLogService } from 'src/app/core/services/common/export-log.service';
 import { PaginatorService } from 'src/app/core/services/common/paginator.service';
 import { WindowService } from 'src/app/core/services/common/window.service';
+import { brandingConfig } from 'src/app/branding/branding-config';
 
 @Component({
   selector: 'app-qbo-skipped-export-log',
@@ -39,6 +40,8 @@ export class QboSkippedExportLogComponent implements OnInit {
 
   selectedDateFilter: SelectedDateFilter | null;
 
+  readonly brandingConfig = brandingConfig;
+
   constructor(
     private formBuilder: FormBuilder,
     private exportLogService: ExportLogService,

diff --git a/src/app/integrations/qbo/qbo-onboarding/qbo-clone-settings/qbo-clone-settings.component.html b/src/app/integrations/qbo/qbo-onboarding/qbo-clone-settings/qbo-clone-settings.component.html
@@ -3,7 +3,7 @@
     <app-loader></app-loader>
 </div>
 
-<div *ngIf="!isLoading" class="clone-setting configuration--contents tw-border-1-px tw-border-box-color tw-mt-24-px tw-pb-48-px" [ngClass]="{'tw-mx-120-px': brandingConfig.brandId === 'fyle', 'tw-mx-60-px': brandingConfig.brandId === 'co'}">
+<div *ngIf="!isLoading" class="clone-setting configuration--contents tw-border-1-px tw-border-box-color tw-mt-24-px tw-pb-48-px" [ngClass]="{'tw-mx-120-px tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-mx-60-px tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}">
     <app-clone-setting-header [headerText]="'Employee Mapping'" [subHeaderText]="'Choose appropriate representation of your Employees in QuickBooks Online'"></app-clone-setting-header>
 
     <div class="clone-setting--field-section">

diff --git a/...tions/qbo/qbo-onboarding/qbo-onboarding-connector/qbo-onboarding-connector.component.html b/...tions/qbo/qbo-onboarding/qbo-onboarding-connector/qbo-onboarding-connector.component.html
@@ -4,7 +4,7 @@
         <div *ngIf="isLoading" class="tw-flex tw-justify-center tw-items-center tw-pt-80-px">
             <app-loader></app-loader>
         </div>
-        <div *ngIf="!isLoading" class="configuration--contents tw-border-border-tertiary tw-mt-24-px" [ngClass]="{'tw-mx-120-px': brandingConfig.brandId === 'fyle', 'tw-mx-60-px': brandingConfig.brandId === 'co'}">
+        <div *ngIf="!isLoading" class="configuration--contents tw-border-border-tertiary tw-mt-24-px" [ngClass]="{'tw-mx-120-px tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-mx-60-px tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}">
             <div>
                 <app-configuration-step-header
                     [headerText]="'Connect to QuickBooks Online'"

diff --git a/...pp/integrations/qbo/qbo-shared/qbo-advanced-settings/qbo-advanced-settings.component.html b/...pp/integrations/qbo/qbo-shared/qbo-advanced-settings/qbo-advanced-settings.component.html
@@ -1,7 +1,7 @@
 <div *ngIf="isLoading" class="tw-flex tw-justify-center tw-items-center tw-h-screen">
     <app-loader></app-loader>
 </div>
-<div *ngIf="!isLoading" class="configuration--contents tw-border-border-tertiary tw-mt-6" [ngClass]="{'tw-mx-120-px': brandingConfig.brandId === 'fyle', 'tw-mx-60-px': brandingConfig.brandId === 'co'}">
+<div *ngIf="!isLoading" class="configuration--contents tw-border-border-tertiary tw-mt-6" [ngClass]="{'tw-mx-120-px tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-mx-60-px tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}">
     <div>
         <app-configuration-step-header
             [headerText]="'Advanced Settings'"

diff --git a/...pp/integrations/qbo/qbo-shared/qbo-employee-settings/qbo-employee-settings.component.html b/...pp/integrations/qbo/qbo-shared/qbo-employee-settings/qbo-employee-settings.component.html
@@ -2,7 +2,7 @@
     <div *ngIf="isLoading" class="tw-flex tw-justify-center tw-items-center tw-pt-80-px">
         <app-loader></app-loader>
     </div>
-    <div *ngIf="!isLoading" class="configuration--contents tw-border-border-tertiary tw-mt-6" [ngClass]="{'tw-mx-120-px': brandingConfig.brandId === 'fyle', 'tw-mx-60-px': brandingConfig.brandId === 'co'}">
+    <div *ngIf="!isLoading" class="configuration--contents tw-border-border-tertiary tw-mt-6" [ngClass]="{'tw-mx-120-px tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-mx-60-px tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}">
         <div>
             <app-configuration-step-header
                 [headerText]="'Map Employees'"

diff --git a/src/app/integrations/qbo/qbo-shared/qbo-export-settings/qbo-export-settings.component.html b/src/app/integrations/qbo/qbo-shared/qbo-export-settings/qbo-export-settings.component.html
@@ -2,7 +2,7 @@
     <div *ngIf="isLoading" class="tw-flex tw-justify-center tw-items-center tw-pt-80-px">
         <app-loader></app-loader>
     </div>
-    <div *ngIf="!isLoading" class="configuration--contents tw-border-border-tertiary tw-mt-6" [ngClass]="{'tw-mx-120-px': brandingConfig.brandId === 'fyle', 'tw-mx-60-px': brandingConfig.brandId === 'co'}">
+    <div *ngIf="!isLoading" class="configuration--contents tw-border-border-tertiary tw-mt-6" [ngClass]="{'tw-mx-120-px tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-mx-60-px tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}">
         <div>
             <app-configuration-step-header
                 [headerText]="'Export Settings'"

diff --git a/src/app/integrations/qbo/qbo-shared/qbo-import-settings/qbo-import-settings.component.html b/src/app/integrations/qbo/qbo-shared/qbo-import-settings/qbo-import-settings.component.html
@@ -1,7 +1,7 @@
 <div *ngIf="isLoading" class="tw-flex tw-justify-center tw-items-center tw-h-screen">
     <app-loader></app-loader>
 </div>
-<div *ngIf="!isLoading" class="configuration--contents tw-border-border-tertiary tw-mt-6" [ngClass]="{'tw-mx-120-px': brandingConfig.brandId === 'fyle', 'tw-mx-60-px': brandingConfig.brandId === 'co'}">
+<div *ngIf="!isLoading" class="configuration--contents tw-border-border-tertiary tw-mt-6" [ngClass]="{'tw-mx-120-px tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-mx-60-px tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}">
     <div>
         <app-configuration-step-header [headerText]="'Import Settings'"
             [contentText]="'In this section, you can choose the fields required to be imported from QuickBooks Online to ' + brandingConfig.brandName + '. '"

diff --git a/...ge300-onboarding/sage300-onboarding-connector/sage300-onboarding-connector.component.html b/...ge300-onboarding/sage300-onboarding-connector/sage300-onboarding-connector.component.html
@@ -6,7 +6,7 @@
         <div *ngIf="isLoading" class="tw-flex tw-justify-center tw-items-center tw-h-screen">
             <app-loader></app-loader>
         </div>
-        <div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="{'tw-mx-120-px': brandingConfig.brandId === 'fyle', 'tw-mx-60-px': brandingConfig.brandId === 'co'}">
+        <div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="{'tw-mx-120-px tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-mx-60-px tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}">
             <div>
                 <app-configuration-step-header 
                 [headerText]="'Connect to your Sage 300 CRE account'"