Parent: #877
Problem
Current streak UI is a minimal progress bar with text — doesn't feel engaging or rewarding. Needs a visual design that makes users want to maintain their streak.
Design Reference
Inspired by streak cards with weekly calendar dots (see Duolingo/habit tracker style):
┌─────────────────────────────────────────────────┐
│ │
│ ⚡ 12 Days Streak │
│ Current boost: +10% │
│ │
│ ┌───────────────────────────────────────┐ │
│ │ Mon Tue Wed Thu Fri Sat Sun │ │
│ │ ✓ ✓ ✓ ✓ ✓ ✓ 🔥 │ │
│ └───────────────────────────────────────┘ │
│ │
│ [Check In] │
│ │
│ ── Boost Tiers ────────────────────────── │
│ 7+ days +5% ✓ unlocked │
│ 14+ days +10% ← current │
│ 30+ days +20% │
│ 50+ days +30% │
│ 100+ days +50% │
│ │
│ Boost applies to all PL point earnings. │
│ Miss a day? Drop one tier (not full reset). │
└─────────────────────────────────────────────────┘
Components
1. Streak header
- Lightning bolt icon (⚡) + streak count in bold
- Current boost % displayed prominently
- Adapt to PlotLink cream/brown palette (not the purple/orange from reference)
2. Weekly calendar row
- 7 circles for the current week (Mon-Sun)
- Checked-in days: filled circle with ✓
- Today (if checked in): 🔥 fire emoji
- Today (not yet checked in): pulsing empty circle
- Future days: empty circles
- Past missed days: dimmed/grey circles
3. Check In button
- Prominent button, triggers SIWE signature
- Disabled with "Checked in today ✓" after daily sign
- PlotLink brown accent color
4. Boost tiers table
- List all 5 tiers with streak threshold, boost %, and status
- Status indicators:
- ✓ unlocked (tiers below current)
- ← current (active tier, highlighted)
- (empty) locked (tiers above current)
- Brief explanation: "Boost applies to all PL point earnings. Miss a day? Drop one tier (not full reset)."
Color palette
Stay within PlotLink's Moleskine theme:
- Card background: slightly darker cream or subtle border
- Active/fire accent:
#8B4513 (PlotLink brown) or warm amber
- Checked circles: brown fill
- Empty circles: light brown border
- No purple/orange from the reference — adapt to cream/brown
Files
src/components/airdrop/StreakCard.tsx — full redesign
Acceptance Criteria
Parent: #877
Problem
Current streak UI is a minimal progress bar with text — doesn't feel engaging or rewarding. Needs a visual design that makes users want to maintain their streak.
Design Reference
Inspired by streak cards with weekly calendar dots (see Duolingo/habit tracker style):
Components
1. Streak header
2. Weekly calendar row
3. Check In button
4. Boost tiers table
Color palette
Stay within PlotLink's Moleskine theme:
#8B4513(PlotLink brown) or warm amberFiles
src/components/airdrop/StreakCard.tsx— full redesignAcceptance Criteria