PR comments fix

src/app/branding/c1-style-config.ts

@@ -5,9 +5,9 @@ export const brandingConfig: BrandingConfiguration = config as BrandingConfigura
 
 export const c1Styles = {
     common: {
-        configurationCommonStyle: 'tw-mx-60-px tw-shadow-shadow-level-1',
-        mainPaddingStyle: 'tw-px-60-px',
-        mainShadowStyle: 'tw-shadow-shadow-level-1'
+        configurationContents: 'tw-mx-60-px tw-shadow-shadow-level-1',
+        mainComponentPadding: 'tw-px-60-px',
+        mainComponentShadow: 'tw-shadow-shadow-level-1'
     },
     mapping: {
         mappingHeaderBoxShadow: 'tw-shadow-shadow-level-1'

src/app/branding/fyle-style-config.ts

@@ -5,9 +5,9 @@ export const brandingConfig: BrandingConfiguration = config as BrandingConfigura
 
 export const fyleStyles = {
     common: {
-        configurationCommonStyle: 'tw-mx-120-px tw-shadow-app-card',
-        mainPaddingStyle: 'tw-px-120-px',
-        mainShadowStyle: 'tw-shadow-app-card'
+        configurationContents: 'tw-mx-120-px tw-shadow-app-card',
+        mainComponentPadding: 'tw-px-120-px',
+        mainComponentShadow: 'tw-shadow-app-card'
     },
     mapping: {
         mappingHeaderBoxShadow: 'tw-shadow-stats-box'

src/app/integrations/business-central/business-central-main/business-central-export-log/business-central-export-log.component.html

@@ -6,7 +6,7 @@
 </div>
 
 
-<div *ngIf="!isLoading" class="tw-py-40-px" [ngClass]="brandingStyle.common.mainPaddingStyle">
+<div *ngIf="!isLoading" class="tw-py-40-px" [ngClass]="brandingStyle.common.mainComponentPadding">
     <app-sub-menu [modules]="modules" [activeModule]="activeModule"></app-sub-menu>
     <div>
         <router-outlet></router-outlet>

src/app/integrations/business-central/business-central-main/business-central-mapping/business-central-mapping.component.html

@@ -2,7 +2,7 @@
 
 <div *ngIf="isGradientAllowed" class="tw-absolute tw-bg-header-1 tw-h-84-px tw-w-[100%] tw-z-[-1]"></div>
 <div *ngIf="isGradientAllowed" class="tw-absolute tw-bg-header-2 tw-h-84-px tw-w-[100%] tw-z-[-1]"></div>
-<div *ngIf="!isLoading" class="tw-py-40-px" [ngClass]="brandingStyle.common.mainPaddingStyle">
+<div *ngIf="!isLoading" class="tw-py-40-px" [ngClass]="brandingStyle.common.mainComponentPadding">
     <app-sub-menu [modules]="mappingPages" [activeModule]="mappingPages[0]"></app-sub-menu>
     <div>
         <router-outlet></router-outlet>

src/app/integrations/business-central/business-central-onboarding/business-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]="brandingStyle.common.configurationCommonStyle">
+        <div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="brandingStyle.common.configurationContents">
             <div>
                 <app-configuration-step-header 
                 [headerText]="'Connect to your Dynamics 365 Business Central account'"

src/app/integrations/business-central/business-central-shared/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]="brandingStyle.common.configurationCommonStyle">
+<div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="brandingStyle.common.configurationContents">
     <div>
         <app-configuration-step-header 
             [headerText]="'Advanced Settings'"

src/app/integrations/business-central/business-central-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]="brandingStyle.common.configurationCommonStyle">
+<div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="brandingStyle.common.configurationContents">
     <div>
         <app-configuration-step-header 
             [headerText]="'Export Settings'"

src/app/integrations/business-central/business-central-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]="brandingStyle.common.configurationCommonStyle">
+<div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="brandingStyle.common.configurationContents">
     <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 + '. '"

src/app/integrations/intacct/intacct-main/intacct-configuration/intacct-configuration.component.html

@@ -1,7 +1,7 @@
 <div *ngIf="isGradientAllowed" class="tw-absolute tw-bg-header-1 tw-h-84-px tw-w-[100%] tw-z-[-1]"></div>
 <div *ngIf="isGradientAllowed" class="tw-absolute tw-bg-header-2 tw-h-84-px tw-w-[100%] tw-z-[-1]"></div>
 <div class="tw-py-40-px">
-    <div [ngClass]="brandingStyle.common.mainPaddingStyle">
+    <div [ngClass]="brandingStyle.common.mainComponentPadding">
         <app-sub-menu [activeModule]="activeModule" [modules]="modules" ></app-sub-menu>
     </div>
     <div>

src/app/integrations/intacct/intacct-main/intacct-export-log/intacct-completed-export-log/intacct-completed-export-log.component.html

@@ -2,7 +2,7 @@
     <app-loader></app-loader>
 </div>
 
-<div class="tw-rounded-8-px tw-bg-white tw-border-1-px tw-border-border-tertiary" [ngClass]="brandingStyle.common.mainShadowStyle">
+<div class="tw-rounded-8-px tw-bg-white tw-border-1-px tw-border-border-tertiary" [ngClass]="brandingStyle.common.mainComponentShadow">
     <div>
         <app-export-log-filter *ngIf="totalCount > 0 || (isDateSelected || searchQuery)"
             [exportLogForm]="exportLogForm"

src/app/integrations/intacct/intacct-main/intacct-export-log/intacct-export-log.component.html

@@ -1,7 +1,7 @@
 <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-2 tw-h-84-px tw-w-[100%]"></div>
 
-<div class="tw-py-40-px" [ngClass]="brandingStyle.common.mainPaddingStyle">
+<div class="tw-py-40-px" [ngClass]="brandingStyle.common.mainComponentPadding">
     <app-sub-menu *ngIf="brandingFeatureConfig.featureFlags.advancedSettings.skipExport" [modules]="modules" [activeModule]="activeModule"></app-sub-menu>
     <div>
         <router-outlet></router-outlet>

src/app/integrations/intacct/intacct-main/intacct-export-log/intacct-skip-export-log/intacct-skip-export-log.component.html

@@ -2,7 +2,7 @@
     <app-loader></app-loader>
 </div>
 
-<div class="tw-rounded-8-px tw-bg-white tw-border-1-px tw-border-separator" [ngClass]="brandingStyle.common.mainShadowStyle">
+<div class="tw-rounded-8-px tw-bg-white tw-border-1-px tw-border-separator" [ngClass]="brandingStyle.common.mainComponentShadow">
     <div>
         <app-export-log-filter *ngIf="totalCount > 0 || (isDateSelected || searchQuery)"
             [exportLogForm]="skipExportLogForm"

src/app/integrations/intacct/intacct-main/intacct-mapping/intacct-mapping.component.html

@@ -1,6 +1,6 @@
 <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-2 tw-h-84-px tw-w-[100%]"></div>
-<div *ngIf="!isLoading" class="tw-py-40-px" [ngClass]="brandingStyle.common.mainPaddingStyle">
+<div *ngIf="!isLoading" class="tw-py-40-px" [ngClass]="brandingStyle.common.mainComponentPadding">
     <app-sub-menu [modules]="mappingPages" [activeModule]="mappingPages[0]"></app-sub-menu>
     <div>
         <router-outlet></router-outlet>

src/app/integrations/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]="brandingStyle.common.configurationCommonStyle">
+<div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="brandingStyle.common.configurationContents">
     <div>
     <app-configuration-step-header 
     [headerText]="brandingContent.intacct.configuration.advancedSettings.stepName"

src/app/integrations/intacct/intacct-shared/intacct-c1-import-settings/intacct-c1-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]="brandingStyle.common.configurationCommonStyle">
+<div *ngIf="!isLoading" class="configuration--contents tw-border-border-tertiary tw-mt-6" [ngClass]="brandingStyle.common.configurationContents">
     <div>
         <app-configuration-step-header [headerText]="'Import settings'"
             [contentText]="brandingConfig.brandId === 'co' ? 'Choose the required import fields from Sage Intacct to Expense Management.' : 'Select the field information to import from Sage Intacct to ' + brandingConfig.brandName + '. '"

src/app/integrations/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]="brandingStyle.common.configurationCommonStyle">
+<div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="brandingStyle.common.configurationContents">
     <div>
     <app-configuration-step-header 
     [headerText]="brandingContent.intacct.configuration.exportSetting.stepName"

src/app/integrations/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]="brandingStyle.common.configurationCommonStyle">
+<div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="brandingStyle.common.configurationContents">
     <div>
         <app-configuration-step-header 
         [headerText]="'Import Settings'"

src/app/integrations/landing/landing.component.html

@@ -20,7 +20,7 @@
 
     <p *ngIf="!exposeC1Apps" class="tw-mt-1-px landing--divider"></p>
 
-    <div class="tw-pt-40-px" [ngClass]="brandingStyle.common.mainPaddingStyle">
+    <div class="tw-pt-40-px" [ngClass]="brandingStyle.common.mainComponentPadding">
         <div *ngIf="integrationTabs.ALL || integrationTabs.ACCOUNTING">
             <p class="landing--section-heading">
                 Accounting
@@ -34,53 +34,53 @@
 
             <div class="tw-flex tw-flex-wrap tw-gap-5">
                 <div *ngIf="exposeApps.NETSUITE">
-                    <div class="landing--accounting-app tw-mt-20-px" [ngClass]="brandingStyle.common.mainShadowStyle" (click)="openAccountingIntegrationApp(AccountingIntegrationApp.NETSUITE)">
+                    <div class="landing--accounting-app tw-mt-20-px" [ngClass]="brandingStyle.common.mainComponentShadow" (click)="openAccountingIntegrationApp(AccountingIntegrationApp.NETSUITE)">
                         <img src="assets/logos/netsuite-logo.png" class="tw-mt-[-16px]" width="120px" height="60px" />
                         <span class="landing--accounting-app-name !tw-pt-18-px">
                             NetSuite
                         </span>
                     </div>
                 </div>
-                <div *ngIf="exposeApps.INTACCT" class="landing--accounting-app tw-mt-20-px" [ngClass]="brandingStyle.common.mainShadowStyle" (click)="openAccountingIntegrationApp(AccountingIntegrationApp.SAGE_INTACCT)">
+                <div *ngIf="exposeApps.INTACCT" class="landing--accounting-app tw-mt-20-px" [ngClass]="brandingStyle.common.mainComponentShadow" (click)="openAccountingIntegrationApp(AccountingIntegrationApp.SAGE_INTACCT)">
                     <img src="assets/logos/intacct-logo.png" class="tw-mt-[-16px]"  width="120px" height="60px" />
                     <span class="landing--accounting-app-name !tw-pt-8-px">
                         Sage Intacct
                     </span>
                 </div>
-                <div *ngIf="exposeApps.QBO" class="landing--accounting-app tw-mt-20-px" [ngClass]="brandingStyle.common.mainShadowStyle" (click)="openAccountingIntegrationApp(AccountingIntegrationApp.QBO)">
+                <div *ngIf="exposeApps.QBO" class="landing--accounting-app tw-mt-20-px" [ngClass]="brandingStyle.common.mainComponentShadow" (click)="openAccountingIntegrationApp(AccountingIntegrationApp.QBO)">
                     <img class="tw-mt-10-px" src="assets/logos/quickbooks-logo.png" width="120px"  />
                     <span class="landing--accounting-app-name">
                         QuickBooks Online
                     </span>
                 </div>
-                <div *ngIf="exposeApps.XERO" class="landing--accounting-app tw-mt-20-px" [ngClass]="brandingStyle.common.mainShadowStyle" (click)="openAccountingIntegrationApp(AccountingIntegrationApp.XERO)">
+                <div *ngIf="exposeApps.XERO" class="landing--accounting-app tw-mt-20-px" [ngClass]="brandingStyle.common.mainComponentShadow" (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
                     </span>
                 </div>
-                <div *ngIf="exposeApps.QBD && showQBDIIFIntegration" class="landing--accounting-app tw-mt-20-px" [ngClass]="brandingStyle.common.mainShadowStyle" (click)="openInAppIntegration(InAppIntegration.QBD)">
+                <div *ngIf="exposeApps.QBD && showQBDIIFIntegration" class="landing--accounting-app tw-mt-20-px" [ngClass]="brandingStyle.common.mainComponentShadow" (click)="openInAppIntegration(InAppIntegration.QBD)">
                     <img src="assets/logos/quickbooks-logo.png" width="120px" height="60px" />
                     <span class="landing--accounting-app-name">
                         QuickBooks Desktop (IIF)
                     </span>
                 </div>
                 <!-- Direct -->
-                <div *ngIf="exposeApps.QBD_DIRECT && org.allow_qbd_direct_integration" class="landing--accounting-app tw-mt-20-px" [ngClass]="brandingStyle.common.mainShadowStyle" (click)="openInAppIntegration(InAppIntegration.QBD_DIRECT)">
+                <div *ngIf="exposeApps.QBD_DIRECT && org.allow_qbd_direct_integration" class="landing--accounting-app tw-mt-20-px" [ngClass]="brandingStyle.common.mainComponentShadow" (click)="openInAppIntegration(InAppIntegration.QBD_DIRECT)">
                     <img src="assets/logos/quickbooks-logo.png" width="120px" height="60px" />
                     <span class="landing--accounting-app-name tw-gap-2 tw-px-4 tw-flex tw-items-center">
                         QuickBooks Desktop (Web Connector)
                         <app-badge [theme]="ThemeOption.DARK" text="Beta"></app-badge>
                     </span>
                 </div>
-                <div *ngIf="exposeApps.SAGE300" class="landing--accounting-app tw-mt-20-px" [ngClass]="brandingStyle.common.mainShadowStyle" (click)="openInAppIntegration(InAppIntegration.SAGE300)">
+                <div *ngIf="exposeApps.SAGE300" class="landing--accounting-app tw-mt-20-px" [ngClass]="brandingStyle.common.mainComponentShadow" (click)="openInAppIntegration(InAppIntegration.SAGE300)">
                     <img src="assets/logos/sage300-logo.svg" width="110px" height="60px" />
                     <span class="landing--accounting-app-name tw-gap-2">
                         Sage 300 CRE
                         <app-badge *ngIf="!orgsToHideSage300BetaBadge.includes(org.fyle_org_id)" [theme]="ThemeOption.DARK" text="Beta"></app-badge>
                     </span>
                 </div>
-                <div *ngIf="exposeApps.BUSINESS_CENTRAL && org.allow_dynamics" class="landing--accounting-app tw-mt-20-px" [ngClass]="brandingStyle.common.mainShadowStyle" (click)="openInAppIntegration(InAppIntegration.BUSINESS_CENTRAL)">
+                <div *ngIf="exposeApps.BUSINESS_CENTRAL && org.allow_dynamics" class="landing--accounting-app tw-mt-20-px" [ngClass]="brandingStyle.common.mainComponentShadow" (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 tw-gap-2 tw-px-4 tw-flex tw-items-center">
                         Dynamics 365 Business Central
@@ -100,7 +100,7 @@
             </p>
 
             <div class="tw-flex">
-                <div class="landing--accounting-app tw-mr-20-px" [ngClass]="brandingStyle.common.mainShadowStyle" (click)="openInAppIntegration(InAppIntegration.BAMBOO_HR)">
+                <div class="landing--accounting-app tw-mr-20-px" [ngClass]="brandingStyle.common.mainComponentShadow" (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" [ngClass]="brandingStyle.common.mainShadowStyle" (click)="openInAppIntegration(InAppIntegration.TRAVELPERK)">
+                <div class="landing--accounting-app tw-mr-20-px" [ngClass]="brandingStyle.common.mainComponentShadow" (click)="openInAppIntegration(InAppIntegration.TRAVELPERK)">
                     <img src="assets/logos/travelperk-logo.svg" width="160px" height="60px" />
                     <span class="landing--accounting-app-name">
                         TravelPerk

src/app/integrations/netsuite/netsuite-main/netsuite-configuration/netsuite-configuration.component.html

@@ -1,7 +1,7 @@
 <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-2 tw-h-84-px tw-w-[100%]"></div>
 <div class="tw-py-40-px">
-    <div [ngClass]="brandingStyle.common.mainPaddingStyle">
+    <div [ngClass]="brandingStyle.common.mainComponentPadding">
         <app-sub-menu [activeModule]="activeModule" [modules]="modules" ></app-sub-menu>
     </div>
     <div>

src/app/integrations/netsuite/netsuite-main/netsuite-export-log/netsuite-complete-export-logs/netsuite-complete-export-logs.component.html

@@ -2,7 +2,7 @@
     <app-loader></app-loader>
 </div>
 
-<div class="tw-rounded-8-px tw-bg-white tw-border-1-px tw-border-border-tertiary" [ngClass]="brandingStyle.common.mainShadowStyle">
+<div class="tw-rounded-8-px tw-bg-white tw-border-1-px tw-border-border-tertiary" [ngClass]="brandingStyle.common.mainComponentShadow">
     <div>
         <app-export-log-filter *ngIf="totalCount > 0 || (isDateSelected || searchQuery)"
             [exportLogForm]="exportLogForm"

src/app/integrations/netsuite/netsuite-main/netsuite-export-log/netsuite-export-log.component.html

@@ -1,7 +1,7 @@
 <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-2 tw-h-84-px tw-w-[100%]"></div>
 
-<div class="tw-py-40-px" [ngClass]="brandingStyle.common.mainPaddingStyle">
+<div class="tw-py-40-px" [ngClass]="brandingStyle.common.mainComponentPadding">
     <app-sub-menu *ngIf="brandingFeatureConfig.featureFlags.advancedSettings.skipExport" [modules]="modules" [activeModule]="activeModule"></app-sub-menu>
     <div>
         <router-outlet></router-outlet>

src/app/integrations/netsuite/netsuite-main/netsuite-export-log/netsuite-skipped-export-log/netsuite-skipped-export-log.component.html

@@ -2,7 +2,7 @@
     <app-loader></app-loader>
 </div>
 
-<div class="tw-rounded-8-px tw-bg-white tw-border-1-px tw-border-separator" [ngClass]="brandingStyle.common.mainShadowStyle">
+<div class="tw-rounded-8-px tw-bg-white tw-border-1-px tw-border-separator" [ngClass]="brandingStyle.common.mainComponentShadow">
     <div>
         <app-export-log-filter *ngIf="totalCount > 0 || (isDateSelected || searchQuery)"
             [exportLogForm]="skipExportLogForm"

src/app/integrations/netsuite/netsuite-main/netsuite-mapping/netsuite-mapping.component.html

@@ -1,6 +1,6 @@
 <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-2 tw-h-84-px tw-w-[100%]"></div>
-<div *ngIf="!isLoading" class="tw-py-40-px" [ngClass]="brandingStyle.common.mainPaddingStyle">
+<div *ngIf="!isLoading" class="tw-py-40-px" [ngClass]="brandingStyle.common.mainComponentPadding">
     <app-sub-menu [modules]="mappingPages" [activeModule]="mappingPages[0]"></app-sub-menu>
     <div>
         <router-outlet></router-outlet>

src/app/integrations/netsuite/netsuite-shared/netsuite-advanced-settings/netsuite-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]="brandingStyle.common.configurationCommonStyle">
+<div *ngIf="!isLoading" class="configuration--contents tw-border-border-tertiary tw-mt-6" [ngClass]="brandingStyle.common.configurationContents">
     <div>
         <app-configuration-step-header
             [headerText]="brandingContent.stepName"