fix: integrations app usability fixes

[DhaaraniCIT]

Description

fix: integrations app usability fixes

Clickup

https://app.clickup.com

Summary by CodeRabbit

• Style
  • Refined layout spacing and improved text wrapping across the import settings interface for better visibility
  • Adjusted brand name capitalization to display as provided (no automatic sentence-casing)
  • Enhanced dropdown visual states (hover/focus/active) and increased mapped/unmapped label font size for clarity
  • Updated theme color primitives (green/red variants) for refreshed color contrast and consistency

[coderabbitai]

Walkthrough

UI and style updates: adjusted wrapping and reduced top padding in Intacct import settings template, removed sentenceCase pipe from branding display, and changed dropdown/item and color primitive styles in global and theme SCSS files.

Changes

Cohort / File(s)	Summary
Intacct import settings template src/app/integrations/intacct/intacct-shared/intacct-import-settings/intacct-import-settings.component.html	Added tw-wrap-normal to header/layout divs and replaced multiple tw-pt-[17px] usages with tw-pt-[5px]; adjusted related spacing/alignment classes. No bindings or event handlers added.
Branding display update src/app/shared/components/si/core/intacct-location-entity/intacct-location-entity.component.html	Removed sentenceCase transformation from brandingConfig.brandName so brand name renders with original capitalization in both occurrences.
Global styles & theme primitives src/styles.scss, src/assets/themes/fyle/primitives_variables.scss	Updated dropdown item state styles (highlight, focus, hover) and adjusted .mapped/.unmapped font-size to 13px; changed several color primitive values (green-*, red-*) without renaming variables.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Focus review on visual regressions and accessibility:
  • intacct-import-settings.component.html — verify wrapping/padding across breakpoints and elements not unexpectedly truncated.
  • intacct-location-entity.component.html — confirm branding capitalization change is intentional.
  • src/styles.scss & primitives_variables.scss — check dropdown contrast, hover/focus behavior, and downstream color usage impact.

Poem

🐇 I nudge a class, I trim a space,
I let the brand name show its face,
Colors swapped and paddings light,
The UI hops into the night.

Pre-merge checks and finishing touches

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.
Description check	❓ Inconclusive	The pull request description includes the required template sections (Description and Clickup) with screenshots, but lacks detailed explanation of what specific usability issues were fixed.	Provide more detail about the specific usability problems addressed (e.g., text wrapping, padding adjustments, color changes) to clarify the purpose of each change.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title 'fix: integrations app usability fixes' is directly related to the changeset, which includes UI template adjustments, styling updates, and color primitive changes to improve the integrations app.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch integration-usability-fix-1

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between f2c0100 and 8ed4f57.

📒 Files selected for processing (2)

• src/assets/themes/fyle/primitives_variables.scss (2 hunks)
• src/styles.scss (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• src/styles.scss

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)

• GitHub Check: Analyze (javascript-typescript)

🔇 Additional comments (2)

src/assets/themes/fyle/primitives_variables.scss (2)

71-71: Verify the semantic intent of $green-200 color value.

The change to $green-200: #008146 represents a significant semantic shift—from a light green tint to a dark, saturated green. The variable naming convention suggests progressive lightness, where lower numbers (100, 200) should be lighter than higher numbers (500, 700). However, the new value (#008146) is noticeably darker than $green-500: #24a148.

This potential mismatch could lead to confusion or misuse in dependent components, particularly if they expect $green-200 to be a light background or accent tint.

Please confirm:

1. That this color assignment aligns with the Figma design system primitives.
2. That dependent styles in src/styles.scss (mentioned in the AI summary as consuming these color tokens) have been verified with the new value.
3. Whether the semantic ordering should be adjusted or if the variable should be renamed for clarity.

Also applies to: 73-73

---

71-71: Verify contrast ratios and accessibility compliance for new color values.

The updated color palette includes notable changes (especially in green-200 and red-300). Ensure that the new colors meet WCAG accessibility standards when used in typical UI contexts (e.g., text on background, focus states, interactive elements).

Please verify that all updated colors maintain sufficient contrast ratios for readability and compliance with accessibility guidelines, particularly where they are applied in the dropdown states and interactive elements mentioned in the related src/styles.scss changes.

Also applies to: 73-73, 85-85, 86-86

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

🔁 Code Duplication Report - Angular

Format	Files analyzed	Total lines	Total tokens	Clones found	Duplicated lines	Duplicated tokens
typescript	778	55924	512218	321	5353 (9.57%)	50671 (9.89%)
scss	66	3687	20052	7	144 (3.91%)	738 (3.68%)
markup	335	14872	153150	164	1735 (11.67%)	16351 (10.68%)
python	4	727	5680	3	32 (4.40%)	368 (6.48%)
yaml	3	155	905	0	0 (0.00%)	0 (0.00%)
javascript	5	295	3063	0	0 (0.00%)	0 (0.00%)
markdown	2	96	366	0	0 (0.00%)	0 (0.00%)
bash	2	69	804	0	0 (0.00%)	0 (0.00%)
Total:	1195	75825	696238	495	7264 (9.58%)	68128 (9.79%)

📊 No significant change in code duplication.