QA fixes after design team testing (#1092)

DhaaraniCIT · web-flow · commit b30ccf62ebfd · 2024-12-03T15:46:24.000+05:30
diff --git a/src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-configuration/qbd-direct-configuration.component.html b/src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-configuration/qbd-direct-configuration.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="isGradientAllowed" class="tw-absolute tw-bg-header-1 tw-h-84-px tw-w-[100%]"></div>
+<div *ngIf="isGradientAllowed" class="tw-absolute tw-bg-header-1 tw-bg-no-repeat tw-h-84-px tw-w-[100%]"></div>
 <div *ngIf="isGradientAllowed" class="tw-absolute tw-bg-header-2 tw-h-84-px tw-w-[100%]"></div>
 <div class="tw-py-40-px">
     <div [ngClass]="{'tw-px-120-px': brandingConfig.brandId === 'fyle', 'tw-px-60-px': brandingConfig.brandId === 'co'}">
diff --git a/src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-dashboard/qbd-direct-dashboard.component.html b/src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-dashboard/qbd-direct-dashboard.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="isGradientAllowed" class="tw-absolute tw-bg-header-1 tw-h-110-px tw-w-[100%]"></div>
+<div *ngIf="isGradientAllowed" class="tw-absolute tw-bg-header-1 tw-bg-no-repeat tw-h-110-px tw-w-[100%]"></div>
 <div *ngIf="isGradientAllowed" class="tw-absolute tw-bg-header-2 tw-h-110-px tw-w-[100%]"></div>
 
 <div *ngIf="isLoading" class="tw-flex tw-justify-center tw-items-center tw-h-screen">
diff --git a/src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-export-log/qbd-direct-export-log.component.html b/src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-export-log/qbd-direct-export-log.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="isGradientAllowed" class="tw-absolute tw-bg-header-1 tw-h-84-px tw-w-[100%]"></div>
+<div *ngIf="isGradientAllowed" class="tw-absolute tw-bg-header-1 tw-bg-no-repeat tw-h-84-px tw-w-[100%]"></div>
 <div *ngIf="isGradientAllowed" class="tw-absolute tw-bg-header-2 tw-h-84-px tw-w-[100%]"></div>
 
 <div class="tw-py-40-px" [ngClass]="{'tw-px-120-px': brandingConfig.brandId === 'fyle', 'tw-px-60-px': brandingConfig.brandId === 'co'}">
diff --git a/src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-mapping/qbd-direct-mapping.component.html b/src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-mapping/qbd-direct-mapping.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="isGradientAllowed" class="tw-absolute tw-bg-header-1 tw-h-84-px tw-w-[100%]"></div>
+<div *ngIf="isGradientAllowed" class="tw-absolute tw-bg-header-1 tw-bg-no-repeat tw-h-84-px tw-w-[100%]"></div>
 <div *ngIf="isGradientAllowed" class="tw-absolute tw-bg-header-2 tw-h-84-px tw-w-[100%]"></div>
 <div *ngIf="!isLoading" class="tw-py-40-px" [ngClass]="{'tw-px-120-px': brandingConfig.brandId === 'fyle', 'tw-px-60-px': brandingConfig.brandId === 'co'}">
     <app-sub-menu [modules]="mappingPages" [activeModule]="mappingPages[0]"></app-sub-menu>
diff --git a/src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-connector/qbd-direct-onboarding-connector.component.html b/src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-connector/qbd-direct-onboarding-connector.component.html
@@ -33,7 +33,8 @@
                     [isStepCompleted]="isConnectionStepCompleted"
                     [isCTAEnabled]="isConnectionCTAEnabled"
                     (doneClick)="onConnectionDone($event)"
-                    (nextClick)="proceedToSyncData()"></app-qbd-direct-setup-connection>
+                    (nextClick)="proceedToSyncData()"
+                    (manualDownload)="triggerManualDownload()"></app-qbd-direct-setup-connection>
                 </div>
                 <div class="tw-py-8-px">
                     <app-qbd-direct-data-sync
diff --git a/src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-landing/qbd-direct-onboarding-landing.component.html b/src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-landing/qbd-direct-onboarding-landing.component.html
@@ -3,6 +3,6 @@
         <app-landing-page-header [buttonText]="'Start'" [iconPath]="'assets/logos/qbo.png'" [appName]="'QuickBooks Desktop - Direct Integration'" [appDescription]="brandingContent.contentText" [isConnectionInProgress]="isQbdConnectionInProgress" [isLoading]="false" [isIntegrationConnected]="false" [redirectLink]="redirectLink" (connectIntegration)="connectQbdDirect()" [logoStyleClasses]="'tw-p-16-px'"></app-landing-page-header>
     </div>
     <div>
-        <app-landing-page-body [headlineText]="brandingContent.guideHeaderText" [headerText]="'A quick guide to help you set up your QuickBooks Online integration.'" [embedVideo]="embedVideoLink" [embedImage]="'assets/co/coQBOLanding.svg'" [svgPath]="'assets/flow-charts/' + brandingConfig.brandId +'-qbd-direct-flow-chart.svg'" [appName]="appName"></app-landing-page-body>
+        <app-landing-page-body [headlineText]="brandingContent.guideHeaderText" [headerText]="'A quick guide to help you set up your Fyle-QuickBooks Desktop integration.'" [embedVideo]="embedVideoLink" [embedImage]="'assets/co/coQBOLanding.svg'" [svgPath]="'assets/flow-charts/' + brandingConfig.brandId +'-qbd-direct-flow-chart.svg'" [appName]="appName" [redirectLink]="redirectLink"></app-landing-page-body>
     </div>
 </div>
diff --git a/src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-pre-requisite/qbd-direct-onboarding-pre-requisite.component.html b/src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-pre-requisite/qbd-direct-onboarding-pre-requisite.component.html
@@ -21,7 +21,7 @@
                             </div>
                             <div class="tw-ml-16-px">
                                 <h4 class="tw-text-14-px tw-font-500" [ngClass]="step.state === qbdPreRequisiteState.COMPLETE ? 'tw-text-text-disable' : 'tw-text-text-secondary'">{{step.label}}</h4>
-                                <p class="tw-text-12-px tw-pt-4-px tw-font-400" [ngClass]="step.state === qbdPreRequisiteState.COMPLETE ? 'tw-text-text-disable' : 'tw-text-text-tertiary'">{{step.caption}}</p>
+                                <p class="tw-text-12-px tw-pt-4-px tw-font-400" [ngClass]="step.state === qbdPreRequisiteState.COMPLETE ? 'tw-text-text-disable' : 'tw-text-text-tertiary'" [innerHTML]="step.caption"></p>
                             </div>
                         </div>
                         <div>
diff --git a/src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-pre-requisite/qbd-direct-onboarding-pre-requisite.component.ts b/src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-pre-requisite/qbd-direct-onboarding-pre-requisite.component.ts
@@ -44,7 +44,7 @@ export class QbdDirectOnboardingPreRequisiteComponent {
     {
       id: 1,
       label: 'Install QuickBooks Web Connector',
-      caption: 'Download and install the QuickBooks Web Connector on the system where QuickBooks Desktop is installed.',
+      caption: `<a href='https://developer.intuit.com/app/developer/qbdesktop/docs/get-started/get-started-with-quickbooks-web-connector' target="_blank" class=" tw-underline !tw-underline-offset-1" >Download</a> and install the QuickBooks Web Connector on the system where QuickBooks Desktop is installed.`,
       externalLink: 'https://qbd.com',
       iconName: 'download-medium',
       state: QBDPreRequisiteState.INCOMPLETE
diff --git a/src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-data-sync/qbd-direct-data-sync.component.html b/src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-data-sync/qbd-direct-data-sync.component.html
@@ -1,8 +1,8 @@
-<div class="tw-border tw-rounded-border-radius-2xs tw-border-border-info-lighter" [ngClass]="{'tw-bg-border-info-lighter': !showSection}">
+<div class="tw-border tw-rounded-border-radius-2xs tw-border-border-tertiary" [ngClass]="{'tw-opacity-50': !showSection}">
     <div class="tw-p-24-px">
         <div class="tw-flex tw-items-center tw-justify-between">
             <div class="tw-flex tw-items-center tw-justify-start">
-                <div class="tw-w-20-px tw-h-20-px tw-rounded-border-radius-2xs tw-bg-bg-secondary tw-text-white tw-text-14-px tw-font-500 tw-text-center tw-mr-12-px" [ngClass]="[!showSection ? 'tw-opacity-60' : 'tw-opacity-100']">
+                <div class="tw-w-20-px tw-h-20-px tw-rounded-border-radius-2xs tw-bg-bg-secondary tw-text-white tw-text-14-px tw-font-500 tw-text-center tw-mr-12-px">
                     3
                 </div>
                 <div class="tw-text-14-px tw-font-500" [ngClass]="[!showSection ? 'tw-text-text-disable' : 'tw-text-text-tertiary']">
diff --git a/src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-download-file/qbd-direct-download-file.component.html b/src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-download-file/qbd-direct-download-file.component.html
@@ -1,4 +1,4 @@
-<div class="tw-border tw-border-border-info-lighter tw-rounded-border-radius-2xs">
+<div class="tw-border tw-border-border-tertiary tw-rounded-border-radius-2xs">
     <div class="tw-p-24-px">
         <div class="tw-flex tw-items-center tw-justify-between">
             <div class="tw-flex tw-items-center tw-justify-start">
@@ -40,10 +40,10 @@ <h4 class="tw-text-16-px tw-pb-4-px tw-font-500 tw-text-text-tertiary">Enter com
                     </div>
                 </div>
             </div>
-            <div class="">
+            <div class="tw-w-[40%]">
                 <div class="tw-shadow-md tw-rounded-border-radius-2xl">
-                    <div class="tw-flex tw-justify-center">
-                        <iframe width="427" height="259" src="https://www.youtube.com/embed/2oYdc8KcQnk" frameborder="0"></iframe>
+                    <div class="tw-flex tw-justify-center tw-overflow-hidden">
+                        <iframe class="tw-rounded-tl-border-radius-2xl tw-rounded-tr-border-radius-2xl tw-w-[100%] tw-h-240-px" src="https://www.youtube.com/embed/2oYdc8KcQnk" frameborder="0"></iframe>
                     </div>
                     <div class="tw-p-16-px">
                         <p class="tw-text-14-px tw-font-500 tw-text-text-tertiary">Where to find company file path?</p>
diff --git a/src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-download-file/qbd-direct-download-file.component.ts b/src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-download-file/qbd-direct-download-file.component.ts
@@ -9,7 +9,7 @@ import { ProgressSpinnerModule } from 'primeng/progressspinner';
 @Component({
   selector: 'app-qbd-direct-download-file',
   standalone: true,
-  imports: [SharedModule, QbdDirectSharedComponent, CardModule, CommonModule, ProgressSpinnerModule],
+  imports: [SharedModule, CardModule, CommonModule, ProgressSpinnerModule],
   templateUrl: './qbd-direct-download-file.component.html',
   styleUrl: './qbd-direct-download-file.component.scss'
 })
diff --git a/src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.html b/src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.html
@@ -1,8 +1,8 @@
-<div class="tw-border tw-rounded-border-radius-2xs tw-border-border-info-lighter" [ngClass]="{'tw-bg-border-info-lighter': !showSection}">
+<div class="tw-border tw-rounded-border-radius-2xs tw-border-border-tertiary" [ngClass]="{'tw-opacity-50': !showSection}">
     <div class="tw-p-24-px">
         <div class="tw-flex tw-items-center tw-justify-between">
             <div class="tw-flex tw-items-center tw-justify-start">
-                <div class="tw-w-20-px tw-h-20-px tw-rounded-border-radius-2xs tw-bg-bg-secondary tw-text-white tw-text-14-px tw-font-500 tw-text-center tw-mr-12-px" [ngClass]="[!showSection ? 'tw-opacity-60' : 'tw-opacity-100']">
+                <div class="tw-w-20-px tw-h-20-px tw-rounded-border-radius-2xs tw-bg-bg-secondary tw-text-white tw-text-14-px tw-font-500 tw-text-center tw-mr-12-px">
                     2
                 </div>
                 <div class="tw-text-14-px tw-font-500" [ngClass]="[!showSection ? 'tw-text-text-disable' : 'tw-text-text-tertiary']">
@@ -22,8 +22,8 @@
                         <div class="!tw-w-45-px !tw-h-45-px tw-border tw-border-border-tertiary tw-flex tw-items-center tw-justify-center tw-rounded-border-radius-2xs tw-bg-disabled-bg-color">
                             <app-svg-icon [svgSource]="'upload'" [width]="'16px'" [height]="'16px'" [isTextColorAllowed]="true" [styleClasses]="'tw-text-text-tertiary'"></app-svg-icon>
                         </div>
-                        <div class="tw-ml-16-px">
-                            <h4 class="tw-text-14-px tw-text-text-tertiary tw-font-500 tw-pb-4-px">Open the integration file using QuickBooks Web Connector</h4>
+                        <div class="tw-ml-16-px tw-max-w-[300px] tw-break-words">
+                            <h4 class="tw-text-14-px tw-text-text-tertiary tw-font-500 tw-pb-4-px">Open the <a (click)="onManualDownload()" class=" tw-underline !tw-underline-offset-1 tw-cursor-pointer">integration file</a> using QuickBooks Web Connector</h4>
                             <p class="tw-text-12-px tw-text-text-muted tw-font-400">Watch the video for guidance on opening the downloaded integration file in QuickBooks Web Connector.</p>
                         </div>
                     </div>
@@ -58,7 +58,7 @@ <h4 class="tw-text-14-px tw-text-text-tertiary tw-font-500 tw-pb-4-px">Use this
                         <div class="!tw-w-45-px !tw-h-45-px tw-border tw-border-border-tertiary tw-flex tw-items-center tw-justify-center tw-rounded-border-radius-2xs tw-bg-disabled-bg-color">
                             <app-svg-icon [svgSource]="'check'" [isTextColorAllowed]="true" [styleClasses]="'tw-text-text-tertiary'" [width]="'20px'" [height]="'20px'"></app-svg-icon>
                         </div>
-                        <div class="tw-ml-16-px">
+                        <div class="tw-ml-16-px tw-max-w-[300px] tw-break-words">
                             <h4 class="tw-text-14-px tw-text-text-tertiary tw-font-500 tw-pb-4-px">Click on ‘Update Selected’ on QuickBooks Web Connector </h4>
                             <p class="tw-text-12-px tw-text-text-muted tw-font-400">Click the 'Update Selected' option to initiate a connection between Fyle and QuickBooks Desktop</p>
                         </div>
@@ -73,9 +73,9 @@ <h4 class="tw-text-14-px tw-text-text-tertiary tw-font-500 tw-pb-4-px">Click on
                     </app-checkbox-button>
                 </div>
             </div>
-            <div class="tw-rounded-border-radius-2xl">
+            <div class="tw-w-[40%]">
                 <div class="tw-flex tw-justify-center tw-shadow-sm">
-                    <iframe width="427" height="259" src="https://www.youtube.com/embed/2oYdc8KcQnk" frameborder="0"></iframe>
+                    <iframe class="tw-rounded-border-radius-2xl tw-w-[100%]" height="260" src="https://www.youtube.com/embed/2oYdc8KcQnk" frameborder="0"></iframe>
                 </div>
             </div>
         </div>
diff --git a/src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.ts b/src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-setup-connection/qbd-direct-setup-connection.component.ts
@@ -32,6 +32,8 @@ export class QbdDirectSetupConnectionComponent {
 
   @Output() nextClick = new EventEmitter();
 
+  @Output() manualDownload = new EventEmitter();
+
   qbdConnectionStatus = QBDConnectionStatus;
 
   ConfigurationCtaText = ConfigurationCta;
@@ -73,4 +75,8 @@ export class QbdDirectSetupConnectionComponent {
     this.isPasswordShown = isPasswordVisible;
   }
 
+  onManualDownload() {
+    this.manualDownload.emit();
+  }
+
 }
diff --git a/src/app/shared/components/configuration/configuration-confirmation-dialog/configuration-confirmation-dialog.component.html b/src/app/shared/components/configuration/configuration-confirmation-dialog/configuration-confirmation-dialog.component.html
@@ -6,12 +6,12 @@
                     <div *ngIf="appName!==AppName.QBD_DIRECT" class="tw-p-8-px tw-bg-bg-warning-lighter tw-mr-10-px">
                         <app-svg-icon [svgSource]="'warning-outline'" [width]="'16px'" [height]="'16px'" [styleClasses]="'tw-text-icon-warning'"></app-svg-icon>
                     </div>
-                    <div *ngIf="appName===AppName.QBD_DIRECT" class="tw-p-8-px tw-bg-bg-danger-lighter tw-mr-10-px">
+                    <div *ngIf="appName===AppName.QBD_DIRECT" class="tw-p-8-px tw-bg-bg-danger-lighter tw-rounded-border-radius-2xs tw-mr-10-px">
                         <app-svg-icon [svgSource]="'danger-outline'" [width]="'18px'" [height]="'18px'" [styleClasses]="'tw-text-alert-toast'"></app-svg-icon>
                     </div>
                     <p class="tw-text-20-px tw-font-500 tw-text-text-primary">{{headerText}}</p>
                 </div>
-                <i [ngClass]="[brandingConfig.brandId === 'fyle' ? 'pi pi-times fyle' : 'pi pi-times co']" class="tw-cursor-pointer" style="font-size: 12px" (click)="acceptWarning(false)"></i>
+                <i [ngClass]="{'pi pi-times fyle' : brandingConfig.brandId === 'fyle' && appName!==AppName.QBD_DIRECT, 'pi pi-times fyle qbd' : brandingConfig.brandId === 'fyle' && appName===AppName.QBD_DIRECT, 'pi pi-times co' : brandingConfig.brandId !== 'fyle'}" class="tw-cursor-pointer" style="font-size: 12px" (click)="acceptWarning(false)"></i>
             </div>
         </div>
         <div class="tw-pl-24-px tw-pr-10-px tw-pt-16-px tw-pb-24-px">
@@ -27,7 +27,7 @@
                         <img [src]="brandIcon" width="12px" height="12px">
                     </div>
                     <div>
-                        <p class="tw-text-size-10 tw-text-text-disable tw-font-400">
+                        <p class="tw-text-size-10 tw-text-text-disable tw-font-400 tw-max-w-[400px] tw-truncate">
                             {{brandingKbArticles.onboardingArticles.QBD_DIRECT.HELPER_ARTICLE}}
                         </p>
                     </div>
diff --git a/src/app/shared/components/helper/app-landing-page-body/app-landing-page-body.component.html b/src/app/shared/components/helper/app-landing-page-body/app-landing-page-body.component.html
@@ -1,10 +1,10 @@
 <div class="tw-pt-80-px tw-flex tw-justify-center tw-text-center tw-flex-col">
     <p *ngIf="!headlineText" class="tw-text-normal-text-color tw-text-20-px tw-font-500">A Simple Tutorial for a Seamless Set-Up</p>
     <p *ngIf="headlineText" class="tw-text-text-primary tw-text-20-px tw-font-500">{{ headlineText }}</p>
-    <p class="tw-text-text-secondary tw-text-14-px tw-pt-8-px tw-flex tw-justify-center">
+    <p class="tw-text-text-muted tw-text-14-px tw-pt-8-px tw-flex tw-justify-center">
         {{headerText}}
         <a *ngIf="redirectLink"
-            class="tw-text-link-primary tw-w-fit tw-cursor-pointer tw-inline-flex tw-items-center tw-pl-2-px"
+            class="tw-text-link-primary tw-w-fit tw-font-500 tw-cursor-pointer tw-inline-flex tw-items-center tw-pl-2-px"
             (click)="windowService.openInNewTab(redirectLink)">
                 {{brandingContent.readMoreText}}
             <app-svg-icon *ngIf="brandingFeatureConfig.isIconsInsideButtonAllowed" [svgSource]="'open-in-new-tab'" [width]="'16px'" [height]="'16px'" class="tw-text-link-primary tw-pl-2-px tw-w-fit"></app-svg-icon>
diff --git a/src/app/shared/components/helper/app-landing-page-header/app-landing-page-header.component.html b/src/app/shared/components/helper/app-landing-page-header/app-landing-page-header.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="isGradientAllowed" class="tw-absolute tw-bg-header-1 tw-h-110-px tw-w-[100%] tw-z-[-1]"></div>
+<div *ngIf="isGradientAllowed" class="tw-absolute tw-bg-header-1 tw-bg-no-repeat tw-h-110-px tw-w-[100%] tw-z-[-1]"></div>
 <div *ngIf="isGradientAllowed" class="tw-absolute tw-bg-header-2 tw-h-110-px tw-w-[100%] tw-z-[-1]"></div>
 
 <div class="tw-p-24-px tw-text-slightly-normal-text-color">
@@ -14,7 +14,7 @@
                             <app-svg-icon *ngIf="isIntegrationConnected && !isLoading && !hideRefreshIcon" [tooltipText]="'Sync Data'" [tooltipPosition]="'right'" [svgSource]="'arrow-rotate-sync'" [width]="'14px'" [height]="'14px'" [styleClasses]="'tw-cursor-pointer tw-ml-10-px tw-text-faded-text-color'" (iconClick)="syncData()"></app-svg-icon>
                         </div>
                     </div>
-                    <p *ngIf="!isIntegrationSetupInProgress" class="tw-text-text-secondary tw-pt-4-px tw-text-14-px tw-font-400 tw-text-pretty">
+                    <p *ngIf="!isIntegrationSetupInProgress" class="tw-text-text-tertiary tw-pt-4-px tw-text-14-px tw-font-400 tw-text-pretty">
                         {{ appDescription }}
                         <a *ngIf="redirectLink"
                             class="tw-text-link-primary tw-w-fit tw-cursor-pointer tw-inline-flex tw-items-center tw-pl-2-px"
diff --git a/src/app/shared/components/helper/onboarding-done/onboarding-done.component.html b/src/app/shared/components/helper/onboarding-done/onboarding-done.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="isGradientAllowed" class="tw-absolute tw-bg-header-1 tw-h-110-px tw-w-[100%] tw-z-[-1]"></div>
+<div *ngIf="isGradientAllowed" class="tw-absolute tw-bg-header-1 tw-bg-no-repeat tw-h-110-px tw-w-[100%] tw-z-[-1]"></div>
 <div *ngIf="isGradientAllowed" class="tw-absolute tw-bg-header-2 tw-h-110-px tw-w-[100%] tw-z-[-1]"></div>
 <div class="tw-flex tw-justify-center tw-pr-74-px tw-pl-74-px tw-pt-24 tw-pb-20">
   <div class="onboarding-done--contents" [ngClass]="{'tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}">
diff --git a/src/app/shared/components/helper/onboarding-stepper/onboarding-stepper.component.html b/src/app/shared/components/helper/onboarding-stepper/onboarding-stepper.component.html
@@ -1,4 +1,4 @@
-<div *ngIf="isGradientAllowed" class="tw-absolute tw-bg-header-1 tw-h-168-px tw-w-[100%] tw-z-[-1]"></div>
+<div *ngIf="isGradientAllowed" class="tw-absolute tw-bg-header-1 tw-bg-no-repeat tw-h-168-px tw-w-[100%] tw-z-[-1]"></div>
 <div *ngIf="isGradientAllowed" class="tw-absolute tw-bg-header-2 tw-h-168-px tw-w-[100%] tw-z-[-1]"></div>
 
 <div class="tw-py-60-px tw-text-text-primary">
diff --git a/src/styles.scss b/src/styles.scss
@@ -28,6 +28,10 @@ p {
     @apply tw-m-0-px;
 }
 
+.pi-times.fyle.qbd{
+    content: url('./assets/icons/cross.svg') !important;
+}
+
 .pi-times.fyle {
     content: url('./assets/icons/cross-medium.svg') !important;
 }
@@ -187,7 +191,7 @@ p {
 
 // Dialog
 .p-dialog .p-dialog-content {
-    @apply tw-p-0 #{!important};
+    @apply tw-p-0 tw-rounded-border-radius-2xs #{!important};
 }
 
 .p-dialog .p-dialog-header .p-dialog-header-icons .p-button, .p-dialog .p-dialog-header .p-dialog-header-icons .p-button:enabled:hover {

Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,4 @@`
`1`		`-<div *ngIf="isGradientAllowed" class="tw-absolute tw-bg-header-1 tw-h-84-px tw-w-[100%]"></div>`
	`1`	`+<div *ngIf="isGradientAllowed" class="tw-absolute tw-bg-header-1 tw-bg-no-repeat tw-h-84-px tw-w-[100%]"></div>`
`2`	`2`	`<div *ngIf="isGradientAllowed" class="tw-absolute tw-bg-header-2 tw-h-84-px tw-w-[100%]"></div>`
`3`	`3`	`<div class="tw-py-40-px">`
`4`	`4`	`<div [ngClass]="{'tw-px-120-px': brandingConfig.brandId === 'fyle', 'tw-px-60-px': brandingConfig.brandId === 'co'}">`
Original file line number	Diff line number	Diff line change
`@@ -44,7 +44,7 @@ export class QbdDirectOnboardingPreRequisiteComponent {`
`44`	`44`	`{`
`45`	`45`	`id: 1,`
`46`	`46`	`label: 'Install QuickBooks Web Connector',`
`47`		`- caption: 'Download and install the QuickBooks Web Connector on the system where QuickBooks Desktop is installed.',`
	`47`	+ caption: `<a href='https://developer.intuit.com/app/developer/qbdesktop/docs/get-started/get-started-with-quickbooks-web-connector' target="_blank" class=" tw-underline !tw-underline-offset-1" >Download</a> and install the QuickBooks Web Connector on the system where QuickBooks Desktop is installed.`,
`48`	`48`	`externalLink: 'https://qbd.com',`
`49`	`49`	`iconName: 'download-medium',`
`50`	`50`	`state: QBDPreRequisiteState.INCOMPLETE`