WEB-406-fix(css)-improve the css of create-savings-account

[shubhamkumar9199]

Description

This pr enhanced form responsiveness, stepper styling, and overall visual polish for better UX.

#{Issue Number}
WEB-406

Screenshots, if any

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
  • Enhanced the create savings account form interface with smoother animations and transitions for improved visual flow.
  • Optimized responsive design for better experience across mobile and tablet devices.
  • Refined visual hierarchy through typography adjustments and improved spacing throughout the form.
  • Enhanced stepper component styling with improved shadows and visual polish.

[coderabbitai]

Walkthrough

The pull request adds comprehensive styling to the create-savings-account component, including responsive layout adjustments, vertical stepper customization, form field typography adjustments, button styling enhancements, fade-in animations, and media queries for 768px and 480px breakpoints.

Changes

Cohort / File(s)	Summary
Styling Enhancements src/app/savings/create-savings-account/create-savings-account.component.scss	Adds container sizing, responsive margins, step content fade-in animation, vertical stepper UI customization (headers, icons, labels, padding, shadows), MatFormField spacing and typography adjustments, button styling improvements, and responsive breakpoints at 768px and 480px using :host ::ng-deep selectors for nested Angular Material elements

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10-15 minutes

• Review focus areas:
  • Verify responsive breakpoint values (768px, 480px) align with design specifications
  • Confirm :host ::ng-deep usage follows best practices for Angular Material component styling
  • Validate animation keyframes (fade-in) are performant and smooth
  • Check box-shadow and elevation values for visual consistency
  • Ensure media query specificity doesn't unintentionally override other component styles

Suggested reviewers

• alberto-art3ch
• IOhacker

Pre-merge checks and finishing touches

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly identifies the main change as CSS improvements to the create-savings-account component, which aligns with the SCSS file modifications and styling enhancements described in the changeset.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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/savings/create-savings-account/create-savings-account.component.scss (2)

26-159: Replace :host ::ng-deep with proper style encapsulation or Material theming API.

The extensive use of :host ::ng-deep pierces Angular's view encapsulation, creating significant maintainability and stability concerns:

• Styles can leak to unintended sibling/parent components
• Creates tight coupling to Material's internal DOM structure, risking breakage on Material updates
• Difficult to debug and reason about style scope
• Violates Angular best practices for component isolation

Consider using:

1. Material theming API (preferred): Use @angular/material/theming for customizing Material components through CSS variables and mixins instead of targeting internal elements.
2. ViewEncapsulation: Verify the component uses ViewEncapsulation.Emulated (default) or ShadowDom to ensure styles don't leak.
3. CSS custom properties: Define theme-aware custom properties at the component level for reusable styling.

Also applies to: 175-218

---

100-143: Reduce tight coupling to Material form field internals.

Targeting internal Material form field elements (.mat-form-field-wrapper, .mat-form-field-infix, .mat-form-field-outline-*) via ::ng-deep creates fragile styling that breaks when Material updates its DOM structure.

Instead, consider:

1. Using Material's appearance input and theming APIs
2. Wrapping form fields in custom containers with your own styling
3. Leveraging CSS custom properties for typography and spacing overrides

📜 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 e4d5966 and 6eacd31.

📒 Files selected for processing (1)

• src/app/savings/create-savings-account/create-savings-account.component.scss (1 hunks)

🧰 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/savings/create-savings-account/create-savings-account.component.scss

🔇 Additional comments (4)

src/app/savings/create-savings-account/create-savings-account.component.scss (4)

1-18: Container responsive styling looks good.

The margin and padding adjustments for 768px and 480px breakpoints follow a clean responsive pattern. Box-sizing and max-width constraints are well-implemented.

---

20-23: Smooth animation and fade-in keyframes are well-structured.

The fade-in animation with a 0.3s ease-in timing and subtle translateY offset provides a polished transition for step content. The keyframes definition is clean and performant.

Also applies to: 161-171

---

38-63: Stepper header, icon, label, and button styling follow Material design principles.

Typography, spacing, and interactive element sizing are appropriately configured for accessibility (min-height: 48px/36px, readable font sizes, clear line-height).

Also applies to: 146-158

---

9-17: No changes needed — the modern media query syntax is fully compatible with this project's browser support targets.

The modern CSS media query syntax (width <= 768px) is supported in Chrome 104+, Edge 104+, Firefox 102+, Safari 16.4+, and iOS Safari 16.4+. The project's .browserslistrc configuration targets "last 2 versions" and "> 0.5%", which aligns with modern browsers. IE 9-11 support is explicitly disabled in the configuration, so the syntax compatibility concern does not apply to this project's actual browser support matrix.

Likely an incorrect or invalid review comment.

[alberto-art3ch]

Please let try to use the global styles instead of this