Skip to content

feat: enhance BountyCard component with hover effects, dark mode, accessibility#85

Open
tarai-dl wants to merge 1 commit into
gbabaisaac:mainfrom
tarai-dl:rn/bounty-card-component
Open

feat: enhance BountyCard component with hover effects, dark mode, accessibility#85
tarai-dl wants to merge 1 commit into
gbabaisaac:mainfrom
tarai-dl:rn/bounty-card-component

Conversation

@tarai-dl

Copy link
Copy Markdown

Summary

Enhances the Bounty Card component (#1) with improved hover effects, dark mode support, accessibility, and a richer demo page.

Changes

  • Hover effects: shadow-lg lift, border color shift to brand, subtle translate-y, title color change
  • Dark mode: Full dark mode support for difficulty badges, progress bar, cards, and text
  • Accessibility: aria-labels on card and progress bar, role=progressbar, keyboard navigation (Enter/Space)
  • Progress bar: Gradient styling, clamped to 0-100%, smooth transition animation
  • Demo page: Added difficulty variants section and progress states section showing all component variations
  • Responsive: sm:grid-cols-2, lg:grid-cols-3 grid layouts across breakpoints

Props

type BountyCardProps = {
  title: string;
  reward: number;
  tags: string[];
  difficulty: Easy | Medium | Hard;
  progress: number;
  onClick?: () => void;
};

Demo

Desktop and mobile responsive layout verified. No TypeScript errors in bounty-card files (pre-existing error in create-bounty-form.tsx is unrelated).

Closes #1

…essibility

- Add hover effects: shadow-lg, border color shift, slight translate-y, title color change
- Add full dark mode support for difficulty badges and all elements
- Add accessibility: aria-labels, role=progressbar, keyboard navigation support
- Clamp progress to 0-100 range
- Use gradient progress bar for visual polish
- Format reward with toLocaleString for large amounts
- Improve demo page with difficulty variants and progress state examples
- Add responsive grid layouts (1-2-3 columns across breakpoints)
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.

Bounty: Bounty Card Component

1 participant