Files

T

Build and Publish Mana Loop Docker Image / build-and-publish (push) Successful in 8m47s

Details

feat(ui): complete Task 4 UI redesign — all sub-tasks 1-10

- Implemented complete design system with 40+ CSS custom properties
- Created 9 UI primitives (GameCard, SectionHeader, StatRow, ManaBar, ElementBadge, ValueDisplay, ActionButton, SkillRow, TooltipInfo)
- Redesigned all tabs: Spire, Skills, Stats, Equipment, Crafting, Attunements, Golemancy, Spells, Loot, Achievements, Lab, Debug
- Added toast notification system (GameToast) with success/warning/error/info types
- Added confirmation dialogs for destructive actions
- Removed all dev artifacts and component name labels
- Added empty states to all tabs
- Replaced emoji icons with Lucide React icons
- Added enchantPower placeholder to StatsTab and EquipmentTab
- Mobile audit passed at 375px viewport
- Build passes with 0 errors, lint passes with 0 errors

Sub-tasks completed:
- ST1: Design System Implementation
- ST2: Global Layout & Header
- ST3: Left Panel (Mana Display & Action Area)
- ST4: Skills Tab
- ST5: Spire Tab & Spire Mode UI
- ST6: Stats Tab
- ST7: Equipment & Crafting Tabs
- ST8: Attunements Tab
- ST9: Remaining Tabs
- ST10: Toast System & Confirmation Dialogs

Documentation: 15+ files in docs/task4/

2026-04-28 11:38:45 +02:00

1.2 KiB

Raw Blame History

Sub-task 3: Enhance ActionButtons Component

Scope

Refactor the ActionButtons component to use the new design system primitives and improve the action button UI.

Key Deliverables:

Update ActionButtons to use ActionButton primitive for all buttons
Apply proper variant usage (primary, secondary, danger, ghost)
Add consistent spacing and layout using design system tokens
Ensure proper hover/active states with 100ms ease transitions

Acceptance Criteria

All buttons use ActionButton primitive
Correct variant applied based on action type:
- Primary CTA: Gather, Study, Climb (variant="primary")
- Secondary: Cancel, Back (variant="secondary")
- Danger: Reset actions (variant="danger")
Progress indicators use Progress primitive
No raw hex values - all colors use CSS variables
Proper spacing using 4px base unit system

Dependencies

ST1 (Sub-task 1) - Must be completed first (design system must exist)

Status

🟡 PENDING - Waiting for ST1 completion

Notes

Component location: src/components/game/ActionButtons.tsx
Currently shows current action with progress
Should work in both normal mode and Spire Mode
Hide buttons when in Spire Mode (already implemented, verify)

1.2 KiB Raw Blame History