Skip to content

feat: add reusable Button component with variants and replace 20+ instances#834

Open
zeroknowledge0x wants to merge 1 commit into
Devsol-01:mainfrom
zeroknowledge0x:fix/button-component
Open

feat: add reusable Button component with variants and replace 20+ instances#834
zeroknowledge0x wants to merge 1 commit into
Devsol-01:mainfrom
zeroknowledge0x:fix/button-component

Conversation

@zeroknowledge0x
Copy link
Copy Markdown

Summary

Create a standardized, reusable Button component and replace inline button styles across the codebase.

Changes

New: Button.tsx component

  • 5 variants: primary, secondary, outline, ghost, danger
  • 3 sizes: sm, md, lg
  • Loading state with animated spinner
  • Icon support (left/right)
  • Full-width option
  • Disabled states with proper styling
  • Matches existing Nestera design system (cyan color palette, rounded-xl borders)

Replaced 20+ button instances across 15 files:

  • FeaturedGoalCard.tsx - Contribute Now, View Details
  • GoalCard.tsx - Contribute
  • GoalOverviewCard.tsx - Edit Goal, Add Funds
  • PassedProposalCard.tsx - View details
  • ProposalCard.tsx - Vote Now (desktop + mobile)
  • SavingsPoolCard.tsx - Deposit
  • SettingsClient.tsx - Save Preferences
  • portfolio/page.tsx - Export CSV
  • referrals/page.tsx - Copy
  • transactions/page.tsx - Export CSV
  • notifications/page.tsx - Mark all read
  • savings-pools/page.tsx - Create New Goal, Clear Search
  • savings/page.tsx - View Templates
  • GoalForm.tsx - Create goal
  • support/page.tsx - Send Message

Testing

  • All existing button behavior preserved
  • Loading states work correctly
  • Disabled states properly styled
  • Icons render in correct positions

Fixes #828

Create a standardized Button component with:
- 5 variants: primary, secondary, outline, ghost, danger
- 3 sizes: sm, md, lg
- Loading state with spinner
- Left/right icon support
- Full-width option
- Proper disabled states

Replace inline button styles across 15 files:
- FeaturedGoalCard, GoalCard, GoalOverviewCard
- PassedProposalCard, ProposalCard, SavingsPoolCard
- Settings, Portfolio, Referrals, Transactions
- Notifications, Savings Pools, Savings, Support, GoalForm

Fixes Devsol-01#828
@vercel
Copy link
Copy Markdown

vercel Bot commented May 30, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
nestera Error Error May 30, 2026 8:29am

@zeroknowledge0x
Copy link
Copy Markdown
Author

Hi! 👋 I noticed the CI checks are showing as unstable. Looking at the workflow history, the Backend CI/CD Pipeline has been failing on the main branch as well (the merge of PR #819 also failed). These appear to be pre-existing CI issues unrelated to this PR's changes.

Would appreciate a review when you get a chance. Thanks! 🙏

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.

[Frontend] -- Create Reusable Button Component System

1 participant