feat: common style as variables files and common confugiaration page style conversion #1156
Conversation
WalkthroughThis pull request introduces a new branding configuration system across multiple files. It adds style-specific configurations for different brands (Fyle and C1) and creates a centralized Changes
Suggested labels
Suggested reviewers
Possibly related PRs
Poem
✨ Finishing Touches
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
| @@ -2,8 +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" [class]="brandingStyle.exportSettingsStyle"> | |||
There was a problem hiding this comment.
this should be [ngClass]="brandingStyle.exportSettingsStyle"
src/app/branding/c1-style-config.ts
Outdated
| export const brandingConfig: BrandingConfiguration = config as BrandingConfiguration; | ||
|
|
||
| export const c1Styles = { | ||
| exportSettingsStyle: 'tw-mx-60-px tw-shadow-shadow-level-1' |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/app/branding/fyle-style-config.ts (1)
6-8: Consider using CSS custom properties for maintainability.Instead of hardcoding Tailwind classes, consider using CSS custom properties (variables) for values that might need to be adjusted across different themes or breakpoints.
export const fyleStyles = { - exportSettingsStyle: 'tw-mx-120-px tw-shadow-app-card' + exportSettingsStyle: 'tw-mx-[var(--fyle-export-margin)] tw-shadow-[var(--fyle-card-shadow)]' };src/app/branding/c1-style-config.ts (1)
1-8: Consider creating a shared configuration factory.The configuration structure is duplicated between Fyle and C1 styles. Consider creating a shared factory function to generate brand-specific configurations.
// shared-style-config.ts interface BrandStyleConfig { exportSettingsStyle: string; } function createBrandStyles(options: { margin: string; shadow: string; }): BrandStyleConfig { return { exportSettingsStyle: `tw-mx-${options.margin} tw-shadow-${options.shadow}` }; } // Usage in c1-style-config.ts export const c1Styles = createBrandStyles({ margin: '60-px', shadow: 'shadow-level-1' });
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/app/branding/branding-config.ts(2 hunks)src/app/branding/c1-style-config.ts(1 hunks)src/app/branding/fyle-style-config.ts(1 hunks)src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-export-settings/qbd-direct-export-settings.component.html(1 hunks)src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-export-settings/qbd-direct-export-settings.component.ts(2 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-export-settings/qbd-direct-export-settings.component.ts
🔇 Additional comments (2)
src/app/branding/fyle-style-config.ts (1)
4-4: Consider using type validation for config import.The type assertion
config as BrandingConfigurationdoesn't guarantee type safety at runtime. Consider adding runtime validation.src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-export-settings/qbd-direct-export-settings.component.html (1)
5-5: Clean implementation of dynamic styling.The use of
[class]="brandingStyle.exportSettingsStyle"is a clean way to apply brand-specific styles. The implementation correctly leverages the new branding configuration system.
|
|
||
| const styles = { | ||
| fyle: fyleStyles, | ||
| co: c1Styles | ||
| }; | ||
|
|
||
| // @ts-ignore | ||
| export const brandingStyle = styles[brandingConfig.brandId]; | ||
|
|
There was a problem hiding this comment.
🛠️ Refactor suggestion
Remove @ts-ignore and improve type safety.
The use of @ts-ignore masks potential type issues. Consider improving type safety:
const styles = {
fyle: fyleStyles,
co: c1Styles
};
-// @ts-ignore
-export const brandingStyle = styles[brandingConfig.brandId];
+type BrandId = typeof brandingConfig.brandId;
+export const brandingStyle = styles[brandingConfig.brandId as BrandId];Also consider using a type-safe lookup pattern:
const getBrandingStyle = (brandId: BrandId) => {
const style = styles[brandId];
if (!style) {
throw new Error(`Invalid brand ID: ${brandId}`);
}
return style;
};
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (32)
src/app/integrations/travelperk/travelperk-shared/travelperk-payment-profile-settings/travelperk-payment-profile-settings.component.ts (1)
4-4: Consider cleaning up redundant branding imports.The component now has both
brandingConfigandbrandingStyle. While this supports a gradual migration, consider:
- Documenting the migration plan
- Adding TODO comments for cleanup
- Setting timeline for removing
brandingConfigusageAlso applies to: 58-58
src/app/integrations/travelperk/travelperk-shared/travelperk-advanced-settings/travelperk-advanced-settings.component.ts (1)
1-1: Consider documenting the branding style POC architecture.This POC introduces a centralized approach to styling through
brandingStyle. To ensure successful implementation:
Create technical documentation covering:
- Purpose and benefits of the new approach
- Migration strategy from
brandingConfig- Timeline for deprecating old approach
- Testing requirements across different brands
Consider implementing:
- Custom ESLint rule to enforce consistent usage
- Automated tests for style consistency
- Migration scripts to help convert components
src/app/shared/components/si/core/intacct-location-entity/intacct-location-entity.component.ts (1)
56-56: Consider making brandingStyle readonly for consistency.Other branding-related properties in this file (brandingConfig, brandingContent, brandingFeatureConfig) are marked as readonly. Consider applying the same pattern to brandingStyle.
- brandingStyle = brandingStyle; + readonly brandingStyle = brandingStyle;src/app/integrations/xero/xero-shared/xero-advanced-settings/xero-advanced-settings.component.ts (1)
74-74: Consider making brandingStyle readonly for consistency.For consistency with other branding-related properties in this file (brandingFeatureConfig, brandingContent), consider marking brandingStyle as readonly.
- brandingStyle = brandingStyle; + readonly brandingStyle = brandingStyle;src/app/integrations/xero/xero-shared/xero-export-settings/xero-export-settings.component.ts (2)
93-93: Consider making brandingStyle readonly for consistency.For consistency with other branding-related properties in this file (brandingFeatureConfig, brandingContent), consider marking brandingStyle as readonly.
- brandingStyle = brandingStyle; + readonly brandingStyle = brandingStyle;
Line range hint
115-118: Consider refactoring direct brandId check to use brandingStyle.Since this PR introduces brandingStyle for common styling, consider refactoring the direct brandId check to use the new branding configuration system.
src/app/integrations/business-central/business-central-shared/business-central-import-settings/business-central-import-settings.component.ts (3)
67-67: Consider making brandingStyle readonly for consistency.For consistency with other branding-related properties in this file, consider marking brandingStyle as readonly.
- brandingStyle = brandingStyle; + readonly brandingStyle = brandingStyle;
16-16: Consider grouping branding-related imports together.For better code organization, consider grouping all branding-related imports together in a single import statement.
-import { brandingConfig, brandingKbArticles, brandingStyle } from 'src/app/branding/branding-config'; +import { brandingConfig, brandingContent, brandingFeatureConfig, brandingKbArticles, brandingStyle } from 'src/app/branding/branding-config';
15-15: Consider standardizing the branding configuration pattern across components.The introduction of brandingStyle is a good step towards centralizing styling configuration. To maintain consistency across the codebase, consider:
- Standardizing the use of readonly modifier for all branding-related properties
- Organizing branding-related imports consistently
- Replacing direct brandId checks with the new branding configuration system
This will help in better maintainability and consistency of the styling system.
Also applies to: 5-5, 5-5, 16-16
src/app/integrations/xero/xero-onboarding/xero-onboarding-connector/xero-onboarding-connector.component.ts (1)
4-4: Great job on implementing a consistent branding configuration pattern!The implementation shows a systematic approach to centralizing branding configurations across multiple components. This pattern:
- Improves maintainability by centralizing branding logic
- Reduces code duplication
- Makes it easier to manage branding changes across the application
- Follows Angular's best practices for component design
Consider documenting this pattern in your team's style guide to ensure consistent implementation across future components.
Also applies to: 85-85
src/app/integrations/qbd/qbd-shared/qbd-advanced-setting/qbd-advanced-setting.component.ts (1)
13-13: Consider consolidating branding imports.The file already imports
brandingConfig. Consider using a single destructured import for all branding-related configurations.-import { brandingConfig, brandingStyle } from 'src/app/branding/branding-config'; +import { + brandingConfig, + brandingStyle +} from 'src/app/branding/branding-config';src/app/integrations/qbo/qbo-shared/qbo-import-settings/qbo-import-settings.component.ts (1)
106-106: LGTM! Property addition completes the POC implementation.The addition of
brandingStyleproperty completes the consistent pattern across all integration modules.Consider documenting the branding style configuration structure in a central location (e.g., README.md) to help other developers understand:
- The purpose and benefits of the new styling approach
- How to use the
brandingStyleconfiguration- Examples of applying styles in templates
src/app/integrations/xero/xero-onboarding/xero-onboarding-connector/xero-onboarding-connector.component.html (1)
7-7: Consider standardizing the border class across components.This component uses
tw-border-border-tertiarywhile others usetw-border-separator. Consider standardizing this in the common style configuration for better consistency.src/app/integrations/qbo/qbo-onboarding/qbo-onboarding-connector/qbo-onboarding-connector.component.html (2)
Line range hint
25-25: Consider moving the switch link text to the branding configuration.The component still contains a direct
brandIdcheck for the switch link text. Consider moving this text variation to the branding configuration for consistency with the new approach:-[switchLinkText]="brandingConfig.brandId === 'co' ? 'Disconnect company' : 'Disconnect'" +[switchLinkText]="brandingStyle.common.disconnectText"
Line range hint
1-1: Architectural feedback for the POC implementation.The POC successfully demonstrates the value of centralizing brand-specific styles. To evolve this beyond the POC stage, consider:
- Standardize utility classes across components (e.g., border classes)
- Move all brand-specific text and styling variations to the branding configuration
- Document the structure and usage of the
brandingStyleobject for team reference- Consider creating a style guide that showcases the common components with different brand styles
This will help ensure consistency and maintainability as the system grows.
src/app/integrations/intacct/intacct-shared/intacct-c1-import-settings/intacct-c1-import-settings.component.html (1)
Line range hint
4-11: Consider extending branding configuration to handle text content.While the styling has been centralized, the content text still uses conditional logic based on
brandingConfig.brandId. Consider extending the POC to handle text content through the branding configuration as well.Example approach:
brandingStyle: { common: { configurationCommonStyle: string; importSettingsText: { contentText: string; } } }src/app/integrations/qbd/qbd-shared/qbd-field-mapping/qbd-field-mapping.component.html (1)
4-4: LGTM! Consider text content improvements.The implementation correctly uses the common style configuration and maintains consistent border classes.
Consider moving the repeated text content that uses
brandingConfig.brandNameinto the branding configuration for better maintainability.src/app/shared/components/si/core/intacct-location-entity/intacct-location-entity.component.html (1)
5-5: Consider moving branding logic to component class.The template contains multiple branding-specific checks (e.g.,
brandingConfig.brandId==='fyle'). Consider moving this logic to the component class to improve maintainability and follow separation of concerns.src/app/shared/components/si/core/intacct-connector/intacct-connector.component.html (1)
4-4: Consolidate duplicate info label components.The template contains two nearly identical info label implementations with different styling based on
brandingConfig.brandId. Consider consolidating these into a single component with dynamic styling:-<div *ngIf="brandingConfig.brandId === 'co'" class="tw-w-400-px tw-py-8-px tw-px-16-px tw-rounded-6-px tw-bg-bg-tertiary-lighter tw-border tw-border-separator"> - <p class="tw-text-14-px tw-text-text-primary"> - {{brandingContent.intacct.configuration.connector.connectorInfoLabel}} - </p> -</div> -<div *ngIf="brandingConfig.brandId !== 'co'" class="tw-w-400-px"> - <app-configuration-info-label - [infoText]="brandingContent.intacct.configuration.connector.connectorInfoLabel"> - </app-configuration-info-label> -</div> +<app-configuration-info-label + [infoText]="brandingContent.intacct.configuration.connector.connectorInfoLabel" + [customClass]="brandingConfig.brandId === 'co' ? 'co-brand-style' : ''"> +</app-configuration-info-label>Also applies to: 35-42
src/app/integrations/sage300/sage300-shared/sage300-import-settings/sage300-import-settings.component.html (1)
4-4: Move text construction to component class.The template contains multiple instances of string concatenation with
brandingConfig.brandName. Consider moving these to the component class to:
- Improve maintainability
- Enable proper sanitization
- Allow for easier localization
src/app/integrations/business-central/business-central-shared/business-central-import-settings/business-central-import-settings.component.html (2)
4-4: Use brandingStyle for conditional padding.The template uses conditional padding classes based on
brandingConfig.brandId. Consider moving this styling logic to the brandingStyle object for consistency:-<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.textPaddingStyle">Also applies to: 26-28
4-4: Consider implementing a comprehensive branding strategy.While moving to
brandingStyle.common.configurationCommonStyleis a step in the right direction, consider implementing a more comprehensive branding strategy:
- Create a dedicated BrandingService to handle all brand-specific logic
- Use TypeScript interfaces to ensure type safety for branding configurations
- Implement proper null checks and fallback values
- Move all brand-specific template logic to component classes
src/app/integrations/xero/xero-shared/xero-import-settings/xero-import-settings.component.html (1)
4-4: Consider standardizing border classes across components.While the
brandingStyleimplementation is good, there's an inconsistency in border classes:
- This component uses
tw-border-border-tertiary- Other components use
tw-border-separatorConsider standardizing these classes for better maintainability.
src/app/integrations/travelperk/travelperk-shared/travelperk-advanced-settings/travelperk-advanced-settings.component.html (1)
4-4: LGTM! Consider documenting the pattern.The implementation consistently follows the new styling approach across components. This systematic refactoring improves maintainability.
Consider adding documentation about this pattern in the README or component documentation to help future developers understand the centralized styling approach.
src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-advanced-settings/qbd-direct-advanced-settings.component.html (1)
4-4: LGTM! Document architectural decision.The implementation aligns with the new styling approach. This systematic change across components indicates a significant architectural shift.
Consider documenting this architectural decision in an ADR (Architecture Decision Record) to capture:
- The motivation behind centralizing styles
- The structure of the
brandingStyleconfiguration- The impact on component styling across the application
src/app/integrations/qbo/qbo-shared/qbo-import-settings/qbo-import-settings.component.html (1)
4-4: LGTM! Consider adding type safety.The implementation consistently follows the new styling pattern across components.
Consider adding TypeScript interfaces for the
brandingStyleobject structure to ensure type safety and better IDE support:interface BrandingStyle { common: { configurationCommonStyle: string; // Add other common style properties }; // Add other style categories }src/app/integrations/qbo/qbo-shared/qbo-advanced-settings/qbo-advanced-settings.component.html (1)
4-4: LGTM! Good refactoring to use centralized styling.The change to use
brandingStyle.common.configurationCommonStyleimproves maintainability by centralizing the styling logic and reducing conditional complexity.This pattern:
- Reduces code duplication across integration components
- Makes style changes easier to manage
- Ensures consistent UI across different integrations
src/app/integrations/netsuite/netsuite-shared/netsuite-advanced-settings/netsuite-advanced-settings.component.html (1)
4-4: Consider adding TypeScript interfaces for branding styles.While the implementation is good, adding TypeScript interfaces would improve type safety and developer experience.
Consider adding interfaces like:
interface BrandingStyle { common: { configurationCommonStyle: string; // other common styles }; // brand-specific styles if needed }src/app/integrations/intacct/intacct-shared/intacct-advanced-settings/intacct-advanced-settings.component.html (1)
4-4: Consider documenting the available style configurations.The implementation would benefit from documentation about available styles and their usage.
Consider adding JSDoc comments in the branding style configuration:
/** * Common style configurations used across integration components * @property configurationCommonStyle - Base styles for configuration sections */src/app/integrations/qbd/qbd-shared/qbd-export-setting/qbd-export-setting.component.html (1)
4-4: Consider adding unit tests for style configurations.While the implementation is solid, adding unit tests would ensure style configurations remain consistent.
Consider adding tests to verify:
- Style object structure
- Presence of required style classes
- Consistent application across components
src/app/integrations/intacct/intacct-shared/intacct-export-settings/intacct-export-settings.component.html (1)
4-4: Consider documenting the common styles structure.While the implementation is consistent, adding documentation about the structure and usage of
brandingStyle.common.configurationCommonStylewould help future maintenance.Consider adding a comment block above the div explaining the common styles structure:
+<!-- + The brandingStyle.common.configurationCommonStyle applies shared styling + across all integration components. See documentation for available classes. +--> <div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="brandingStyle.common.configurationCommonStyle">src/app/integrations/netsuite/netsuite-shared/netsuite-export-settings/netsuite-export-settings.component.html (1)
5-5: Document and test the common styles system.The implementation completes the pattern across all integration components. Consider creating comprehensive documentation and testing strategy for the common styles system.
Recommendations for the styling system:
- Create a central documentation file explaining the common styles architecture
- Implement visual regression tests to ensure consistency
- Consider creating a style guide showcasing common components
- Add type definitions for the branding style interface
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (79)
src/app/branding/c1-style-config.ts(1 hunks)src/app/branding/fyle-style-config.ts(1 hunks)src/app/integrations/business-central/business-central-onboarding/business-central-onboarding-connector/business-central-onboarding-connector.component.html(1 hunks)src/app/integrations/business-central/business-central-onboarding/business-central-onboarding-connector/business-central-onboarding-connector.component.ts(2 hunks)src/app/integrations/business-central/business-central-shared/business-central-advanced-settings/business-central-advanced-settings.component.html(1 hunks)src/app/integrations/business-central/business-central-shared/business-central-advanced-settings/business-central-advanced-settings.component.ts(2 hunks)src/app/integrations/business-central/business-central-shared/business-central-export-settings/business-central-export-settings.component.html(1 hunks)src/app/integrations/business-central/business-central-shared/business-central-export-settings/business-central-export-settings.component.ts(2 hunks)src/app/integrations/business-central/business-central-shared/business-central-import-settings/business-central-import-settings.component.html(1 hunks)src/app/integrations/business-central/business-central-shared/business-central-import-settings/business-central-import-settings.component.ts(2 hunks)src/app/integrations/intacct/intacct-shared/intacct-advanced-settings/intacct-advanced-settings.component.html(1 hunks)src/app/integrations/intacct/intacct-shared/intacct-advanced-settings/intacct-advanced-settings.component.ts(2 hunks)src/app/integrations/intacct/intacct-shared/intacct-c1-import-settings/intacct-c1-import-settings.component.html(1 hunks)src/app/integrations/intacct/intacct-shared/intacct-c1-import-settings/intacct-c1-import-settings.component.ts(2 hunks)src/app/integrations/intacct/intacct-shared/intacct-export-settings/intacct-export-settings.component.html(1 hunks)src/app/integrations/intacct/intacct-shared/intacct-export-settings/intacct-export-settings.component.ts(2 hunks)src/app/integrations/intacct/intacct-shared/intacct-import-settings/intacct-import-settings.component.html(1 hunks)src/app/integrations/intacct/intacct-shared/intacct-import-settings/intacct-import-settings.component.ts(2 hunks)src/app/integrations/netsuite/netsuite-shared/netsuite-advanced-settings/netsuite-advanced-settings.component.html(1 hunks)src/app/integrations/netsuite/netsuite-shared/netsuite-advanced-settings/netsuite-advanced-settings.component.ts(2 hunks)src/app/integrations/netsuite/netsuite-shared/netsuite-export-settings/netsuite-export-settings.component.html(1 hunks)src/app/integrations/netsuite/netsuite-shared/netsuite-export-settings/netsuite-export-settings.component.ts(2 hunks)src/app/integrations/netsuite/netsuite-shared/netsuite-import-settings/netsuite-import-settings.component.html(1 hunks)src/app/integrations/netsuite/netsuite-shared/netsuite-import-settings/netsuite-import-settings.component.ts(2 hunks)src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-connector/qbd-direct-onboarding-connector.component.html(1 hunks)src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-connector/qbd-direct-onboarding-connector.component.ts(2 hunks)src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-pre-requisite/qbd-direct-onboarding-pre-requisite.component.html(1 hunks)src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-pre-requisite/qbd-direct-onboarding-pre-requisite.component.ts(2 hunks)src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-advanced-settings/qbd-direct-advanced-settings.component.html(1 hunks)src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-advanced-settings/qbd-direct-advanced-settings.component.ts(2 hunks)src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-export-settings/qbd-direct-export-settings.component.html(1 hunks)src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-import-settings/qbd-direct-import-settings.component.html(1 hunks)src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-import-settings/qbd-direct-import-settings.component.ts(2 hunks)src/app/integrations/qbd/qbd-shared/qbd-advanced-setting/qbd-advanced-setting.component.html(1 hunks)src/app/integrations/qbd/qbd-shared/qbd-advanced-setting/qbd-advanced-setting.component.ts(2 hunks)src/app/integrations/qbd/qbd-shared/qbd-export-setting/qbd-export-setting.component.html(1 hunks)src/app/integrations/qbd/qbd-shared/qbd-export-setting/qbd-export-setting.component.ts(2 hunks)src/app/integrations/qbd/qbd-shared/qbd-field-mapping/qbd-field-mapping.component.html(1 hunks)src/app/integrations/qbd/qbd-shared/qbd-field-mapping/qbd-field-mapping.component.ts(2 hunks)src/app/integrations/qbo/qbo-onboarding/qbo-clone-settings/qbo-clone-settings.component.html(1 hunks)src/app/integrations/qbo/qbo-onboarding/qbo-clone-settings/qbo-clone-settings.component.ts(2 hunks)src/app/integrations/qbo/qbo-onboarding/qbo-onboarding-connector/qbo-onboarding-connector.component.html(1 hunks)src/app/integrations/qbo/qbo-onboarding/qbo-onboarding-connector/qbo-onboarding-connector.component.ts(2 hunks)src/app/integrations/qbo/qbo-shared/qbo-advanced-settings/qbo-advanced-settings.component.html(1 hunks)src/app/integrations/qbo/qbo-shared/qbo-advanced-settings/qbo-advanced-settings.component.ts(2 hunks)src/app/integrations/qbo/qbo-shared/qbo-export-settings/qbo-export-settings.component.html(1 hunks)src/app/integrations/qbo/qbo-shared/qbo-export-settings/qbo-export-settings.component.ts(2 hunks)src/app/integrations/qbo/qbo-shared/qbo-import-settings/qbo-import-settings.component.html(1 hunks)src/app/integrations/qbo/qbo-shared/qbo-import-settings/qbo-import-settings.component.ts(2 hunks)src/app/integrations/sage300/sage300-onboarding/sage300-onboarding-connector/sage300-onboarding-connector.component.html(1 hunks)src/app/integrations/sage300/sage300-onboarding/sage300-onboarding-connector/sage300-onboarding-connector.component.ts(2 hunks)src/app/integrations/sage300/sage300-shared/sage300-advanced-settings/sage300-advanced-settings.component.html(1 hunks)src/app/integrations/sage300/sage300-shared/sage300-advanced-settings/sage300-advanced-settings.component.ts(2 hunks)src/app/integrations/sage300/sage300-shared/sage300-export-settings/sage300-export-settings.component.html(1 hunks)src/app/integrations/sage300/sage300-shared/sage300-export-settings/sage300-export-settings.component.ts(2 hunks)src/app/integrations/sage300/sage300-shared/sage300-import-settings/sage300-import-settings.component.html(1 hunks)src/app/integrations/sage300/sage300-shared/sage300-import-settings/sage300-import-settings.component.ts(2 hunks)src/app/integrations/travelperk/travelperk-shared/travelperk-advanced-settings/travelperk-advanced-settings.component.html(1 hunks)src/app/integrations/travelperk/travelperk-shared/travelperk-advanced-settings/travelperk-advanced-settings.component.ts(2 hunks)src/app/integrations/travelperk/travelperk-shared/travelperk-payment-profile-settings/travelperk-payment-profile-settings.component.html(1 hunks)src/app/integrations/travelperk/travelperk-shared/travelperk-payment-profile-settings/travelperk-payment-profile-settings.component.ts(2 hunks)src/app/integrations/xero/xero-onboarding/xero-clone-settings/xero-clone-settings.component.html(1 hunks)src/app/integrations/xero/xero-onboarding/xero-clone-settings/xero-clone-settings.component.ts(2 hunks)src/app/integrations/xero/xero-onboarding/xero-onboarding-connector/xero-onboarding-connector.component.html(1 hunks)src/app/integrations/xero/xero-onboarding/xero-onboarding-connector/xero-onboarding-connector.component.ts(2 hunks)src/app/integrations/xero/xero-shared/xero-advanced-settings/xero-advanced-settings.component.html(1 hunks)src/app/integrations/xero/xero-shared/xero-advanced-settings/xero-advanced-settings.component.ts(2 hunks)src/app/integrations/xero/xero-shared/xero-export-settings/xero-export-settings.component.html(1 hunks)src/app/integrations/xero/xero-shared/xero-export-settings/xero-export-settings.component.ts(2 hunks)src/app/integrations/xero/xero-shared/xero-import-settings/xero-import-settings.component.html(1 hunks)src/app/integrations/xero/xero-shared/xero-import-settings/xero-import-settings.component.ts(2 hunks)src/app/shared/components/netsuite/core/netsuite-connector/netsuite-connector.component.html(1 hunks)src/app/shared/components/netsuite/core/netsuite-connector/netsuite-connector.component.ts(2 hunks)src/app/shared/components/netsuite/core/netsuite-subsidiary-mapping/netsuite-subsidiary-mapping.component.html(1 hunks)src/app/shared/components/netsuite/core/netsuite-subsidiary-mapping/netsuite-subsidiary-mapping.component.ts(2 hunks)src/app/shared/components/si/core/intacct-connector/intacct-connector.component.html(1 hunks)src/app/shared/components/si/core/intacct-connector/intacct-connector.component.ts(2 hunks)src/app/shared/components/si/core/intacct-location-entity/intacct-location-entity.component.html(1 hunks)src/app/shared/components/si/core/intacct-location-entity/intacct-location-entity.component.ts(2 hunks)
✅ Files skipped from review due to trivial changes (2)
- src/app/integrations/qbd/qbd-shared/qbd-export-setting/qbd-export-setting.component.ts
- src/app/integrations/intacct/intacct-shared/intacct-import-settings/intacct-import-settings.component.ts
🚧 Files skipped from review as they are similar to previous changes (3)
- src/app/branding/c1-style-config.ts
- src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-export-settings/qbd-direct-export-settings.component.html
- src/app/branding/fyle-style-config.ts
🔇 Additional comments (63)
src/app/shared/components/si/core/intacct-connector/intacct-connector.component.ts (1)
4-4: Consider consolidating branding-related properties.The component now has three branding-related properties:
brandingConfig,brandingContent, andbrandingStyle. Consider consolidating these into a single branding service or configuration object to reduce property duplication and improve maintainability.Let's check if other components follow the same pattern:
Also applies to: 38-38
src/app/shared/components/netsuite/core/netsuite-connector/netsuite-connector.component.ts (1)
4-4: Ensure consistent branding property usage across components.The component follows the same pattern of maintaining both
brandingConfigandbrandingStyle. Consider documenting the transition strategy from the old branding approach to the new one to ensure consistency across the codebase.Let's check the usage patterns across components:
Also applies to: 41-41
✅ Verification successful
Transition from
brandingConfigtobrandingStylefollows codebase patternThe component's simultaneous use of both branding properties is consistent with the ongoing architectural transition observed across multiple integration components. This appears to be part of a systematic migration strategy.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check for components using different combinations of branding properties echo "Components with brandingConfig only:" rg -l "brandingConfig.*=.*brandingConfig" | grep -v "brandingStyle" echo "Components with brandingStyle only:" rg -l "brandingStyle.*=.*brandingStyle" | grep -v "brandingConfig"Length of output: 23133
src/app/integrations/sage300/sage300-onboarding/sage300-onboarding-connector/sage300-onboarding-connector.component.ts (1)
4-4: Document the impact of branding styles on onboarding flows.As this is an onboarding component, consider documenting how the new
brandingStyleaffects the onboarding user experience and ensure consistent styling across all onboarding flows.Let's analyze the onboarding components for consistency:
Also applies to: 37-37
src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-pre-requisite/qbd-direct-onboarding-pre-requisite.component.ts (1)
67-67: Document standalone component styling considerations.As this is a standalone component, ensure that the
brandingStyleintegration works correctly with Angular's standalone component architecture and document any special considerations.Let's check other standalone components:
✅ Verification successful
Styling implementation verified for standalone components
The
brandingStyleintegration works correctly with Angular's standalone component architecture. The implementation uses standard Angular class bindings and Tailwind CSS utilities, with styles managed through a centralized branding configuration system. No special considerations or documentation are needed.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Find standalone components using brandingStyle rg -l "standalone.*:.*true" | xargs rg "brandingStyle" # Check for potential styling issues in standalone components rg -l "standalone.*:.*true" | xargs rg "ngClass.*brandingStyle"Length of output: 2176
Script:
#!/bin/bash # Check template usage of brandingStyle rg -l "standalone.*:.*true" | xargs rg "brandingStyle\." -A 2 # Check the branding configuration source cat src/app/branding/branding-config.ts # Check for ViewEncapsulation settings in standalone components rg -l "standalone.*:.*true" | xargs rg "ViewEncapsulation"Length of output: 1948
Script:
#!/bin/bash # Check style config files cat src/app/branding/fyle-style-config.ts cat src/app/branding/c1-style-config.ts # Check template files for style usage rg -l "standalone.*:.*true" | sed 's/\.ts$/.html/' | xargs catLength of output: 69181
src/app/integrations/qbd/qbd-shared/qbd-field-mapping/qbd-field-mapping.component.ts (1)
11-11: Consistent with the new branding approach.The implementation aligns with the POC pattern seen in other components. However:
- Consider adding migration documentation in the component
- Plan for eventual removal of direct
brandingConfigusageLet's verify the consistency of this pattern across the codebase:
Also applies to: 52-52
✅ Verification successful
Verified: Implementation follows consistent branding pattern
The component's branding imports (
brandingConfig,brandingKbArticles,brandingStyle) align with the established pattern seen across multiple components in the codebase, including other major integration components like NetSuite, Intacct, and Sage300.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check for components that might need similar updates rg -l 'readonly brandingConfig = brandingConfig' | grep 'component.ts$'Length of output: 10581
Script:
#!/bin/bash # Check import patterns and usage of branding modules echo "=== Branding imports patterns ===" rg "import.*branding.*from.*branding-config" -A 1 echo -e "\n=== Usage of brandingStyle and brandingKbArticles ===" rg "brandingStyle|brandingKbArticles" --type tsLength of output: 66773
src/app/shared/components/netsuite/core/netsuite-subsidiary-mapping/netsuite-subsidiary-mapping.component.ts (1)
4-4: Document impact on shared component.As this is a shared component, consider:
- Documenting the impact on dependent features
- Adding migration guidelines for consumers
- Testing the changes across all usage scenarios
Let's check the component's usage:
Also applies to: 60-60
src/app/integrations/travelperk/travelperk-shared/travelperk-advanced-settings/travelperk-advanced-settings.component.ts (1)
3-3: Document the POC implementation.After reviewing multiple files with the same pattern, recommend:
- Adding a README.md explaining the POC approach
- Creating a migration guide for other components
- Setting up linting rules to ensure consistent implementation
Let's check if documentation exists:
Also applies to: 65-65
src/app/integrations/qbo/qbo-onboarding/qbo-onboarding-connector/qbo-onboarding-connector.component.ts (2)
5-5: LGTM! Import statement is properly organized.The import statement is well-organized, grouping related branding configurations together.
76-76: LGTM! Property initialization follows Angular best practices.The
brandingStyleproperty is correctly initialized as a class property, following Angular's best practices for component properties that will be used in templates.src/app/integrations/business-central/business-central-shared/business-central-advanced-settings/business-central-advanced-settings.component.ts (2)
14-14: LGTM! Import statement is properly organized.The import statement is well-organized, grouping related branding configurations together.
64-64: LGTM! Property initialization follows Angular best practices.The
brandingStyleproperty is correctly initialized as a class property, following Angular's best practices for component properties that will be used in templates.src/app/integrations/business-central/business-central-onboarding/business-central-onboarding-connector/business-central-onboarding-connector.component.ts (2)
15-15: LGTM! Import statement is properly organized.The import statement is well-organized, grouping related branding configurations together.
75-75: LGTM! Property initialization follows Angular best practices.The
brandingStyleproperty is correctly initialized as a class property, following Angular's best practices for component properties that will be used in templates.src/app/integrations/xero/xero-onboarding/xero-onboarding-connector/xero-onboarding-connector.component.ts (2)
4-4: LGTM! Import statement is properly organized.The import statement is well-organized, grouping related branding configurations together.
85-85: LGTM! Property initialization follows Angular best practices.The
brandingStyleproperty is correctly initialized as a class property, following Angular's best practices for component properties that will be used in templates.src/app/integrations/qbd/qbd-shared/qbd-advanced-setting/qbd-advanced-setting.component.ts (1)
75-75: LGTM! Property addition aligns with the POC objectives.The addition of
brandingStyleproperty supports the implementation of common styles as variables.src/app/integrations/sage300/sage300-shared/sage300-advanced-settings/sage300-advanced-settings.component.ts (2)
16-16: LGTM! Import statement follows consistent pattern.The import statement includes all branding-related configurations in a single line, which is good for maintainability.
73-73: LGTM! Property addition maintains consistency.The addition of
brandingStyleproperty aligns with the pattern seen in other integration modules.src/app/integrations/qbo/qbo-shared/qbo-advanced-settings/qbo-advanced-settings.component.ts (2)
5-5: LGTM! Import statement is well organized.The import includes all branding-related configurations in a single line, maintaining consistency with other modules.
87-87: LGTM! Property addition follows established pattern.The addition of
brandingStyleproperty aligns with the POC implementation across other integration modules.src/app/integrations/qbo/qbo-shared/qbo-import-settings/qbo-import-settings.component.ts (1)
5-5: LGTM! Import statement follows consistent pattern.The import includes all branding-related configurations in a single line, maintaining consistency with other modules.
src/app/integrations/xero/xero-shared/xero-import-settings/xero-import-settings.component.ts (2)
5-5: LGTM!The
brandingStyleimport is correctly added to the existing branding-related imports.
87-88: LGTM!The
brandingStyleproperty is consistently added alongside other branding-related properties, maintaining good code organization.src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-advanced-settings/qbd-direct-advanced-settings.component.ts (2)
6-6: LGTM!The
brandingStyleimport is correctly added to the existing branding-related imports.
98-99: LGTM!The
brandingStyleproperty is consistently added alongside other branding-related properties.src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-import-settings/qbd-direct-import-settings.component.ts (2)
7-7: LGTM!The
brandingStyleimport is correctly added to the existing branding-related imports.
111-112: LGTM!The
brandingStyleproperty is consistently added alongside other branding-related properties.src/app/integrations/netsuite/netsuite-shared/netsuite-import-settings/netsuite-import-settings.component.ts (2)
5-5: LGTM!The
brandingStyleimport is correctly added to the existing branding-related imports.
98-99: LGTM!The
brandingStyleproperty is consistently added alongside other branding-related properties.src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-connector/qbd-direct-onboarding-connector.component.ts (1)
82-82: LGTM!The addition of
brandingStyleproperty aligns with the centralized branding configuration approach.src/app/integrations/netsuite/netsuite-shared/netsuite-advanced-settings/netsuite-advanced-settings.component.ts (1)
106-106: LGTM!The addition of
brandingStyleproperty is consistent with the centralized branding configuration approach.src/app/integrations/sage300/sage300-shared/sage300-export-settings/sage300-export-settings.component.ts (1)
103-103: LGTM!The addition of
brandingStyleproperty follows the centralized branding configuration pattern.src/app/integrations/business-central/business-central-shared/business-central-export-settings/business-central-export-settings.component.ts (1)
88-88: LGTM!The addition of
brandingStyleproperty maintains consistency with the centralized branding configuration approach.src/app/integrations/intacct/intacct-shared/intacct-advanced-settings/intacct-advanced-settings.component.ts (1)
17-17: LGTM! Clean addition of branding configuration.The changes properly integrate the new branding style configuration by:
- Grouping the import with other branding-related imports
- Adding the property at class level for template access
Also applies to: 123-123
src/app/integrations/xero/xero-onboarding/xero-clone-settings/xero-clone-settings.component.ts (1)
5-5: LGTM! Consistent implementation of branding configuration.The changes maintain consistency with other components by following the same pattern of importing and declaring the branding style property.
Also applies to: 146-146
src/app/integrations/sage300/sage300-shared/sage300-import-settings/sage300-import-settings.component.ts (1)
17-17: LGTM! Consistent implementation of branding configuration.The changes maintain consistency with other components by following the same pattern of importing and declaring the branding style property.
Also applies to: 111-111
src/app/integrations/intacct/intacct-shared/intacct-c1-import-settings/intacct-c1-import-settings.component.ts (2)
6-6: LGTM! Consistent implementation of branding configuration.The changes maintain consistency with other components by following the same pattern of importing and declaring the branding style property.
Also applies to: 102-102
Line range hint
1-1: Verify consistent usage of brandingStyle across the codebase.Let's verify that all components consistently use the new branding configuration pattern.
src/app/integrations/qbo/qbo-onboarding/qbo-clone-settings/qbo-clone-settings.component.ts (1)
5-5: LGTM! The branding style integration looks good.The changes correctly integrate the branding style configuration by:
- Grouping the import with other branding-related imports
- Following the component's property organization pattern
Also applies to: 194-194
src/app/integrations/netsuite/netsuite-shared/netsuite-export-settings/netsuite-export-settings.component.ts (1)
7-7: LGTM! The branding style changes are consistent.The implementation maintains consistency with other components and follows the established pattern for branding configuration integration.
Also applies to: 117-117
src/app/integrations/qbo/qbo-shared/qbo-export-settings/qbo-export-settings.component.ts (1)
5-5: LGTM! The branding style implementation is well-integrated.The changes maintain consistency with the codebase's branding configuration pattern and are properly placed within the component structure.
Also applies to: 135-135
src/app/integrations/intacct/intacct-shared/intacct-export-settings/intacct-export-settings.component.ts (1)
7-7: LGTM! The branding style changes align with the project standards.The implementation maintains consistency with other components and follows the established pattern for branding configuration.
Run the following script to verify consistent usage of brandingStyle across templates:
Also applies to: 159-159
✅ Verification successful
✓ Verified: brandingStyle usage is consistent across all configuration templates
The implementation follows the established pattern used across 39 different component templates in the codebase.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify consistent usage of brandingStyle in component templates # Expected: All component templates should use brandingStyle.common.configurationCommonStyle # Search for brandingStyle usage in HTML templates rg -t html "brandingStyle\.common\.configurationCommonStyle" --statsLength of output: 10399
src/app/shared/components/netsuite/core/netsuite-subsidiary-mapping/netsuite-subsidiary-mapping.component.html (1)
6-6: LGTM! Consistent implementation of the new styling approach.The change successfully centralizes the brand-specific styling logic, making it more maintainable.
src/app/integrations/sage300/sage300-onboarding/sage300-onboarding-connector/sage300-onboarding-connector.component.html (1)
9-9: LGTM! Consistent implementation.The change aligns with the new styling approach and maintains consistency with other components.
src/app/shared/components/netsuite/core/netsuite-connector/netsuite-connector.component.html (1)
6-6: LGTM! Clean implementation of the new styling approach.The change successfully implements the centralized styling pattern.
src/app/integrations/qbo/qbo-onboarding/qbo-onboarding-connector/qbo-onboarding-connector.component.html (1)
7-7: LGTM! Consistent implementation of the new styling approach.The change successfully implements the centralized styling pattern.
src/app/integrations/business-central/business-central-onboarding/business-central-onboarding-connector/business-central-onboarding-connector.component.html (1)
9-9: LGTM! Verify style consistency across brands.The change to use
brandingStyle.common.configurationCommonStylealigns with the POC's goal of centralizing style configuration.✅ Verification successful
Style implementation verified and consistent across components
The
brandingStyle.common.configurationCommonStyleis correctly implemented across all integration components, maintaining consistent structure while respecting brand-specific variations.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Verify consistent usage of brandingStyle.common.configurationCommonStyle rg -l "brandingStyle\.common\.configurationCommonStyle" | while read -r file; do echo "=== $file ===" rg "class=\".*?\".*?\[ngClass\]=\"brandingStyle\.common\.configurationCommonStyle\"" "$file" doneLength of output: 23693
src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-pre-requisite/qbd-direct-onboarding-pre-requisite.component.html (1)
7-7: Standardize border class usage across components.While the change to use
brandingStyle.common.configurationCommonStyleis good, there's an inconsistency in the border class:
- This component uses
tw-border-border-tertiary- Other components use
tw-border-separatorConsider standardizing this across all components.
src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-connector/qbd-direct-onboarding-connector.component.html (1)
7-7: Review the need for style override.The use of
!tw-rounded-border-radius-2xswith the important modifier (!) suggests a potential style conflict. Consider:
- Including this in the common style configuration if it's needed across components
- Removing the override if it's not necessary
✅ Verification successful
Border radius override is consistent with codebase patterns
The use of
!tw-rounded-border-radius-2xsfollows the established pattern across multiple components in the codebase, particularly in configuration and dialog containers. The important modifier appears to be a deliberate implementation choice in the design system.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Check for border radius usage and overrides rg "tw-rounded-border-radius-2xs" --context 2Length of output: 13831
src/app/integrations/travelperk/travelperk-shared/travelperk-payment-profile-settings/travelperk-payment-profile-settings.component.html (1)
4-4: Add null check for brandingStyle access.The direct access to
brandingStyle.common.configurationCommonStylecould lead to runtime errors if the brandingStyle object or its properties are undefined.src/app/integrations/sage300/sage300-shared/sage300-advanced-settings/sage300-advanced-settings.component.html (1)
4-4: LGTM! Improved styling management.The change to use
brandingStyle.common.configurationCommonStylealigns with the centralized styling approach, enhancing maintainability.src/app/integrations/business-central/business-central-shared/business-central-advanced-settings/business-central-advanced-settings.component.html (1)
4-4: LGTM! Consistent styling implementation.The styling change maintains consistency with other integration components, using the centralized
brandingStyle.common.configurationCommonStyle.src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-import-settings/qbd-direct-import-settings.component.html (1)
4-4: LGTM! Maintains styling consistency.The implementation aligns with the centralized styling approach used in other QBD Direct components.
src/app/integrations/netsuite/netsuite-shared/netsuite-import-settings/netsuite-import-settings.component.html (2)
5-5: LGTM! Consistent styling implementation.The change maintains consistency with other import settings components, using the centralized styling approach.
4-5: Verify complete migration to centralized styling.Let's check for any remaining components that still use direct brand-based conditional styling.
src/app/integrations/xero/xero-shared/xero-advanced-settings/xero-advanced-settings.component.html (1)
4-4: LGTM! Verify brandingStyle initialization.The change simplifies the class binding logic by centralizing the styling configuration. This is a good architectural improvement that promotes maintainability.
Please ensure that
brandingStyleis properly initialized in the component. Run this script to verify the implementation:✅ Verification successful
Initialization of brandingStyle is properly handled
The
brandingStyleis correctly imported from the central branding configuration and properly initialized in the component. The implementation follows the established pattern used across other components.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for brandingStyle initialization across components # Test: Search for brandingStyle property declarations and initializations ast-grep --pattern 'class $_ { $$$ brandingStyle = $_; $$$ }'Length of output: 15464
Script:
#!/bin/bash # Search for the Xero component file and its content rg -g "xero-advanced-settings.component.ts" "brandingStyle" -A 5 -B 5Length of output: 3154
Script:
#!/bin/bash # Verify brandingStyle export in branding config rg -g "branding-config.ts" "export.*brandingStyle" -A 2 -B 2Length of output: 281
src/app/integrations/qbd/qbd-shared/qbd-advanced-setting/qbd-advanced-setting.component.html (1)
4-4: LGTM! Consider adding visual regression tests.The implementation consistently follows the new styling pattern. This systematic approach to styling improves maintainability.
Consider implementing visual regression tests to ensure the styling changes don't cause unexpected visual changes across different brand configurations.
src/app/integrations/business-central/business-central-shared/business-central-export-settings/business-central-export-settings.component.html (1)
4-4: LGTM! Verify style application across different brands.The transition to using
brandingStyle.common.configurationCommonStyleimproves maintainability. However, ensure that the common styles maintain the expected visual appearance across all supported brands.Run this script to verify style consistency:
✅ Verification successful
Implementation verified - Common styles are consistently applied
The
brandingStyle.common.configurationCommonStyleis properly implemented with:
- Consistent usage across 36+ components
- Brand-specific variations properly defined in style configs
- Uniform structure with base classes
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for any remaining brand-specific styling in the codebase # that might conflict with the new common styles # Search for brand-specific class conditionals echo "Searching for remaining brand-specific class conditionals..." rg "ngClass.*brandingConfig\.brandId.*\?" --type html # Search for potential style definitions echo "Searching for style definitions..." rg "configurationCommonStyle.*=.*{" --type tsLength of output: 3354
Script:
#!/bin/bash # Search for common style definitions and usage echo "Searching for common style definitions..." rg "configurationCommonStyle\s*[:=]" --type ts echo -e "\nSearching for usage of common styles..." rg "brandingStyle\.common\.configurationCommonStyle" --type htmlLength of output: 10680
src/app/integrations/sage300/sage300-shared/sage300-export-settings/sage300-export-settings.component.html (1)
4-4: LGTM! Consistent implementation across integration components.The implementation aligns with the centralized styling approach seen in other components, promoting consistency and maintainability.
src/app/integrations/xero/xero-onboarding/xero-clone-settings/xero-clone-settings.component.html (1)
7-7: Verify style compatibility in clone settings context.The common styles implementation extends well to clone settings. Ensure that the shared styles maintain visual consistency in this different context.
Run this script to verify style application in clone settings:
✅ Verification successful
Common styles are correctly implemented in clone settings context
The implementation follows the established pattern used across other configuration components, maintaining visual consistency. Both Xero and QBO clone settings use identical structure and styling approach.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for any clone-specific styling that might need adjustment # Search for clone-specific styles that might conflict echo "Searching for clone-specific styles..." rg "clone-setting.*class.*=.*{" --type ts # Check for any clone-specific overrides echo "Checking for style overrides in clone components..." rg "::ng-deep.*clone-setting" --type scssLength of output: 432
Script:
#!/bin/bash # Search for clone-specific styling patterns echo "Checking component styling..." rg -t ts -t html "clone-setting.*class" echo -e "\nChecking style definitions..." rg -t css -t scss -t less "clone-setting" echo -e "\nChecking common style usage..." rg -t html "brandingStyle\.common\.configurationCommonStyle"Length of output: 10880
src/app/integrations/intacct/intacct-shared/intacct-import-settings/intacct-import-settings.component.html (1)
4-4: LGTM! Good improvement in styling management.The change to use
brandingStyle.common.configurationCommonStylecentralizes the styling configuration, making it more maintainable and consistent across different brands.src/app/integrations/qbo/qbo-shared/qbo-export-settings/qbo-export-settings.component.html (1)
5-5: LGTM! Consistent implementation.The styling change maintains consistency with other components by using the centralized
brandingStyle.common.configurationCommonStyle.src/app/integrations/qbo/qbo-onboarding/qbo-clone-settings/qbo-clone-settings.component.html (1)
7-7: LGTM! Verify complete implementation.The styling change correctly implements the centralized configuration approach. Since this appears to be part of a broader refactor, it would be good to verify that all similar components have been updated.
Run this script to check for any missed components:
✅ Verification successful
Verified: Centralized styling implementation is complete and consistent
The styling change has been properly implemented across all configuration components in the codebase. All components using the
configuration--contentsclass consistently apply the centralizedbrandingStyle.common.configurationCommonStyle, with proper loading state handling.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for any remaining conditional brand-specific styling in component templates # that haven't been migrated to use brandingStyle.common.configurationCommonStyle # Search for potential brand-specific conditional styling rg -g '*.html' "brandingConfig\.brandId.*configuration.*style|configuration.*contents.*class"Length of output: 95
Script:
#!/bin/bash # Search for configuration components and styling patterns echo "=== Configuration Components ===" rg -g '*.html' -l 'configuration--contents' echo -e "\n=== Usage of brandingStyle.common.configurationCommonStyle ===" rg -g '*.html' "\[ngClass\]=\"brandingStyle\.common\.configurationCommonStyle\"" echo -e "\n=== Any remaining direct brand-specific styles ===" rg -g '*.html' "brandingConfig\.(brandId|brand)"Length of output: 66478
| import { brandingContent, brandingKbArticles, brandingStyle } from 'src/app/branding/branding-config'; | ||
| import { brandingConfig } from 'src/app/branding/c1-contents-config'; |
There was a problem hiding this comment.
Standardize branding configuration imports.
The component imports brandingConfig from 'c1-contents-config' while other components import it from 'branding-config'. This inconsistency could lead to maintenance issues.
Apply this diff to standardize the imports:
-import { brandingContent, brandingKbArticles, brandingStyle } from 'src/app/branding/branding-config';
-import { brandingConfig } from 'src/app/branding/c1-contents-config';
+import { brandingConfig, brandingContent, brandingKbArticles, brandingStyle } from 'src/app/branding/branding-config';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| import { brandingContent, brandingKbArticles, brandingStyle } from 'src/app/branding/branding-config'; | |
| import { brandingConfig } from 'src/app/branding/c1-contents-config'; | |
| import { brandingConfig, brandingContent, brandingKbArticles, brandingStyle } from 'src/app/branding/branding-config'; |
| @@ -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"> | |||
There was a problem hiding this comment.
💡 Codebase verification
Migration needed: Inconsistent styling patterns detected across integration components
The new brandingStyle.common.configurationCommonStyle pattern is properly implemented in settings components, but many integration components still use the old brand-specific conditional styling. A systematic migration is needed for consistency.
- Found old pattern in 40 files including mapping, export logs, and configuration components
- New pattern correctly implemented in 37 files, primarily in settings components
- Need to migrate main components (dashboard, mapping, logs) to the new pattern
🔗 Analysis chain
Verify the styling implementation across all integration components.
The implementation looks good, but let's ensure the pattern is consistently applied across all integration components.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check for consistent usage of brandingStyle.common.configurationCommonStyle
# and identify any components that might still be using the old pattern
# Search for old pattern (brand-specific conditional styling)
echo "Checking for remaining brand-specific conditional styling..."
rg -l "ngClass.*brandingConfig\.brandId.*fyle"
# Search for new pattern usage
echo "Checking new pattern adoption..."
rg -l "brandingStyle\.common\.configurationCommonStyle"
Length of output: 9019
DhaaraniCIT
changed the title
|
|
||
| export const c1Styles = { | ||
| common: { | ||
| configurationCommonStyle: 'tw-mx-60-px tw-shadow-shadow-level-1' |
There was a problem hiding this comment.
configuration is enough, common is already a parent key and the variable already has "styles"
| export const brandingConfig: BrandingConfiguration = config as BrandingConfiguration; | ||
|
|
||
| export const c1Styles = { | ||
| common: { |
There was a problem hiding this comment.
why are we naming it common?
Description
feat: POC for common style as variables files
Clickup
https://app.clickup.com/t/
Summary by CodeRabbit
Release Notes
New Features
Improvements
The changes improve the application's ability to customize visual styles across different brand configurations, providing a more tailored user experience.