fix(my-account): v2 demo polish pass

[thomasguillot]

All Submissions:

• Have you followed the Newspack Contributing guideline?
• Does your code follow the WordPress' coding standards and VIP Go coding standards?
• Have you checked to ensure there aren't other open Pull Requests for the same update/change?

Changes proposed in this Pull Request:

A polish pass on the My Account v2 demo prototype, addressing several visual nits surfaced while reviewing the merged Phases 2-9 against Figma. Stacks on top of prototype/my-account-demo (umbrella PR #4679).

Donations list (Figma 2636:46467)

• Billing history block now anchors to the bottom of the visible viewport via __stack--justify-between on the outer wrapper plus a viewport-based min-height (offset for admin bar + the .woocommerce wrapper's vertical padding so the page never overflows).
• Recurring + Previous section titles dropped from __font--l to __font--m to match the design token; recurring card amount likewise from --m to --s.
• Previous donations table picks up a stronger header underline (--color-border), lighter row dividers (neutral-5), cursor: pointer on rows, and roomier padding.
• Inter-section gap pinned to __stack--gap-11. Required overriding a v1 :not(.__stack--gap-11) section + section rule that fired on our consecutive <section> elements (the outer wrapper isn't --gap-11, only the inner one is) and zeroing the __box's default margin-bottom plus theme <h2> margins so the parent gap is the single source of inter-section spacing.
• Billing history "Button Card" rebuilt as a <button> styled with __button--secondary --wide rather than a __box wrapped in custom CSS — picks up bg, padding, hover, focus-visible outline, and transition for free. Inner label block stretches to fill width via flex: 1 since newspack-ui has no flex-grow utility.
• Receipt icon SVG swapped for the new design.

Account settings - Delete account modal (Figma 4865:92398)

• The "Your account deletion has been requested" success step now narrows to __modal--small. Init keeps the wider default because of the alternatives list. Toggle is JS-driven on step transition and resets on close.

Sidebar nav footer

• Secondary links + Sign out row now stack with a spacer-1 (8px) gap; previously sat too tight against each other.

Newsletters list

• Sign up / Unsubscribe row buttons share a common min-width so the right edge stays steady when toggling subscribed state and the loading-state spinner doesn't reveal a wider label after the flip. The bottom "Unsubscribe from all" CTA is unaffected (different context).
• Section header (h2 + description) gap tightened to __stack--gap-0.

How to test the changes in this Pull Request:

Log in as administrator. Each surface lives behind the demo flag.

1. Visit /my-account/donations/?my-account-v2-demo=1. Verify: Recurring + Previous section titles read at medium size; the gap between them is exactly spacer-11 (no extra phantom whitespace); billing history sits at the bottom of the viewport (not floating right under Previous donations); page height does not overflow the viewport. Hover the billing history card - it should darken to neutral-30 and show a focus-visible outline on tab. Click it (no-op, just visual). Confirm the receipt icon matches the new SVG, and the URL bar does not pick up a # fragment when clicking.
2. Visit /my-account/donations/?my-account-v2-demo=billing-history. Verify the inline billing history table replaces the Button Card and still sits at the bottom.
3. Visit /my-account/donations/?my-account-v2-demo=no-donations and =empty. Verify the empty notice + billing history layout still spaces correctly.
4. Visit /my-account/newsletters/?my-account-v2-demo=1. Verify Sign up and Unsubscribe row buttons render at the same width (tight against each label, but identical right edge across rows). Toggle a row - the loading spinner sits inside the same-width pill before the label flips. The "Unsubscribe from all" row at the bottom stays its natural width. Confirm the section header (e.g., "Featured") sits flush against its description.
5. Visit /my-account/edit-account/?my-account-v2-demo=1. Click Delete account. Verify the modal opens at default width with the alternatives list. Click Delete account inside the modal. Verify it transitions to the "Your account deletion has been requested" success step at --small width. Close the modal and reopen - should reset to init at default width.
6. Visit any /my-account/<endpoint>/?my-account-v2-demo=1 URL with the v1 sidebar showing FAQ / Contact us / Privacy Policy / Terms of Service / Sign out. Verify there is a spacer-1 (8px) gap between each item.
7. Sanity-check non-demo flows: visit /my-account/donations/ (no flag) - should 404 / fall through to v1 unchanged. Visit /my-account/edit-account/ - v1 form renders unchanged.

Other information:

• Have you added an explanation of what your changes do and why you'd like us to include them?
• Have you written new tests for your changes, as applicable?
• Have you successfully ran tests with your changes locally?

[Copilot]

Pull request overview

Polish pass on the My Account v2 demo prototype to better match Figma spacing/typography and improve a few interaction/layout details (donations list layout, newsletters header spacing, delete-account modal sizing, sidebar footer spacing).

Changes:

• Adds scoped v2-demo CSS overrides for newsletters row button widths, donations viewport anchoring + table styling, and sidebar footer spacing.
• Updates delete-account modal JS to toggle newspack-ui__modal--small on the success step and reset on close.
• Tweaks v2-demo newsletters/donations templates to align section spacing, typography tokens, and the billing-history “Button Card” markup/icon.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.

File	Description
src/my-account-v2-demo/style.scss	Adds new scoped layout/spacing overrides for newsletters, donations list/table, and sidebar footer.
src/my-account-v2-demo/account-settings.js	Toggles modal width class on success step and removes it on reset.
includes/plugins/woocommerce/my-account/templates/my-account-v2-demo/newsletters.php	Tightens header stack gap for section headers and “Unsubscribe from all” block.
includes/plugins/woocommerce/my-account/templates/my-account-v2-demo/donations.php	Restructures donations list layout for bottom-anchored billing history; adjusts typography and billing-history button card markup/icon.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.