80 lines
1.8 KiB
Markdown
80 lines
1.8 KiB
Markdown
# Story 9.4: Component Styling - Buttons
|
|
|
|
## Epic Reference
|
|
**Epic 9:** Design & Branding Implementation
|
|
|
|
## User Story
|
|
As a **user**,
|
|
I want **consistent, professional button styling**,
|
|
So that **interactive elements are clear and visually appealing**.
|
|
|
|
## Acceptance Criteria
|
|
|
|
### Primary Button
|
|
- [ ] Background: Gold (#D4AF37)
|
|
- [ ] Text: Dark Navy Blue
|
|
- [ ] Hover: Light Gold (#F4E4B8)
|
|
- [ ] Border-radius: 6px
|
|
- [ ] Padding: 12px 24px
|
|
|
|
### Secondary Button
|
|
- [ ] Background: Transparent
|
|
- [ ] Border: 2px solid Gold
|
|
- [ ] Text: Gold
|
|
- [ ] Hover: Gold background, Navy text
|
|
|
|
### Disabled State
|
|
- [ ] Background: #CCCCCC
|
|
- [ ] Text: #666666
|
|
- [ ] No hover effect
|
|
- [ ] Cursor: not-allowed
|
|
|
|
### Danger Button
|
|
- [ ] Background: #E74C3C
|
|
- [ ] Text: White
|
|
|
|
### Features
|
|
- [ ] Loading states with spinner
|
|
- [ ] Focus states for accessibility
|
|
- [ ] Flux UI button integration
|
|
|
|
## Technical Notes
|
|
|
|
```css
|
|
/* Extend Flux UI buttons */
|
|
.btn-primary {
|
|
@apply bg-gold text-navy hover:bg-gold-light rounded-md px-6 py-3 font-semibold transition-colors;
|
|
}
|
|
|
|
.btn-secondary {
|
|
@apply bg-transparent border-2 border-gold text-gold hover:bg-gold hover:text-navy rounded-md px-6 py-3 font-semibold transition-colors;
|
|
}
|
|
|
|
.btn-danger {
|
|
@apply bg-danger text-white hover:bg-danger/90 rounded-md px-6 py-3 font-semibold transition-colors;
|
|
}
|
|
|
|
/* Loading state */
|
|
.btn-loading {
|
|
@apply relative pointer-events-none;
|
|
}
|
|
|
|
.btn-loading::after {
|
|
content: '';
|
|
@apply absolute inset-0 flex items-center justify-center;
|
|
/* Spinner styles */
|
|
}
|
|
```
|
|
|
|
## Definition of Done
|
|
- [ ] Primary button styled
|
|
- [ ] Secondary button styled
|
|
- [ ] Danger button styled
|
|
- [ ] Disabled states work
|
|
- [ ] Loading states work
|
|
- [ ] Focus states accessible
|
|
- [ ] Tests pass
|
|
|
|
## Estimation
|
|
**Complexity:** Medium | **Effort:** 3 hours
|