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

12
frontend/src/components/tree-preview/TreePreviewPanel.tsx
View File

@@ -56,7 +56,7 @@ export function TreePreviewPanel() {
if (!treeStructure) {
return (
<div className="flex h-full items-center justify-center p-4 text-sm text-muted-foreground">
<div className="flex h-full items-center justify-center p-4 text-sm text-white/40">
No tree structure to preview
</div>
)
@@ -65,11 +65,11 @@ export function TreePreviewPanel() {
return (
<div className="flex h-full flex-col">
{/* Header */}
<div className="border-b border-border bg-background px-4 py-2">
<h3 className="text-sm font-semibold text-foreground">
<div className="border-b border-white/[0.06] px-4 py-2">
<h3 className="text-sm font-semibold text-white">
Preview: {name || 'Untitled Tree'}
</h3>
<p className="text-xs text-muted-foreground">
<p className="text-xs text-white/40">
Click a node to select • Hover options to highlight targets
</p>
</div>
@@ -91,8 +91,8 @@ export function TreePreviewPanel() {
</div>
{/* Legend */}
<div className="border-t border-border bg-background px-4 py-2">
<div className="flex flex-wrap gap-4 text-xs text-muted-foreground">
<div className="border-t border-white/[0.06] px-4 py-2">
<div className="flex flex-wrap gap-4 text-xs text-white/40">
<div className="flex items-center gap-1">
<div className="h-3 w-3 rounded bg-blue-500/50" />
<span>Decision</span>