Skip to content

[Airdrop] Redesign streak card with weekly calendar and boost tiers display #940

@realproject7

Description

@realproject7

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

  • Lightning bolt + streak count + boost % header
  • Weekly calendar with 7 day dots (✓, 🔥, empty, missed)
  • Check In button with SIWE, disabled after daily sign
  • Boost tiers table showing all 5 tiers with unlock status
  • Explanation text for boost mechanics and miss penalty
  • PlotLink brown/cream palette (no purple/orange)
  • Responsive on mobile

Metadata

Metadata

Assignees

No one assigned

    Labels

    agent/T3Assigned to T3 builder agentairdropPLOT 10x Airdrop CampaigndesignDesign and UI changes

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions