Five polish fixes for Writer + Reader tabs
1. Larger Moleskine book + bigger title font
Current: `w-[110px] sm:w-[150px]`, title `text-xs`
Change to: `w-[130px] sm:w-[180px]`, title `text-sm sm:text-base font-bold`
The book should feel substantial, not tiny. Title should be readable at a glance.
2. Use 4-box grid for Plots, Holders, Views, Created
Replace the inline label:value list with a 2×2 grid of mini stat boxes:
```
┌────────┐ ┌────────┐
│ 4 │ │ 2 │
│ Plots │ │ Holders│
└────────┘ └────────┘
┌────────┐ ┌────────┐
│ 29 │ │ Mar 26 │
│ Views │ │ Created│
└────────┘ └────────┘
```
Each box: number on top (font-medium, foreground), label below (muted, smaller). Light border or subtle background (`bg-surface` or `border border-border`). Use `grid grid-cols-2 gap-2`.
Keep `active` badge separate — place it above or below the grid, not inside a box.
3. Right-side info vertically centered to book
Add `items-center` to the flex row so the info area is vertically centered against the Moleskine book height:
```tsx
\`\`\`
4. Writer Stats — dashboard look
Current Writer Stats is a plain bordered box with inline text. Make it feel more like a mini dashboard:
```
WRITER STATS
┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐
│ 1 │ │ 4 │ │ 2 │ │ 29 │
│ Stories│ │ Plots │ │ Holders│ │ Views │
└────────┘ └────────┘ └────────┘ └────────┘
Received: 150.00 PLOT ($2.64)
```
Use `grid grid-cols-4` (or `grid-cols-2 sm:grid-cols-4`) for the 4 stat boxes. Same box style as the per-story stat boxes. "Received" stays as a full-width row below.
5. Apply same changes to Reader tab
- Larger Moleskine book (same size as Writer)
- Info vertically centered to book
- Use `/frontend-design` skill
Files to modify
- `src/app/profile/[address]/page.tsx` — Writer + Reader tabs
Branch
`task/736-moleskine-v8`
Self-Verification (T3)
Five polish fixes for Writer + Reader tabs
1. Larger Moleskine book + bigger title font
Current: `w-[110px] sm:w-[150px]`, title `text-xs`
Change to: `w-[130px] sm:w-[180px]`, title `text-sm sm:text-base font-bold`
The book should feel substantial, not tiny. Title should be readable at a glance.
2. Use 4-box grid for Plots, Holders, Views, Created
Replace the inline label:value list with a 2×2 grid of mini stat boxes:
```
┌────────┐ ┌────────┐
│ 4 │ │ 2 │
│ Plots │ │ Holders│
└────────┘ └────────┘
┌────────┐ ┌────────┐
│ 29 │ │ Mar 26 │
│ Views │ │ Created│
└────────┘ └────────┘
```
Each box: number on top (font-medium, foreground), label below (muted, smaller). Light border or subtle background (`bg-surface` or `border border-border`). Use `grid grid-cols-2 gap-2`.
Keep `active` badge separate — place it above or below the grid, not inside a box.
3. Right-side info vertically centered to book
Add `items-center` to the flex row so the info area is vertically centered against the Moleskine book height:
```tsx
4. Writer Stats — dashboard look
Current Writer Stats is a plain bordered box with inline text. Make it feel more like a mini dashboard:
```
WRITER STATS
┌────────┐ ┌────────┐ ┌────────┐ ┌────────┐
│ 1 │ │ 4 │ │ 2 │ │ 29 │
│ Stories│ │ Plots │ │ Holders│ │ Views │
└────────┘ └────────┘ └────────┘ └────────┘
Received: 150.00 PLOT ($2.64)
```
Use `grid grid-cols-4` (or `grid-cols-2 sm:grid-cols-4`) for the 4 stat boxes. Same box style as the per-story stat boxes. "Received" stays as a full-width row below.
5. Apply same changes to Reader tab
Files to modify
Branch
`task/736-moleskine-v8`
Self-Verification (T3)