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.3 KiB

Raw Blame History

Sub-task 7: Enhance SpellsTab & LootTab

Scope

Refactor the SpellsTab and LootTab components to use the new design system primitives.

Key Deliverables:

Update SpellsTab to use GameCard, SectionHeader, ElementBadge primitives
Update LootTab to use GameCard, StatRow, ElementBadge primitives
Style spell cards with proper visual treatment
Add ElementBadge for spell element types
Ensure loot items are clearly displayed

Acceptance Criteria

Spell cards use GameCard with appropriate variant
Spell elements display using ElementBadge primitive
Loot items use GameCard with proper styling
Stat rows use StatRow primitive with highlighting
Section headers use SectionHeader primitive
No raw hex values - all colors use CSS variables
Active spell has proper highlight (--mana-light border)

Dependencies

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

Status

🟡 PENDING - Waiting for ST1 completion

Notes

SpellsTab location: src/components/game/tabs/SpellsTab.tsx
LootTab location: src/components/game/tabs/LootTab.tsx
Spells can be cast during combat
Loot includes essences from defeated enemies
Spell cards should show cast speed and damage

1.3 KiB Raw Blame History