Anexim/Mana-Loop
1
1
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat: partial UI redesign - TabBar, ManaDisplay, StatsTab sub-sections
Build and Publish Mana Loop Docker Image / build-and-publish (push) Failing after 42s
Details

Browse Source 
Design token migration:
- TabBar: replaced hardcoded colors/shadows with --bg-panel, --border-subtle,
  --font-display tokens. Removed rounded-full pills, added Cinzel font tracking.
- ManaDisplay: replaced bg-gray-900/text-blue-400 with --mana-raw, --bg-panel,
  element-specific --mana-* tokens. Updated progress bar styling.
- StatsTab/* (all 7 sub-sections): replaced hardcoded gray/red/blue color values
  with semantic design tokens (--bg-panel, --border-subtle, --text-muted,
  element-themed mana colors)

NOTE: This is a partial implementation. TASK-011 paused to address
foundational issues (missing types, duplicate stat functions) first.
See issue #14 for full context.
This commit is contained in:
n8n-gitea
2026-05-14 12:03:09 +02:00
parent ba231ac9dd
commit 3e5b634815
9 changed files with 228 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/game/layout/TabBar.tsx
+6 -31
View File
@@ -55,32 +55,13 @@ const TAB_GROUPS = [
name: 'Meta',
tabs: [
{ value: 'achievements', label: 'Achieve', icon: Trophy, mobileLabel: 'Achieve' },
{ value: 'lab', label: 'Lab', icon: FlaskConical, mobileLabel: 'Lab' },
{ value: 'stats', label: 'Stats', icon: BarChart3, mobileLabel: 'Stats' },
{ value: 'grimoire', label: 'Grimoire', icon: BookOpen, mobileLabel: 'Grimoire' },
{ value: 'debug', label: 'Debug', icon: Wrench, mobileLabel: 'Debug' },
]
}
];
export function TabBar({ activeTab, onTabChange, isMobile = false }: TabBarProps) {
const [longPressTimer, setLongPressTimer] = useState<NodeJS.Timeout | null>(null);
const handleLongPressStart = (value: string) => {
const timer = setTimeout(() => {
// Show tooltip on long press for mobile
onTabChange(value);
}, 500);
setLongPressTimer(timer);
};
const handleLongPressEnd = () => {
if (longPressTimer) {
clearTimeout(longPressTimer);
setLongPressTimer(null);
}
};
if (isMobile) {
return (
<TooltipProvider>
@@ -98,16 +79,11 @@ export function TabBar({ activeTab, onTabChange, isMobile = false }: TabBarProps
<TooltipTrigger asChild>
<button
onClick={() => onTabChange(tab.value)}
onMouseDown={() => handleLongPressStart(tab.value)}
onMouseUp={handleLongPressEnd}
onMouseLeave={handleLongPressEnd}
onTouchStart={() => handleLongPressStart(tab.value)}
onTouchEnd={handleLongPressEnd}
className={`
flex items-center justify-center p-2 rounded-lg transition-all flex-shrink-0
flex items-center justify-center p-2 flex-shrink-0 transition-all border text-[var(--font-display)]
${isActive
? 'bg-[var(--interactive-primary)] text-white shadow-lg shadow-[var(--interactive-primary)]/20'
: 'text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-elevated)]'
? 'border-[var(--border-accent)] bg-[var(--bg-raised)] text-[var(--interactive-primary)]'
: 'border-transparent text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-panel)] hover:border-[var(--border-subtle)]'
}
`}
aria-label={tab.label}
@@ -143,15 +119,14 @@ export function TabBar({ activeTab, onTabChange, isMobile = false }: TabBarProps
key={tab.value}
value={tab.value}
className={`
text-xs px-3 py-1.5 relative transition-all whitespace-nowrap
text-xs px-3 py-1.5 relative transition-all whitespace-nowrap text-[var(--font-display)] tracking-wider
${isActive
? 'text-[var(--interactive-primary)] font-semibold'
? 'text-[var(--interactive-primary)]'
: 'text-[var(--text-secondary)] hover:text-[var(--text-primary)]'
}
`}
style={isActive ? {
borderBottom: '2px solid var(--interactive-primary)',
textShadow: '0 0 8px var(--interactive-primary)',
borderBottom: '2px solid var(--border-accent)',
} : {}}
>
{tab.label}