Problems
1. Milestone labels overlap at left edge
On a linear scale from $0→$100M, the $1M marker sits at 1% and $10M at 10%. This causes the $1M and $10M desktop labels to overlap and clip outside the container. The first two milestones are crammed into a tiny sliver on the left.
Screenshot shows: "$1M unlocks 10%" and "$10M unlocks 30%" labels overlapping at the far left, with a huge empty gap between $10M and $50M.
Fix options:
Option A (recommended): Use logarithmic scale — `log10(mcap)` for X positions. This spreads $1M/$10M/$50M/$100M more evenly across the chart width.
- $1M → 16.7% of width
- $10M → 50% of width
- $50M → 83.3% of width
- $100M → 100% of width
Option B: Use fixed equal spacing — Place milestones at 25%/50%/75%/100% regardless of actual MCap value. Simpler but less accurate.
2. Neon green (`#00ff88`) color doesn't match site aesthetic
The chart uses hardcoded `#00ff88` for:
- Fill gradient (`stopColor="#00ff88"`)
- Current MCap line (`stroke="#00ff88"`)
- Heartbeat dot (`bg-accent` is fine but the SVG elements are hardcoded)
The site uses CSS custom properties for its accent color (warm green/brown palette). The neon green clashes with the terminal-aesthetic warm tones.
Fix: Use `var(--accent)` via CSS or match the existing accent hex. Check `globals.css` for the actual accent color value and use that consistently.
3. Add left padding to prevent label clipping
The labels at $1M position extend beyond the chart's left boundary. Add padding or ensure labels are constrained within the container.
Files
- `src/components/airdrop/CampaignHero.tsx` — `MCapChart` component
- `src/app/globals.css` — check accent color value
Acceptance Criteria
Problems
1. Milestone labels overlap at left edge
On a linear scale from $0→$100M, the $1M marker sits at 1% and $10M at 10%. This causes the $1M and $10M desktop labels to overlap and clip outside the container. The first two milestones are crammed into a tiny sliver on the left.
Screenshot shows: "$1M unlocks 10%" and "$10M unlocks 30%" labels overlapping at the far left, with a huge empty gap between $10M and $50M.
Fix options:
Option A (recommended): Use logarithmic scale — `log10(mcap)` for X positions. This spreads $1M/$10M/$50M/$100M more evenly across the chart width.
Option B: Use fixed equal spacing — Place milestones at 25%/50%/75%/100% regardless of actual MCap value. Simpler but less accurate.
2. Neon green (`#00ff88`) color doesn't match site aesthetic
The chart uses hardcoded `#00ff88` for:
The site uses CSS custom properties for its accent color (warm green/brown palette). The neon green clashes with the terminal-aesthetic warm tones.
Fix: Use `var(--accent)` via CSS or match the existing accent hex. Check `globals.css` for the actual accent color value and use that consistently.
3. Add left padding to prevent label clipping
The labels at $1M position extend beyond the chart's left boundary. Add padding or ensure labels are constrained within the container.
Files
Acceptance Criteria