WEB-377:fix improve deposit form heading styling and appearance

[shubhamkumar9199]

The heading "Deposit Money To Saving Account" on the savings account deposit form has been improved to provide a better user experience and maintain consistency across the application

WEB-377

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 heading elements for withdrawal and deposit sections with refreshed styling, including adjusted font size, weight, and spacing.

_{✏️ 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

The pull request updates the savings account transactions component template to replace semantic HTML heading elements with Angular Material mat-card-title components, and introduces a corresponding SCSS style class for consistent form heading styling across the component.

Changes

Cohort / File(s)	Summary
Template markup refactor src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.html	Replaced <h2 mat-title> tags with <mat-card-title> components for withdrawal and deposit section headings; updated class from m-l-10 to form-heading
Stylesheet addition src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.scss	Added new .form-heading CSS class with font-size: 1.25rem, font-weight: 500, and margin-bottom: 0.5rem properties

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Suggested reviewers

• IOhacker
• alberto-art3ch

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 directly references the main change: improving deposit form heading styling and appearance by transitioning from h2 to mat-card-title markup with updated styling.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

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: 1

🧹 Nitpick comments (2)

src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.html (1)

48-48: Optimize trackBy expression for better performance.

The @for loop tracks by the entire paymentType object, which may cause unnecessary re-renders if object references change but the data remains the same. Tracking by a unique identifier is more efficient.

🔎 Suggested improvement

-            @for (paymentType of paymentTypeOptions; track paymentType) {
+            @for (paymentType of paymentTypeOptions; track paymentType.id) {
               <mat-option [value]="paymentType.id">
                 {{ paymentType.name }}
               </mat-option>

Based on coding guidelines: Use trackBy on iterators for Angular code.

src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.scss (1)

17-21: Consider using Material's typography system for consistency.

The custom .form-heading class defines font sizing and weight that could be handled by Angular Material's built-in typography classes. Using Material's typography system helps maintain visual consistency across the application and reduces custom CSS.

You could leverage Material typography classes like mat-headline-6 or define this style in your global theme's typography configuration. However, if this specific styling is intentional and differs from your app's standard heading styles, the current approach is acceptable.

Example alternative approach:

.form-heading {
  @extend .mat-headline-6;
  margin-bottom: 0.5rem;
}

Or apply the typography class directly in the template:

<mat-card-title class="mat-headline-6">

📜 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 bf678b5.

📒 Files selected for processing (2)

• src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.html
• src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.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/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.scss
• src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.html

[coderabbitai]

⚠️ Potential issue | 🟠 Major

Accessibility concern: Semantic heading structure lost.

Replacing <h2> elements with <mat-card-title> removes the semantic heading structure from the page, which can impact accessibility. Screen readers rely on native heading elements (<h1>, <h2>, etc.) to build a document outline and provide navigation shortcuts for users with disabilities.

To maintain accessibility while using Material styling, consider one of these approaches:

• Use mat-card-title as a directive on a heading element: <h2 mat-card-title class="form-heading">
• Add ARIA role to the current implementation: <mat-card-title role="heading" aria-level="2" class="form-heading">

🔎 Recommended fix: Use mat-card-title as a directive on semantic heading elements

-    <mat-card-title class="form-heading">
+    <h2 mat-card-title class="form-heading">
       {{ 'labels.heading.Withdraw Money From Saving Account' | translate }}
-    </mat-card-title>
+    </h2>

-    <mat-card-title class="form-heading">
+    <h2 mat-card-title class="form-heading">
       {{ 'labels.heading.Deposit Money To Saving Account' | translate }}
-    </mat-card-title>
+    </h2>

Based on coding guidelines: Angular code should maintain accessibility standards.

Also applies to: 9-11

🤖 Prompt for AI Agents

In
src/app/savings/saving-account-actions/savings-account-transactions/savings-account-transactions.component.html
around lines 4-6 (and similarly lines 9-11), the current use of <mat-card-title>
removes native heading semantics; update each instance to use a semantic heading
element with the Material directive, e.g. replace the <mat-card-title> element
with an <h2 mat-card-title class="form-heading"> (preserve the class and
translated content) so the DOM keeps proper heading structure for screen
readers; if using a different heading level is required, use the appropriate
h1–h6 with the mat-card-title directive, otherwise as an alternative add
role="heading" and aria-level="2" to the existing mat-card-title elements.