design: overhaul Edit Procedure page layout and color system
- Move procedure name into inline-editable toolbar input; replace static h1 - Toolbar now uses bg-sidebar for proper depth hierarchy vs bg-card config zone - Config zone (Details/Intake/Schedule accordions) gets explicit bg-card + border-b creating clear visual separation from the step canvas below - Step canvas switches to bg-page background for distinct work surface - Replace all hover:bg-accent (orange) with hover:bg-elevated or hover:bg-white/[0.08] throughout toolbar, accordion headers, step cards, and editor buttons - Fix step number badges: bg-accent (orange) → bg-white/[0.10] in StepList + StepEditor - Fix procedure_end step background: bg-accent/50 → bg-elevated/40 - CollapsibleEditorSection: hover:bg-accent/50 → hover:bg-white/[0.05] - Input fields in StepEditor: bg-card → bg-elevated for depth inside card surfaces - Move Content Type selector out of "More Options" into main step editor body - Rename "More Options" → "Advanced Options" for clarity - Replace Shield icon with ListOrdered for Steps section heading (semantic fix) - Bottom Add Step button: better contrast with border-white/20 + hover:bg-elevated/30 - Remove Name field from Details accordion (now lives in toolbar) - Update Details accordion summary: shows tags, visibility, description preview - Dirty indicator: "Unsaved changes" text → compact amber dot with tooltip Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
@@ -1,5 +1,5 @@
|
||||
import { useRef, useEffect, useCallback, type ReactNode } from 'react'
|
||||
import { Plus, GripVertical, Trash2, ChevronDown, CheckCircle2, AlertTriangle, Info, Zap, Shield, SeparatorHorizontal } from 'lucide-react'
|
||||
import { Plus, GripVertical, Trash2, ChevronDown, CheckCircle2, AlertTriangle, Info, Zap, ListOrdered, SeparatorHorizontal } from 'lucide-react'
|
||||
import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core'
|
||||
import type { DragEndEvent } from '@dnd-kit/core'
|
||||
import { SortableContext, sortableKeyboardCoordinates, verticalListSortingStrategy, useSortable } from '@dnd-kit/sortable'
|
||||
@@ -104,7 +104,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
|
||||
<div>
|
||||
<div className="mb-4 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Shield className="h-5 w-5 text-muted-foreground" />
|
||||
<ListOrdered className="h-5 w-5 text-muted-foreground" />
|
||||
<h2 className="text-lg font-semibold text-foreground">Steps</h2>
|
||||
<span className="text-sm text-muted-foreground">
|
||||
({procedureSteps.length} step{procedureSteps.length !== 1 ? 's' : ''}
|
||||
@@ -114,14 +114,14 @@ export function StepList({ onStepContextMenu }: StepListProps) {
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => addSectionHeader()}
|
||||
className="flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
className="flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-elevated hover:text-foreground"
|
||||
>
|
||||
<SeparatorHorizontal className="h-3.5 w-3.5" />
|
||||
Add Section
|
||||
</button>
|
||||
<button
|
||||
onClick={() => addStep()}
|
||||
className="flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
className="flex items-center gap-1.5 rounded-md border border-border px-3 py-1.5 text-sm text-muted-foreground hover:bg-elevated hover:text-foreground"
|
||||
>
|
||||
<Plus className="h-3.5 w-3.5" />
|
||||
Add Step
|
||||
@@ -138,7 +138,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
|
||||
return (
|
||||
<div
|
||||
key={step.id}
|
||||
className="flex items-center gap-2 rounded-lg border border-dashed border-border bg-accent/50 px-3 py-2"
|
||||
className="flex items-center gap-2 rounded-lg border border-dashed border-border bg-elevated/40 px-3 py-2"
|
||||
>
|
||||
<CheckCircle2 className="h-4 w-4 text-emerald-400/50" />
|
||||
<input
|
||||
@@ -238,7 +238,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
|
||||
<div
|
||||
className={cn(
|
||||
'group flex flex-col rounded-xl border border-border px-3 py-2.5 transition-colors',
|
||||
'hover:border-primary/30 hover:bg-accent/50',
|
||||
'hover:border-white/[0.15] hover:bg-elevated',
|
||||
isGhost && 'border-l-2 border-dashed border-l-primary/40! opacity-60'
|
||||
)}
|
||||
data-step-id={step.id}
|
||||
@@ -254,7 +254,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
|
||||
<GripVertical className="h-4 w-4" />
|
||||
</button>
|
||||
|
||||
<span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-accent text-xs font-medium text-muted-foreground">
|
||||
<span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-white/[0.10] text-xs font-medium text-muted-foreground">
|
||||
{stepNumber}
|
||||
</span>
|
||||
|
||||
@@ -277,7 +277,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
|
||||
|
||||
<button
|
||||
onClick={() => setExpandedStepId(step.id)}
|
||||
className="shrink-0 rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
|
||||
className="shrink-0 rounded p-1 text-muted-foreground hover:bg-elevated hover:text-foreground"
|
||||
>
|
||||
<ChevronDown className="h-3.5 w-3.5" />
|
||||
</button>
|
||||
@@ -324,7 +324,7 @@ export function StepList({ onStepContextMenu }: StepListProps) {
|
||||
{/* Add step button at bottom */}
|
||||
<button
|
||||
onClick={() => addStep()}
|
||||
className="mt-3 flex w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-border py-2 text-sm text-muted-foreground transition-colors hover:border-primary/30 hover:text-muted-foreground"
|
||||
className="mt-3 flex w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-white/20 py-2 text-sm text-muted-foreground transition-colors hover:border-primary/40 hover:bg-elevated/30 hover:text-foreground"
|
||||
>
|
||||
<Plus className="h-3.5 w-3.5" />
|
||||
Add Step
|
||||
|
||||
Reference in New Issue
Block a user