feat: common main page padding style conversion #1163
Conversation
WalkthroughThe pull request introduces a comprehensive update to the branding configuration across multiple components in the application. The existing property Changes
Possibly related PRs
Suggested Labels
Suggested Reviewers
Poem
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 (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (16)
src/app/integrations/business-central/business-central-main/business-central-export-log/business-central-export-log.component.ts (1)
4-4: Great work on maintaining consistency across components!The implementation effectively centralizes the padding styles while maintaining a consistent pattern across all components. The use of readonly modifiers ensures proper immutability.
Consider documenting the brandingStyle structure in the README or creating a separate documentation file to help other developers understand the available styling options and their intended usage.
Also applies to: 26-29
src/app/integrations/netsuite/netsuite-main/netsuite-configuration/netsuite-configuration.component.ts (2)
Line range hint
32-35: Remove commented code if no longer needed.There's commented code in the ngOnInit method that should be removed if it's no longer required. If it's kept for future reference, consider documenting the reason in a TODO comment or moving it to documentation.
1-1: Consider documenting the branding configuration architecture.The changes implement a consistent pattern for branding styles across components, which is good for maintainability. Consider:
- Documenting the purpose and usage of different branding configuration files (branding-config.ts vs c1-contents-config.ts)
- Adding examples of how to use the new brandingStyle in component templates
- Creating a migration guide for converting existing components
This will help future developers understand and correctly implement the branding system.
src/app/integrations/qbo/qbo-main/qbo-mapping/qbo-mapping.component.ts (1)
5-5: LGTM! Consider consolidating branding-related properties.The changes are consistent with other components. However, since this component uses multiple branding-related properties (brandingConfig, brandingFeatureConfig, brandingStyle), consider consolidating them into a single branding service in a future refactor to improve maintainability.
Also applies to: 31-32
src/app/integrations/xero/xero-main/xero-mapping/xero-mapping.component.ts (1)
5-5: LGTM! Consider adding JSDoc comments.The addition of
brandingStyleimport and readonly property aligns with the centralized styling approach. Consider adding JSDoc comments to document the purpose of this property./** * Centralized branding styles for consistent component styling * @readonly */ readonly brandingStyle = brandingStyle;Also applies to: 31-31
src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-pre-requisite/qbd-direct-onboarding-pre-requisite.component.ts (1)
67-67: LGTM! Consider grouping branding-related properties.The addition of readonly
brandingStyleproperty is correct. Consider grouping all branding-related properties together for better code organization.- brandingContent = brandingContent.qbd_direct.configuration.preRequisite; - brandingConfig: BrandingConfiguration = brandingConfig; - readonly brandingStyle = brandingStyle; + // Branding configurations + readonly brandingContent = brandingContent.qbd_direct.configuration.preRequisite; + readonly brandingConfig: BrandingConfiguration = brandingConfig; + readonly brandingStyle = brandingStyle;src/app/integrations/qbd/qbd-main/qbd-mapping/qbd-generic-mapping/qbd-generic-mapping.component.ts (1)
4-4: LGTM! Consider grouping related properties.The addition of readonly brandingStyle property improves type safety. Consider grouping it with the other branding-related property (brandingConfig) for better code organization.
readonly brandingConfig = brandingConfig; + readonly brandingStyle = brandingStyle; readonly AppName = AppName; - readonly brandingStyle = brandingStyle;Also applies to: 56-57
src/app/integrations/travelperk/travelperk-shared/travelperk-advanced-settings/travelperk-advanced-settings.component.ts (1)
65-65: Consider regrouping configuration properties.The readonly brandingStyle property should be grouped with other configuration-related properties (brandingConfig) for better code organization and maintainability.
readonly brandingConfig = brandingConfig; + readonly brandingStyle = brandingStyle; defaultCategories: TravelperkDestinationAttribuite[]; destinationFieldOptions: SelectFormOption[] = TravelperkAdvancedSettingModel.getDefaultCategory(); defaultMemoOptions: string[] = ['trip_id', 'trip_name', 'traveler_name', 'booker_name', 'merchant_name']; memoPreviewText: string; memoStructure: string[] = []; destinationAttributeNames: SelectFormLabel = { label: 'label', value: '' }; sourceAttributeNames: SelectFormLabel = { label: 'value', value: '' }; lineItems: SelectFormOption[] = TravelperkAdvancedSettingModel.getExpenseGroup(); - readonly brandingStyle = brandingStyle;src/app/integrations/xero/xero-shared/xero-advanced-settings/xero-advanced-settings.component.ts (1)
74-76: Remove extra blank line after brandingStyle property.The property is correctly grouped with other branding-related properties, but has an unnecessary extra blank line after it.
readonly brandingContent = brandingContent.xero.configuration.advancedSettings; readonly brandingStyle = brandingStyle; - constructor(src/app/integrations/qbo/qbo-onboarding/qbo-onboarding-connector/qbo-onboarding-connector.component.ts (1)
76-76: LGTM! Part of consistent styling centralization.The readonly brandingStyle property follows the same pattern implemented across other components, contributing to a more maintainable styling approach.
This change is part of a broader architectural improvement that:
- Centralizes branding styles
- Ensures configuration immutability
- Makes styling more consistent across components
src/app/integrations/qbd/qbd-main/qbd-dashboard/qbd-dashboard.component.ts (1)
75-76: Remove unnecessary blank line after brandingStyle declaration.While the readonly brandingStyle property is correctly implemented, there's an extra blank line that can be removed to maintain consistent spacing with other property declarations.
readonly brandingStyle = brandingStyle; -src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-advanced-settings/qbd-direct-advanced-settings.component.ts (1)
Line range hint
85-85: Well-structured approach to branding style management.The systematic addition of readonly brandingStyle across components demonstrates good architectural practices:
- Ensures consistent styling implementation across different parts of the application
- Prevents accidental modifications to branding styles during runtime
- Centralizes branding configuration, making it easier to maintain and update
Also applies to: 73-73, 75-76, 98-98
src/app/integrations/intacct/intacct-main/intacct-mapping/intacct-mapping.component.html (1)
3-3: Consider consolidating padding styles.Similar to other mapping components, this combines fixed
tw-py-40-pxwith dynamicbrandingStyle.common.mainPaddingStyle. Consider consolidating all padding into the centralized style configuration for better maintainability.src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-configuration/qbd-direct-configuration.component.html (1)
3-7: Consider standardizing the padding structure across components.The padding structure here differs from other components:
- Other components: Single div with both
tw-py-40-pxandmainPaddingStyle- This component: Nested divs with separate padding styles
This structural inconsistency could make maintenance more challenging.
Consider adopting the same structure as other components for consistency:
-<div class="tw-py-40-px"> - <div [ngClass]="brandingStyle.common.mainPaddingStyle"> +<div class="tw-py-40-px" [ngClass]="brandingStyle.common.mainPaddingStyle"> - </div>src/app/shared/components/dashboard/dashboard-export-section/dashboard-export-section.component.html (1)
1-2: LGTM! Consider standardizing shadow styles in future.The padding style change looks good. However, notice that shadow styles are still conditionally applied based on brandId. Consider standardizing these in a future PR for better maintainability.
src/app/shared/components/dashboard/dashboard-error-section/dashboard-error-section.component.html (1)
1-2: LGTM! Consider comprehensive styling standardization.The padding style change is good. However, there are multiple brand-specific styles still in use:
- Shadow styles based on brandId
- Text case transformations based on brandId (e.g.,
sentenceCasevstitlecase)Consider creating a comprehensive styling strategy that standardizes these variations through the branding configuration.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (82)
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-main/business-central-export-log/business-central-export-log.component.html(1 hunks)src/app/integrations/business-central/business-central-main/business-central-export-log/business-central-export-log.component.ts(2 hunks)src/app/integrations/business-central/business-central-main/business-central-mapping/business-central-mapping.component.html(1 hunks)src/app/integrations/business-central/business-central-main/business-central-mapping/business-central-mapping.component.ts(2 hunks)src/app/integrations/business-central/business-central-onboarding/business-central-onboarding-connector/business-central-onboarding-connector.component.ts(1 hunks)src/app/integrations/business-central/business-central-shared/business-central-advanced-settings/business-central-advanced-settings.component.ts(1 hunks)src/app/integrations/business-central/business-central-shared/business-central-export-settings/business-central-export-settings.component.ts(1 hunks)src/app/integrations/business-central/business-central-shared/business-central-import-settings/business-central-import-settings.component.ts(1 hunks)src/app/integrations/intacct/intacct-main/intacct-configuration/intacct-configuration.component.html(1 hunks)src/app/integrations/intacct/intacct-main/intacct-configuration/intacct-configuration.component.ts(2 hunks)src/app/integrations/intacct/intacct-main/intacct-export-log/intacct-export-log.component.html(1 hunks)src/app/integrations/intacct/intacct-main/intacct-export-log/intacct-export-log.component.ts(2 hunks)src/app/integrations/intacct/intacct-main/intacct-mapping/intacct-mapping.component.html(1 hunks)src/app/integrations/intacct/intacct-main/intacct-mapping/intacct-mapping.component.ts(2 hunks)src/app/integrations/intacct/intacct-shared/intacct-advanced-settings/intacct-advanced-settings.component.ts(1 hunks)src/app/integrations/intacct/intacct-shared/intacct-c1-import-settings/intacct-c1-import-settings.component.ts(1 hunks)src/app/integrations/intacct/intacct-shared/intacct-export-settings/intacct-export-settings.component.ts(1 hunks)src/app/integrations/intacct/intacct-shared/intacct-import-settings/intacct-import-settings.component.ts(1 hunks)src/app/integrations/netsuite/netsuite-main/netsuite-configuration/netsuite-configuration.component.html(1 hunks)src/app/integrations/netsuite/netsuite-main/netsuite-configuration/netsuite-configuration.component.ts(2 hunks)src/app/integrations/netsuite/netsuite-main/netsuite-export-log/netsuite-export-log.component.html(1 hunks)src/app/integrations/netsuite/netsuite-main/netsuite-export-log/netsuite-export-log.component.ts(2 hunks)src/app/integrations/netsuite/netsuite-main/netsuite-mapping/netsuite-mapping.component.html(1 hunks)src/app/integrations/netsuite/netsuite-main/netsuite-mapping/netsuite-mapping.component.ts(2 hunks)src/app/integrations/netsuite/netsuite-shared/netsuite-advanced-settings/netsuite-advanced-settings.component.ts(1 hunks)src/app/integrations/netsuite/netsuite-shared/netsuite-export-settings/netsuite-export-settings.component.ts(1 hunks)src/app/integrations/netsuite/netsuite-shared/netsuite-import-settings/netsuite-import-settings.component.ts(1 hunks)src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-configuration/qbd-direct-configuration.component.html(1 hunks)src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-configuration/qbd-direct-configuration.component.ts(2 hunks)src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-export-log/qbd-direct-export-log.component.html(1 hunks)src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-export-log/qbd-direct-export-log.component.ts(2 hunks)src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-mapping/qbd-direct-mapping.component.html(1 hunks)src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-mapping/qbd-direct-mapping.component.ts(2 hunks)src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-connector/qbd-direct-onboarding-connector.component.ts(1 hunks)src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-pre-requisite/qbd-direct-onboarding-pre-requisite.component.ts(1 hunks)src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-advanced-settings/qbd-direct-advanced-settings.component.ts(1 hunks)src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-import-settings/qbd-direct-import-settings.component.ts(1 hunks)src/app/integrations/qbd/qbd-main/qbd-dashboard/qbd-dashboard.component.html(1 hunks)src/app/integrations/qbd/qbd-main/qbd-dashboard/qbd-dashboard.component.ts(2 hunks)src/app/integrations/qbd/qbd-main/qbd-mapping/qbd-generic-mapping/qbd-generic-mapping.component.html(1 hunks)src/app/integrations/qbd/qbd-main/qbd-mapping/qbd-generic-mapping/qbd-generic-mapping.component.ts(2 hunks)src/app/integrations/qbd/qbd-shared/qbd-advanced-setting/qbd-advanced-setting.component.ts(1 hunks)src/app/integrations/qbd/qbd-shared/qbd-export-setting/qbd-export-setting.component.ts(1 hunks)src/app/integrations/qbd/qbd-shared/qbd-field-mapping/qbd-field-mapping.component.ts(1 hunks)src/app/integrations/qbo/qbo-main/qbo-configuration/qbo-configuration.component.html(1 hunks)src/app/integrations/qbo/qbo-main/qbo-configuration/qbo-configuration.component.ts(2 hunks)src/app/integrations/qbo/qbo-main/qbo-export-log/qbo-export-log.component.html(1 hunks)src/app/integrations/qbo/qbo-main/qbo-export-log/qbo-export-log.component.ts(2 hunks)src/app/integrations/qbo/qbo-main/qbo-mapping/qbo-mapping.component.html(1 hunks)src/app/integrations/qbo/qbo-main/qbo-mapping/qbo-mapping.component.ts(2 hunks)src/app/integrations/qbo/qbo-onboarding/qbo-clone-settings/qbo-clone-settings.component.ts(1 hunks)src/app/integrations/qbo/qbo-onboarding/qbo-onboarding-connector/qbo-onboarding-connector.component.ts(1 hunks)src/app/integrations/qbo/qbo-shared/qbo-advanced-settings/qbo-advanced-settings.component.ts(1 hunks)src/app/integrations/qbo/qbo-shared/qbo-export-settings/qbo-export-settings.component.ts(1 hunks)src/app/integrations/qbo/qbo-shared/qbo-import-settings/qbo-import-settings.component.ts(1 hunks)src/app/integrations/sage300/sage300-main/sage300-export-log/sage300-export-log.component.html(1 hunks)src/app/integrations/sage300/sage300-main/sage300-export-log/sage300-export-log.component.ts(2 hunks)src/app/integrations/sage300/sage300-main/sage300-mapping/sage300-mapping.component.html(1 hunks)src/app/integrations/sage300/sage300-main/sage300-mapping/sage300-mapping.component.ts(2 hunks)src/app/integrations/sage300/sage300-onboarding/sage300-onboarding-connector/sage300-onboarding-connector.component.ts(1 hunks)src/app/integrations/sage300/sage300-shared/sage300-advanced-settings/sage300-advanced-settings.component.ts(1 hunks)src/app/integrations/sage300/sage300-shared/sage300-export-settings/sage300-export-settings.component.ts(1 hunks)src/app/integrations/sage300/sage300-shared/sage300-import-settings/sage300-import-settings.component.ts(1 hunks)src/app/integrations/travelperk/travelperk-shared/travelperk-advanced-settings/travelperk-advanced-settings.component.ts(1 hunks)src/app/integrations/travelperk/travelperk-shared/travelperk-payment-profile-settings/travelperk-payment-profile-settings.component.ts(1 hunks)src/app/integrations/xero/xero-main/xero-configuration/xero-configuration.component.html(1 hunks)src/app/integrations/xero/xero-main/xero-configuration/xero-configuration.component.ts(2 hunks)src/app/integrations/xero/xero-main/xero-export-log/xero-export-log.component.html(1 hunks)src/app/integrations/xero/xero-main/xero-export-log/xero-export-log.component.ts(2 hunks)src/app/integrations/xero/xero-main/xero-mapping/xero-mapping.component.html(1 hunks)src/app/integrations/xero/xero-main/xero-mapping/xero-mapping.component.ts(2 hunks)src/app/integrations/xero/xero-onboarding/xero-clone-settings/xero-clone-settings.component.ts(1 hunks)src/app/integrations/xero/xero-onboarding/xero-onboarding-connector/xero-onboarding-connector.component.ts(1 hunks)src/app/integrations/xero/xero-shared/xero-advanced-settings/xero-advanced-settings.component.ts(1 hunks)src/app/integrations/xero/xero-shared/xero-export-settings/xero-export-settings.component.ts(1 hunks)src/app/integrations/xero/xero-shared/xero-import-settings/xero-import-settings.component.ts(1 hunks)src/app/shared/components/dashboard/dashboard-error-section/dashboard-error-section.component.html(1 hunks)src/app/shared/components/dashboard/dashboard-error-section/dashboard-error-section.component.ts(2 hunks)src/app/shared/components/dashboard/dashboard-export-section/dashboard-export-section.component.html(1 hunks)src/app/shared/components/dashboard/dashboard-export-section/dashboard-export-section.component.ts(2 hunks)
⛔ Files not processed due to max files limit (6)
- src/app/shared/components/dashboard/dashboard-export-summary-section/dashboard-export-summary-section.component.html
- src/app/shared/components/dashboard/dashboard-export-summary-section/dashboard-export-summary-section.component.ts
- src/app/shared/components/netsuite/core/netsuite-connector/netsuite-connector.component.ts
- src/app/shared/components/netsuite/core/netsuite-subsidiary-mapping/netsuite-subsidiary-mapping.component.ts
- src/app/shared/components/si/core/intacct-connector/intacct-connector.component.ts
- src/app/shared/components/si/core/intacct-location-entity/intacct-location-entity.component.ts
✅ Files skipped from review due to trivial changes (19)
- src/app/integrations/qbd/qbd-shared/qbd-export-setting/qbd-export-setting.component.ts
- src/app/integrations/intacct/intacct-shared/intacct-advanced-settings/intacct-advanced-settings.component.ts
- src/app/integrations/xero/xero-shared/xero-import-settings/xero-import-settings.component.ts
- src/app/integrations/sage300/sage300-shared/sage300-import-settings/sage300-import-settings.component.ts
- src/app/integrations/intacct/intacct-shared/intacct-import-settings/intacct-import-settings.component.ts
- src/app/integrations/business-central/business-central-shared/business-central-advanced-settings/business-central-advanced-settings.component.ts
- src/app/integrations/qbd/qbd-shared/qbd-advanced-setting/qbd-advanced-setting.component.ts
- src/app/integrations/qbo/qbo-shared/qbo-advanced-settings/qbo-advanced-settings.component.ts
- src/app/integrations/netsuite/netsuite-shared/netsuite-import-settings/netsuite-import-settings.component.ts
- src/app/integrations/netsuite/netsuite-shared/netsuite-export-settings/netsuite-export-settings.component.ts
- src/app/integrations/qbo/qbo-onboarding/qbo-clone-settings/qbo-clone-settings.component.ts
- src/app/integrations/business-central/business-central-shared/business-central-export-settings/business-central-export-settings.component.ts
- src/app/integrations/sage300/sage300-shared/sage300-export-settings/sage300-export-settings.component.ts
- src/app/integrations/qbo/qbo-shared/qbo-import-settings/qbo-import-settings.component.ts
- src/app/integrations/intacct/intacct-shared/intacct-c1-import-settings/intacct-c1-import-settings.component.ts
- src/app/integrations/qbd/qbd-shared/qbd-field-mapping/qbd-field-mapping.component.ts
- src/app/integrations/qbo/qbo-shared/qbo-export-settings/qbo-export-settings.component.ts
- src/app/integrations/business-central/business-central-onboarding/business-central-onboarding-connector/business-central-onboarding-connector.component.ts
- src/app/integrations/intacct/intacct-shared/intacct-export-settings/intacct-export-settings.component.ts
🔇 Additional comments (54)
src/app/integrations/sage300/sage300-main/sage300-mapping/sage300-mapping.component.ts (2)
5-5: LGTM! Clean import statement addition.The import statement follows Angular best practices by grouping related branding imports together.
31-31: LGTM! Good use of readonly modifier.The property declaration follows the existing pattern in the component and correctly uses the readonly modifier for configuration data.
src/app/integrations/netsuite/netsuite-main/netsuite-mapping/netsuite-mapping.component.ts (2)
5-5: LGTM! Import statement updated correctly.The addition of
brandingStyleto the existing branding-related imports is consistent with the PR's objective of centralizing padding styles.
31-31: LGTM! Property declaration follows established patterns.The new readonly property follows the same pattern as other branding-related properties in the component, maintaining consistency in the codebase.
Let's verify the usage of this new property in the template file:
✅ Verification successful
Property declaration and usage verified successfully
The
brandingStyleproperty is correctly used in the template withngClassdirective, confirming proper implementation.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of brandingStyle in the template # Expected: Should find usage of brandingStyle.common.mainPaddingStyle in the HTML template rg "brandingStyle\.common\.mainPaddingStyle" "src/app/integrations/netsuite/netsuite-main/netsuite-mapping/netsuite-mapping.component.html"Length of output: 234
src/app/integrations/intacct/intacct-main/intacct-mapping/intacct-mapping.component.ts (2)
5-5: LGTM! Clean import addition.The
brandingStyleimport is properly grouped with other branding-related imports.
33-33: LGTM! Consistent property declaration.The
brandingStyleproperty is correctly declared as readonly, maintaining consistency with other branding-related properties in the class.Let's verify that the template is properly using this new property:
✅ Verification successful
Template correctly uses the brandingStyle property
The template properly binds the
brandingStyle.common.mainPaddingStylethrough thengClassdirective, confirming correct implementation.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the template usage of brandingStyle # Expected: The template should use brandingStyle.common.mainPaddingStyle rg -t html "brandingStyle\.common\.mainPaddingStyle" "src/app/integrations/intacct/intacct-main/intacct-mapping/intacct-mapping.component.html"Length of output: 238
src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-mapping/qbd-direct-mapping.component.ts (2)
5-5: LGTM! Clean import addition.The import statement is correctly placed and follows Angular conventions.
35-35: LGTM! Good use of readonly property.The declaration follows the established pattern in the file for branding-related configurations and ensures immutability.
src/app/branding/fyle-style-config.ts (1)
8-10: LGTM! Good approach to centralizing styles.The addition of
mainPaddingStyleandmainShadowStyleproperties follows a consistent pattern with the existing configuration. Using Tailwind CSS classes helps maintain consistency and makes the styles more maintainable.src/app/branding/c1-style-config.ts (1)
8-10: Verify shadow class naming consistency across brands.While the different padding values between brands make sense, the shadow classes use different naming patterns:
- Fyle:
tw-shadow-app-card- C1:
tw-shadow-shadow-level-1Please verify if this difference is intentional or if we should maintain consistent class naming across brands.
✅ Verification successful
Shadow class naming difference is intentional and properly configured
The different shadow naming patterns reflect each brand's design system approach:
- Fyle uses semantic naming (
tw-shadow-app-card) with deeper, brand-colored shadows- C1 uses systematic naming (
tw-shadow-shadow-level-1) with lighter, neutral shadowsBoth are properly defined in the Tailwind configuration and the difference should be maintained.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for shadow class usage across the codebase echo "Searching for shadow classes..." rg -l "tw-shadow-(app-card|shadow-level-1)" echo -e "\nChecking Tailwind config for shadow definitions..." fd -g "tailwind.config.*" -x cat {} \; | grep -A 5 "boxShadow"Length of output: 3680
Script:
#!/bin/bash # Search for shadow-level-1 definition in configuration files echo "Searching for shadow-level-1 definition..." rg -p "shadow-level-1" --type ts --type js --type json echo -e "\nSearching for shadow configuration files..." fd -g "*shadow*.{ts,js,json}" echo -e "\nSearching for additional Tailwind theme files..." fd -g "*theme*.{ts,js,json}" -x cat {} \;Length of output: 768
src/app/integrations/xero/xero-main/xero-export-log/xero-export-log.component.ts (1)
4-4: LGTM! Good use of readonly modifier.The addition of the
brandingStyleproperty follows the existing pattern of other branding-related properties and maintains immutability with thereadonlymodifier.Also applies to: 25-26
src/app/integrations/qbo/qbo-main/qbo-export-log/qbo-export-log.component.ts (1)
4-4: LGTM! Consistent implementation across components.The changes maintain consistency with other integration components, following the same pattern of importing and declaring the
brandingStyleproperty as readonly.Also applies to: 26-27
src/app/integrations/sage300/sage300-main/sage300-export-log/sage300-export-log.component.ts (1)
4-4: LGTM! Clean addition of brandingStyle.The changes align well with the PR's objective of centralizing padding styles. The readonly modifier ensures proper immutability.
Also applies to: 26-26
src/app/integrations/netsuite/netsuite-main/netsuite-export-log/netsuite-export-log.component.ts (1)
4-4: LGTM! Consistent implementation.The changes maintain consistency with other components in the codebase.
Also applies to: 26-26
src/app/integrations/intacct/intacct-main/intacct-export-log/intacct-export-log.component.ts (1)
4-4: LGTM! Maintains consistent pattern.The implementation follows the established pattern across components.
Also applies to: 28-28
src/app/integrations/business-central/business-central-main/business-central-export-log/business-central-export-log.component.ts (1)
4-4: LGTM! Consistent implementation with other components.The changes maintain consistency with the established pattern.
Let's verify that the corresponding template files have been updated to use the new brandingStyle:
Also applies to: 26-26
✅ Verification successful
Template correctly implements brandingStyle padding
The template file has been properly updated to use
brandingStyle.common.mainPaddingStyleand no legacy padding styles remain.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check if all export-log component templates use brandingStyle.common.mainPaddingStyle echo "Checking template files for brandingStyle usage..." rg -l "brandingStyle\.common\.mainPaddingStyle" \ src/app/integrations/*/*/export-log/*.html echo -e "\nChecking for any remaining ngClass conditional padding..." rg "ngClass.*padding" \ src/app/integrations/*/*/export-log/*.htmlLength of output: 571
Script:
#!/bin/bash # First, verify the template file exists echo "Checking for template file..." fd -e html . src/app/integrations/business-central echo -e "\nChecking template for brandingStyle usage..." rg "brandingStyle\.common\.mainPaddingStyle" \ src/app/integrations/business-central/business-central-main/business-central-export-log/ echo -e "\nChecking for any remaining ngClass conditional padding..." rg "ngClass.*padding" \ src/app/integrations/business-central/business-central-main/business-central-export-log/Length of output: 3543
src/app/integrations/qbo/qbo-main/qbo-configuration/qbo-configuration.component.ts (1)
3-3: LGTM! Clean implementation of branding style.The changes follow the established pattern in the codebase, correctly importing and declaring the brandingStyle property as readonly.
Also applies to: 26-26
src/app/integrations/xero/xero-main/xero-configuration/xero-configuration.component.ts (1)
3-3: LGTM! Consistent implementation across components.The changes mirror the implementation in other configuration components, maintaining consistency in the codebase.
Also applies to: 26-26
src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-export-log/qbd-direct-export-log.component.ts (1)
5-7: Verify the different source for brandingConfig import.There seems to be an inconsistency in the import sources:
brandingStyleis imported from 'src/app/branding/branding-config'brandingConfigis imported from 'src/app/branding/c1-contents-config'Other components import all branding-related configs from 'branding-config'.
src/app/integrations/netsuite/netsuite-main/netsuite-configuration/netsuite-configuration.component.ts (1)
3-3: LGTM! Consistent implementation of branding style.The changes align with the implementation in other configuration components.
Also applies to: 26-26
src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-configuration/qbd-direct-configuration.component.ts (1)
5-5: LGTM! Clean addition of brandingStyle.The changes properly integrate the brandingStyle property while maintaining immutability with readonly modifier.
Also applies to: 31-32
src/app/integrations/intacct/intacct-main/intacct-configuration/intacct-configuration.component.ts (1)
4-4: LGTM! Consistent implementation of brandingStyle.The changes align with the pattern seen in other components, maintaining immutability and proper organization.
Also applies to: 21-22
src/app/integrations/business-central/business-central-main/business-central-mapping/business-central-mapping.component.ts (1)
5-5: LGTM! Clean integration of brandingStyle.The changes maintain consistency with other components while preserving the existing mapping functionality.
Also applies to: 30-31
src/app/shared/components/dashboard/dashboard-export-section/dashboard-export-section.component.ts (1)
2-2: LGTM! Consistent with branding configuration pattern.The addition of
brandingStyleproperty follows the existing pattern of branding configuration properties in the component.Also applies to: 47-47
src/app/integrations/sage300/sage300-onboarding/sage300-onboarding-connector/sage300-onboarding-connector.component.ts (1)
37-37: LGTM! Clean integration of branding styles.The addition of readonly
brandingStyleproperty is clean and doesn't interfere with existing component functionality.src/app/integrations/travelperk/travelperk-shared/travelperk-payment-profile-settings/travelperk-payment-profile-settings.component.ts (1)
58-58: LGTM! Property placement is consistent.The readonly brandingStyle property is correctly placed with other configuration properties.
src/app/integrations/xero/xero-shared/xero-export-settings/xero-export-settings.component.ts (1)
93-93: LGTM! Good practice using readonly for branding styles.Making the branding style property readonly prevents accidental modifications and aligns with the centralization of styling configurations.
src/app/integrations/business-central/business-central-shared/business-central-import-settings/business-central-import-settings.component.ts (1)
67-67: LGTM! Consistent with the centralized styling approach.The readonly modifier ensures immutability of the branding style configuration.
src/app/shared/components/dashboard/dashboard-error-section/dashboard-error-section.component.ts (1)
2-2: LGTM! Appropriate addition of branding styles to shared component.The changes follow the consistent pattern of centralizing styles, with good code formatting.
Also applies to: 108-109
src/app/integrations/xero/xero-onboarding/xero-onboarding-connector/xero-onboarding-connector.component.ts (1)
85-85: LGTM! Good practice using readonly modifier.The addition of the readonly modifier for brandingStyle property ensures immutability and prevents accidental modifications during the component's lifecycle.
src/app/integrations/sage300/sage300-shared/sage300-advanced-settings/sage300-advanced-settings.component.ts (1)
73-73: LGTM! Consistent with the application-wide pattern.The readonly brandingStyle property follows the same pattern used across other components, maintaining consistency in the codebase.
src/app/integrations/qbd/qbd-main/qbd-dashboard/qbd-dashboard.component.ts (1)
12-12: LGTM! Import added correctly.The brandingStyle import is properly added alongside other branding-related imports.
src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-advanced-settings/qbd-direct-advanced-settings.component.ts (1)
98-98: LGTM! Follows established pattern.The readonly brandingStyle property is correctly implemented, maintaining consistency with other components in the application.
src/app/integrations/netsuite/netsuite-shared/netsuite-advanced-settings/netsuite-advanced-settings.component.ts (1)
106-106: LGTM! Follows TypeScript best practices.Making brandingStyle readonly aligns with TypeScript best practices for configuration properties and ensures consistent behavior across components.
src/app/integrations/xero/xero-onboarding/xero-clone-settings/xero-clone-settings.component.ts (1)
146-146: LGTM! Maintains consistency across components.The readonly modifier on brandingStyle property maintains consistency with other components and ensures immutability of the branding configuration.
src/app/integrations/xero/xero-main/xero-configuration/xero-configuration.component.html (1)
4-4: LGTM! Verify brandingStyle initialization.The change aligns with the centralized styling approach. Please ensure that the brandingStyle property is properly initialized in the component.
✅ Verification successful
✓ brandingStyle is properly initialized
The component correctly imports and initializes the readonly brandingStyle property from the centralized branding configuration.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Verify brandingStyle initialization in component ast-grep --pattern 'class $_ { $$$ readonly brandingStyle = $_; $$$ }' src/app/integrations/xero/xero-main/xero-configuration/xero-configuration.component.tsLength of output: 165
Script:
#!/bin/bash # Check component file content cat src/app/integrations/xero/xero-main/xero-configuration/xero-configuration.component.ts # Search for brandingStyle declarations with broader pattern ast-grep --pattern 'brandingStyle = $_' # Search for constructor patterns ast-grep --pattern 'constructor($$$) { $$$ }'Length of output: 1367
src/app/integrations/qbo/qbo-main/qbo-configuration/qbo-configuration.component.html (1)
4-4: LGTM! Consistent implementation.The change maintains consistency with other components in the centralized styling approach.
src/app/integrations/netsuite/netsuite-main/netsuite-configuration/netsuite-configuration.component.html (1)
4-4: LGTM! Maintains consistent styling approach.The change follows the established pattern of centralizing padding styles.
src/app/integrations/xero/xero-main/xero-mapping/xero-mapping.component.html (1)
3-3: Verify padding combination.The combination of fixed
tw-py-40-pxclass with dynamicbrandingStyle.common.mainPaddingStylemight lead to conflicting paddings. Consider moving the vertical padding to the centralized style if it's meant to be consistent across components.src/app/integrations/netsuite/netsuite-main/netsuite-mapping/netsuite-mapping.component.html (1)
3-3: Same padding style conflict as in qbo-mapping.component.htmlsrc/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-mapping/qbd-direct-mapping.component.html (1)
3-3: Same padding style conflict as in qbo-mapping.component.htmlsrc/app/integrations/intacct/intacct-main/intacct-configuration/intacct-configuration.component.html (1)
3-7: Same structural inconsistency as in qbd-direct-configuration.component.htmlsrc/app/integrations/sage300/sage300-main/sage300-mapping/sage300-mapping.component.html (1)
3-3: LGTM! Verify brandingStyle property initialization.The change successfully centralizes the padding style configuration, improving maintainability.
✅ Verification successful
Property is correctly initialized and used ✅
The
brandingStyleproperty is properly imported from the branding config and correctly initialized as a readonly property in the component.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Verify that brandingStyle is properly initialized in the component ast-grep --pattern 'class Sage300MappingComponent { $$$ readonly brandingStyle = $_; $$$ }'Length of output: 99
Script:
#!/bin/bash # Find the component's TypeScript file fd -e ts sage300-mapping.component # Search for brandingStyle property with context rg -A 5 -B 5 "brandingStyle" --type tsLength of output: 69529
Script:
#!/bin/bash # Check the specific component file for brandingStyle cat src/app/integrations/sage300/sage300-main/sage300-mapping/sage300-mapping.component.tsLength of output: 2283
src/app/integrations/business-central/business-central-main/business-central-mapping/business-central-mapping.component.html (1)
5-5: LGTM! Consistent implementation.The change maintains consistency with other components in using the centralized padding style.
src/app/integrations/qbo/qbo-main/qbo-export-log/qbo-export-log.component.html (1)
4-4: LGTM! Verify feature flag configuration.The change successfully implements the centralized padding style while maintaining the feature flag functionality.
✅ Verification successful
Feature flag configuration verified and correctly implemented
The component properly imports and initializes both
brandingStyleandbrandingFeatureConfigas readonly properties, ensuring consistent branding behavior.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Verify that both brandingStyle and brandingFeatureConfig are properly initialized ast-grep --pattern 'class QboExportLogComponent { $$$ readonly brandingStyle = $_; readonly brandingFeatureConfig = $_; $$$ }'Length of output: 136
Script:
#!/bin/bash # First, find the component file fd "qbo-export-log.component.ts" --type f # Then examine its content echo "=== Component Content ===" rg -A 5 "class QboExportLogComponent" $(fd "qbo-export-log.component.ts" --type f) # Look for branding-related property declarations echo "=== Branding Properties ===" rg "brandingStyle|brandingFeatureConfig" $(fd "qbo-export-log.component.ts" --type f)Length of output: 1104
src/app/integrations/netsuite/netsuite-main/netsuite-export-log/netsuite-export-log.component.html (1)
4-4: LGTM! Consistent implementation.The change follows the established pattern for centralizing padding styles while maintaining feature flag functionality.
src/app/integrations/xero/xero-main/xero-export-log/xero-export-log.component.html (1)
4-4: LGTM! Style conversion looks good.The padding style has been successfully centralized using
brandingStyle.common.mainPaddingStylewhile maintaining the vertical padding.src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-export-log/qbd-direct-export-log.component.html (1)
4-4: LGTM! Consistent with other export log components.The padding style conversion matches the pattern used in other export log components.
src/app/integrations/business-central/business-central-main/business-central-export-log/business-central-export-log.component.html (1)
9-9: LGTM! Style conversion maintains loading state handling.The padding style has been centralized while properly maintaining the loading state conditional rendering.
src/app/integrations/sage300/sage300-main/sage300-export-log/sage300-export-log.component.html (1)
9-9: LGTM! Consistent with other export log components.The padding style conversion follows the same pattern as other components while maintaining loading state handling.
src/app/integrations/qbd/qbd-main/qbd-dashboard/qbd-dashboard.component.html (1)
8-8: LGTM! Padding style standardization looks good.The change to use
brandingStyle.common.mainPaddingStylealigns with the PR objective and maintains consistency across components.src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-import-settings/qbd-direct-import-settings.component.ts (1)
111-111: LGTM! Good practice adding readonly modifier.Making
brandingStylereadonly prevents accidental modifications and ensures consistent branding across the application.src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-connector/qbd-direct-onboarding-connector.component.ts (1)
82-82: LGTM! Consistent with codebase patterns.Making
brandingStylereadonly aligns with the immutability pattern being implemented across components.src/app/integrations/qbo/qbo-main/qbo-mapping/qbo-mapping.component.html (1)
3-3: LGTM! Improved template maintainability.Centralizing padding styles in
brandingStyle.common.mainPaddingStylereduces template complexity and ensures consistent styling across components.
| @@ -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.mainPaddingStyle"> | |||
There was a problem hiding this comment.
💡 Codebase verification
Extend padding style pattern to child components
Several child components still use the old conditional padding style and should be updated to use brandingStyle.common.mainPaddingStyle:
- Export log child components in:
- Xero (complete/skipped)
- QBO (complete/skipped)
- NetSuite (complete/skipped)
- QBD Direct (complete/skipped)
- Intacct (complete/skipped)
🔗 Analysis chain
LGTM! Consider extending this pattern.
The change successfully implements the centralized padding style. Consider searching for similar patterns in other components that could benefit from this refactoring.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for other components that might benefit from this refactoring
echo "Searching for components with conditional padding styles..."
rg -l "ngClass.*brandingConfig\.brandId.*'fyle'.*'co'" --type html
echo "Searching for components already using the new pattern..."
rg -l "ngClass.*brandingStyle\.common\.mainPaddingStyle" --type html
Length of output: 4646
| @@ -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="tw-py-16-px" [ngClass]="{'tw-px-120-px': brandingConfig.brandId === 'fyle', 'tw-px-60-px': brandingConfig.brandId === 'co'}"> | |||
| <div *ngIf="!isLoading" class="tw-py-16-px" [ngClass]="brandingStyle.common.mainPaddingStyle"> | |||
There was a problem hiding this comment.
💡 Codebase verification
Inconsistent vertical padding detected
The qbd-generic-mapping component uses tw-py-16-px while all other mapping components across different integrations (QBO, Xero, Intacct, etc.) consistently use tw-py-40-px. Consider aligning with the standard tw-py-40-px padding for consistency.
🔗 Analysis chain
Verify if different vertical padding is intentional.
While the horizontal padding has been centralized using brandingStyle.common.mainPaddingStyle, this component uses tw-py-16-px for vertical padding, whereas other components use tw-py-40-px. Please confirm if this difference is intentional.
Run this script to check vertical padding consistency across similar components:
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Check vertical padding patterns in mapping components
# Look for tw-py-{n}-px patterns in mapping component templates
echo "Checking vertical padding patterns in mapping components..."
rg -g '**/*mapping*.component.html' 'tw-py-\d+-px'
Length of output: 2053
src/app/branding/c1-style-config.ts
Outdated
| mainPaddingStyle: 'tw-px-60-px', | ||
| mainShadowStyle: 'tw-shadow-shadow-level-1' |
There was a problem hiding this comment.
better names, may be we can huddle and brainstorm tomo
* common main pages shadow style conversion * lint fix
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (13)
src/app/integrations/landing/landing.component.html (1)
23-23: LGTM! Well-structured style refactoring.The changes improve maintainability by centralizing the padding and shadow styles through
brandingStyle. The implementation is consistent across all integration cards.Consider extracting the repeated pattern into a shared CSS class to reduce duplication:
+<!-- Add to your CSS file --> +.integration-card { + @apply landing--accounting-app tw-mt-20-px; +} -<div class="landing--accounting-app tw-mt-20-px" [ngClass]="brandingStyle.common.mainShadowStyle"> +<div class="integration-card" [ngClass]="brandingStyle.common.mainShadowStyle">This would make the template more DRY and easier to maintain.
Also applies to: 37-37, 44-44, 50-50, 56-56, 62-62, 69-69, 76-76, 83-83, 103-103, 122-122
src/app/shared/components/helper/mapping/mapping-card-header/mapping-card-header.component.html (1)
3-3: Consider extracting repeated div structure to a reusable component.Both div elements share identical structure and styling patterns, differing only in background color and content. Consider creating a reusable component to reduce duplication.
Example approach:
// stats-card.component.ts @Component({ selector: 'app-stats-card', template: ` <div class="tw-rounded-10-px tw-border-1-px tw-border-border-tertiary tw-pt-16-px tw-pr-56-px tw-pb-10-px tw-pl-16-px tw-h-84-px" [ngClass]="[backgroundClass, brandingStyle.mapping.mappingHeaderBoxShadow]"> <div class="tw-w-34-px tw-h-6-px tw-rounded-12-px tw-bg-bg-brand-muted"></div> <div class="tw-pt-8-px tw-text-lv-stats-label-text-color tw-text-12-px"> <p>{{label}}</p> </div> <div class="tw-text-16-px tw-text-600 tw-text-text-primary"> <p>{{value}}</p> </div> </div> ` }) export class StatsCardComponent { @Input() label: string; @Input() value: number; @Input() backgroundClass: string; }Also applies to: 14-14
src/app/shared/components/helper/mapping/generic-mapping-v2/generic-mapping-v2.component.html (1)
Line range hint
1-28: Consider optimizing template performance.The template contains multiple nested *ngIf conditions which could impact performance. Consider:
- Using ng-container to reduce DOM nodes
- Implementing trackBy functions for any *ngFor directives
- Moving complex conditional logic to the component class
Example optimization:
// In component class get shouldShowPaginator(): boolean { return this.filteredMappingCount && !this.isLoading; } // In template <ng-container *ngIf="!isLoading"> <ng-container *ngIf="filteredMappingCount"> <app-generic-mapping-table [inputs]="..."></app-generic-mapping-table> <div class="tw-p-24-px tw-border-t-separator" *ngIf="shouldShowPaginator"> <app-paginator [inputs]="..."></app-paginator> </div> </ng-container> <!-- ... rest of the template --> </ng-container>src/app/integrations/netsuite/netsuite-main/netsuite-export-log/netsuite-skipped-export-log/netsuite-skipped-export-log.component.ts (1)
4-4: Consider grouping related properties together.While the changes are correct, consider grouping all branding-related properties (
brandingConfig,brandingContent,brandingStyle) together for better code organization.readonly brandingConfig = brandingConfig; + readonly brandingStyle = brandingStyle; readonly brandingContent = brandingContent.exportLog; - readonly brandingStyle = brandingStyle;Also applies to: 53-54
src/app/integrations/qbo/qbo-main/qbo-export-log/qbo-skipped-export-log/qbo-skipped-export-log.component.ts (1)
12-12: Group branding-related properties together.For better code organization, consider grouping all branding-related properties (
brandingConfig,brandingContent,brandingStyle) together.readonly brandingConfig = brandingConfig; + readonly brandingStyle = brandingStyle; readonly brandingContent = brandingContent.exportLog; - readonly brandingStyle = brandingStyle;Also applies to: 57-58
src/app/integrations/qbo/qbo-main/qbo-export-log/qbo-complete-export-log/qbo-complete-export-log.component.ts (1)
13-13: Group branding-related properties together.For better code organization, consider grouping all branding-related properties (
brandingConfig,brandingContent,brandingStyle) together.readonly brandingConfig = brandingConfig; + readonly brandingStyle = brandingStyle; readonly brandingContent = brandingContent.exportLog; - readonly brandingStyle = brandingStyle;Also applies to: 63-64
src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-export-log/qbd-direct-complete-export-log/qbd-direct-complete-export-log.component.ts (1)
5-6: Consider consolidating branding imports.The branding imports are currently split across two lines. Consider consolidating them for better maintainability:
-import { brandingContent, brandingStyle } from 'src/app/branding/branding-config'; -import { brandingConfig } from 'src/app/branding/c1-contents-config'; +import { brandingConfig, brandingContent, brandingStyle } from 'src/app/branding/branding-config';Also applies to: 67-67
src/app/integrations/intacct/intacct-main/intacct-export-log/intacct-completed-export-log/intacct-completed-export-log.component.ts (2)
14-15: Update rxjs import paths.The current imports use internal rxjs paths which may break in future versions. Consider updating to use the main package path:
-import { Subject } from 'rxjs/internal/Subject'; -import { debounceTime } from 'rxjs/internal/operators/debounceTime'; +import { Subject, debounceTime } from 'rxjs';
Line range hint
4-4: Well-structured centralization of branding styles.The consistent implementation of
brandingStyleacross components improves maintainability by:
- Centralizing style configuration
- Making style changes more predictable
- Reducing duplication of style logic
Also applies to: 5-5, 12-12
src/app/shared/components/helper/onboarding-done/onboarding-done.component.html (1)
4-4: Consider centralizing other brand-specific styles.While the shadow style has been centralized using
brandingStyle.common.mainShadowStyle, there are other brand-specific conditions in the template that could potentially be moved to the branding configuration for consistency.src/app/integrations/qbo/qbo-main/qbo-export-log/qbo-complete-export-log/qbo-complete-export-log.component.html (1)
5-5: LGTM! Consider component inheritance.The styling change is consistent with other export log components. Given the identical structure across different integration modules, consider creating a base export log component to reduce code duplication.
src/app/integrations/netsuite/netsuite-main/netsuite-export-log/netsuite-complete-export-logs/netsuite-complete-export-logs.component.html (1)
5-5: LGTM! Duplicate code pattern detected.The styling change is correct, but this is the third instance of nearly identical template code. This reinforces the need for a shared base component.
Consider extracting the common template structure into a shared component:
- Create a base export log component
- Use template inheritance or composition
- Allow customization through inputs for integration-specific behavior
src/app/integrations/qbo/qbo-main/qbo-export-log/qbo-skipped-export-log/qbo-skipped-export-log.component.html (1)
Line range hint
1-38: Consider creating a shared base componentAll export log components share identical structure and behavior. Consider creating a shared base component to reduce code duplication and improve maintainability.
A shared component could:
- Accept the integration type as input
- Use generic types for the export data
- Share common template structure
- Allow customization through content injection
Example approach:
@Component({ selector: 'app-base-export-log', template: '...' }) export class BaseExportLogComponent<T> { @Input() appName: string; @Input() brandingStyle: any; @Input() brandingContent: any; // ... other common properties and methods }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (33)
src/app/branding/c1-style-config.ts(1 hunks)src/app/branding/fyle-style-config.ts(1 hunks)src/app/integrations/intacct/intacct-main/intacct-export-log/intacct-completed-export-log/intacct-completed-export-log.component.html(1 hunks)src/app/integrations/intacct/intacct-main/intacct-export-log/intacct-completed-export-log/intacct-completed-export-log.component.ts(2 hunks)src/app/integrations/intacct/intacct-main/intacct-export-log/intacct-skip-export-log/intacct-skip-export-log.component.html(1 hunks)src/app/integrations/intacct/intacct-main/intacct-export-log/intacct-skip-export-log/intacct-skip-export-log.component.ts(2 hunks)src/app/integrations/landing/landing.component.html(4 hunks)src/app/integrations/landing/landing.component.ts(2 hunks)src/app/integrations/netsuite/netsuite-main/netsuite-export-log/netsuite-complete-export-logs/netsuite-complete-export-logs.component.html(1 hunks)src/app/integrations/netsuite/netsuite-main/netsuite-export-log/netsuite-complete-export-logs/netsuite-complete-export-logs.component.ts(2 hunks)src/app/integrations/netsuite/netsuite-main/netsuite-export-log/netsuite-skipped-export-log/netsuite-skipped-export-log.component.html(1 hunks)src/app/integrations/netsuite/netsuite-main/netsuite-export-log/netsuite-skipped-export-log/netsuite-skipped-export-log.component.ts(2 hunks)src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-export-log/qbd-direct-complete-export-log/qbd-direct-complete-export-log.component.html(1 hunks)src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-export-log/qbd-direct-complete-export-log/qbd-direct-complete-export-log.component.ts(2 hunks)src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-export-log/qbd-direct-skipped-export-log/qbd-direct-skipped-export-log.component.html(1 hunks)src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-export-log/qbd-direct-skipped-export-log/qbd-direct-skipped-export-log.component.ts(2 hunks)src/app/integrations/qbo/qbo-main/qbo-export-log/qbo-complete-export-log/qbo-complete-export-log.component.html(1 hunks)src/app/integrations/qbo/qbo-main/qbo-export-log/qbo-complete-export-log/qbo-complete-export-log.component.ts(2 hunks)src/app/integrations/qbo/qbo-main/qbo-export-log/qbo-skipped-export-log/qbo-skipped-export-log.component.html(1 hunks)src/app/integrations/qbo/qbo-main/qbo-export-log/qbo-skipped-export-log/qbo-skipped-export-log.component.ts(2 hunks)src/app/integrations/xero/xero-main/xero-export-log/xero-complete-export-log/xero-complete-export-log.component.html(1 hunks)src/app/integrations/xero/xero-main/xero-export-log/xero-complete-export-log/xero-complete-export-log.component.ts(2 hunks)src/app/integrations/xero/xero-main/xero-export-log/xero-skipped-export-log/xero-skipped-export-log.component.html(1 hunks)src/app/integrations/xero/xero-main/xero-export-log/xero-skipped-export-log/xero-skipped-export-log.component.ts(2 hunks)src/app/shared/components/dashboard/dashboard-error-section/dashboard-error-section.component.html(1 hunks)src/app/shared/components/dashboard/dashboard-export-section/dashboard-export-section.component.html(1 hunks)src/app/shared/components/dashboard/dashboard-export-summary-section/dashboard-export-summary-section.component.html(1 hunks)src/app/shared/components/helper/mapping/generic-mapping-v2/generic-mapping-v2.component.html(1 hunks)src/app/shared/components/helper/mapping/generic-mapping-v2/generic-mapping-v2.component.ts(2 hunks)src/app/shared/components/helper/mapping/mapping-card-header/mapping-card-header.component.html(2 hunks)src/app/shared/components/helper/mapping/mapping-card-header/mapping-card-header.component.ts(2 hunks)src/app/shared/components/helper/onboarding-done/onboarding-done.component.html(1 hunks)src/app/shared/components/helper/onboarding-done/onboarding-done.component.ts(2 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/app/shared/components/dashboard/dashboard-error-section/dashboard-error-section.component.html
- src/app/shared/components/dashboard/dashboard-export-section/dashboard-export-section.component.html
🔇 Additional comments (29)
src/app/integrations/intacct/intacct-main/intacct-export-log/intacct-skip-export-log/intacct-skip-export-log.component.ts (2)
10-10: LGTM! Import statement aligns with branding centralization.The combined import of branding-related configurations maintains good cohesion.
71-72: LGTM! Good use of readonly for immutability.The property declaration follows the established pattern and supports the centralization of branding styles.
src/app/integrations/landing/landing.component.ts (1)
14-14: LGTM! Clean and consistent implementation.The changes follow Angular best practices by:
- Grouping related imports together
- Using readonly for immutable properties
- Maintaining consistency with existing branding-related properties
Also applies to: 95-95
src/app/shared/components/helper/mapping/mapping-card-header/mapping-card-header.component.ts (1)
2-2: LGTM! Clean addition of brandingStyle.The addition of brandingStyle import and readonly property follows Angular best practices and aligns with the goal of centralizing styles.
Also applies to: 25-26
src/app/shared/components/helper/mapping/generic-mapping-v2/generic-mapping-v2.component.ts (1)
4-4: LGTM! Consistent implementation of brandingStyle.The changes maintain consistency with the project's approach to centralized styling.
Also applies to: 83-84
src/app/shared/components/helper/mapping/generic-mapping-v2/generic-mapping-v2.component.html (1)
10-10: LGTM! Consistent use of brandingStyle for shadow.The change aligns with the centralized styling approach using brandingStyle.
src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-export-log/qbd-direct-skipped-export-log/qbd-direct-skipped-export-log.component.ts (2)
5-5: LGTM!The import statement is correctly placed with other branding-related imports and maintains consistency with the existing pattern.
59-60: Verify the template usage of brandingStyle.The property is correctly declared as readonly, following the same pattern as other branding properties. However, please ensure that the corresponding template file (
qbd-direct-skipped-export-log.component.html) properly utilizes this property for padding styles.✅ Verification successful
The brandingStyle property is correctly used in the template
The template properly utilizes brandingStyle for shadow styling via
[ngClass]="brandingStyle.common.mainShadowStyle"on the main container, while padding is consistently handled through Tailwind classes.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the usage of brandingStyle in the template file # Search for the template file and check its content rg -l "qbd-direct-skipped-export-log.component.html" | xargs rg "brandingStyle\.common\.mainPaddingStyle" # Also check if there are any remaining old conditional class bindings that should be replaced rg -l "qbd-direct-skipped-export-log.component.html" | xargs rg "\[ngClass\].*brandingConfig\.brandId"Length of output: 208
Script:
#!/bin/bash # First, find the template file fd -t f "qbd-direct-skipped-export-log.component.html" # If the file exists, let's see its content fd -t f "qbd-direct-skipped-export-log.component.html" -x cat {}Length of output: 2013
src/app/shared/components/helper/onboarding-done/onboarding-done.component.ts (1)
2-2: LGTM! Clean addition of branding styles.The changes follow the established pattern of importing and declaring branding-related properties as readonly.
Also applies to: 19-20
src/app/integrations/netsuite/netsuite-main/netsuite-export-log/netsuite-complete-export-logs/netsuite-complete-export-logs.component.ts (1)
4-4: LGTM! Clean implementation of branding style.The changes follow Angular best practices by:
- Grouping related imports together
- Using readonly modifier for immutable configuration
- Following consistent property declaration pattern
Also applies to: 61-61
src/app/integrations/xero/xero-main/xero-export-log/xero-complete-export-log/xero-complete-export-log.component.ts (1)
4-4: LGTM! Consistent implementation.The changes maintain consistency with other components in the codebase.
Also applies to: 69-69
src/app/branding/fyle-style-config.ts (2)
9-10: Consider more descriptive naming for style properties.The property names
mainPaddingStyleandmainShadowStylecould be more specific to their usage context (e.g.,contentContainerPadding,contentPanelShadow).
12-14: LGTM! Good separation of mapping-specific styles.The introduction of a separate mapping object helps organize styles by their specific use cases.
src/app/branding/c1-style-config.ts (1)
8-10: LGTM! Consistent structure with brand-specific values.The implementation maintains a consistent structure with fyle-style-config.ts while appropriately using brand-specific values (60px padding for C1 vs 120px for Fyle).
src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-export-log/qbd-direct-skipped-export-log/qbd-direct-skipped-export-log.component.html (1)
5-5: LGTM! Consistent use of centralized shadow style.The change properly implements the centralized shadow style while maintaining other necessary classes for the container.
src/app/integrations/xero/xero-main/xero-export-log/xero-skipped-export-log/xero-skipped-export-log.component.html (1)
5-5: LGTM! Maintains consistency across integration components.The implementation follows the same pattern as other integration components, contributing to a consistent codebase.
src/app/integrations/xero/xero-main/xero-export-log/xero-complete-export-log/xero-complete-export-log.component.html (1)
5-5: LGTM! Verify brandingStyle initialization.The change to use centralized shadow styling through
brandingStyle.common.mainShadowStylealigns with the PR objective and improves maintainability.✅ Verification successful
Verified: brandingStyle is properly initialized
The component correctly imports and initializes
brandingStyleas a readonly property from the centralized branding configuration, ensuring consistent styling across the application.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Verify that brandingStyle is properly initialized in the component ast-grep --pattern 'class $className { $$$ brandingStyle = $value; $$$ }' src/app/integrations/xero/xero-main/xero-export-log/xero-complete-export-log/xero-complete-export-log.component.tsLength of output: 196
Script:
#!/bin/bash # First, let's see the content of the component file cat src/app/integrations/xero/xero-main/xero-export-log/xero-complete-export-log/xero-complete-export-log.component.ts # Backup search for constructor injection pattern ast-grep --pattern 'constructor($$$) { $$$ }' src/app/integrations/xero/xero-main/xero-export-log/xero-complete-export-log/xero-complete-export-log.component.tsLength of output: 6481
src/app/shared/components/dashboard/dashboard-export-summary-section/dashboard-export-summary-section.component.html (1)
1-2: LGTM! Verify style inheritance.The nested styling approach (padding on outer div, shadow on inner div) is well-structured and follows the centralization objective.
✅ Verification successful
Style inheritance verified and properly implemented
The styles are correctly defined in brand-specific configs and appropriately used in the component's template hierarchy:
- Outer padding varies by brand (120px for Fyle, 60px for C1)
- Shadow styles are brand-specific (app-card vs shadow-level-1)
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Verify style definitions in branding configs echo "Checking style definitions in branding configs..." rg -A 2 "mainPaddingStyle|mainShadowStyle" src/app/branding/Length of output: 695
src/app/integrations/xero/xero-main/xero-export-log/xero-skipped-export-log/xero-skipped-export-log.component.ts (3)
4-4: LGTM! Clean import addition.The import statement follows Angular's best practices and maintains consistency with existing branding imports.
55-56: LGTM! Property declaration follows best practices.The
brandingStyleproperty is correctly declared as readonly, maintaining immutability and following the same pattern as other branding properties in the component.
55-56: Verify template usage of branding styles.Since this change is part of a larger effort to centralize padding and shadow styles, please ensure that:
- The corresponding HTML template (
xero-skipped-export-log.component.html) is updated to usebrandingStyle.common.mainPaddingStyleandbrandingStyle.common.mainShadowStyle.- The implementation is consistent with other components mentioned in the summary.
Let's verify the template changes:
src/app/integrations/qbo/qbo-main/qbo-export-log/qbo-skipped-export-log/qbo-skipped-export-log.component.html (3)
5-5: LGTM: Consistent implementation across componentsThe changes successfully centralize the shadow styles and align with the PR's objective. The implementation is consistent across all export log components.
5-5: Verify border class consistency across componentsI notice that some components use
tw-border-separatorwhile others usetw-border-border-tertiary. Should these be standardized as part of the common styling effort?Let's check the usage pattern:
✅ Verification successful
Border class usage is consistent with integration-specific styling
The border class
tw-border-separatorin this QBO component is correct, as it follows the established pattern where each integration maintains its own consistent border styling. Different integrations use different border classes as part of their distinct visual themes.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for border classes usage rg -g '*.html' 'tw-border-(separator|border-tertiary)'Length of output: 66740
5-5: Great job on centralizing the shadow styles!The move from conditional shadow styles to
brandingStyle.common.mainShadowStyleimproves maintainability and ensures consistent styling across different brand configurations.Let's verify that
brandingStyleis properly initialized across all components:✅ Verification successful
Branding styles are properly initialized and safely used across components
The review comment correctly praises the centralization of shadow styles. The implementation is robust with:
- Centralized configuration in branding-config
- Guaranteed initialization through BrandingService at app startup
- Consistent and safe usage pattern across all components
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for brandingStyle initialization in component files ast-grep --pattern 'readonly brandingStyle = $_' # Check for potential null/undefined access rg -g '*.ts' 'brandingStyle\?.common'Length of output: 90
Script:
#!/bin/bash # Search for brandingStyle declarations and assignments ast-grep --pattern 'brandingStyle' # Search for branding style imports and injections rg -g '*.ts' -i 'brandingstyle|branding.*service' # Search for specific usage in template files rg -g '*.html' 'brandingStyle\.common'Length of output: 67784
src/app/integrations/intacct/intacct-main/intacct-export-log/intacct-skip-export-log/intacct-skip-export-log.component.html (2)
5-5: LGTM! Style centralization improves maintainability.The change from conditional shadow styles to
brandingStyle.common.mainShadowStylealigns with the goal of centralizing styles.
5-5: Ensure border color class consistency across export log components.Other export log components use
tw-border-border-tertiarywhile this usestw-border-separator. Consider standardizing the border color class for consistency.Run this script to check border color class usage across export log components:
src/app/integrations/netsuite/netsuite-main/netsuite-export-log/netsuite-skipped-export-log/netsuite-skipped-export-log.component.html (1)
5-5: LGTM! Consistent implementation across components.The change maintains consistency with other skipped export log components while centralizing the shadow style.
src/app/integrations/intacct/intacct-main/intacct-export-log/intacct-completed-export-log/intacct-completed-export-log.component.html (1)
5-5: LGTM! Style centralization with appropriate component variation.The change maintains the centralized styling approach while using the appropriate border color class and export log table component for completed exports.
src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-export-log/qbd-direct-complete-export-log/qbd-direct-complete-export-log.component.html (1)
5-5: LGTM! Perfect consistency with other completed export logs.The implementation maintains consistency with other completed export log components in both styling and structure.
|
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (8)
src/app/integrations/qbo/qbo-onboarding/qbo-onboarding-connector/qbo-onboarding-connector.component.html (1)
7-7: Consider standardizing border classes.This component and the Xero component use
tw-border-border-tertiary, while others usetw-border-separator. To maintain visual consistency across the application, consider standardizing the border class usage.src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-connector/qbd-direct-onboarding-connector.component.html (1)
7-7: Consider removing the!important flag from the border radius class.The use of
!important flag in!tw-rounded-border-radius-2xsshould be avoided as it makes styles harder to override and maintain. Consider using Tailwind's built-in precedence or component-specific styles instead.- <div *ngIf="!isLoading" class="configuration--contents !tw-rounded-border-radius-2xs tw-border-border-tertiary tw-mt-24-px" [ngClass]="brandingStyle.common.configurationContents"> + <div *ngIf="!isLoading" class="configuration--contents tw-rounded-border-radius-2xs tw-border-border-tertiary tw-mt-24-px" [ngClass]="brandingStyle.common.configurationContents">src/app/integrations/qbd/qbd-shared/qbd-field-mapping/qbd-field-mapping.component.html (1)
4-4: Maintain consistency in border styling across components.This component uses
tw-border-separatorwhile other components usetw-border-border-tertiary. Consider standardizing the border classes across all components for better maintainability.-<div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="brandingStyle.common.configurationContents"> +<div *ngIf="!isLoading" class="configuration--contents tw-border-border-tertiary tw-mt-6" [ngClass]="brandingStyle.common.configurationContents">src/app/integrations/travelperk/travelperk-shared/travelperk-payment-profile-settings/travelperk-payment-profile-settings.component.html (1)
4-4: Standardize border styling with other components.Similar to the QBD component, this uses
tw-border-separatorinstead of the more commonly usedtw-border-border-tertiary. Consider standardizing for consistency.-<div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="brandingStyle.common.configurationContents"> +<div *ngIf="!isLoading" class="configuration--contents tw-border-border-tertiary tw-mt-6" [ngClass]="brandingStyle.common.configurationContents">src/app/shared/components/si/core/intacct-location-entity/intacct-location-entity.component.html (1)
5-5: Consider a systematic approach to standardize border styling.This shared component, along with several others, uses
tw-border-separatorinstead oftw-border-border-tertiary. Given this pattern appears across multiple components, consider:
- Creating a shared CSS class or Tailwind component for configuration containers
- Updating all components systematically to use the same border class
- Documenting the chosen standard in the style guide
-<div *ngIf="!isLoading" class="configuration--contents tw-border-separator tw-mt-6" [ngClass]="brandingStyle.common.configurationContents"> +<div *ngIf="!isLoading" class="configuration--contents tw-border-border-tertiary tw-mt-6" [ngClass]="brandingStyle.common.configurationContents">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
configurationContentschange is consistent, this component usestw-border-border-tertiarywhile others usetw-border-separator. Consider standardizing the border classes for better maintainability.src/app/integrations/xero/xero-shared/xero-advanced-settings/xero-advanced-settings.component.html (1)
4-4: Consider creating a style guide for consistent class usage.While the migration to
configurationContentsimproves style management, there are inconsistencies in border classes (tw-border-separatorvstw-border-border-tertiary) across different integration components. Consider:
- Creating a style guide documenting the usage of utility classes
- Standardizing border classes across all components unless there's a specific need for variation
- Using CSS variables for consistent styling across the application
This will enhance maintainability and ensure visual consistency across the application.
src/app/integrations/xero/xero-onboarding/xero-clone-settings/xero-clone-settings.component.html (1)
7-7: Consider aligning border styling with other components.While the update to
configurationContentsis correct, this component uses different border styling (tw-border-1-px tw-border-box-color) compared to other similar components which use eithertw-border-separatorortw-border-border-tertiary. Consider standardizing the border styling across all configuration components for better maintainability.- <div *ngIf="!isLoading" class="clone-setting configuration--contents tw-border-1-px tw-border-box-color tw-mt-24-px" [ngClass]="brandingStyle.common.configurationContents"> + <div *ngIf="!isLoading" class="clone-setting configuration--contents tw-border-separator tw-mt-24-px" [ngClass]="brandingStyle.common.configurationContents">
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (78)
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-main/business-central-export-log/business-central-export-log.component.html(1 hunks)src/app/integrations/business-central/business-central-main/business-central-mapping/business-central-mapping.component.html(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-shared/business-central-advanced-settings/business-central-advanced-settings.component.html(1 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-import-settings/business-central-import-settings.component.html(1 hunks)src/app/integrations/intacct/intacct-main/intacct-configuration/intacct-configuration.component.html(1 hunks)src/app/integrations/intacct/intacct-main/intacct-export-log/intacct-completed-export-log/intacct-completed-export-log.component.html(1 hunks)src/app/integrations/intacct/intacct-main/intacct-export-log/intacct-export-log.component.html(1 hunks)src/app/integrations/intacct/intacct-main/intacct-export-log/intacct-skip-export-log/intacct-skip-export-log.component.html(1 hunks)src/app/integrations/intacct/intacct-main/intacct-mapping/intacct-mapping.component.html(1 hunks)src/app/integrations/intacct/intacct-shared/intacct-advanced-settings/intacct-advanced-settings.component.html(1 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-export-settings/intacct-export-settings.component.html(1 hunks)src/app/integrations/intacct/intacct-shared/intacct-import-settings/intacct-import-settings.component.html(1 hunks)src/app/integrations/landing/landing.component.html(4 hunks)src/app/integrations/netsuite/netsuite-main/netsuite-configuration/netsuite-configuration.component.html(1 hunks)src/app/integrations/netsuite/netsuite-main/netsuite-export-log/netsuite-complete-export-logs/netsuite-complete-export-logs.component.html(1 hunks)src/app/integrations/netsuite/netsuite-main/netsuite-export-log/netsuite-export-log.component.html(1 hunks)src/app/integrations/netsuite/netsuite-main/netsuite-export-log/netsuite-skipped-export-log/netsuite-skipped-export-log.component.html(1 hunks)src/app/integrations/netsuite/netsuite-main/netsuite-mapping/netsuite-mapping.component.html(1 hunks)src/app/integrations/netsuite/netsuite-shared/netsuite-advanced-settings/netsuite-advanced-settings.component.html(1 hunks)src/app/integrations/netsuite/netsuite-shared/netsuite-export-settings/netsuite-export-settings.component.html(1 hunks)src/app/integrations/netsuite/netsuite-shared/netsuite-import-settings/netsuite-import-settings.component.html(1 hunks)src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-configuration/qbd-direct-configuration.component.html(1 hunks)src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-export-log/qbd-direct-complete-export-log/qbd-direct-complete-export-log.component.html(1 hunks)src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-export-log/qbd-direct-export-log.component.html(1 hunks)src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-export-log/qbd-direct-skipped-export-log/qbd-direct-skipped-export-log.component.html(1 hunks)src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-mapping/qbd-direct-mapping.component.html(1 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-pre-requisite/qbd-direct-onboarding-pre-requisite.component.html(1 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-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/qbd-main/qbd-dashboard/qbd-dashboard.component.html(1 hunks)src/app/integrations/qbd/qbd-main/qbd-mapping/qbd-generic-mapping/qbd-generic-mapping.component.html(1 hunks)src/app/integrations/qbd/qbd-shared/qbd-advanced-setting/qbd-advanced-setting.component.html(1 hunks)src/app/integrations/qbd/qbd-shared/qbd-export-setting/qbd-export-setting.component.html(1 hunks)src/app/integrations/qbd/qbd-shared/qbd-field-mapping/qbd-field-mapping.component.html(1 hunks)src/app/integrations/qbo/qbo-main/qbo-configuration/qbo-configuration.component.html(1 hunks)src/app/integrations/qbo/qbo-main/qbo-export-log/qbo-complete-export-log/qbo-complete-export-log.component.html(1 hunks)src/app/integrations/qbo/qbo-main/qbo-export-log/qbo-export-log.component.html(1 hunks)src/app/integrations/qbo/qbo-main/qbo-export-log/qbo-skipped-export-log/qbo-skipped-export-log.component.html(1 hunks)src/app/integrations/qbo/qbo-main/qbo-mapping/qbo-mapping.component.html(1 hunks)src/app/integrations/qbo/qbo-onboarding/qbo-clone-settings/qbo-clone-settings.component.html(1 hunks)src/app/integrations/qbo/qbo-onboarding/qbo-onboarding-connector/qbo-onboarding-connector.component.html(1 hunks)src/app/integrations/qbo/qbo-shared/qbo-advanced-settings/qbo-advanced-settings.component.html(1 hunks)src/app/integrations/qbo/qbo-shared/qbo-export-settings/qbo-export-settings.component.html(1 hunks)src/app/integrations/qbo/qbo-shared/qbo-import-settings/qbo-import-settings.component.html(1 hunks)src/app/integrations/sage300/sage300-main/sage300-export-log/sage300-export-log.component.html(1 hunks)src/app/integrations/sage300/sage300-main/sage300-mapping/sage300-mapping.component.html(1 hunks)src/app/integrations/sage300/sage300-onboarding/sage300-onboarding-connector/sage300-onboarding-connector.component.html(1 hunks)src/app/integrations/sage300/sage300-shared/sage300-advanced-settings/sage300-advanced-settings.component.html(1 hunks)src/app/integrations/sage300/sage300-shared/sage300-export-settings/sage300-export-settings.component.html(1 hunks)src/app/integrations/sage300/sage300-shared/sage300-import-settings/sage300-import-settings.component.html(1 hunks)src/app/integrations/travelperk/travelperk-shared/travelperk-advanced-settings/travelperk-advanced-settings.component.html(1 hunks)src/app/integrations/travelperk/travelperk-shared/travelperk-payment-profile-settings/travelperk-payment-profile-settings.component.html(1 hunks)src/app/integrations/xero/xero-main/xero-configuration/xero-configuration.component.html(1 hunks)src/app/integrations/xero/xero-main/xero-export-log/xero-complete-export-log/xero-complete-export-log.component.html(1 hunks)src/app/integrations/xero/xero-main/xero-export-log/xero-export-log.component.html(1 hunks)src/app/integrations/xero/xero-main/xero-export-log/xero-skipped-export-log/xero-skipped-export-log.component.html(1 hunks)src/app/integrations/xero/xero-main/xero-mapping/xero-mapping.component.html(1 hunks)src/app/integrations/xero/xero-onboarding/xero-clone-settings/xero-clone-settings.component.html(1 hunks)src/app/integrations/xero/xero-onboarding/xero-onboarding-connector/xero-onboarding-connector.component.html(1 hunks)src/app/integrations/xero/xero-shared/xero-advanced-settings/xero-advanced-settings.component.html(1 hunks)src/app/integrations/xero/xero-shared/xero-export-settings/xero-export-settings.component.html(1 hunks)src/app/integrations/xero/xero-shared/xero-import-settings/xero-import-settings.component.html(1 hunks)src/app/shared/components/dashboard/dashboard-error-section/dashboard-error-section.component.html(1 hunks)src/app/shared/components/dashboard/dashboard-export-section/dashboard-export-section.component.html(1 hunks)src/app/shared/components/dashboard/dashboard-export-summary-section/dashboard-export-summary-section.component.html(1 hunks)src/app/shared/components/helper/mapping/generic-mapping-v2/generic-mapping-v2.component.html(1 hunks)src/app/shared/components/helper/onboarding-done/onboarding-done.component.html(1 hunks)src/app/shared/components/netsuite/core/netsuite-connector/netsuite-connector.component.html(1 hunks)src/app/shared/components/netsuite/core/netsuite-subsidiary-mapping/netsuite-subsidiary-mapping.component.html(1 hunks)src/app/shared/components/si/core/intacct-connector/intacct-connector.component.html(1 hunks)src/app/shared/components/si/core/intacct-location-entity/intacct-location-entity.component.html(1 hunks)
✅ Files skipped from review due to trivial changes (19)
- src/app/integrations/qbo/qbo-shared/qbo-import-settings/qbo-import-settings.component.html
- src/app/integrations/netsuite/netsuite-shared/netsuite-advanced-settings/netsuite-advanced-settings.component.html
- src/app/integrations/xero/xero-shared/xero-export-settings/xero-export-settings.component.html
- src/app/integrations/netsuite/netsuite-shared/netsuite-import-settings/netsuite-import-settings.component.html
- src/app/shared/components/netsuite/core/netsuite-connector/netsuite-connector.component.html
- src/app/integrations/qbd/qbd-shared/qbd-export-setting/qbd-export-setting.component.html
- src/app/integrations/intacct/intacct-shared/intacct-import-settings/intacct-import-settings.component.html
- src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-import-settings/qbd-direct-import-settings.component.html
- src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-export-settings/qbd-direct-export-settings.component.html
- src/app/integrations/sage300/sage300-shared/sage300-import-settings/sage300-import-settings.component.html
- src/app/integrations/business-central/business-central-onboarding/business-central-onboarding-connector/business-central-onboarding-connector.component.html
- src/app/integrations/business-central/business-central-shared/business-central-export-settings/business-central-export-settings.component.html
- src/app/integrations/qbd/qbd-shared/qbd-advanced-setting/qbd-advanced-setting.component.html
- src/app/integrations/qbo/qbo-shared/qbo-export-settings/qbo-export-settings.component.html
- src/app/integrations/netsuite/netsuite-shared/netsuite-export-settings/netsuite-export-settings.component.html
- src/app/integrations/sage300/sage300-shared/sage300-export-settings/sage300-export-settings.component.html
- src/app/integrations/intacct/intacct-shared/intacct-export-settings/intacct-export-settings.component.html
- src/app/integrations/sage300/sage300-shared/sage300-advanced-settings/sage300-advanced-settings.component.html
- src/app/integrations/qbo/qbo-onboarding/qbo-clone-settings/qbo-clone-settings.component.html
🚧 Files skipped from review as they are similar to previous changes (39)
- src/app/integrations/sage300/sage300-main/sage300-export-log/sage300-export-log.component.html
- src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-export-log/qbd-direct-skipped-export-log/qbd-direct-skipped-export-log.component.html
- src/app/integrations/business-central/business-central-main/business-central-export-log/business-central-export-log.component.html
- src/app/integrations/xero/xero-main/xero-configuration/xero-configuration.component.html
- src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-mapping/qbd-direct-mapping.component.html
- src/app/integrations/netsuite/netsuite-main/netsuite-export-log/netsuite-export-log.component.html
- src/app/integrations/sage300/sage300-main/sage300-mapping/sage300-mapping.component.html
- src/app/integrations/qbo/qbo-main/qbo-configuration/qbo-configuration.component.html
- src/app/integrations/intacct/intacct-main/intacct-mapping/intacct-mapping.component.html
- src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-configuration/qbd-direct-configuration.component.html
- src/app/integrations/qbo/qbo-main/qbo-export-log/qbo-export-log.component.html
- src/app/shared/components/dashboard/dashboard-export-summary-section/dashboard-export-summary-section.component.html
- src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-export-log/qbd-direct-export-log.component.html
- src/app/integrations/netsuite/netsuite-main/netsuite-export-log/netsuite-skipped-export-log/netsuite-skipped-export-log.component.html
- src/app/integrations/qbo/qbo-main/qbo-mapping/qbo-mapping.component.html
- src/app/integrations/business-central/business-central-main/business-central-mapping/business-central-mapping.component.html
- src/app/integrations/netsuite/netsuite-main/netsuite-mapping/netsuite-mapping.component.html
- src/app/shared/components/helper/mapping/generic-mapping-v2/generic-mapping-v2.component.html
- src/app/shared/components/dashboard/dashboard-error-section/dashboard-error-section.component.html
- src/app/shared/components/helper/onboarding-done/onboarding-done.component.html
- src/app/integrations/netsuite/netsuite-main/netsuite-configuration/netsuite-configuration.component.html
- src/app/integrations/qbd/qbd-main/qbd-dashboard/qbd-dashboard.component.html
- src/app/integrations/xero/xero-main/xero-export-log/xero-complete-export-log/xero-complete-export-log.component.html
- src/app/integrations/qbd/qbd-main/qbd-mapping/qbd-generic-mapping/qbd-generic-mapping.component.html
- src/app/integrations/netsuite/netsuite-main/netsuite-export-log/netsuite-complete-export-logs/netsuite-complete-export-logs.component.html
- src/app/integrations/xero/xero-main/xero-export-log/xero-skipped-export-log/xero-skipped-export-log.component.html
- src/app/integrations/intacct/intacct-main/intacct-export-log/intacct-export-log.component.html
- src/app/integrations/intacct/intacct-main/intacct-configuration/intacct-configuration.component.html
- src/app/integrations/intacct/intacct-main/intacct-export-log/intacct-skip-export-log/intacct-skip-export-log.component.html
- src/app/integrations/xero/xero-main/xero-export-log/xero-export-log.component.html
- src/app/integrations/qbo/qbo-main/qbo-export-log/qbo-complete-export-log/qbo-complete-export-log.component.html
- src/app/integrations/xero/xero-main/xero-mapping/xero-mapping.component.html
- src/app/integrations/intacct/intacct-main/intacct-export-log/intacct-completed-export-log/intacct-completed-export-log.component.html
- src/app/branding/fyle-style-config.ts
- src/app/branding/c1-style-config.ts
- src/app/shared/components/dashboard/dashboard-export-section/dashboard-export-section.component.html
- src/app/integrations/qbd-direct/qbd-direct-main/qbd-direct-export-log/qbd-direct-complete-export-log/qbd-direct-complete-export-log.component.html
- src/app/integrations/qbo/qbo-main/qbo-export-log/qbo-skipped-export-log/qbo-skipped-export-log.component.html
- src/app/integrations/landing/landing.component.html
🔇 Additional comments (13)
src/app/shared/components/netsuite/core/netsuite-subsidiary-mapping/netsuite-subsidiary-mapping.component.html (1)
6-6: LGTM! Consistent styling implementation.The change follows the standardized pattern for configuration content styling.
src/app/integrations/sage300/sage300-onboarding/sage300-onboarding-connector/sage300-onboarding-connector.component.html (1)
9-9: LGTM! Consistent styling implementation.The change follows the standardized pattern for configuration content styling.
src/app/integrations/qbd-direct/qbd-direct-onboarding/qbd-direct-onboarding-pre-requisite/qbd-direct-onboarding-pre-requisite.component.html (1)
7-7: Pattern suggests intentional border class variation.The consistent use of
tw-border-border-tertiaryin multiple components (QBO, Xero, QBD) suggests this might be an intentional variation rather than an inconsistency. However, it would be beneficial to document the reasoning behind using different border classes in different components.src/app/integrations/intacct/intacct-shared/intacct-c1-import-settings/intacct-c1-import-settings.component.html (1)
4-4: LGTM! Consistent styling implementation.The styling changes align with the common pattern and use appropriate Tailwind classes for borders and spacing.
src/app/shared/components/si/core/intacct-location-entity/intacct-location-entity.component.html (1)
4-7: Verify complete migration of configuration styles.Let's verify that all instances of the old style class have been updated.
✅ Verification successful
Migration of configuration styles is complete
The old
configurationCommonStyleclass has been fully removed. The current implementation shows consistent usage of border styles within each integration's components.🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Search for any remaining instances of the old configuration style class echo "Checking for remaining instances of configurationCommonStyle..." rg "configurationCommonStyle" --type html echo "Checking for inconsistent border classes in configuration components..." rg "configuration--contents.*tw-border-(?:separator|border-tertiary)" --type htmlLength of output: 9673
src/app/shared/components/si/core/intacct-connector/intacct-connector.component.html (1)
4-4: LGTM! Consistent styling approach.The change from
configurationCommonStyletoconfigurationContentsaligns with the standardization of padding styles across components.src/app/integrations/business-central/business-central-shared/business-central-import-settings/business-central-import-settings.component.html (1)
4-4: LGTM! Consistent styling implementation.The change maintains consistency with other components while preserving the appropriate border styling.
src/app/integrations/business-central/business-central-shared/business-central-advanced-settings/business-central-advanced-settings.component.html (1)
4-4: LGTM! Maintains styling consistency.The change follows the established pattern while maintaining the consistent spacing and border styling.
src/app/integrations/xero/xero-shared/xero-advanced-settings/xero-advanced-settings.component.html (1)
4-4: LGTM! Component-specific styling maintained.The change is consistent with the standardization effort while maintaining Xero-specific styling conventions.
src/app/integrations/travelperk/travelperk-shared/travelperk-advanced-settings/travelperk-advanced-settings.component.html (1)
4-4: LGTM! Consistent with the new styling pattern.The update to use
brandingStyle.common.configurationContentsaligns with the standardized styling approach being implemented across the application.src/app/integrations/qbd-direct/qbd-direct-shared/qbd-direct-advanced-settings/qbd-direct-advanced-settings.component.html (1)
4-4: LGTM! Maintains component-specific styling while adopting the new pattern.The update correctly preserves the component-specific
tw-border-separatorclass while adopting the standardizedconfigurationContentsstyling.src/app/integrations/qbo/qbo-shared/qbo-advanced-settings/qbo-advanced-settings.component.html (1)
4-4: LGTM! Maintains QBO-specific styling while adopting the new pattern.The update correctly preserves the QBO-specific
tw-border-border-tertiaryclass while adopting the standardizedconfigurationContentsstyling.src/app/integrations/intacct/intacct-shared/intacct-advanced-settings/intacct-advanced-settings.component.html (1)
4-4: LGTM! Maintains consistent styling with QBD Direct component.The update adopts the standardized
configurationContentsstyling while using the same border styling (tw-border-separator) as the QBD Direct component, promoting consistency across similar components.
| @@ -4,7 +4,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-24-px" [ngClass]="brandingStyle.common.configurationCommonStyle"> | |||
| <div *ngIf="!isLoading" class="configuration--contents tw-border-border-tertiary tw-mt-24-px" [ngClass]="brandingStyle.common.configurationContents"> | |||
There was a problem hiding this comment.
💡 Codebase verification
Standardize border class to maintain consistency
The codebase consistently uses tw-border-separator for borders across all integration components. Update the Xero onboarding connector to use tw-border-separator instead of tw-border-border-tertiary to maintain visual consistency.
🔗 Analysis chain
Verify border class consistency.
While the configuration content styling is consistent, this component uses tw-border-border-tertiary while others use tw-border-separator. Consider standardizing the border class across all components for visual consistency.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Search for border class usage across components
rg -l "tw-border-(separator|border-tertiary)" "src/app/integrations/**/**.html"
Length of output: 153
Script:
#!/bin/bash
# Find all HTML files and search for border classes with context
echo "=== Files using tw-border-separator ==="
fd -e html -t f . src/app/integrations | xargs rg "tw-border-separator" -B 1 -A 1
echo -e "\n=== Files using tw-border-border-tertiary ==="
fd -e html -t f . src/app/integrations | xargs rg "tw-border-border-tertiary" -B 1 -A 1
Length of output: 74470
Description
feat: common main page padding style conversion
Clickup
https://app.clickup.com/t/
Summary by CodeRabbit
Based on the comprehensive summary, here are the updated release notes:
New Features
mainComponentPaddingandmainComponentShadowfor consistent styling.Improvements
Technical Updates
brandingStyle.commonproperties.Performance