Qa results

ET-408 QA Evidence — Overview Block, Contact Block, Feedback Widget

Date: 2026-05-19 Branch: hc-redesign/et-408-overview-contact-blocks Dev server: mintlify dev --port 3333

Acceptance Criteria

#	Criterion	Status	Evidence
1	Overview block: white box, 3px aqua left border, “Overview” label in cobalt uppercase, description text	PASS	light-mode-full-v2.png — white bg, 1px rule border + 3px aqua left, cobalt uppercase “OVERVIEW” label, body text at 15px/1.55
2	Prerequisites sub-section: dashed top border with bullet points	PASS	light-mode-full-v2.png — dashed rule border, custom 5px circle bullets in cobalt, 14px text
3	Contact block: blue-tinted callout, sky left border, “Still need help?” with support link	PASS	light-mode-full-v2.png — aqua-tinted bg (rgba 108,180,228 at 6%), 3px sky left border, bold link with 3px underline-offset
4	Feedback widget: Mintlify built-in thumbs rating enabled	DEVIATION	feedback.thumbsRating is not a docs.json property. Mintlify feedback is enabled via Dashboard > Add-ons. No code change needed.

QA Steps

1. Local render (PASS)

• Created _test-components.mdx with all component variants
• Mintlify dev server renders all components correctly
• Screenshots: light-mode-full-v2.png

2. Visual diff — desktop 1440x900 (PASS)

• v2: CSS values now match mockup HTML (design/fieldpulse-help-center (1).html) exactly
• Overview block: border: 1px solid var(--rule); border-left: 3px solid var(--aqua); padding: 22px 24px — matches .overview-block in mockup
• Overview label: 10px, 0.14em, cobalt — matches .overview-label in mockup
• Prereq list: custom ::before 5px circle bullets, flex layout with 6px gap — matches .prereq-list in mockup
• Contact block: rgba(108, 180, 228, 0.06) bg, 18px 22px padding, 14px font — matches .article-contact in mockup
• Contact link: font-weight: 700; text-underline-offset: 3px — matches mockup

3. Feedback widget (DEVIATION)

• Mintlify’s feedback is a dashboard-level toggle, not a docs.json property
• The feedback.thumbsRating key referenced in the issue does not exist in Mintlify’s config schema
• Feedback will appear on all pages once enabled in Mintlify Dashboard > Add-ons

4. Dark mode (PASS)

• Overview block: dark translucent bg, subtle border adapts, aqua label — dark-mode-full-v2.png
• Prerequisites: lighter dashed border, aqua circle bullets, light text — dark-mode-full-v2.png
• Contact block: deeper aqua tint, aqua link color — dark-mode-full-v2.png

5. Regression sanity (PASS)

• Opened /core-platform/customers/creating-customers — no visual impact
• Screenshot: regression-existing-article.png

Deviations from Issue

Item	Issue Says	Actual	Classification
docs.json feedback config	Enable feedback.thumbsRating in docs.json	Mintlify feedback is a dashboard setting, not a docs.json property	Accepted Mintlify constraint
Contact block text	Spec: “Still need help?”	Mockup: “Have additional questions?” — spec wins per guardrails	Matches spec

Changes Summary

File	Change
styles.css	Added ~120 lines: .hc-overview-block, .hc-overview-label, .hc-overview-text, .hc-prereq-block, .hc-prereq-list (with ::before bullets), .hc-article-contact + dark mode variants. Values match mockup CSS exactly.