feat: Define common styles as variable files and convert common page styles

src/app/branding/branding-config.ts

@@ -8,6 +8,8 @@ import config from './config.json';
 import { fyleContents } from './fyle-contents-config';
 import { fyleDemoVideoLinks, fyleFeatureConfig, fyleKbArticles } from './fyle-branding-config';
 import { c1DemoVideoLinks, c1FeatureConfig, c1KbArticles } from './c1-branding-config';
+import { fyleStyles } from './fyle-style-config';
+import { c1Styles } from './c1-style-config';
 
 export const brandingConfig: BrandingConfiguration = config as BrandingConfiguration;
 
@@ -44,3 +46,12 @@ const content: ContentConfiguration = {
 // @ts-ignore
 export const brandingContent = content[brandingConfig.brandId];
 
+
+const styles = {
+    fyle: fyleStyles,
+    co: c1Styles
+};
+
+// @ts-ignore
+export const brandingStyle = styles[brandingConfig.brandId];
+

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

@@ -0,0 +1,10 @@
+import { BrandingConfiguration } from "../core/models/branding/branding-configuration.model";
+import config from './config.json';
+
+export const brandingConfig: BrandingConfiguration = config as BrandingConfiguration;
+
+export const c1Styles = {
+    common: {
+        configurationCommonStyle: 'tw-mx-60-px tw-shadow-shadow-level-1'
+    }
+};

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

@@ -0,0 +1,10 @@
+import { BrandingConfiguration } from "../core/models/branding/branding-configuration.model";
+import config from './config.json';
+
+export const brandingConfig: BrandingConfiguration = config as BrandingConfiguration;
+
+export const fyleStyles = {
+    common: {
+        configurationCommonStyle: 'tw-mx-120-px tw-shadow-app-card'
+    }
+};

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]="{'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="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="brandingStyle.common.configurationCommonStyle">
             <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

@@ -12,7 +12,7 @@ import { BusinessCentralOnboardingService } from 'src/app/core/services/business
 import { BusinessCentralHelperService } from 'src/app/core/services/business-central/business-central-core/business-central-helper.service';
 import { IntegrationsToastService } from 'src/app/core/services/common/integrations-toast.service';
 import { WorkspaceService } from 'src/app/core/services/common/workspace.service';
-import { brandingConfig, brandingKbArticles } from 'src/app/branding/branding-config';
+import { brandingConfig, brandingKbArticles, brandingStyle } from 'src/app/branding/branding-config';
 import { BrandingConfiguration } from 'src/app/core/models/branding/branding-configuration.model';
 import { environment } from 'src/environments/environment';
 import { HelperService } from 'src/app/core/services/common/helper.service';
@@ -72,6 +72,8 @@ export class BusinessCentralOnboardingConnectorComponent implements OnInit, OnDe
 
   appName = AppName.BUSINESS_CENTRAL;
 
+  brandingStyle = brandingStyle;
+
   constructor(
     private onboardingService: BusinessCentralOnboardingService,
     private businessCentralConnectorService: BusinessCentralConnectorService,

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]="{'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="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="brandingStyle.common.configurationCommonStyle">
     <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

@@ -11,7 +11,7 @@ import { WorkspaceService } from 'src/app/core/services/common/workspace.service
 import { TrackingService } from 'src/app/core/services/integration/tracking.service';
 import { BusinessCentralAdvancedSettingsGet, BusinessCentralAdvancedSettingsModel } from 'src/app/core/models/business-central/business-central-configuration/business-central-advanced-settings.model';
 import { FormGroup } from '@angular/forms';
-import { brandingConfig, brandingKbArticles } from 'src/app/branding/branding-config';
+import { brandingConfig, brandingKbArticles, brandingStyle } from 'src/app/branding/branding-config';
 import { AppName, BusinessCentralOnboardingState, BusinessCentralUpdateEvent, ConfigurationCta, CustomOperatorOption, Page, ToastSeverity, TrackingApp } from 'src/app/core/models/enum/enum.model';
 
 @Component({
@@ -61,6 +61,8 @@ export class BusinessCentralAdvancedSettingsComponent implements OnInit {
 
   isSkipExportFormInvalid: boolean;
 
+  brandingStyle = brandingStyle;
+
   constructor(
     private advancedSettingsService: BusinessCentralAdvancedSettingsService,
     private helper: HelperService,

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]="{'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="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="brandingStyle.common.configurationCommonStyle">
     <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

@@ -9,7 +9,7 @@ import { HelperService } from 'src/app/core/services/common/helper.service';
 import { MappingService } from 'src/app/core/services/common/mapping.service';
 import { FormGroup } from '@angular/forms';
 import { BusinessCentralHelperService } from 'src/app/core/services/business-central/business-central-core/business-central-helper.service';
-import { brandingConfig, brandingKbArticles } from 'src/app/branding/branding-config';
+import { brandingConfig, brandingKbArticles, brandingStyle } from 'src/app/branding/branding-config';
 import { WorkspaceService } from 'src/app/core/services/common/workspace.service';
 import { IntegrationsToastService } from 'src/app/core/services/common/integrations-toast.service';
 import { TrackingService } from 'src/app/core/services/integration/tracking.service';
@@ -85,6 +85,8 @@ export class BusinessCentralExportSettingsComponent implements OnInit {
 
   BCExportSettingDestinationOptionKey = BCExportSettingDestinationOptionKey;
 
+  brandingStyle = brandingStyle;
+
   constructor(
     private exportSettingService: BusinessCentralExportSettingsService,
     private router: Router,

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]="{'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="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="brandingStyle.common.configurationCommonStyle">
     <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

@@ -13,7 +13,7 @@ import { MappingService } from 'src/app/core/services/common/mapping.service';
 import { WorkspaceService } from 'src/app/core/services/common/workspace.service';
 import { TrackingService } from 'src/app/core/services/integration/tracking.service';
 import { FyleField, IntegrationField } from 'src/app/core/models/db/mapping.model';
-import { brandingConfig, brandingKbArticles } from 'src/app/branding/branding-config';
+import { brandingConfig, brandingKbArticles, brandingStyle } from 'src/app/branding/branding-config';
 import { businessCentralFieldsResponse, fyleFieldsResponse, importSettingsResponse } from '../business-central.fixture';
 import { ExpenseField } from 'src/app/core/models/common/import-settings.model';
 
@@ -64,6 +64,8 @@ export class BusinessCentralImportSettingsComponent implements OnInit {
 
   sessionStartTime: Date = new Date();
 
+  brandingStyle = brandingStyle;
+
   constructor(
     private router: Router,
     private importSettingService: BusinessCentralImportSettingsService,

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]="{'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="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="brandingStyle.common.configurationCommonStyle">
     <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

@@ -14,7 +14,7 @@ import { SiWorkspaceService } from 'src/app/core/services/si/si-core/si-workspac
 import { TitleCasePipe } from '@angular/common';
 import { IntacctDestinationAttribute } from 'src/app/core/models/intacct/db/destination-attribute.model';
 import { Configuration } from 'src/app/core/models/intacct/intacct-configuration/advanced-settings.model';
-import { brandingConfig, brandingContent, brandingFeatureConfig, brandingKbArticles } from 'src/app/branding/branding-config';
+import { brandingConfig, brandingContent, brandingFeatureConfig, brandingKbArticles, brandingStyle } from 'src/app/branding/branding-config';
 import { environment } from 'src/environments/environment';
 import { AdvancedSettingsModel } from 'src/app/core/models/common/advanced-settings.model';
 import { SkipExportComponent } from 'src/app/shared/components/si/helper/skip-export/skip-export.component';
@@ -120,6 +120,8 @@ export class IntacctAdvancedSettingsComponent implements OnInit {
 
   readonly AppName = AppName;
 
+  brandingStyle = brandingStyle;
+
   constructor(
     private router: Router,
     private advancedSettingsService: SiAdvancedSettingService,

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]="{'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="!isLoading" class="configuration--contents tw-border-border-tertiary tw-mt-6" [ngClass]="brandingStyle.common.configurationCommonStyle">
     <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

@@ -3,7 +3,7 @@ import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators } from '
 import { Router } from '@angular/router';
 import { RxwebValidators } from '@rxweb/reactive-form-validators';
 import { forkJoin } from 'rxjs';
-import { brandingConfig, brandingKbArticles } from 'src/app/branding/branding-config';
+import { brandingConfig, brandingKbArticles, brandingStyle } from 'src/app/branding/branding-config';
 import { IntacctCategoryDestination, ConfigurationCta, IntacctOnboardingState, IntacctUpdateEvent, Page, ProgressPhase, ToastSeverity, MappingSourceField, AppName, TrackingApp, FyleField } from 'src/app/core/models/enum/enum.model';
 import { ExpenseField } from 'src/app/core/models/intacct/db/expense-field.model';
 import { ImportSettingGet, ImportSettingPost, ImportSettings, IntacctDependentImportFields, MappingSetting } from 'src/app/core/models/intacct/intacct-configuration/import-settings.model';
@@ -99,6 +99,8 @@ export class IntacctC1ImportSettingsComponent implements OnInit {
 
   showDependentFieldWarning: boolean;
 
+  brandingStyle = brandingStyle;
+
   constructor(
     private router: Router,
     private mappingService: SiMappingsService,

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]="{'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="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="brandingStyle.common.configurationCommonStyle">
     <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

@@ -4,7 +4,7 @@ import { AbstractControl, FormBuilder, FormControl, FormGroup, ValidatorFn, Vali
 import { DomSanitizer } from '@angular/platform-browser';
 import { Router } from '@angular/router';
 import { Observable, Subject, debounceTime, filter, forkJoin } from 'rxjs';
-import { brandingConfig, brandingContent, brandingFeatureConfig, brandingKbArticles } from 'src/app/branding/branding-config';
+import { brandingConfig, brandingContent, brandingFeatureConfig, brandingKbArticles, brandingStyle } from 'src/app/branding/branding-config';
 import { ExportSettingModel, ExportSettingOptionSearch } from 'src/app/core/models/common/export-settings.model';
 import { DefaultDestinationAttribute } from 'src/app/core/models/db/destination-attribute.model';
 import { CCCExpenseState, ConfigurationCta, IntacctCorporateCreditCardExpensesObject, FyleField, ExpenseGroupedBy, ExpenseState, ExportDateType, IntacctReimbursableExpensesObject, ExpenseGroupingFieldOption, Page, ToastSeverity, IntacctOnboardingState, ProgressPhase, IntacctUpdateEvent, AppName, IntacctExportSettingDestinationOptionKey, TrackingApp, EmployeeFieldMapping } from 'src/app/core/models/enum/enum.model';
@@ -156,6 +156,8 @@ export class IntacctExportSettingsComponent implements OnInit {
 
   isMultiLineOption: boolean;
 
+  brandingStyle = brandingStyle;
+
   constructor(
     private router: Router,
     private exportSettingService: SiExportSettingService,

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

src/app/integrations/intacct/intacct-shared/intacct-import-settings/intacct-import-settings.component.ts

@@ -3,7 +3,7 @@ import { AbstractControl, FormArray, FormBuilder, FormGroup, Validators } from '
 import { Router } from '@angular/router';
 import { RxwebValidators } from '@rxweb/reactive-form-validators';
 import { forkJoin } from 'rxjs';
-import { brandingConfig, brandingFeatureConfig, brandingKbArticles } from 'src/app/branding/branding-config';
+import { brandingConfig, brandingFeatureConfig, brandingKbArticles, brandingStyle } from 'src/app/branding/branding-config';
 import { ImportSettingsModel } from 'src/app/core/models/common/import-settings.model';
 import { IntacctCategoryDestination, ConfigurationCta, IntacctOnboardingState, IntacctUpdateEvent, Page, ProgressPhase, ToastSeverity, MappingSourceField, AppName, TrackingApp, SageIntacctField, IntacctReimbursableExpensesObject, IntacctCorporateCreditCardExpensesObject } from 'src/app/core/models/enum/enum.model';
 import { IntacctDestinationAttribute } from 'src/app/core/models/intacct/db/destination-attribute.model';
@@ -140,6 +140,8 @@ export class IntacctImportSettingsComponent implements OnInit {
     ]
   };
 
+  brandingStyle = brandingStyle;
+
   constructor(
     private router: Router,
     private mappingService: SiMappingsService,

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]="{'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="!isLoading" class="configuration--contents tw-border-border-tertiary tw-mt-6" [ngClass]="brandingStyle.common.configurationCommonStyle">
     <div>
         <app-configuration-step-header
             [headerText]="brandingContent.stepName"

src/app/integrations/netsuite/netsuite-shared/netsuite-advanced-settings/netsuite-advanced-settings.component.ts

@@ -3,7 +3,7 @@ import { Component, Inject, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
 import { forkJoin } from 'rxjs';
-import { brandingConfig, brandingContent, brandingFeatureConfig, brandingKbArticles } from 'src/app/branding/branding-config';
+import { brandingConfig, brandingContent, brandingFeatureConfig, brandingKbArticles, brandingStyle } from 'src/app/branding/branding-config';
 import { AdvancedSettingsModel, ConditionField, EmailOption, ExpenseFilterPayload, ExpenseFilterResponse, SkipExportModel, SkipExportValidatorRule, skipExportValidator } from 'src/app/core/models/common/advanced-settings.model';
 import { SelectFormOption } from 'src/app/core/models/common/select-form-option.model';
 import { DefaultDestinationAttribute, DestinationAttribute } from 'src/app/core/models/db/destination-attribute.model';
@@ -103,6 +103,8 @@ export class NetsuiteAdvancedSettingsComponent implements OnInit {
 
   org: Org = this.orgService.getCachedOrg();
 
+  brandingStyle = brandingStyle;
+
   constructor(
     private advancedSettingsService: NetsuiteAdvancedSettingsService,
     private configurationService: ConfigurationService,

src/app/integrations/netsuite/netsuite-shared/netsuite-export-settings/netsuite-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 tw-shadow-app-card': brandingConfig.brandId === 'fyle', 'tw-mx-60-px tw-shadow-shadow-level-1': brandingConfig.brandId === 'co'}">
+    <div *ngIf="!isLoading" class="configuration--contents tw-border-border-tertiary tw-mt-6" [ngClass]="brandingStyle.common.configurationCommonStyle">
         <div>
             <app-configuration-step-header
                 [headerText]="brandingContent.stepName"

src/app/integrations/netsuite/netsuite-shared/netsuite-export-settings/netsuite-export-settings.component.ts

@@ -3,7 +3,7 @@ import { Component, OnInit } from '@angular/core';
 import { FormGroup } from '@angular/forms';
 import { Router } from '@angular/router';
 import { Observable, Subject, debounceTime, filter, forkJoin } from 'rxjs';
-import { brandingConfig, brandingContent, brandingFeatureConfig, brandingKbArticles } from 'src/app/branding/branding-config';
+import { brandingConfig, brandingContent, brandingFeatureConfig, brandingKbArticles, brandingStyle } from 'src/app/branding/branding-config';
 import { ExportSettingModel, ExportSettingOptionSearch } from 'src/app/core/models/common/export-settings.model';
 import { HelperUtility } from 'src/app/core/models/common/helper.model';
 import { SelectFormOption } from 'src/app/core/models/common/select-form-option.model';
@@ -114,6 +114,8 @@ export class NetsuiteExportSettingsComponent implements OnInit {
 
   NetsuiteExportSettingDestinationOptionKey = NetsuiteExportSettingDestinationOptionKey;
 
+  brandingStyle = brandingStyle;
+
   constructor(
     private exportSettingService: NetsuiteExportSettingsService,
     public helperService: HelperService,