fix: match subscriptions screens to handoff design

[jvsena42]

Description

This PR brings the Subscriptions screens back in line with the Handoff v62 designs after driving the whole flow on an emulator and comparing every screen against its frame.

1. Layers the top bar, tabs and footer button over the list, so rows scroll underneath them instead of stopping short. The two screens involved were plain columns, so nothing could overlap; the Payments tab inside Subscriptions gets the same treatment. The header blurs as a bar, while the footer button blurs only through its own pill the way the handoff does, leaving the rest of the row sharp.

2. Centres the Payments tab label and places the badge just after it, so the label no longer shifts to make room and the badge is not stranded at the tab edge on a wide tab. Every tab also reserves the badge height, so one tab carrying a badge no longer drops its indicator below the others.

3. Switches every swipe-to-confirm knob to brand orange. Subscribe used purple and cancel/delete used red; the handoff uses #FF4400 for all of them.

4. Adds the trash illustration and icon to the delete sheet and button, which were reusing the cancel cross.

5. Fills the expired detail's empty right-hand cell with its EXPIRED date, drops the year from detail dates, and swaps the payments metric to the coins glyph.

6. Titles subscription detail payment rows by subscription name over the date and drops the bitcoin symbol there. The Payments tab keeps contact names and the symbol, which is what its frame shows.

7. Shows pending in place of the fiat amount on outgoing payment requests, sizes the request details contact card to its content, rules dividers after its contact and tags sections, gives its note the torn paper edge, and drops the bitcoin symbol from its signed amount — the handoff's Balance component there is just a sign, a 6pt space and the digits.

8. Corrects copy: the delete sheet's question mark, a comma in the created summary, and title case on the cadence labels.

9. Uses the frame fills from the handoff: flat Base/Black behind the subscription detail and payment request details, and the bottom modal's own Gray6-to-black gradient behind the sheets, in place of the shared white-wash gradient on all three.

Blur reuses the existing haze setup, with the style hoisted out of PinnedTabsScaffold so both screens share it. The torn note reuses the zigzag the activity detail already drew, extracted to ui/components; it was the only copy in the app.

All five review findings are addressed and resolved: money cell options now resolve against the selected currency rather than line position, the request list falls back to the navigation bar inset when no footer renders, the tab badge no longer strands or overlaps, and both journeys were corrected against the actual accept and delete gating.

Three gaps are intentionally left out because they are unbuilt design rather than regressions, and each needs a product decision: the Edit button on the created detail, the Renew button on the expired detail, and the Automatically pay this subscription toggle on Review & Subscribe. All three are missing on iOS too. Discover is excluded as before.

iOS shares several of these gaps — no-blur chrome, the cross-for-trash delete sheet, the red knob, and dates carrying the year. iOS additionally renders dates day-first where the design and Android are month-first, and its subscription detail avatar is circular where the design uses a rounded square. Those are reported here rather than fixed.

Design

• Subscriptions overview
• Subscription Created (scrolled state, shows the blurred chrome)
• Payments
• Payment Request Details
• Subscription Detail Created
• Subscription Detail Expired
• Cancel Subscription
• Delete Subscription

Preview

Figma on the left, this branch on the right. Test wallet data differs from the mockup data, so compare layout and treatment rather than values.

Screen	Figma vs branch
Overview — list passing behind the blurred Create pill, badge beside the centred label
Payments — pending in the fiat slot, symbol retained
Payment Request Details — hugging contact card, dividers, torn note
Subscription Detail Expired — EXPIRED cell filled, no year
Subscription Detail Created — coins metric, trash button
Delete Subscription — trash illustration, orange knob, question mark

QA Notes

Manual Tests

• 1a. Subscriptions → Overview → scroll the list: rows pass under the tab bar, blurred, rather than clipping at the underline.
  • 1b. scroll to the end: rows pass under the Create button, blurred.
• 2. Overview with a pending incoming request: the Payments badge sits at the tab's right edge and Payments stays centred in its half.
• 3. Payments tab → scroll: rows pass under the tab bar and the Request Payment button.
• 4. Payments tab → outgoing request row: shows pending where the fiat amount sits, with the note or date as subtitle.
• 5. Payments tab → tap an incoming request → Payment Request Details: contact card hugs its name, dividers follow contact and tags, note has a torn top edge.
• 6a. Overview → tap an active subscription: RENEWS shows a date with no year; payment rows are titled by subscription name with the date beneath and no bitcoin symbol.
  • 6b. tap Cancel: sheet shows the cross illustration and an orange swipe knob.
• 7a. Overview → tap a subscription you created: PAYMENTS uses the coins glyph and Delete carries the trash icon.
  • 7b. tap Delete: title reads Delete Subscription?, illustration is the trash, knob is orange, summary reads 1 subscriber, N payments.
• 8. Overview → tap an expired subscription: the right-hand cell reads EXPIRED with a date instead of sitting empty.
• 9. regression: Overview with no subscriptions: the welcome empty state still fills the screen between the tabs and the Create button.
• 10. regression: Activity → open a Lightning payment with a message: the invoice note still renders with its torn top edge.
• 11. regression: Settings, Shop Discover and All Activity: pinned tab headers still blur correctly after the shared haze style moved.

Automated Checks

• Unit tests added: SubscriptionsScreenTest.kt covers the expired detail falling back to the last paid period end, and a fixed end date winning over paid periods.
• Journeys added: journeys/subscriptions/ documents create-and-propose, review-and-subscribe, cancel-and-delete and the Payments tab. No journey covered subscriptions before.
• just compile, just test and just lint pass locally; detekt reports no new findings for the touched files.
• Cross-device: a subscription created on the Android emulator arrived on an iOS simulator as Review & Subscribe, confirming the layout rework did not disturb the Paykit round trip.

[greptile-apps]

Confidence Score: 5/5

The PR appears safe to merge, with non-blocking follow-ups for RTL badge placement and the Payments journey’s stale positioning assertion.

Findings

1.  Badge no longer mirrors ▶
2.  Journey expects old badge position ▶

Summary

Aligns subscription and payment-request screens with the handoff design.

• Layers scrolling content beneath pinned headers and footer controls, with pill-scoped blur for Create.
• Updates currency-specific amount formatting, badges, detail dates, illustrations, note styling, and copy.
• Adds expiry-date tests and subscription lifecycle walkthroughs.
• Two non-blocking follow-ups remain: direction-aware badge placement and a stale badge-position assertion in the Payments journey.

_{Reviews (2) · Last reviewed commit: "Merge branch 'master' into fix/subscript..."}

[github-actions]

Regtest APK

Built from 74d7946 (run).

Download bitkit-dev-debug universal APK (expires in 30 days).