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

…styles (#1156)

* POC for common style as variables files

* common configuration common style

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

* feat: Refactor conditional styles in conguration componets to common branding styles (#1166)

* common main page padding style conversion

* seatch icon focus state styling (#1176)

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,23 @@
+export const c1Styles = {
+    common: {
+        configurationContents: 'tw-mx-60-px tw-shadow-shadow-level-1',
+        mainComponentPadding: 'tw-px-60-px',
+        mainComponentShadow: 'tw-shadow-shadow-level-1',
+        inputLabelTextStyle: 'tw-pt-4-px',
+        configurationBrandingClass: 'co'
+    },
+    mapping: {
+        mappingHeaderBoxShadow: 'tw-shadow-shadow-level-1'
+    },
+    configuration: {
+        importSvgPadding: 'tw-pt-16-px',
+        importFieldDependentField: 'tw-pr-24-px tw-pl-[58px]',
+        importFieldDependentFieldSvg: 'tw-pt-42-px',
+        importFieldDropDownText: '!tw-font-600 tw-text-12-px',
+        stepHeaderH3Text: 'tw-text-18-px',
+        searchIconFocus: 'tw-text-search-focused-filled-border'
+    },
+    dashboard: {
+        dashboardErrorResolveBtnText: 'p-button primary-outline'
+    }
+};

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

@@ -0,0 +1,23 @@
+export const fyleStyles = {
+    common: {
+        configurationContents: 'tw-mx-120-px tw-shadow-app-card',
+        mainComponentPadding: 'tw-px-120-px',
+        mainComponentShadow: 'tw-shadow-app-card',
+        inputLabelTextStyle: 'tw-pt-8-px',
+        configurationBrandingClass: 'fyle'
+    },
+    mapping: {
+        mappingHeaderBoxShadow: 'tw-shadow-stats-box'
+    },
+    configuration: {
+        importSvgPadding: 'tw-pt-18-px',
+        importFieldDependentField: '',
+        importFieldDependentFieldSvg: 'tw-pt-46-px',
+        importFieldDropDownText: '!tw-font-400 tw-text-14-px',
+        stepHeaderH3Text: '',
+        searchIconFocus: 'tw-text-search-focused-search-icon'
+    },
+    dashboard: {
+        dashboardErrorResolveBtnText: 'p-button secondary-sm'
+    }
+};

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]="{'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.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

@@ -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;
 
+  readonly 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.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

@@ -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;
 
+  readonly 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.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

@@ -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;
 
+  readonly 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.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 + '. '"
@@ -26,7 +26,7 @@
                         <div class="tw-flex tw-justify-between tw-items-center">
                             <h5 class="lg:tw-w-3/5 md:tw-w-1/2 tw-text-slightly-normal-text-color tw-text-14-px !tw-font-500">
                                 Select the accounts from {{ appName }} to import as categories in {{brandingConfig.brandName}}
-                                <p class="tw-text-text-muted" [ngClass]="{'tw-pt-4-px': brandingConfig.brandId === 'co', 'tw-pt-8-px': brandingConfig.brandId !== 'co'}">
+                                <p class="tw-text-text-muted" [ngClass]="brandingStyle.common.inputLabelTextStyle">
                                     By default expense will be selected. Open the dropdown to select more as per your requirements.
                                 </p>
                             </h5>

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();
 
+  readonly brandingStyle = brandingStyle;
+
   constructor(
     private router: Router,
     private importSettingService: BusinessCentralImportSettingsService,

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,9 @@ 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>