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

feat: implement monochrome design system across entire frontend

Browse Source 
Migrate all 84 frontend files from the old themed/colored design to a
monochrome glass-morphism design system. Pure black backgrounds, white
text with opacity levels, glass-card components with backdrop-blur, and
functional color reserved for status indicators only.

Foundation: remap CSS variables to monochrome, simplify Tailwind config,
remove theme toggle, convert brand logo/wordmark to white. Pages: all
14 pages updated. Components: all common, library, session, step-library,
tree-editor, tree-preview, admin, and subscription components converted.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-02-09 21:41:29 -05:00
parent 1381aaae99
commit f4ce1595d6
88 changed files with 2976 additions and 1596 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
frontend/src/components/session/ContinuationModal.tsx
View File

@@ -45,7 +45,7 @@ export function ContinuationModal({
{/* Descendant Selection */}
{hasDescendants && (
<div>
<p className="mb-4 text-sm text-muted-foreground">
<p className="mb-4 text-sm text-white/70">
Select the next step in your troubleshooting path:
</p>
@@ -56,20 +56,20 @@ export function ContinuationModal({
onClick={() => onSelectNode(node.id)}
title={`From: ${node.parentOptionLabel}`}
className={cn(
'flex w-full items-center gap-3 rounded-lg border border-border p-3 text-left transition-colors',
'hover:border-primary hover:bg-accent'
'flex w-full items-center gap-3 rounded-lg border border-white/[0.06] p-3 text-left transition-colors',
'hover:border-white/20 hover:bg-white/10'
)}
>
<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-muted">
<div className="flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-white/10">
{nodeTypeIcons[node.type]}
</div>
<div className="min-w-0 flex-1">
<p className="truncate font-medium">{node.label}</p>
<p className="text-xs text-muted-foreground">
<p className="truncate font-medium text-white">{node.label}</p>
<p className="text-xs text-white/40">
{nodeTypeLabels[node.type]}
</p>
</div>
<ArrowRight className="h-4 w-4 flex-shrink-0 text-muted-foreground" />
<ArrowRight className="h-4 w-4 flex-shrink-0 text-white/40" />
</button>
))}
</div>
@@ -79,11 +79,11 @@ export function ContinuationModal({
{/* Divider */}
{hasDescendants && (
<div className="flex items-center gap-4">
<div className="h-px flex-1 bg-border" />
<span className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
<div className="h-px flex-1 bg-white/[0.06]" />
<span className="text-xs font-medium uppercase tracking-wide text-white/40">
Or
</span>
<div className="h-px flex-1 bg-border" />
<div className="h-px flex-1 bg-white/[0.06]" />
</div>
)}
@@ -100,17 +100,17 @@ export function ContinuationModal({
<GitBranch className="h-5 w-5 text-amber-500" />
</div>
<div className="flex-1">
<p className="font-medium">Build Custom Branch</p>
<p className="text-sm text-muted-foreground">
<p className="font-medium text-white">Build Custom Branch</p>
<p className="text-sm text-white/70">
Create your own troubleshooting path with custom steps
</p>
</div>
</button>
{/* Warning */}
<div className="mt-3 flex items-start gap-2 rounded-md bg-amber-500/10 p-3">
<AlertTriangle className="mt-0.5 h-4 w-4 flex-shrink-0 text-amber-500" />
<p className="text-sm text-amber-700 dark:text-amber-400">
<div className="mt-3 flex items-start gap-2 rounded-md bg-yellow-400/10 p-3">
<AlertTriangle className="mt-0.5 h-4 w-4 flex-shrink-0 text-yellow-400" />
<p className="text-sm text-yellow-400">
You'll need to complete this branch manually or mark the issue as resolved.
Custom branches can be saved as a personal tree when your session ends.
</p>