WEB-412:Reduce spacing and use centralized color system

[shubhamkumar9199]

This pr reduce padding and spacing in roles-permissions view page for compactlayout. Replace hardcoded colors with variables from _colours.scss .

WEB-412
Before:

After:

Checklist

Please make sure these boxes are checked before submitting your pull request - thanks!

• If you have multiple commits please combine them into one commit by squashing them.

• Read and understood the contribution guidelines at web-app/.github/CONTRIBUTING.md.

Summary by CodeRabbit

• Style
  • Updated spacing and layout across the Roles & Permissions view: reduced top margins, adjusted card/container spacing, and increased gaps in action rows for clearer alignment.
  • Enhanced card and list styling with refined padding, typography, hover interactions, and color token usage for improved visual feedback and readability.
  • All changes are presentational only; no functional or public API changes.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Note

.coderabbit.yaml has unrecognized properties

CodeRabbit is using all valid settings from your configuration. Unrecognized properties (listed below) have been ignored and may indicate typos or deprecated fields that can be removed.

⚠️ Parsing warnings (1)

Validation error: Unrecognized key(s) in object: 'pre_merge_checks'

⚙️ Configuration instructions

• Please see the configuration documentation for more information.
• You can also validate your configuration using the online YAML validator.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Walkthrough

Updated the view-role component's presentation: HTML class and spacing adjustments plus extensive SCSS additions and refinements (colors, card styling, spacing, typography, hover effects). No functional or API changes.

Changes

Cohort / File(s)

Summary

View-Role component (HTML + styles) src/app/system/roles-and-permissions/view-role/view-role.component.html, src/app/system/roles-and-permissions/view-role/view-role.component.scss

HTML: adjusted container margins (m-b-20 → m-b-0), added role-details-card class, updated card wrappers and action-row gap spacing (gap-5px → gap-10px). SCSS: imported colour tokens; added/updated mat-card and container padding, borders, radius, shadows, transitions; refined layout helpers, list/permission paddings, typography, active/inactive states, hover scaling and background, and mat-card-actions spacing. No functional changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~15 minutes

Suggested reviewers

• alberto-art3ch
• IOhacker

Pre-merge checks

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately summarizes the two main changes: reducing spacing and implementing centralized color system. It directly reflects the core modifications in both HTML and SCSS files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1584ad0 and 225e06b.

📒 Files selected for processing (2)

• src/app/system/roles-and-permissions/view-role/view-role.component.html
• src/app/system/roles-and-permissions/view-role/view-role.component.scss

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

• src/app/system/roles-and-permissions/view-role/view-role.component.scss
• src/app/system/roles-and-permissions/view-role/view-role.component.html

---

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.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (2)

src/app/system/roles-and-permissions/view-role/view-role.component.html (2)

82-82: Consider gap spacing consistency between button groups.

Line 130 uses gap-10px for the action buttons (Submit/Cancel), while Line 82 uses gap-5px for the select/deselect buttons. For visual consistency, consider whether both button groups should use the same gap value, or if the difference is intentional based on button hierarchy.

Also applies to: 130-130

---

96-96: Optimize track expressions with unique identifiers.

Both @for loops track by object reference rather than by a unique identifier. Consider tracking by ID for better change detection performance:

• Line 96: track grouping.id (or appropriate unique property)
• Line 113: track permission.id

This prevents unnecessary DOM re-renders when the object references change but the actual data remains the same.

As per coding guidelines for Angular code.

Also applies to: 113-113

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2649efc and 1584ad0.

📒 Files selected for processing (2)

• src/app/system/roles-and-permissions/view-role/view-role.component.html
• src/app/system/roles-and-permissions/view-role/view-role.component.scss

🧰 Additional context used

📓 Path-based instructions (1)

src/app/**

⚙️ CodeRabbit configuration file

src/app/**: For Angular code: verify component separation, trackBy on *ngFor,
strict type safety, and clean observable patterns.

Files:

• src/app/system/roles-and-permissions/view-role/view-role.component.html
• src/app/system/roles-and-permissions/view-role/view-role.component.scss

🔇 Additional comments (8)

src/app/system/roles-and-permissions/view-role/view-role.component.scss (5)

3-29: Good use of centralized color variables with CSS custom properties.

The implementation correctly uses color variables from the centralized system ($black, $mid-grey) and provides a fallback pattern with CSS custom properties. The transitions and box-shadow provide a polished visual experience.

---

25-27: Verify the minimal padding for role-details-card.

The padding of 0.125rem (2px) is extremely small. While this aligns with the PR objective to reduce spacing, ensure this doesn't make the content appear too cramped or affect readability. Consider testing this visually across different screen sizes.

---

73-80: Excellent use of centralized color system for hover states.

The hover effect properly uses $light-grey from the centralized color system, replacing any previous hardcoded colors. The subtle scale transform (1.01) provides good visual feedback without being jarring.

---

94-121: Well-structured layout helpers with reduced spacing.

The layout utilities are properly scoped and provide reduced spacing values that align with the PR's compact layout objective. The nested styling for .role-details-card .layout-row-wrap ensures context-specific adjustments without global side effects.

---

123-134: LGTM: Proper button spacing in card actions.

The button spacing is consistent with the reduced spacing objective and correctly removes the trailing margin from the last button to prevent unnecessary whitespace.

src/app/system/roles-and-permissions/view-role/view-role.component.html (3)

1-1: Margin reduction aligns with PR objectives.

The change from m-b-20 to m-b-0 reduces spacing as intended. This should create a more compact layout between the action buttons and the content below.

---

47-48: Good class structure for styled card.

The addition of the role-details-card class provides the necessary hook for the specific styling defined in the SCSS file, maintaining separation of concerns.

---

71-71: Appropriate margin spacing for section separation.

The use of m-b-20 here provides proper visual separation after the permissions card, while earlier sections use m-b-0 for a more compact layout. This creates a balanced spacing hierarchy.

[IOhacker]

LGTM