feat: common main page padding style conversion (#1163)

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

@@ -5,6 +5,11 @@ export const brandingConfig: BrandingConfiguration = config as BrandingConfigura
 
 export const c1Styles = {
     common: {
-        configurationCommonStyle: 'tw-mx-60-px 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,6 +5,11 @@ export const brandingConfig: BrandingConfiguration = config as BrandingConfigura
 
 export const fyleStyles = {
     common: {
-        configurationCommonStyle: 'tw-mx-120-px 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]="{'tw-px-120-px': brandingConfig.brandId === 'fyle', 'tw-px-60-px': brandingConfig.brandId === 'co'}">
+<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-export-log/business-central-export-log.component.ts

@@ -1,7 +1,7 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { MenuItem } from 'primeng/api';
-import { brandingConfig, brandingFeatureConfig } from 'src/app/branding/branding-config';
+import { brandingConfig, brandingFeatureConfig, brandingStyle } from 'src/app/branding/branding-config';
 
 @Component({
   selector: 'app-business-central-export-log',
@@ -23,6 +23,8 @@ export class BusinessCentralExportLogComponent implements OnInit {
 
   readonly brandingConfig = brandingConfig;
 
+  readonly brandingStyle = brandingStyle;
+
   constructor(
     private router: Router
   ) { }

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]="{'tw-px-120-px': brandingConfig.brandId === 'fyle', 'tw-px-60-px': brandingConfig.brandId === 'co'}">
+<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-main/business-central-mapping/business-central-mapping.component.ts

@@ -2,7 +2,7 @@ import { TitleCasePipe } from '@angular/common';
 import { Component, Inject, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { MenuItem } from 'primeng/api';
-import { brandingConfig, brandingFeatureConfig } from 'src/app/branding/branding-config';
+import { brandingConfig, brandingFeatureConfig, brandingStyle } from 'src/app/branding/branding-config';
 import { FyleField } from 'src/app/core/models/enum/enum.model';
 import { MappingService } from 'src/app/core/services/common/mapping.service';
 import { SnakeCaseToSpaceCasePipe } from 'src/app/shared/pipes/snake-case-to-space-case.pipe';
@@ -27,6 +27,8 @@ export class BusinessCentralMappingComponent implements OnInit {
 
   readonly brandingConfig = brandingConfig;
 
+  readonly brandingStyle = brandingStyle;
+
   constructor(
     private router: Router,
     private mappingService: MappingService

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-onboarding/business-central-onboarding-connector/business-central-onboarding-connector.component.ts

@@ -72,7 +72,7 @@ export class BusinessCentralOnboardingConnectorComponent implements OnInit, OnDe
 
   appName = AppName.BUSINESS_CENTRAL;
 
-  brandingStyle = brandingStyle;
+  readonly brandingStyle = brandingStyle;
 
   constructor(
     private onboardingService: BusinessCentralOnboardingService,

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-advanced-settings/business-central-advanced-settings.component.ts

@@ -61,7 +61,7 @@ export class BusinessCentralAdvancedSettingsComponent implements OnInit {
 
   isSkipExportFormInvalid: boolean;
 
-  brandingStyle = brandingStyle;
+  readonly brandingStyle = brandingStyle;
 
   constructor(
     private advancedSettingsService: BusinessCentralAdvancedSettingsService,

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-export-settings/business-central-export-settings.component.ts

@@ -85,7 +85,7 @@ export class BusinessCentralExportSettingsComponent implements OnInit {
 
   BCExportSettingDestinationOptionKey = BCExportSettingDestinationOptionKey;
 
-  brandingStyle = brandingStyle;
+  readonly brandingStyle = brandingStyle;
 
   constructor(
     private exportSettingService: BusinessCentralExportSettingsService,

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/business-central/business-central-shared/business-central-import-settings/business-central-import-settings.component.ts

@@ -64,7 +64,7 @@ export class BusinessCentralImportSettingsComponent implements OnInit {
 
   sessionStartTime: Date = new Date();
 
-  brandingStyle = brandingStyle;
+  readonly brandingStyle = brandingStyle;
 
   constructor(
     private router: Router,

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]="{'tw-px-120-px': brandingConfig.brandId === 'fyle', 'tw-px-60-px': brandingConfig.brandId === 'co'}">
+    <div [ngClass]="brandingStyle.common.mainComponentPadding">
         <app-sub-menu [activeModule]="activeModule" [modules]="modules" ></app-sub-menu>
     </div>
     <div>

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

@@ -1,7 +1,7 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { MenuItem } from 'primeng/api';
-import { brandingConfig, brandingContent, brandingFeatureConfig } from 'src/app/branding/branding-config';
+import { brandingConfig, brandingContent, brandingFeatureConfig, brandingStyle } from 'src/app/branding/branding-config';
 
 @Component({
   selector: 'app-intacct-configuration',
@@ -18,6 +18,8 @@ export class IntacctConfigurationComponent implements OnInit {
 
   readonly brandingContent = brandingContent;
 
+  readonly brandingStyle = brandingStyle;
+
   modules: MenuItem[] = [
     {label: this.brandingContent.configuration.exportSetting.stepName, routerLink: '/integrations/intacct/main/configuration/export_settings'},
     {label: this.brandingContent.configuration.importSetting.stepName, routerLink: '/integrations/intacct/main/configuration/import_settings'},

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]="{'tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}">
+<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-completed-export-log/intacct-completed-export-log.component.ts

@@ -9,7 +9,7 @@ import { TrackingService } from 'src/app/core/services/integration/tracking.serv
 import { ExportLogService } from 'src/app/core/services/common/export-log.service';
 import { PaginatorService } from 'src/app/core/services/common/paginator.service';
 import { environment } from 'src/environments/environment';
-import { brandingConfig, brandingContent, brandingFeatureConfig } from 'src/app/branding/branding-config';
+import { brandingConfig, brandingContent, brandingFeatureConfig, brandingStyle } from 'src/app/branding/branding-config';
 import { AccountingExportList, AccountingExportModel } from 'src/app/core/models/db/accounting-export.model';
 import { UserService } from 'src/app/core/services/misc/user.service';
 import { Subject } from 'rxjs/internal/Subject';
@@ -70,6 +70,8 @@ export class IntacctCompletedExportLogComponent implements OnInit {
 
   readonly brandingContent = brandingContent.exportLog;
 
+  readonly brandingStyle = brandingStyle;
+
   constructor(
     @Inject(FormBuilder) private formBuilder: FormBuilder,
     private trackingService: TrackingService,

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]="{'tw-px-120-px': brandingConfig.brandId === 'fyle', 'tw-px-60-px': brandingConfig.brandId === 'co'}">
+<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-export-log.component.ts

@@ -1,7 +1,7 @@
 import { Component, Inject, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { MenuItem } from 'primeng/api';
-import { brandingConfig, brandingFeatureConfig } from 'src/app/branding/branding-config';
+import { brandingConfig, brandingFeatureConfig, brandingStyle } from 'src/app/branding/branding-config';
 
 @Component({
   selector: 'app-intacct-export-log',
@@ -25,6 +25,8 @@ export class IntacctExportLogComponent implements OnInit {
 
   readonly brandingFeatureConfig = brandingFeatureConfig;
 
+  readonly brandingStyle = brandingStyle;
+
   constructor(
     private router: Router
   ) { }

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]="{'tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}">
+<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-export-log/intacct-skip-export-log/intacct-skip-export-log.component.ts

@@ -7,7 +7,7 @@ import { Paginator } from 'src/app/core/models/misc/paginator.model';
 import { TrackingService } from 'src/app/core/services/integration/tracking.service';
 import { ExportLogService } from 'src/app/core/services/common/export-log.service';
 import { PaginatorService } from 'src/app/core/services/si/si-core/paginator.service';
-import { brandingConfig, brandingContent, brandingFeatureConfig } from 'src/app/branding/branding-config';
+import { brandingConfig, brandingContent, brandingFeatureConfig, brandingStyle } from 'src/app/branding/branding-config';
 import { AccountingExportModel, SkippedAccountingExportModel } from 'src/app/core/models/db/accounting-export.model';
 import { debounceTime } from 'rxjs/operators';
 import { Subject } from 'rxjs';
@@ -68,6 +68,8 @@ export class IntacctSkipExportLogComponent implements OnInit {
 
   readonly brandingContent = brandingContent.exportLog;
 
+  readonly brandingStyle = brandingStyle;
+
   constructor(
     private formBuilder: FormBuilder,
     private userService: UserService,

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]="{'tw-px-120-px': brandingConfig.brandId === 'fyle', 'tw-px-60-px': brandingConfig.brandId === 'co'}">
+<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-main/intacct-mapping/intacct-mapping.component.ts

@@ -2,7 +2,7 @@ import { TitleCasePipe } from '@angular/common';
 import { Component, Inject, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { MenuItem } from 'primeng/api';
-import { brandingConfig, brandingFeatureConfig } from 'src/app/branding/branding-config';
+import { brandingConfig, brandingFeatureConfig, brandingStyle } from 'src/app/branding/branding-config';
 import { FyleField } from 'src/app/core/models/enum/enum.model';
 import { SiMappingsService } from 'src/app/core/services/si/si-core/si-mappings.service';
 import { SentenceCasePipe } from 'src/app/shared/pipes/sentence-case.pipe';
@@ -30,6 +30,8 @@ export class IntacctMappingComponent implements OnInit {
 
   readonly brandingFeatureConfig = brandingFeatureConfig;
 
+  readonly brandingStyle = brandingStyle;
+
   constructor(
     private router: Router,
     private mappingService: SiMappingsService

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-advanced-settings/intacct-advanced-settings.component.ts

@@ -120,7 +120,7 @@ export class IntacctAdvancedSettingsComponent implements OnInit {
 
   readonly AppName = AppName;
 
-  brandingStyle = brandingStyle;
+  readonly brandingStyle = brandingStyle;
 
   constructor(
     private router: Router,

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-c1-import-settings/intacct-c1-import-settings.component.ts

@@ -99,7 +99,7 @@ export class IntacctC1ImportSettingsComponent implements OnInit {
 
   showDependentFieldWarning: boolean;
 
-  brandingStyle = brandingStyle;
+  readonly brandingStyle = brandingStyle;
 
   constructor(
     private router: Router,

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-export-settings/intacct-export-settings.component.ts

@@ -156,7 +156,7 @@ export class IntacctExportSettingsComponent implements OnInit {
 
   isMultiLineOption: boolean;
 
-  brandingStyle = brandingStyle;
+  readonly brandingStyle = brandingStyle;
 
   constructor(
     private router: Router,

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/intacct/intacct-shared/intacct-import-settings/intacct-import-settings.component.ts

@@ -140,7 +140,7 @@ export class IntacctImportSettingsComponent implements OnInit {
     ]
   };
 
-  brandingStyle = brandingStyle;
+  readonly brandingStyle = brandingStyle;
 
   constructor(
     private router: Router,