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

24
frontend/src/components/step-library/StepCard.tsx
View File

@@ -15,9 +15,9 @@ const stepTypeIcons = {
}
const stepTypeColors = {
decision: 'bg-blue-500/20 text-blue-600 dark:text-blue-400 border-blue-500/30',
action: 'bg-yellow-500/20 text-yellow-600 dark:text-yellow-400 border-yellow-500/30',
solution: 'bg-green-500/20 text-green-600 dark:text-green-400 border-green-500/30'
decision: 'bg-blue-400/10 text-blue-400 border-blue-400/20',
action: 'bg-yellow-400/10 text-yellow-400 border-yellow-400/20',
solution: 'bg-emerald-400/10 text-emerald-400 border-emerald-400/20'
}
export function StepCard({ step, onPreview, onInsert }: StepCardProps) {
@@ -27,7 +27,7 @@ export function StepCard({ step, onPreview, onInsert }: StepCardProps) {
const remainingTags = step.tags.length - 3
return (
<div className="group rounded-lg border border-border bg-card p-4 transition-shadow hover:shadow-md">
<div className="group rounded-lg border border-white/[0.06] bg-[#0a0a0a] p-4 transition-shadow hover:shadow-md">
{/* Header */}
<div className="mb-3 flex items-start justify-between gap-2">
<div className="flex-1">
@@ -45,19 +45,19 @@ export function StepCard({ step, onPreview, onInsert }: StepCardProps) {
{/* Featured Badge */}
{step.is_featured && (
<span className="rounded bg-amber-500/20 px-2 py-0.5 text-xs font-medium text-amber-600 dark:text-amber-400">
<span className="rounded bg-yellow-400/10 px-2 py-0.5 text-xs font-medium text-yellow-400">
Featured
</span>
)}
</div>
{/* Title */}
<h3 className="font-semibold text-foreground line-clamp-2">{step.title}</h3>
<h3 className="font-semibold text-white line-clamp-2">{step.title}</h3>
</div>
</div>
{/* Metadata */}
<div className="mb-3 space-y-1.5 text-sm text-muted-foreground">
<div className="mb-3 space-y-1.5 text-sm text-white/40">
{/* Category */}
{step.category_name && (
<div className="flex items-center gap-1.5">
@@ -103,7 +103,7 @@ export function StepCard({ step, onPreview, onInsert }: StepCardProps) {
{visibleTags.map(tag => (
<span
key={tag}
className="rounded-full bg-muted px-2 py-0.5 text-xs text-muted-foreground"
className="rounded-full bg-white/10 px-2 py-0.5 text-xs text-white/70"
>
{tag}
</span>
@@ -121,8 +121,8 @@ export function StepCard({ step, onPreview, onInsert }: StepCardProps) {
<button
onClick={() => onPreview(step)}
className={cn(
'flex flex-1 items-center justify-center gap-2 rounded-md border border-input bg-background px-3 py-2 text-sm font-medium',
'hover:bg-accent hover:text-accent-foreground transition-colors'
'flex flex-1 items-center justify-center gap-2 rounded-md border border-white/10 px-3 py-2 text-sm font-medium text-white/60',
'hover:bg-white/10 hover:text-white transition-colors'
)}
>
<Eye className="h-4 w-4" />
@@ -131,8 +131,8 @@ export function StepCard({ step, onPreview, onInsert }: StepCardProps) {
<button
onClick={() => onInsert(step)}
className={cn(
'flex flex-1 items-center justify-center gap-2 rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground',
'hover:bg-primary/90 transition-colors'
'flex flex-1 items-center justify-center gap-2 rounded-md bg-white px-3 py-2 text-sm font-medium text-black',
'hover:bg-white/90 transition-colors'
)}
>
<Plus className="h-4 w-4" />