Skip to content

fix: polish buttons to match figma design#887

Open
jvsena42 wants to merge 10 commits intomasterfrom
fix/polish-buttons
Open

fix: polish buttons to match figma design#887
jvsena42 wants to merge 10 commits intomasterfrom
fix/polish-buttons

Conversation

@jvsena42
Copy link
Copy Markdown
Member

@jvsena42 jvsena42 commented Apr 3, 2026

Description

This PR polishes the Primary, Secondary, and Tertiary buttons to match the Figma design specs:

  1. Aligns padding, gap, border, text color, and shape per button size variant
  2. Adds a glass blur effect to SecondaryButton using a custom glassBlur modifier
  3. Fixes the PrimaryButton top shine highlight to follow the pill shape contour instead of rendering as a clipped flat rect
  4. Makes PrimaryButton shadow elevation size-dependent (16dp large, 4dp small)
  5. Replaces TertiaryButton's Material ripple with clean alpha-dim press feedback
  6. Implements a custom GradientCircularProgressIndicator for loading states

Preview

image image image
Screen_recording_20260403_132257.webm

QA Notes

  1. Primary Button

    • Verify pill shape (64dp corners), 32dp horizontal padding on large, 16dp on small
    • Confirm top shine follows the rounded contour (no flat cut-off at corners)
    • Small variant should have a subtle shadow (4dp), large a stronger one (16dp)
    • Disabled state should match enabled dimensions
  2. Secondary Button

    • Large: 2dp Gray4 border, 28dp padding, 6dp icon-text gap
    • Small: 1dp White16 border, 16dp padding, 8dp gap, White64 text
    • Subtle glass blur effect visible on both sizes
    • Background tint at 1% white opacity
  3. Tertiary Button

    • No ripple effect on tap — only alpha dim feedback
    • Text color White80 (enabled), White32 (disabled)
    • No border, no background
  4. Loading states — all three buttons show gradient progress indicator when loading

  5. Disabled states — verify icons dim to White32, borders become transparent

@jvsena42 jvsena42 self-assigned this Apr 3, 2026
@jvsena42 jvsena42 added this to the 2.2.0 milestone Apr 3, 2026
@jvsena42
Copy link
Copy Markdown
Member Author

jvsena42 commented Apr 3, 2026

I tried using Haze library for the SecondaryButton but didn't get a good result

@jvsena42 jvsena42 marked this pull request as ready for review April 3, 2026 16:18
@claude
Copy link
Copy Markdown
Contributor

claude bot commented Apr 3, 2026

Code review

No issues found. Checked for bugs and CLAUDE.md compliance.

@jvsena42 jvsena42 enabled auto-merge April 3, 2026 23:56
@jvsena42 jvsena42 requested a review from ovitrif April 3, 2026 23:56
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.

1 participant