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 4: Enhance SkillsTab Component

Scope

Refactor the SkillsTab component to use the new design system primitives for skill display and study interface.

Key Deliverables:

Update SkillsTab to use GameCard, SectionHeader, SkillRow, StatRow primitives
Apply proper skill level dots with --mana-light color
Add proper study progress using Progress primitive (300ms linear transition)
Ensure skill categories are clearly separated with SectionHeader

Acceptance Criteria

Skill rows use SkillRow primitive component
Section headers use SectionHeader primitive
Study progress bars use Progress with proper styling
Skill level dots filled with --mana-light color
No raw hex values - all colors use CSS variables
Tab switch has 150ms fade-in transition

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/tabs/SkillsTab.tsx
Handles multiple skill categories (mana, study, enchanter, fabricator, invoker)
Shows skill tiers (T1-T5) with milestone upgrades
Study progress needs to animate smoothly

1.2 KiB Raw Blame History