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

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">