Skip to content

fix: use haze for secondary button bg blur#890

Merged
jvsena42 merged 3 commits intofix/polish-buttonsfrom
fix/button-bg-blur
Apr 6, 2026
Merged

fix: use haze for secondary button bg blur#890
jvsena42 merged 3 commits intofix/polish-buttonsfrom
fix/button-bg-blur

Conversation

@ovitrif
Copy link
Copy Markdown
Collaborator

@ovitrif ovitrif commented Apr 6, 2026

Description

Stacked on:

This PR replaces the custom glassBlur modifier on SecondaryButton with the Haze library's frosted glass blur effect. The old glassBlur used BlurMaskFilter which only blurred the drawn tint shape itself — it never actually blurred the background content behind the button. Now the button uses Haze's hazeEffect with a custom HazeStyle to produce a real frosted glass blur matching the Figma design.

Key changes:

  1. Adds a hazeState parameter to SecondaryButton for opt-in background blur
  2. Wraps OutlinedButton in a clipped Box so the blur renders before Material's Surface
  3. Sets up hazeSource on the background layer of Spending and Savings wallet screens
  4. Removes the dead glassBlur modifier, GlassBlurElement, and GlassBlurNode
  5. Removes unused secondaryBlurRadius from ButtonSize

Preview

Figma vs Screenshot
Secondary Button Preview
Android Studio Render

QA Notes

  1. Open Spending wallet screen with a balance and channels
    • Verify the "Transfer To Savings" button shows a subtle frosted glass blur of the background coin stack image
    • Verify the button has rounded corners on the blur effect
  2. Open Savings wallet screen with a balance
    • Verify the "Transfer To Spending" button shows a similar frosted glass blur of the piggybank image
  3. Check onboarding screens that use SecondaryButton (Intro, Create Wallet, Restore)
    • Verify buttons render normally without blur (no crash)
  4. Optional: Check SecondaryButtonPreview in Android Studio

@ovitrif ovitrif requested a review from jvsena42 April 6, 2026 03:01
@ovitrif ovitrif force-pushed the fix/button-bg-blur branch from a45793c to 95c169e Compare April 6, 2026 03:06
@ovitrif ovitrif added this to the 2.2.0 milestone Apr 6, 2026
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@claude

This comment has been minimized.

@ovitrif
Copy link
Copy Markdown
Collaborator Author

ovitrif commented Apr 6, 2026

@claude Please make a table listing all screens using Secondary Button, and on the 2nd column with a checkbox ✅ or cross ❌ if it it uses hazeState (ie. should blur) or not.

@claude

This comment has been minimized.

@ovitrif
Copy link
Copy Markdown
Collaborator Author

ovitrif commented Apr 6, 2026

@jvsena42 can we merge it back to target PR and you can do your investigation there if you're still keen to pursue it?

I didn't use a Box because in the past caused some bugs either from fullWidth or from .weight(1f) in the PrimaryButton when used for the gradient effect.

I'll check some screens and see if this caused some regression

Either do your investigation as you planned, or if you remember where it might've exploded, delegate to me as author of these changes, I'll bring the receipts if it works or not, after testing manually.

@jvsena42 jvsena42 merged commit d0222ec into fix/polish-buttons Apr 6, 2026
19 checks passed
@jvsena42 jvsena42 deleted the fix/button-bg-blur branch April 6, 2026 13:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants