Skip to content

[wip] fix: withdraw screen UI redesign and consistency fixes#231

Draft
swedishfrenchpress wants to merge 24 commits intomainfrom
feat/withdraw-ui-updates
Draft

[wip] fix: withdraw screen UI redesign and consistency fixes#231
swedishfrenchpress wants to merge 24 commits intomainfrom
feat/withdraw-ui-updates

Conversation

@swedishfrenchpress
Copy link
Collaborator

@swedishfrenchpress swedishfrenchpress commented Mar 22, 2026

Summary

Complete visual overhaul of the Withdraw screen flow (Auto-Withdraw settings, Withdraw Now, Confirm Withdrawal) for consistency, polish, and brand alignment.

Screen title & navigation

  • Renamed screen title from "Auto-Withdraw" to "Withdraw"
  • Fixed nav bar title font to use shared Text.Title style (was 20sp, now 17sp matching other screens)
  • Removed divider shadow under title bars across all withdraw screens

Hero card redesign

  • Removed large lightning bolt icon from hero card
  • Replaced hardcoded dark gradient with theme-aware subtle gradient (warm amber light mode, ember dark mode)
  • Added decorative lightning bolt watermark in bottom-right (12% opacity, -15° rotation, fade-out effect)
  • Hero card gradient changes from orange/amber (inactive) to green (active) when Auto-Withdraw is toggled
  • Renamed hero title to "Auto-Withdraw"

Lightning strike animation

  • Added orange lightning bolt animation when Auto-Withdraw is toggled on
  • Realistic branching bolt paths with three-layer glow rendering (outer aura, inner glow, core bolt)
  • Smooth fade-in/hold/fade-out timing over 550ms
  • Single bolt, full-screen coverage, unique randomized path each time

Button fixes

  • Fixed disabled primary buttons nearly invisible in both light/dark mode (component-level fix using semantic palette colors)
  • Added text color selector for disabled state
  • Removed redundant alpha hacks from XML and Kotlin
  • Removed inconsistent textStyle="bold" overrides on withdraw buttons
  • Fixed Scan Invoice secondary button border (MaterialButton app:strokeColor)

Icon updates

  • Auto-Withdraw row: uses autorenew icon, toggles between gray (off) and green (on)
  • Withdraw Now row: uses down arrow icon matching activity screen, gray style
  • Recent Activity: up arrow with green checkmark badge overlay, matching Activity screen
  • Removed lightning bolt from Lightning Address label and mint name

Typography & consistency

  • Section headers use shared Text.SectionHeader style across all withdraw screens
  • Recent Activity fonts unified with withdraw screen's own row typography
  • Mint selection bottom sheet fonts matched to withdraw screen weights
  • Confirm Withdrawal screen fully aligned (background, title, labels, button width)

Background & card cleanup

  • Removed color_bg_surface background override from all withdraw screen ScrollViews
  • Made all card backgrounds transparent for consistent dark mode appearance
  • Removed clock icon from Recent Activity empty state

Segmented control

  • Matched Lightning/Cashu Token toggle to payment request screen's implementation

Withdraw Now screen

  • Simplified Lightning Invoice and Lightning Address inputs to match Auto-Withdraw's clean pattern
  • Added fiat balance display on Available Balance card
  • Applied hero gradient to balance card
  • Added Scan Invoice button with QR icon

Other

  • Replaced blue accent on percentage slider with Numo orange
  • Extended entrance reveal animation to Recent Activity section
  • Added localized strings (ES/PT) for all new text

Test plan

  • Open Withdraw screen in light mode — verify hero card, icons, typography
  • Open Withdraw screen in dark mode — verify no gray card backgrounds, consistent styling
  • Toggle Auto-Withdraw on — verify lightning animation, hero gradient turns green, icon turns green
  • Toggle Auto-Withdraw off — verify hero gradient returns to orange, icon turns gray
  • Tap Withdraw Now — verify mint selection bottom sheet fonts, then Withdraw Now screen layout
  • Enter invoice/address — verify disabled/enabled button states visible in both themes
  • Complete a withdrawal — verify Confirm Withdrawal screen styling
  • Check Recent Activity entries match Activity screen icon style
  • Verify Spanish and Portuguese translations

🤖 Generated with Claude Code

swedishfrenchpress and others added 24 commits March 21, 2026 21:17
@swedishfrenchpress @claude
fix: rename withdraw screen title and hide config sections when toggl…
dfc8316 
…e is off

The screen title showed "Auto-Withdraw" everywhere — renamed to "Withdraw"
in the nav bar and hero section across all locales (en/es/pt). Destination
and Trigger Settings sections were always visible even with the toggle off;
they are now fully hidden when disabled and smoothly animate in/out when
the toggle changes.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@swedishfrenchpress @claude
fix: disabled primary buttons nearly invisible in both light and dark…
57704c0 
… mode

The disabled state used a 20% opacity background color compounded with
0.5 alpha on the view, resulting in ~10% visibility. Fixed at the
component level so all screens using Widget.Button.Primary.Green benefit:

- Disabled bg now uses color_bg_tertiary (theme-aware solid color)
- Added text color selector with proper disabled state via color_text_tertiary
- Removed redundant alpha hacks from XML layouts and Kotlin code
- Removed inconsistent textStyle="bold" overrides on withdraw buttons

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@swedishfrenchpress @claude
fix: withdraw screens background color inconsistent with rest of app
f2d4785 
Both withdraw layouts had an explicit color_bg_surface background on the
ScrollView, creating a visible seam against the nav bar. Other settings
screens (Security, Language, Currency) inherit color_bg_white from the
root with no ScrollView background override. Removed the override so
both withdraw screens match.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@swedishfrenchpress @claude
fix: withdraw screen section headers use wrong font weight and letter…
6f4d75e 
… spacing

The section headers (DESTINATION, TRIGGER SETTINGS, etc.) were using
inline styling with sans-serif (regular) and 0.03 letter spacing instead
of the shared Text.SectionHeader style used across 8+ other screens.
Refactored all 4 headers to use the shared style (sans-serif-medium,
0.05 letter spacing).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@swedishfrenchpress @claude
fix: differentiate auto-withdraw and withdraw now icons
1b5b2b7 
Both rows used the same lightning bolt icon. Auto-Withdraw now uses a
Material Design autorenew icon to convey automatic/repeating behavior,
and Withdraw Now uses the down arrow icon consistent with withdraw line
items in the activity screen.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@swedishfrenchpress @claude
fix: hero card gradient too strong, add decorative lightning bolt wat…
dc99f41 
…ermark

Dialed back the gradient to barely-there warmth — light mode goes from
pure white to a ~3% orange tint, dark mode shifts subtly from default
surface to a faint ember tone. Removed the orange border stroke that
added to the warning-banner feel.

Added an oversized 120dp lightning bolt at the bottom-right corner at 6%
opacity as a brand watermark, clipped by the card edges.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@swedishfrenchpress @claude
fix: hero card lightning bolt positioning, rotation, fade, and opacity
645b472 
Restructured layout so the bolt sits outside the padded content layer in
its own FrameLayout, flush against the card edges with -30dp margins and
clipped by the CardView corner radius. Added -15deg counter-clockwise
rotation, a vertical fade-out overlay (theme-aware, transparent to card
bg color), and bumped opacity from 6% to 12% for better visibility.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@swedishfrenchpress @claude
fix: rename hero title to Auto-Withdraw and add lightning strike anim…
b98914d 
…ation on toggle

Renamed hero card title from "Withdraw" to "Auto-Withdraw" across all
locales. Added a LightningStrikeView that plays an orange lightning bolt
animation when the Auto-Withdraw toggle is switched on — forked bolt
path with amber glow, no screen flash, 400ms duration, auto-removes
after completion.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@swedishfrenchpress @claude
fix: tone down lightning animation and remove address label icon
d563d4f 
Reduced to a single bolt, added smooth fade-in/hold/fade-out timing
(550ms), lowered overall opacity to 70%, thinned stroke widths and glow
radii for a subtler effect. Removed the lightning bolt icon from the
Lightning Address input label.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@swedishfrenchpress @claude
fix: remove dark mode visual inconsistencies on withdraw screen
b03a80f 
Removed clock icon from recent activity empty state, made history card,
auto-withdraw toggle card, and withdraw now card backgrounds transparent
so they blend seamlessly in both themes — matching the borderless
appearance already seen in light mode.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@swedishfrenchpress @claude
fix: remove icon from mint selection bottom sheet
d9bfa9f 
The mint profile icon wasn't reliably loading, showing a fallback
bitcoin icon instead. Removed the icon container entirely for a cleaner
layout — mint items now show just name, URL, balance, and chevron.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@swedishfrenchpress @claude
fix: polish withdraw now screen for consistency
8db4063 
Removed gray card backgrounds from invoice and address components (both
XML and programmatic setCardBackgroundColor). Removed lightning bolt and
envelope icons from section headers. Fixed SEND TO and CASHU TOKEN
headers to use shared Text.SectionHeader style. Applied hero gradient to
the balance card. Made cashu input and token result cards transparent.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@swedishfrenchpress @claude
fix: redesign withdraw now inputs and add fiat balance display
21c0c7a 
Simplified Lightning Invoice and Address sections to match the
Auto-Withdraw screen's clean pattern (label, input, helper text).
Replaced QR scan icon with a Scan Invoice secondary button. Renamed
SEND TO header to DESTINATION. Removed lightning bolt icon from mint
name. Added real-time fiat balance below the BTC amount using
BitcoinPriceWorker. Removed address helper text.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@swedishfrenchpress @claude
fix: cashu section spacing, rename amount label, add scan icon
6e624a3 
Fixed cashu tab spacing to match destination section by removing extra
marginTop. Renamed "Amount (sats)" to "Amount" across all locales.
Fixed scan icon on Scan Invoice button — switched from drawableStart
(ignored by MaterialButton) to app:icon with textStart gravity.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@swedishfrenchpress @claude
fix: match withdraw toggle to payment request screen's segmented control
4a404e7 
Replaced the custom segment toggle (bg_input_pill container, 14sp medium
text, bg_segment_tab_selected) with the same implementation used on the
payment request screen (bg_button_secondary_pill container, 18sp bold
text, bg_button_primary_green selected state, 42dp height, 125dp min
width). Both screens now use identical toggle styling.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@swedishfrenchpress @claude
fix: match withdraw history icons to activity screen and clean up sty…
0b380c6 
…ling

Updated history item icons to match the Activity screen — up arrow in
gray circle with green checkmark badge overlay for completed entries.
Removed redundant "Sent" badge. Fixed badge clipping with clipChildren.
Changed Withdraw Now icon from orange to gray to match. Centered share
icon vertically with text content for cashu token entries.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@swedishfrenchpress @claude
fix: unify recent activity fonts with withdraw screen's own typography
19658b3 
Updated history item text to match the Withdraw screen's row styles
instead of the Activity screen's styles. Amount now uses 17sp medium
(matching row titles like "Withdraw Now"), detail lines use 14sp
secondary (matching row descriptions). This makes Recent Activity feel
typographically unified with the rest of the Withdraw screen.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@swedishfrenchpress @claude
fix: match recent activity icon size to other withdraw screen icons
9647d8d 
Inner circle was 40dp while Auto-Withdraw and Withdraw Now rows use
44dp. Expanded inner circle to 44dp and outer container to 50dp so the
green checkmark badge can still overflow the edge cleanly.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@swedishfrenchpress @claude
fix: title bar dividers, font sizes, and bottom sheet typography
d597f25 
Removed elevation shadow from both withdraw screen title bars and
replaced inline 20sp title styling with shared Text.Title style (17sp)
to match Security & Privacy and other screens. Fixed centering with
textAlignment. Updated mint selection bottom sheet fonts to match
withdraw screen typography — mint name uses medium 17sp, URL uses 14sp
secondary, balance uses medium instead of bold.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@swedishfrenchpress @claude
fix: scan invoice button border and height consistency
db404bd 
Switched to explicit MaterialButton with app:strokeColor/strokeWidth for
visible border, since the style's android:background was being ignored.
Added insetTop/insetBottom="0dp" to match Continue button's 52dp height.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@swedishfrenchpress @claude
fix: confirm withdrawal screen consistency with withdraw flow
2a3aa10 
Removed gray background (color_bg_surface on root and ScrollView),
removed title bar elevation/divider, replaced inline 20sp title with
Text.Title style, updated TO label to use Text.SectionHeader, made card
backgrounds transparent, matched button width to other screens (40dp
margin), removed word "actual" from fee note text across all locales.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@swedishfrenchpress @claude
fix: extend entrance animation to Recent Activity section
6b7ff29 
The history section header and card were appearing statically while
other elements above them had a staggered reveal. Added both to the
entrance animation sequence at 250ms and 300ms delays, continuing the
top-to-bottom stagger pattern.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@swedishfrenchpress @claude
fix: hero card gradient reflects active/inactive state, orange slider
50a8936 
Hero card switches between orange/amber gradient (inactive) and green
gradient (active) when Auto-Withdraw is toggled, including the
lightning bolt watermark tint. Instant swap with no flicker. Replaced
blue accent color on the percentage slider and See All button with
Numo orange to match the app's brand palette.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@swedishfrenchpress @claude
fix: auto-withdraw row icon reflects toggle state
34e7775 
Icon is now gray/neutral when off (matching Withdraw Now style) and
switches to green when toggled on. Changes in sync with the hero card
gradient transition.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@github-project-automation github-project-automation bot moved this to Backlog in Numo Mar 22, 2026
@swedishfrenchpress swedishfrenchpress changed the title Withdraw screen UI redesign and consistency fixes fix/withdraw screen UI redesign and consistency fixes Mar 22, 2026
@swedishfrenchpress swedishfrenchpress changed the title fix/withdraw screen UI redesign and consistency fixes fix: withdraw screen UI redesign and consistency fixes Mar 22, 2026
@swedishfrenchpress swedishfrenchpress changed the title fix: withdraw screen UI redesign and consistency fixes [wip] fix: withdraw screen UI redesign and consistency fixes Mar 22, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

Numo
Status: Backlog

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@swedishfrenchpress