Bugfix/added technical support block to main page and fixed styles

[witolDark]

Added techinacal support block next to working hours, fixed styles and responsiveness
Added translation to quill editors of technical support block and caption

Summary by CodeRabbit

• New Features

  • Added a tech-support block to the How-It-Works area with localized copy.

• Style

  • Reworked page layout for improved responsive behavior and vertical stacking across breakpoints.
  • Updated price card presentation and refined spacing, padding, and alignment.
  • Added a sans-serif font-family fallback for consistent typography.

• Localization

  • Added tech_support and tech_support_caption translations and adjusted key ordering for English and Ukrainian.

• Tests

  • Removed two datepicker-related assertions from integration tests.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

Added a tech_support time-frame block to the UBS main page template, updated responsive styling across main and price sections, and added English and Ukrainian translation keys for tech support. Styling refactors simplified legacy price-section rules and adjusted layout, spacing, and typography.

Changes

Cohort / File(s)	Summary
Main page template src/app/ubs/ubs/components/ubs-main-page/ubs-main-page.component.html	Inserted a new time-frame block in the how-works section bound to tech_support_caption and tech_support. No event/logic changes.
Main page styling src/app/ubs/ubs/components/ubs-main-page/ubs-main-page.component.scss	Added sans-serif fallback; removed/collapsed legacy price-section rules; shifted multiple layouts to column stacking, adjusted gaps, padding, and alignment across breakpoints.
Price section styling src/app/ubs/ubs/components/ubs-price-section/ubs-price-section.component.scss	Added extensive responsive styles for the price section (many breakpoints): typography, frame sizing, border radii, flex directions, and other layout refinements.
Translations src/assets/i18n/ubs-admin/en.json, src/assets/i18n/ubs-admin/uk.json	Added tech_support and tech_support_caption under settings.section.how_works; reordered some existing keys in both locale files.
Tests src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-date/table-cell-date.component.spec.ts	Removed two assertions expecting the datepicker to be opened in two integration scenarios.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Poem

🐰 I hopped a new block into the how-works glade,
Two tongues now whisper the tech-support braid.
Styles stretched and stacked from small up to tall,
Frames shaped and flowing, responsive for all.
A carrot-toast to layouts — hip-hop, not stale! 🥕✨

🚥 Pre-merge checks | ✅ 3

✅ 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 reflects the main changes: adding a technical support block and fixing styles on the main page, which aligns with the PR objectives and file changes.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing touches

• 📝 Generate docstrings

---

📜 Recent review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 8637ee8 and db3d080.

📒 Files selected for processing (1)

• src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-date/table-cell-date.component.spec.ts

💤 Files with no reviewable changes (1)

• src/app/ubs/ubs-admin/components/ubs-admin-table/table-cell-date/table-cell-date.component.spec.ts

⏰ 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: build (18.x)

---

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 (1)

src/app/ubs/ubs/components/ubs-main-page/ubs-price-section/ubs-price-section.component.scss (1)

138-142: Consider reducing !important usage.

Multiple !important declarations appear across the responsive blocks (lines 141, 272, 305, 342). While this may be necessary for overriding inherited styles in nested media queries, consider refactoring the specificity hierarchy to avoid relying on !important if this file grows further.

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e1cac39 and 95a7cd9.

📒 Files selected for processing (5)

• src/app/ubs/ubs/components/ubs-main-page/ubs-main-page.component.html
• src/app/ubs/ubs/components/ubs-main-page/ubs-main-page.component.scss
• src/app/ubs/ubs/components/ubs-main-page/ubs-price-section/ubs-price-section.component.scss
• src/assets/i18n/ubs-admin/en.json
• src/assets/i18n/ubs-admin/uk.json

⏰ 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: build (18.x)

🔇 Additional comments (10)

src/assets/i18n/ubs-admin/en.json (1)

1378-1382: LGTM!

The new i18n keys for technical support (tech_support, tech_support_caption) follow the existing naming conventions and structure within the how_works section, consistent with the working_hours and route patterns.

src/assets/i18n/ubs-admin/uk.json (1)

1377-1381: LGTM!

Ukrainian translations for the technical support section are properly provided and follow the same structure as the English translations.

src/app/ubs/ubs/components/ubs-main-page/ubs-main-page.component.html (1)

125-128: LGTM!

The new technical support time-frame block follows the established pattern of sibling blocks (working hours, route) and properly uses optional chaining for safe property access. The structure is consistent with the existing implementation.

src/app/ubs/ubs/components/ubs-main-page/ubs-price-section/ubs-price-section.component.scss (2)

9-17: LGTM!

Base styles are properly defined with margin reset and consistent padding. The h2 typography is well-structured.

---

155-236: LGTM!

The responsive styling structure with nested media query mixins provides granular control across breakpoints. The mobile-first approach with targeted desktop overrides is well-organized.

src/app/ubs/ubs/components/ubs-main-page/ubs-main-page.component.scss (5)

13-13: LGTM!

Adding sans-serif as a fallback font is a good practice for resilience when the custom font fails to load.

---

583-584: LGTM!

The gap: 10px addition properly spaces the time-frame blocks in #main-content, accommodating the new technical support block.

---

1098-1098: LGTM!

Switching to flex-direction: column at this breakpoint appropriately stacks the three time-frame blocks vertically when horizontal space is limited.

---

1374-1375: LGTM!

The column layout with centered alignment properly handles the time-frame blocks at medium viewport sizes.

---

1582-1583: LGTM!

Consistent column layout and centering at smaller breakpoints ensures proper display of all time-frame blocks.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

src/app/ubs/ubs/components/ubs-main-page/ubs-price-section/ubs-price-section.component.scss (1)

141-141: Consider reducing !important usage.

Multiple line-height: 20px !important declarations suggest potential specificity conflicts. While this works, it may make future style overrides more difficult.

♻️ Suggested approach

Consider increasing selector specificity instead of using !important, or consolidating these rules to reduce duplication. For example:

- line-height: 20px !important;
+ line-height: 20px;

If the parent styles are causing conflicts, address the specificity at the source rather than forcing overrides.

Also applies to: 272-272, 305-305, 342-342

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 95a7cd9 and 8637ee8.

📒 Files selected for processing (5)

• src/app/ubs/ubs/components/ubs-main-page/ubs-main-page.component.html
• src/app/ubs/ubs/components/ubs-main-page/ubs-main-page.component.scss
• src/app/ubs/ubs/components/ubs-main-page/ubs-price-section/ubs-price-section.component.scss
• src/assets/i18n/ubs-admin/en.json
• src/assets/i18n/ubs-admin/uk.json

⏰ 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: build (18.x)

🔇 Additional comments (9)

src/app/ubs/ubs/components/ubs-main-page/ubs-main-page.component.scss (3)

13-13: Good addition of font fallback.

Adding sans-serif as a fallback ensures text remains readable if the CSS variable or custom font fails to load.

---

583-583: LGTM: Gap addition for time-frame blocks.

The gap: 10px provides consistent spacing between the time-frame blocks in the #main-content container, which now accommodates three blocks including the new tech_support section.

---

1098-1098: Vertical layout adjustments for responsive breakpoints.

The flex-direction: column and align-items: center changes appropriately stack the time-frame blocks vertically on smaller screens, ensuring the three blocks (working hours, tech support, route) display properly across all breakpoints.

Also applies to: 1374-1375, 1582-1583

src/app/ubs/ubs/components/ubs-main-page/ubs-price-section/ubs-price-section.component.scss (2)

9-17: Base styling updates look appropriate.

The margin, padding, and h2 typography changes establish a consistent base for the price section component.

---

155-358: Comprehensive responsive styling implementation.

The responsive styling covers all major breakpoints (sm, md, xl, 3xl) with appropriate adjustments for price card sizing, typography, and layout. The mobile-first approach with PC-first nested blocks follows the project's existing pattern.

src/assets/i18n/ubs-admin/en.json (1)

1378-1382: Translation keys properly added.

The new tech_support and tech_support_caption keys follow the existing naming convention and are correctly placed within the how_works section. The structure mirrors the existing working_hours and route patterns.

src/assets/i18n/ubs-admin/uk.json (1)

1377-1381: Ukrainian translations properly added.

The Ukrainian translation keys mirror the English file structure, and the translations appear linguistically appropriate. The consistency between en.json and uk.json ensures proper i18n support for the new tech support block.

src/app/ubs/ubs/components/ubs-main-page/ubs-main-page.component.html (2)

125-128: New tech support time-frame block correctly implemented.

The structure follows the existing pattern for working_hours and route blocks. The optional chaining (?.) provides appropriate null safety.

---

122-127: Angular's [innerHTML] binding automatically sanitizes content by default—no additional explicit sanitization is required.

The template uses [innerHTML] to bind admin-controlled content, but Angular automatically sanitizes HTML bindings in templates using its built-in DomSanitizer. This prevents XSS attacks without requiring explicit sanitize() calls in the component. Unless the content is processed through bypassSecurityTrustHtml() (which it is not here), this binding is secure.

Likely an incorrect or invalid review comment.

[sonarqubecloud]

Quality Gate passed

Issues
1 New issue
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud