chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: design system v4 polish — home icon, mobile hamburger, contrast, font-label cleanup

Browse Source 
- Home sidebar icon: always cyan, bg-accent-dim only when route is "/"
- Mobile TopBar: add left padding so hamburger isn't hidden behind logo
- Landing page: bump card border color (#1e2130 → #2a2f3d) for better contrast
- Replace all font-label references (40 occurrences, 19 files) with font-mono or font-sans
- Remove deprecated --font-label CSS variable from index.css
- Convert hardcoded hex in layout inline styles to CSS variables (light-mode ready)
- Add @types/react-syntax-highlighter for script builder types

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-03-22 19:19:44 +00:00
parent 83a27b4d9a
commit 2bcd3e2f3c
26 changed files with 84 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/components/editor-ai/NodeSummary.tsx
View File

@@ -29,7 +29,7 @@ export function NodeSummary({ node, flowName, flowType, nodeCount }: NodeSummary
{flowName || 'Untitled Flow'}
</span>
</div>
<div className="mt-1 flex items-center gap-3 font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
<div className="mt-1 flex items-center gap-3 font-sans text-[0.625rem] uppercase tracking-widest text-muted-foreground">
<span>{flowType || 'flow'}</span>
{nodeCount !== undefined && <span>{nodeCount} nodes</span>}
</div>
@@ -44,7 +44,7 @@ export function NodeSummary({ node, flowName, flowType, nodeCount }: NodeSummary
<div className="border-b px-3 py-2.5" style={{ borderColor: 'var(--glass-border)' }}>
<div className="flex items-center gap-2">
<Icon className={`h-3.5 w-3.5 ${colorClass}`} />
<span className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
<span className="font-sans text-[0.625rem] uppercase tracking-widest text-muted-foreground">
{node.type}
</span>
</div>

4
frontend/src/components/editor-ai/SuggestionsTab.tsx
View File

@@ -28,7 +28,7 @@ export function SuggestionsTab({ suggestions }: SuggestionsTabProps) {
return (
<div key={s.id} className="rounded-lg border border-border bg-card px-3 py-2">
<div className="flex items-center justify-between">
<span className="font-label text-[0.625rem] uppercase tracking-widest text-muted-foreground">
<span className="font-sans text-[0.625rem] uppercase tracking-widest text-muted-foreground">
{s.action_type.replace(/_/g, ' ')}
</span>
<span className={`flex items-center gap-1 text-xs ${config.color}`}>
@@ -39,7 +39,7 @@ export function SuggestionsTab({ suggestions }: SuggestionsTabProps) {
{s.target_node_id && (
<p className="mt-1 text-xs text-muted-foreground truncate">Node: {s.target_node_id}</p>
)}
<p className="mt-0.5 font-label text-[0.625rem] text-text-muted">
<p className="mt-0.5 font-sans text-[0.625rem] text-text-muted">
{new Date(s.created_at).toLocaleDateString()}
</p>
</div>

2
frontend/src/components/guides/GuideCard.tsx
View File

@@ -24,7 +24,7 @@ export function GuideCard({ guide }: GuideCardProps) {
<p className="text-xs text-muted-foreground leading-relaxed">
{guide.summary}
</p>
<span className="mt-2 inline-block font-label text-[0.625rem] uppercase tracking-widest text-primary">
<span className="mt-2 inline-block font-sans text-[0.625rem] uppercase tracking-widest text-primary">
{guide.sections.length} {guide.sections.length === 1 ? 'section' : 'sections'}
</span>
</div>

2
frontend/src/components/guides/GuideSection.tsx
View File

@@ -18,7 +18,7 @@ export function GuideSection({ section, index }: GuideSectionProps) {
<ol className="space-y-3 pl-8">
{section.steps.map((step, i) => (
<li key={i} className="relative">
<span className="absolute -left-6 top-0.5 font-label text-[0.625rem] text-muted-foreground">
<span className="absolute -left-6 top-0.5 font-sans text-[0.625rem] text-muted-foreground">
{i + 1}.
</span>
<p

8
frontend/src/components/layout/AppLayout.tsx
View File

@@ -96,9 +96,9 @@ export function AppLayout() {
/>
<nav
className="absolute inset-y-0 left-0 w-72 shadow-2xl animate-slide-in-left"
style={{ background: '#0f1118', borderRight: '1px solid #1e2130' }}
style={{ background: 'var(--color-bg-sidebar)', borderRight: '1px solid var(--color-border-default)' }}
>
<div className="flex h-14 items-center justify-between px-4" style={{ borderBottom: '1px solid #1e2130' }}>
<div className="flex h-14 items-center justify-between px-4" style={{ borderBottom: '1px solid var(--color-border-default)' }}>
<Link to="/" className="flex items-center gap-2.5">
<BrandLogo size="sm" />
<span className="text-sm font-heading font-bold text-text-heading">ResolutionFlow</span>
@@ -115,7 +115,7 @@ export function AppLayout() {
<div className="flex flex-col p-3">
{/* User info */}
<div className="mb-3 pb-3 px-3" style={{ borderBottom: '1px solid #1e2130' }}>
<div className="mb-3 pb-3 px-3" style={{ borderBottom: '1px solid var(--color-border-default)' }}>
<p className="text-sm font-medium text-foreground">{user?.name || user?.email}</p>
{effectiveRole && effectiveRole !== 'engineer' && (
<span className="mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground">
@@ -151,7 +151,7 @@ export function AppLayout() {
</div>
{/* Logout */}
<div className="mt-3 pt-3" style={{ borderTop: '1px solid #1e2130' }}>
<div className="mt-3 pt-3" style={{ borderTop: '1px solid var(--color-border-default)' }}>
<button
type="button"
onClick={handleLogout}

8
frontend/src/components/layout/CommandPalette.tsx
View File

@@ -329,7 +329,7 @@ export function CommandPalette({ open, onClose }: CommandPaletteProps) {
placeholder="Search flows, ask a question, navigate…"
className="flex-1 bg-transparent text-sm text-foreground placeholder:text-muted-foreground outline-hidden"
/>
<kbd className="rounded border border-border bg-background px-1.5 py-0.5 font-label text-[0.625rem] text-muted-foreground">
<kbd className="rounded border border-border bg-background px-1.5 py-0.5 font-mono text-[0.625rem] text-muted-foreground">
ESC
</kbd>
</div>
@@ -354,7 +354,7 @@ export function CommandPalette({ open, onClose }: CommandPaletteProps) {
<div key={group.type}>
{/* Section label */}
<div className="px-3 pt-2 pb-1">
<span className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
<span className="font-sans text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
{group.label}
</span>
</div>
@@ -451,11 +451,11 @@ export function CommandPalette({ open, onClose }: CommandPaletteProps) {
{flatItems.length > 0 && (
<div className="flex items-center gap-4 border-t border-border px-4 py-2">
<span className="flex items-center gap-1 text-[0.625rem] text-muted-foreground">
<kbd className="rounded border border-border bg-background px-1 py-px font-label">↑↓</kbd>
<kbd className="rounded border border-border bg-background px-1 py-px font-mono">↑↓</kbd>
Navigate
</span>
<span className="flex items-center gap-1 text-[0.625rem] text-muted-foreground">
<kbd className="rounded border border-border bg-background px-1 py-px font-label">↵</kbd>
<kbd className="rounded border border-border bg-background px-1 py-px font-mono">↵</kbd>
Open
</span>
</div>

4
frontend/src/components/layout/NavItem.tsx
View File

@@ -87,7 +87,7 @@ export function NavItem({ href, icon: Icon, label, badge, iconColor, matchPaths,
badge === 'dot' ? (
<span className="ml-auto h-1.5 w-1.5 shrink-0 rounded-full bg-brand-gradient-from" />
) : (
<span className="ml-auto shrink-0 rounded-full bg-card border border-border px-2 text-[0.6875rem] font-label text-muted-foreground">
<span className="ml-auto shrink-0 rounded-full bg-card border border-border px-2 text-[0.6875rem] font-mono text-muted-foreground">
{badge}
</span>
)
@@ -117,7 +117,7 @@ export function NavItem({ href, icon: Icon, label, badge, iconColor, matchPaths,
>
<span className="truncate">{child.label}</span>
{child.count !== undefined && (
<span className="ml-auto shrink-0 rounded-full bg-card border border-border px-2 text-[0.6875rem] font-label text-muted-foreground">
<span className="ml-auto shrink-0 rounded-full bg-card border border-border px-2 text-[0.6875rem] font-mono text-muted-foreground">
{child.count}
</span>
)}

4
frontend/src/components/layout/QuickLaunch.tsx
View File

@@ -144,11 +144,11 @@ export function QuickLaunch({ open, onClose }: QuickLaunchProps) {
<div className="flex items-center gap-4 border-t border-border px-4 py-2">
<span className="flex items-center gap-1 text-[0.625rem] text-muted-foreground">
<kbd className="rounded border border-border bg-background px-1 py-px font-label">↑↓</kbd>
<kbd className="rounded border border-border bg-background px-1 py-px font-mono">↑↓</kbd>
Navigate
</span>
<span className="flex items-center gap-1 text-[0.625rem] text-muted-foreground">
<kbd className="rounded border border-border bg-background px-1 py-px font-label">↵</kbd>
<kbd className="rounded border border-border bg-background px-1 py-px font-mono">↵</kbd>
Open
</span>
</div>

35
frontend/src/components/layout/Sidebar.tsx
View File

@@ -241,6 +241,9 @@ export function Sidebar() {
const Icon = item.icon
const hasChildren = item.children && item.children.length > 0
// Home icon: always cyan icon, but only bg-accent-dim when route is exactly "/"
const isHome = item.href === '/' && item.shortLabel === 'Home'
return (
<div
key={key}
@@ -253,16 +256,20 @@ export function Sidebar() {
onFocus={() => hasChildren && !sidebarPinned ? openFlyout(key) : undefined}
className={cn(
'group relative flex flex-col items-center justify-center rounded-lg px-2 py-3 transition-all duration-150',
active
? 'bg-accent-dim text-accent-text'
: 'text-text-rail-label hover:text-muted-foreground'
isHome
? active
? 'bg-accent-dim text-accent-text'
: 'text-accent-text'
: active
? 'bg-accent-dim text-accent-text'
: 'text-text-rail-label hover:text-muted-foreground'
)}
title={item.label}
>
<span className="relative">
<Icon size={24} strokeWidth={1.6} className={active ? 'opacity-100' : 'opacity-60 group-hover:opacity-85'} />
<Icon size={24} strokeWidth={1.6} className={active || isHome ? 'opacity-100' : 'opacity-60 group-hover:opacity-85'} />
{item.badge !== undefined && item.badge > 0 && (
<span className="absolute -right-2 -top-1.5 flex h-4 min-w-[16px] items-center justify-center rounded-full bg-primary px-1 text-[0.5rem] font-bold text-[#0c0d10]">
<span className="absolute -right-2 -top-1.5 flex h-4 min-w-[16px] items-center justify-center rounded-full bg-primary px-1 text-[0.5rem] font-bold text-background">
{item.badge > 99 ? '99+' : item.badge}
</span>
)}
@@ -301,14 +308,14 @@ export function Sidebar() {
{active && !isParentDimmed && (
<div
className="absolute left-0 top-1/2 h-6 w-[3px] -translate-y-1/2"
style={{ background: '#22d3ee', borderRadius: '0 3px 3px 0' }}
style={{ background: 'var(--color-accent)', borderRadius: '0 3px 3px 0' }}
/>
)}
<Icon size={18} className={cn('shrink-0', active ? 'opacity-100' : 'opacity-70')} />
<span className="truncate">{item.label}</span>
{item.badge !== undefined && item.badge > 0 && (
<span className="ml-auto shrink-0 rounded-full px-2 text-[0.6875rem] font-mono text-text-muted"
style={{ background: '#14161d', border: '1px solid #1e2130' }}>
style={{ background: 'var(--color-bg-card)', border: '1px solid var(--color-border-default)' }}>
{item.badge}
</span>
)}
@@ -338,7 +345,7 @@ export function Sidebar() {
<span className="truncate">{child.label}</span>
{child.count !== undefined && (
<span className="ml-auto shrink-0 rounded-full px-2 text-[0.6875rem] font-mono text-text-muted"
style={{ background: '#14161d', border: '1px solid #1e2130' }}>
style={{ background: 'var(--color-bg-card)', border: '1px solid var(--color-border-default)' }}>
{child.count}
</span>
)}
@@ -365,7 +372,7 @@ export function Sidebar() {
<nav
ref={sidebarRef}
className="sidebar flex flex-col h-full"
style={{ background: '#0f1118', borderRight: '1px solid #1e2130' }}
style={{ background: 'var(--color-bg-sidebar)', borderRight: '1px solid var(--color-border-default)' }}
onWheel={handleWheel}
>
{/* Pinned sidebar content */}
@@ -385,7 +392,7 @@ export function Sidebar() {
<div className="flex-1" />
{/* Footer */}
<div className="px-3 pt-2 pb-4 space-y-0.5" style={{ borderTop: '1px solid #1e2130' }}>
<div className="px-3 pt-2 pb-4 space-y-0.5" style={{ borderTop: '1px solid var(--color-border-default)' }}>
{footerItems.map((item, i) => renderPinnedItem(item, `footer-${i}`))}
<button
type="button"
@@ -411,7 +418,7 @@ export function Sidebar() {
<nav
ref={sidebarRef}
className="sidebar flex flex-col items-center h-full shrink-0"
style={{ background: '#0f1118', borderRight: '1px solid #1e2130', width: '72px' }}
style={{ background: 'var(--color-bg-sidebar)', borderRight: '1px solid var(--color-border-default)', width: '72px' }}
onWheel={handleWheel}
>
{/* Grouped nav items */}
@@ -422,7 +429,7 @@ export function Sidebar() {
<div className="flex-1" />
{/* Footer: Account + Pin */}
<div className="flex flex-col items-center w-full px-1 pb-5 pt-3 space-y-1.5" style={{ borderTop: '1px solid #1e2130' }}>
<div className="flex flex-col items-center w-full px-1 pb-5 pt-3 space-y-1.5" style={{ borderTop: '1px solid var(--color-border-default)' }}>
{footerItems.map((item, i) => renderRailItem(item, `footer-${i}`))}
<button
type="button"
@@ -448,8 +455,8 @@ export function Sidebar() {
className="flex flex-col h-full overflow-y-auto py-4 px-2"
style={{
width: drawerWidth,
background: '#0f1118',
borderRight: '1px solid #1e2130',
background: 'var(--color-bg-sidebar)',
borderRight: '1px solid var(--color-border-default)',
boxShadow: '4px 0 12px rgba(0,0,0,0.2)',
}}
>

22
frontend/src/components/layout/TopBar.tsx
View File

@@ -55,10 +55,10 @@ export function TopBar() {
return (
<>
<header
className="topbar relative z-10 flex items-center gap-4 px-4"
className="topbar relative z-10 flex items-center gap-4 px-4 pl-14 md:pl-4"
style={{
background: '#0f1118',
borderBottom: '1px solid #1e2130',
background: 'var(--color-bg-sidebar)',
borderBottom: '1px solid var(--color-border-default)',
}}
>
{/* Logo area */}
@@ -85,17 +85,17 @@ export function TopBar() {
<div
className="w-full rounded-md py-2 pl-9 pr-14 text-[0.8125rem] text-muted-foreground cursor-pointer transition-colors"
style={{
background: '#14161d',
border: '1px solid #1e2130',
background: 'var(--color-bg-card)',
border: '1px solid var(--color-border-default)',
}}
onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.borderColor = '#2a2f3d' }}
onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.borderColor = '#1e2130' }}
onMouseEnter={(e) => { (e.currentTarget as HTMLElement).style.borderColor = 'var(--color-border-hover)' }}
onMouseLeave={(e) => { (e.currentTarget as HTMLElement).style.borderColor = 'var(--color-border-default)' }}
>
Search flows, sessions, tags...
</div>
<span
className="absolute right-3 top-1/2 -translate-y-1/2 rounded px-1.5 py-0.5 font-mono text-[0.625rem] text-text-muted"
style={{ background: '#0c0d10', border: '1px solid #1e2130' }}
style={{ background: 'var(--color-bg-page)', border: '1px solid var(--color-border-default)' }}
>
{navigator.platform?.toLowerCase().includes('mac') ? '\u2318K' : 'Ctrl+K'}
</span>
@@ -143,9 +143,9 @@ export function TopBar() {
{userMenuOpen && (
<div
className="absolute right-0 z-50 mt-2 w-56 rounded-lg p-1 shadow-xl animate-scale-in"
style={{ background: '#14161d', border: '1px solid #1e2130' }}
style={{ background: 'var(--color-bg-card)', border: '1px solid var(--color-border-default)' }}
>
<div className="px-3 py-2.5 mb-1" style={{ borderBottom: '1px solid #1e2130' }}>
<div className="px-3 py-2.5 mb-1" style={{ borderBottom: '1px solid var(--color-border-default)' }}>
<p className="text-sm font-medium text-foreground truncate">{user?.name || user?.email}</p>
{effectiveRole && effectiveRole !== 'engineer' && (
<span className="mt-1 inline-flex items-center gap-1 text-xs text-muted-foreground">
@@ -172,7 +172,7 @@ export function TopBar() {
Admin Panel
</Link>
)}
<div className="mt-1 pt-1" style={{ borderTop: '1px solid #1e2130' }}>
<div className="mt-1 pt-1" style={{ borderTop: '1px solid var(--color-border-default)' }}>
<button
onClick={handleLogout}
className={cn(

4
frontend/src/components/maintenance/BatchLaunchModal.tsx
View File

@@ -96,7 +96,7 @@ export function BatchLaunchModal({ treeId, treeName, onClose, onLaunched }: Batc
key={tab.id}
onClick={() => setActiveTab(tab.id)}
className={cn(
"flex items-center gap-1.5 px-3 py-2 font-label text-[0.6875rem] uppercase tracking-wide transition-colors",
"flex items-center gap-1.5 px-3 py-2 font-sans text-[0.6875rem] uppercase tracking-wide transition-colors",
activeTab === tab.id
? "border-b-2 border-primary text-foreground"
: "text-muted-foreground hover:text-foreground"
@@ -112,7 +112,7 @@ export function BatchLaunchModal({ treeId, treeName, onClose, onLaunched }: Batc
<div className="p-6">
{activeTab === 'manual' && (
<div className="space-y-2">
<label className="font-label text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
<label className="font-sans text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
Server names (one per line)
</label>
<textarea

2
frontend/src/components/maintenance/BatchStatusCard.tsx
View File

@@ -86,7 +86,7 @@ export function BatchStatusCard({ session, targetLabel, treeId, batchId }: Batch
<div className="flex items-center gap-2 mt-0.5">
{isComplete && session?.outcome && (
<span className={cn(
"font-label text-[0.625rem] uppercase tracking-wide rounded-full px-2 py-0.5",
"font-sans text-[0.625rem] uppercase tracking-wide rounded-full px-2 py-0.5",
OUTCOME_COLORS[session.outcome] ?? OUTCOME_COLORS.unresolved
)}>
{OUTCOME_LABELS[session.outcome] ?? session.outcome}

2
frontend/src/components/scripts/PowerShellHighlighter.tsx
View File

@@ -91,7 +91,7 @@ export function PowerShellHighlighter({ script, className }: Props) {
}
return (
<pre className={className ?? "font-label text-sm bg-card rounded-xl p-4 overflow-x-auto"}>
<pre className={className ?? "font-mono text-sm bg-card rounded-xl p-4 overflow-x-auto"}>
<code>{parts}</code>
</pre>
)

10
frontend/src/components/scripts/ScriptConfigurePane.tsx
View File

@@ -118,30 +118,30 @@ export function ScriptConfigurePane({ canGenerate, onBack }: Props) {
{selectedTemplate.requires_elevation && (
<span
title="Requires administrator elevation"
className="inline-flex items-center gap-1 font-label text-[0.625rem] uppercase tracking-wide px-1.5 py-0.5 rounded border text-amber-400 bg-amber-400/10 border-amber-400/20"
className="inline-flex items-center gap-1 font-sans text-[0.625rem] uppercase tracking-wide px-1.5 py-0.5 rounded border text-amber-400 bg-amber-400/10 border-amber-400/20"
>
<ShieldAlert size={11} />
Elevated
</span>
)}
<span className={cn(
'font-label text-[0.625rem] uppercase tracking-wide px-1.5 py-0.5 rounded border',
'font-sans text-[0.625rem] uppercase tracking-wide px-1.5 py-0.5 rounded border',
COMPLEXITY_CLASSES[selectedTemplate.complexity]
)}>
{selectedTemplate.complexity}
</span>
{categoryName && (
<span className="font-label text-[0.625rem] uppercase tracking-wide px-1.5 py-0.5 rounded border border-border text-muted-foreground bg-white/5">
<span className="font-sans text-[0.625rem] uppercase tracking-wide px-1.5 py-0.5 rounded border border-border text-muted-foreground bg-white/5">
{categoryName}
</span>
)}
{displayTags.map(tag => (
<span key={tag} className="font-label text-[0.625rem] px-1.5 py-0.5 rounded border border-border text-muted-foreground bg-white/5">
<span key={tag} className="font-sans text-[0.625rem] px-1.5 py-0.5 rounded border border-border text-muted-foreground bg-white/5">
{tag}
</span>
))}
{extraTagCount > 0 && (
<span className="font-label text-[0.625rem] text-muted-foreground">+{extraTagCount}</span>
<span className="font-sans text-[0.625rem] text-muted-foreground">+{extraTagCount}</span>
)}
</div>
</div>

4
frontend/src/components/scripts/ScriptFilterBar.tsx
View File

@@ -41,7 +41,7 @@ export function ScriptFilterBar({ inputValue, setInputValue }: Props) {
type="button"
onClick={() => setCategory(null)}
className={cn(
'font-label text-xs px-3 py-1.5 rounded-full border transition-all',
'font-sans text-xs px-3 py-1.5 rounded-full border transition-all',
activeCategoryId === null
? 'bg-primary/10 border-primary/30 text-foreground border-l-[3px] border-l-primary'
: 'border-border text-muted-foreground hover:border-[rgba(255,255,255,0.12)] hover:text-foreground'
@@ -55,7 +55,7 @@ export function ScriptFilterBar({ inputValue, setInputValue }: Props) {
type="button"
onClick={() => setCategory(cat.id)}
className={cn(
'font-label text-xs px-3 py-1.5 rounded-full border transition-all',
'font-sans text-xs px-3 py-1.5 rounded-full border transition-all',
activeCategoryId === cat.id
? 'bg-primary/10 border-primary/30 text-foreground border-l-[3px] border-l-primary'
: 'border-border text-muted-foreground hover:border-[rgba(255,255,255,0.12)] hover:text-foreground'

2
frontend/src/components/scripts/ScriptParameterForm.tsx
View File

@@ -57,7 +57,7 @@ export function ScriptParameterForm({ canGenerate }: Props) {
{ungrouped.map(renderParam)}
{groupOrder.map(group => (
<div key={group}>
<p className="font-label text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-3">
<p className="font-sans text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-3">
{group}
</p>
<div className="flex flex-col gap-4">

4
frontend/src/components/scripts/TemplateCard.tsx
View File

@@ -31,7 +31,7 @@ export function TemplateCard({ template, onConfigure }: Props) {
<ShieldAlert size={13} className="text-amber-400" />
</span>
)}
<span className={cn('font-label text-[0.625rem] uppercase tracking-wide px-1.5 py-0.5 rounded', COMPLEXITY_CLASSES[template.complexity])}>
<span className={cn('font-sans text-[0.625rem] uppercase tracking-wide px-1.5 py-0.5 rounded', COMPLEXITY_CLASSES[template.complexity])}>
{template.complexity}
</span>
</div>
@@ -44,7 +44,7 @@ export function TemplateCard({ template, onConfigure }: Props) {
)}
<div className="flex items-center justify-between gap-3">
<div className="flex items-center gap-3 text-[0.625rem] text-muted-foreground font-label">
<div className="flex items-center gap-3 text-[0.625rem] text-muted-foreground font-sans">
<span>{template.usage_count}× used</span>
{template.tags.length > 0 && (
<div className="flex gap-1 flex-wrap">

4
frontend/src/components/sidebar/ActivityItem.tsx
View File

@@ -91,12 +91,12 @@ export function ActivityItem({
{/* Ticket number or timestamp */}
{ticketNumber && !isRecent && (
<span className="shrink-0 font-label text-[0.5625rem] text-[#60a5fa]">
<span className="shrink-0 font-mono text-[0.5625rem] text-[#60a5fa]">
{ticketNumber}
</span>
)}
{isRecent && timestamp && (
<span className="shrink-0 font-label text-[0.5625rem] text-text-muted">
<span className="shrink-0 font-mono text-[0.5625rem] text-text-muted">
{formatRelativeTime(timestamp)}
</span>
)}

2
frontend/src/components/sidebar/CategoryList.tsx
View File

@@ -47,7 +47,7 @@ export function CategoryList({ categories, activeId, onSelect }: CategoryListPro
style={{ backgroundColor: cat.color }}
/>
<span className="flex-1 truncate text-left">{cat.name}</span>
<span className="font-label text-[0.6875rem] text-[var(--text-dimmed)]">{cat.count}</span>
<span className="font-mono text-[0.6875rem] text-[var(--text-dimmed)]">{cat.count}</span>
</button>
))}
{hasMore && (

2
frontend/src/components/sidebar/SidebarActivityFeed.tsx
View File

@@ -22,7 +22,7 @@ export function SidebarActivityFeed({
{/* Header */}
<div className="flex items-center gap-1.5 px-2.5 py-1 mb-0.5">
<Clock size={10} style={{ color: '#34d399' }} />
<span className="font-label text-[0.5625rem] uppercase tracking-[0.12em] text-text-muted">
<span className="font-sans text-[0.5625rem] uppercase tracking-[0.12em] text-text-muted">
Activity
</span>
</div>

12
frontend/src/components/sidebar/SidebarStatsBar.tsx
View File

@@ -55,36 +55,36 @@ export function SidebarStatsBar({ resolved, active, completedMinutes, activeSess
>
<div className="flex-1 rounded-md bg-[rgba(255,255,255,0.02)] px-1 py-1.5 text-center">
<div
className="font-label text-sm font-semibold leading-none"
className="font-mono text-sm font-semibold leading-none"
style={{ color: '#34d399' }}
aria-label={`${resolved} resolved today`}
>
{resolved}
</div>
<div className="mt-1 font-label text-[7px] uppercase tracking-[0.1em] text-text-muted">
<div className="mt-1 font-mono text-[7px] uppercase tracking-[0.1em] text-text-muted">
Resolved
</div>
</div>
<div className="flex-1 rounded-md bg-[rgba(255,255,255,0.02)] px-1 py-1.5 text-center">
<div
className="font-label text-sm font-semibold leading-none"
className="font-mono text-sm font-semibold leading-none"
style={{ color: '#22d3ee' }}
aria-label={`${active} active sessions`}
>
{active}
</div>
<div className="mt-1 font-label text-[7px] uppercase tracking-[0.1em] text-text-muted">
<div className="mt-1 font-mono text-[7px] uppercase tracking-[0.1em] text-text-muted">
Active
</div>
</div>
<div className="flex-1 rounded-md bg-[rgba(255,255,255,0.02)] px-1 py-1.5 text-center">
<div
className="font-label text-sm font-semibold leading-none text-muted-foreground"
className="font-mono text-sm font-semibold leading-none text-muted-foreground"
aria-label={`${formatDuration(totalSeconds)} total session time today`}
>
{formatDuration(totalSeconds)}
</div>
<div className="mt-1 font-label text-[7px] uppercase tracking-[0.1em] text-text-muted">
<div className="mt-1 font-mono text-[7px] uppercase tracking-[0.1em] text-text-muted">
Total Time
</div>
</div>

2
frontend/src/components/sidebar/TagCloud.tsx
View File

@@ -22,7 +22,7 @@ export function TagCloud({ tags, activeTags = [], onTagClick }: TagCloudProps) {
key={tag}
onClick={() => onTagClick(tag)}
className={cn(
'rounded-md border px-2 py-0.5 font-label text-[0.625rem] transition-colors',
'rounded-md border px-2 py-0.5 font-sans text-[0.625rem] transition-colors',
isActive
? 'border-primary/30 bg-primary/10 text-primary'
: 'border-border bg-card text-muted-foreground hover:border-primary/20 hover:text-foreground'

2
frontend/src/index.css
View File

@@ -73,7 +73,7 @@
--font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
--font-heading: 'Bricolage Grotesque', system-ui, sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--font-label: 'JetBrains Mono', monospace; /* deprecated — use font-mono for new code */
/* font-label removed — migrated to font-mono or font-sans */
/* ── Animations ────────────────────────────────── */
--animate-fade-in: fade-in 200ms ease-out;

10
frontend/src/styles/landing.css
View File

@@ -630,7 +630,7 @@
padding: 2rem;
border-radius: 16px;
background: #14161d;
border: 1px solid #1e2130;
border: 1px solid #2a2f3d;
transition: border-color 0.3s, transform 0.3s;
}
@@ -748,7 +748,7 @@
padding: 2rem;
border-radius: 16px;
background: #14161d;
border: 1px solid #1e2130;
border: 1px solid #2a2f3d;
position: relative;
counter-increment: landing-step;
transition: border-color 0.3s, transform 0.3s;
@@ -912,7 +912,7 @@
padding: 2rem;
border-radius: 16px;
background: #14161d;
border: 1px solid #1e2130;
border: 1px solid #2a2f3d;
transition: border-color 0.3s ease, transform 0.3s ease;
}
@@ -966,7 +966,7 @@
padding: 2.5rem 2rem;
border-radius: 16px;
background: #14161d;
border: 1px solid #1e2130;
border: 1px solid #2a2f3d;
transition: border-color 0.3s, transform 0.3s;
}
@@ -1080,7 +1080,7 @@
.landing-pricing-btn.outline {
color: #e2e5eb;
border: 1px solid #1e2130;
border: 1px solid #2a2f3d;
background: transparent;
}