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

139
frontend/src/pages/TreeNavigationPage.tsx
View File

@@ -267,7 +267,7 @@ export function TreeNavigationPage() {
if (isLoading) {
return (
<div className="flex h-64 items-center justify-center">
<div className="h-8 w-8 animate-spin rounded-full border-4 border-primary border-t-transparent" />
<div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" />
</div>
)
}
@@ -275,12 +275,12 @@ export function TreeNavigationPage() {
if (error || !tree) {
return (
<div className="container mx-auto px-4 py-8">
<div className="rounded-md bg-destructive/10 p-4 text-destructive">
<div className="rounded-md bg-red-400/10 p-4 text-red-400">
{error || 'Tree not found'}
</div>
<button
onClick={() => navigate('/trees')}
className="mt-4 text-primary hover:underline"
className="mt-4 text-white/50 hover:text-white hover:underline"
>
Back to trees
</button>
@@ -292,17 +292,17 @@ export function TreeNavigationPage() {
if (showMetadataForm) {
return (
<div className="container mx-auto max-w-lg px-4 py-8">
<h1 className="mb-2 text-2xl font-bold text-foreground">{tree.name}</h1>
<p className="mb-6 text-muted-foreground">{tree.description}</p>
<h1 className="mb-2 text-2xl font-bold text-white">{tree.name}</h1>
<p className="mb-6 text-white/40">{tree.description}</p>
<div className="space-y-4 rounded-lg border border-border bg-card p-6">
<h2 className="font-semibold text-card-foreground">Session Details</h2>
<p className="text-sm text-muted-foreground">
<div className="glass-card rounded-2xl space-y-4 p-6">
<h2 className="font-semibold text-white">Session Details</h2>
<p className="text-sm text-white/40">
Optional: Add ticket and client info for easier tracking
</p>
<div>
<label className="block text-sm font-medium text-foreground">
<label className="block text-sm font-medium text-white">
Ticket Number
</label>
<input
@@ -311,15 +311,15 @@ export function TreeNavigationPage() {
onChange={(e) => setTicketNumber(e.target.value)}
placeholder="e.g., INC0012345"
className={cn(
'mt-1 block w-full rounded-md border border-input bg-background px-3 py-2',
'text-foreground placeholder:text-muted-foreground',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
'mt-1 block w-full rounded-md border border-white/10 bg-black/50 px-3 py-2',
'text-white placeholder:text-white/40',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
)}
/>
</div>
<div>
<label className="block text-sm font-medium text-foreground">
<label className="block text-sm font-medium text-white">
Client Name
</label>
<input
@@ -328,9 +328,9 @@ export function TreeNavigationPage() {
onChange={(e) => setClientName(e.target.value)}
placeholder="e.g., Acme Corp"
className={cn(
'mt-1 block w-full rounded-md border border-input bg-background px-3 py-2',
'text-foreground placeholder:text-muted-foreground',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
'mt-1 block w-full rounded-md border border-white/10 bg-black/50 px-3 py-2',
'text-white placeholder:text-white/40',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
)}
/>
</div>
@@ -338,8 +338,8 @@ export function TreeNavigationPage() {
<button
onClick={startSession}
className={cn(
'w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
'hover:bg-primary/90'
'w-full rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
'hover:bg-white/90'
)}
>
Start Troubleshooting
@@ -352,7 +352,7 @@ export function TreeNavigationPage() {
if (!currentNode && !currentCustomStep) {
return (
<div className="container mx-auto px-4 py-8">
<div className="rounded-md bg-destructive/10 p-4 text-destructive">
<div className="rounded-md bg-red-400/10 p-4 text-red-400">
Invalid tree structure
</div>
</div>
@@ -367,9 +367,9 @@ export function TreeNavigationPage() {
{/* Header */}
<div className="mb-6 flex items-center justify-between">
<div>
<h1 className="text-xl font-bold text-foreground">{tree.name}</h1>
<h1 className="text-xl font-bold text-white">{tree.name}</h1>
{(ticketNumber || clientName) && (
<p className="text-sm text-muted-foreground">
<p className="text-sm text-white/40">
{ticketNumber && `Ticket: ${ticketNumber}`}
{ticketNumber && clientName && ' · '}
{clientName && `Client: ${clientName}`}
@@ -378,7 +378,7 @@ export function TreeNavigationPage() {
</div>
<button
onClick={() => navigate('/sessions')}
className="rounded-md px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
className="rounded-md px-3 py-1.5 text-sm text-white/50 hover:bg-white/[0.06] hover:text-white"
>
Exit
</button>
@@ -392,12 +392,12 @@ export function TreeNavigationPage() {
const label = node?.question || node?.title || customStep?.step_data.title || nodeId
return (
<span key={nodeId} className="flex items-center gap-2 whitespace-nowrap">
{index > 0 && <span className="text-muted-foreground">→</span>}
{index > 0 && <span className="text-white/40">→</span>}
<span
className={cn(
index === pathTaken.length - 1
? 'font-medium text-foreground'
: 'text-muted-foreground'
? 'font-medium text-white'
: 'text-white/40'
)}
>
{label.length > 30 ? `${label.slice(0, 30)}...` : label}
@@ -408,15 +408,15 @@ export function TreeNavigationPage() {
</div>
{/* Current Node */}
<div className="rounded-lg border border-border bg-card p-6 shadow-sm">
<div className="glass-card rounded-2xl p-6 shadow-sm">
{/* Decision Node */}
{currentNode && currentNode.type === 'decision' && (
<>
<h2 className="mb-2 text-xl font-semibold text-card-foreground">
<h2 className="mb-2 text-xl font-semibold text-white">
{currentNode.question}
</h2>
{currentNode.help_text && (
<div className="mb-4 text-sm text-muted-foreground">
<div className="mb-4 text-sm text-white/50">
<MarkdownContent content={currentNode.help_text} />
</div>
)}
@@ -426,13 +426,13 @@ export function TreeNavigationPage() {
key={option.id}
onClick={() => handleSelectOption(option.id, option.label, option.next_node_id)}
className={cn(
'w-full rounded-md border border-input p-3 text-left transition-colors',
'hover:border-primary hover:bg-accent',
'w-full rounded-md border border-white/10 p-3 text-left text-white transition-colors',
'hover:border-white/30 hover:bg-white/[0.06]',
'flex items-center gap-3'
)}
>
{index < 9 && (
<span className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-muted text-xs font-medium text-muted-foreground">
<span className="flex h-6 w-6 shrink-0 items-center justify-center rounded bg-white/10 text-xs font-medium text-white/50">
{index + 1}
</span>
)}
@@ -443,7 +443,7 @@ export function TreeNavigationPage() {
{/* Previously-created custom steps at this node */}
{customStepFlow.customSteps.filter(cs => cs.inserted_after_node_id === currentNodeId).length > 0 && (
<div className="mt-2 space-y-2">
<p className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
<p className="text-xs font-medium uppercase tracking-wide text-white/40">
Your Custom Steps
</p>
{customStepFlow.customSteps
@@ -454,13 +454,12 @@ export function TreeNavigationPage() {
key={cs.id}
onClick={() => customStepFlow.handleNavigateToCustomStep(cs)}
className={cn(
'w-full rounded-md border border-purple-300 bg-purple-50 p-3 text-left transition-colors',
'hover:border-purple-500 hover:bg-purple-100',
'dark:border-purple-700 dark:bg-purple-900/20 dark:hover:border-purple-500 dark:hover:bg-purple-900/40',
'w-full rounded-md border border-purple-700 bg-purple-900/20 p-3 text-left text-white transition-colors',
'hover:border-purple-500 hover:bg-purple-900/40',
'flex items-center gap-3'
)}
>
<span className="flex-shrink-0 rounded-full bg-purple-100 px-2 py-0.5 text-xs font-medium text-purple-800 dark:bg-purple-900 dark:text-purple-100">
<span className="flex-shrink-0 rounded-full bg-purple-900 px-2 py-0.5 text-xs font-medium text-purple-100">
Custom
</span>
<span>{cs.step_data.title}</span>
@@ -472,7 +471,7 @@ export function TreeNavigationPage() {
{/* Add Custom Step Button */}
<button
onClick={() => customStepFlow.setShowCustomStepModal(true)}
className="mt-2 inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-sm text-primary hover:bg-primary/10"
className="mt-2 inline-flex items-center gap-1 rounded-md px-2 py-1.5 text-sm text-white/50 hover:bg-white/10 hover:text-white"
>
<Plus className="h-3.5 w-3.5" />
Add Custom Step
@@ -482,18 +481,18 @@ export function TreeNavigationPage() {
{/* Custom Step Node */}
{currentCustomStep && (
<div className="rounded-lg border border-purple-200 bg-purple-50 p-4 dark:border-purple-800 dark:bg-purple-900/20">
<div className="rounded-lg border border-purple-800 bg-purple-900/20 p-4">
{/* Custom Step Badge */}
<span className="mb-2 inline-block rounded-full bg-purple-100 px-2 py-1 text-xs font-medium text-purple-800 dark:bg-purple-900 dark:text-purple-100">
<span className="mb-2 inline-block rounded-full bg-purple-900 px-2 py-1 text-xs font-medium text-purple-100">
Custom Step
</span>
<h2 className="mb-2 text-xl font-semibold text-card-foreground">
<h2 className="mb-2 text-xl font-semibold text-white">
{currentCustomStep.step_data.title}
</h2>
{currentCustomStep.step_data.content.instructions && (
<div className="mb-4 text-muted-foreground">
<div className="mb-4 text-white/60">
<MarkdownContent content={currentCustomStep.step_data.content.instructions} />
</div>
)}
@@ -506,12 +505,12 @@ export function TreeNavigationPage() {
{currentCustomStep.step_data.content.commands && currentCustomStep.step_data.content.commands.length > 0 && (
<div className="mb-4">
<p className="mb-2 text-sm font-medium text-foreground">Commands:</p>
<p className="mb-2 text-sm font-medium text-white">Commands:</p>
<div className="space-y-2">
{currentCustomStep.step_data.content.commands.map((cmd, index) => (
<div key={index}>
<p className="mb-1 text-xs text-muted-foreground">{cmd.label}</p>
<code className="block rounded bg-muted p-2 text-sm font-mono">
<p className="mb-1 text-xs text-white/40">{cmd.label}</p>
<code className="block rounded bg-white/10 p-2 text-sm font-mono">
{cmd.command}
</code>
</div>
@@ -525,13 +524,13 @@ export function TreeNavigationPage() {
const targetNode = findNode(customStepFlow.pendingContinuationNodeId, tree?.tree_structure)
const targetLabel = targetNode?.question || targetNode?.title || 'next step'
return (
<div className="mt-6 border-t border-purple-200 pt-4 dark:border-purple-700">
<div className="mt-6 border-t border-purple-700 pt-4">
<button
type="button"
onClick={customStepFlow.handleContinueToDescendant}
className={cn(
'flex w-full items-center justify-between rounded-md bg-primary px-4 py-3 text-sm font-medium text-primary-foreground',
'hover:bg-primary/90'
'flex w-full items-center justify-between rounded-md bg-white px-4 py-3 text-sm font-medium text-black',
'hover:bg-white/90'
)}
>
<span>Continue to: {targetLabel.length > 50 ? `${targetLabel.slice(0, 50)}...` : targetLabel}</span>
@@ -543,16 +542,16 @@ export function TreeNavigationPage() {
{/* Custom Branch Controls */}
{customStepFlow.customBranchMode && (
<div className="mt-6 border-t border-purple-200 pt-4 dark:border-purple-700">
<p className="mb-3 text-sm text-amber-600 dark:text-amber-400">
<div className="mt-6 border-t border-purple-700 pt-4">
<p className="mb-3 text-sm text-amber-400">
Building custom branch - add steps until the issue is resolved
</p>
<div className="flex flex-wrap gap-3">
<button
onClick={() => customStepFlow.setShowCustomStepModal(true)}
className={cn(
'flex items-center gap-2 rounded-md border border-input px-4 py-2 text-sm font-medium',
'bg-background hover:bg-accent hover:text-accent-foreground'
'flex items-center gap-2 rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60',
'hover:bg-white/10 hover:text-white'
)}
>
<Plus className="h-4 w-4" />
@@ -578,22 +577,22 @@ export function TreeNavigationPage() {
{/* Action Node */}
{currentNode && currentNode.type === 'action' && (
<>
<h2 className="mb-2 text-xl font-semibold text-card-foreground">
<h2 className="mb-2 text-xl font-semibold text-white">
{currentNode.title}
</h2>
{currentNode.description && (
<div className="mb-4 text-muted-foreground">
<div className="mb-4 text-white/60">
<MarkdownContent content={currentNode.description} />
</div>
)}
{currentNode.commands && currentNode.commands.length > 0 && (
<div className="mb-4">
<p className="mb-2 text-sm font-medium text-foreground">Commands:</p>
<p className="mb-2 text-sm font-medium text-white">Commands:</p>
<div className="space-y-1">
{currentNode.commands.map((cmd, index) => (
<code
key={index}
className="block rounded bg-muted p-2 text-sm font-mono"
className="block rounded bg-white/10 p-2 text-sm font-mono"
>
{cmd}
</code>
@@ -602,7 +601,7 @@ export function TreeNavigationPage() {
</div>
)}
{currentNode.expected_outcome && (
<p className="mb-4 text-sm text-muted-foreground">
<p className="mb-4 text-sm text-white/40">
<strong>Expected outcome:</strong> {currentNode.expected_outcome}
</p>
)}
@@ -610,8 +609,8 @@ export function TreeNavigationPage() {
<button
onClick={() => handleContinue()}
className={cn(
'rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
'hover:bg-primary/90'
'rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
'hover:bg-white/90'
)}
>
Continue
@@ -624,22 +623,22 @@ export function TreeNavigationPage() {
{currentNode && currentNode.type === 'solution' && (
<>
<div className="mb-4 flex items-center gap-2">
<span className="rounded-full bg-green-100 px-2 py-1 text-xs font-medium text-green-800">
<span className="rounded-full bg-green-900/30 px-2 py-1 text-xs font-medium text-green-400">
Solution
</span>
</div>
<h2 className="mb-2 text-xl font-semibold text-card-foreground">
<h2 className="mb-2 text-xl font-semibold text-white">
{currentNode.title}
</h2>
{currentNode.description && (
<div className="mb-4 text-muted-foreground">
<div className="mb-4 text-white/60">
<MarkdownContent content={currentNode.description} />
</div>
)}
{currentNode.resolution_steps && currentNode.resolution_steps.length > 0 && (
<div className="mb-4">
<p className="mb-2 text-sm font-medium text-foreground">Resolution steps:</p>
<ol className="list-inside list-decimal space-y-1 text-sm text-muted-foreground">
<p className="mb-2 text-sm font-medium text-white">Resolution steps:</p>
<ol className="list-inside list-decimal space-y-1 text-sm text-white/40">
{currentNode.resolution_steps.map((step, index) => (
<li key={index}>{step}</li>
))}
@@ -660,8 +659,8 @@ export function TreeNavigationPage() {
)}
{/* Notes */}
<div className="mt-6 border-t border-border pt-4">
<label className="block text-sm font-medium text-foreground">
<div className="mt-6 border-t border-white/[0.06] pt-4">
<label className="block text-sm font-medium text-white">
Notes (optional)
</label>
<textarea
@@ -670,9 +669,9 @@ export function TreeNavigationPage() {
placeholder="Add any notes for this step..."
rows={2}
className={cn(
'mt-1 block w-full rounded-md border border-input bg-background px-3 py-2',
'text-foreground placeholder:text-muted-foreground',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
'mt-1 block w-full rounded-md border border-white/10 bg-black/50 px-3 py-2',
'text-white placeholder:text-white/40',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
)}
/>
</div>
@@ -681,7 +680,7 @@ export function TreeNavigationPage() {
{pathTaken.length > 1 && (
<button
onClick={handleGoBack}
className="mt-4 text-sm text-muted-foreground hover:text-foreground"
className="mt-4 text-sm text-white/50 hover:text-white"
>
← Go back
</button>
@@ -689,7 +688,7 @@ export function TreeNavigationPage() {
{/* Keyboard Shortcuts Hint */}
{currentNode && (
<div className="mt-4 border-t border-border pt-3 text-xs text-muted-foreground">
<div className="mt-4 border-t border-white/[0.06] pt-3 text-xs text-white/40">
<span className="font-medium">Keyboard:</span>{' '}
{currentNode.type === 'decision' && currentOptions.length > 0 && (
<span>1-{Math.min(currentOptions.length, 9)} select option</span>