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

refactor: migrate remaining pages to new design system

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-02-15 21:20:00 -05:00
parent 176fa51b57
commit 5e710fcffd
7 changed files with 186 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

138
frontend/src/pages/AccountSettingsPage.tsx
View File

@@ -130,7 +130,7 @@ export function AccountSettingsPage() {
if (isLoading) { if (isLoading) {
return ( return (
<div className="flex justify-center py-12"> <div className="flex justify-center py-12">
<div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" /> <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-foreground" />
</div> </div>
) )
} }
@@ -154,23 +154,23 @@ export function AccountSettingsPage() {
<div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8"> <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
<div className="mb-8"> <div className="mb-8">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Building2 className="h-8 w-8 text-white/50" /> <Building2 className="h-8 w-8 text-muted-foreground" />
<h1 className="text-2xl font-bold text-white sm:text-3xl">Account Settings</h1> <h1 className="text-2xl font-bold text-foreground sm:text-3xl">Account Settings</h1>
</div> </div>
<p className="mt-2 text-white/40"> <p className="mt-2 text-muted-foreground">
Manage your account, subscription, and team Manage your account, subscription, and team
</p> </p>
</div> </div>
<div className="max-w-3xl space-y-6"> <div className="max-w-3xl space-y-6">
{/* Account Info Section */} {/* Account Info Section */}
<div className="glass-card rounded-2xl p-4 sm:p-6"> <div className="bg-card border border-border rounded-xl p-4 sm:p-6">
<h2 className="text-lg font-semibold text-white">Account Information</h2> <h2 className="text-lg font-semibold text-foreground">Account Information</h2>
<div className="mt-4 space-y-4"> <div className="mt-4 space-y-4">
{/* Account Name */} {/* Account Name */}
<div> <div>
<label className="block text-sm font-medium text-white"> <label className="block text-sm font-medium text-foreground">
Account Name Account Name
</label> </label>
{isEditingName ? ( {isEditingName ? (
@@ -180,9 +180,9 @@ export function AccountSettingsPage() {
value={editedName} value={editedName}
onChange={(e) => setEditedName(e.target.value)} onChange={(e) => setEditedName(e.target.value)}
className={cn( className={cn(
'flex-1 rounded-md border border-white/10 bg-black/50 px-3 py-2', 'flex-1 rounded-md border border-border bg-card px-3 py-2',
'text-white placeholder:text-white/40', 'text-foreground placeholder:text-muted-foreground',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20' 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)} )}
autoFocus autoFocus
onKeyDown={(e) => { onKeyDown={(e) => {
@@ -197,8 +197,8 @@ export function AccountSettingsPage() {
onClick={handleSaveName} onClick={handleSaveName}
disabled={isSavingName} disabled={isSavingName}
className={cn( className={cn(
'rounded-md bg-white p-2 text-black', 'rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 p-2',
'hover:bg-white/90 disabled:opacity-50' 'hover:opacity-90 disabled:opacity-50'
)} )}
> >
{isSavingName ? ( {isSavingName ? (
@@ -212,18 +212,18 @@ export function AccountSettingsPage() {
setEditedName(account?.name ?? '') setEditedName(account?.name ?? '')
setIsEditingName(false) setIsEditingName(false)
}} }}
className="rounded-md border border-white/10 p-2 text-white/40 hover:bg-white/10" className="rounded-md border border-border p-2 text-muted-foreground hover:bg-accent"
> >
<X className="h-4 w-4" /> <X className="h-4 w-4" />
</button> </button>
</div> </div>
) : ( ) : (
<div className="mt-1 flex items-center gap-2"> <div className="mt-1 flex items-center gap-2">
<span className="text-sm text-white">{account?.name}</span> <span className="text-sm text-foreground">{account?.name}</span>
{isAccountOwner && ( {isAccountOwner && (
<button <button
onClick={() => setIsEditingName(true)} onClick={() => setIsEditingName(true)}
className="text-xs text-white hover:underline" className="text-xs text-foreground hover:underline"
> >
Edit Edit
</button> </button>
@@ -234,10 +234,10 @@ export function AccountSettingsPage() {
{/* Display Code */} {/* Display Code */}
<div> <div>
<label className="block text-sm font-medium text-white"> <label className="block text-sm font-medium text-foreground">
Display Code Display Code
</label> </label>
<p className="mt-1 text-sm font-mono text-white/40"> <p className="mt-1 text-sm font-mono text-muted-foreground">
{account?.display_code} {account?.display_code}
</p> </p>
</div> </div>
@@ -245,8 +245,8 @@ export function AccountSettingsPage() {
</div> </div>
{/* Subscription Section */} {/* Subscription Section */}
<div className="glass-card rounded-2xl p-4 sm:p-6"> <div className="bg-card border border-border rounded-xl p-4 sm:p-6">
<h2 className="text-lg font-semibold text-white">Subscription</h2> <h2 className="text-lg font-semibold text-foreground">Subscription</h2>
<div className="mt-4 space-y-4"> <div className="mt-4 space-y-4">
{/* Plan & Status */} {/* Plan & Status */}
@@ -254,9 +254,9 @@ export function AccountSettingsPage() {
<span <span
className={cn( className={cn(
'inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium', 'inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium',
plan === 'free' && 'bg-white/10 text-white/70', plan === 'free' && 'bg-accent text-muted-foreground',
plan === 'pro' && 'bg-white/10 text-white', plan === 'pro' && 'bg-accent text-foreground',
plan === 'team' && 'bg-white/10 text-white' plan === 'team' && 'bg-accent text-foreground'
)} )}
> >
<Crown className="h-3.5 w-3.5" /> <Crown className="h-3.5 w-3.5" />
@@ -270,7 +270,7 @@ export function AccountSettingsPage() {
sub.status === 'trialing' && 'bg-blue-500/10 text-blue-400', sub.status === 'trialing' && 'bg-blue-500/10 text-blue-400',
sub.status === 'past_due' && 'bg-yellow-500/10 text-yellow-400', sub.status === 'past_due' && 'bg-yellow-500/10 text-yellow-400',
sub.status === 'canceled' && 'bg-red-400/10 text-red-400', sub.status === 'canceled' && 'bg-red-400/10 text-red-400',
sub.status === 'orphaned' && 'bg-white/10 text-white/40' sub.status === 'orphaned' && 'bg-accent text-muted-foreground'
)} )}
> >
{sub.status.charAt(0).toUpperCase() + sub.status.slice(1).replace('_', ' ')} {sub.status.charAt(0).toUpperCase() + sub.status.slice(1).replace('_', ' ')}
@@ -279,7 +279,7 @@ export function AccountSettingsPage() {
</div> </div>
{sub?.current_period_end && ( {sub?.current_period_end && (
<p className="text-sm text-white/40"> <p className="text-sm text-muted-foreground">
Current period ends: {new Date(sub.current_period_end).toLocaleDateString()} Current period ends: {new Date(sub.current_period_end).toLocaleDateString()}
</p> </p>
)} )}
@@ -322,32 +322,32 @@ export function AccountSettingsPage() {
{/* Team Members Section (owners only) */} {/* Team Members Section (owners only) */}
{isAccountOwner && ( {isAccountOwner && (
<div className="glass-card rounded-2xl p-4 sm:p-6"> <div className="bg-card border border-border rounded-xl p-4 sm:p-6">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Users className="h-5 w-5 text-white/50" /> <Users className="h-5 w-5 text-muted-foreground" />
<h2 className="text-lg font-semibold text-white">Team Members</h2> <h2 className="text-lg font-semibold text-foreground">Team Members</h2>
</div> </div>
{members.length === 0 ? ( {members.length === 0 ? (
<p className="mt-4 text-sm text-white/40">No team members yet.</p> <p className="mt-4 text-sm text-muted-foreground">No team members yet.</p>
) : ( ) : (
<div className="mt-4 divide-y divide-white/[0.06]"> <div className="mt-4 divide-y divide-border">
{members.map((member) => ( {members.map((member) => (
<div <div
key={member.id} key={member.id}
className="flex items-center justify-between py-3 first:pt-0 last:pb-0" className="flex items-center justify-between py-3 first:pt-0 last:pb-0"
> >
<div> <div>
<p className="text-sm font-medium text-white">{member.name}</p> <p className="text-sm font-medium text-foreground">{member.name}</p>
<p className="text-xs text-white/40">{member.email}</p> <p className="text-xs text-muted-foreground">{member.email}</p>
</div> </div>
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<span <span
className={cn( className={cn(
'rounded-full px-2.5 py-0.5 text-xs font-medium', 'rounded-full px-2.5 py-0.5 text-xs font-medium',
member.account_role === 'owner' && 'bg-white/10 text-white', member.account_role === 'owner' && 'bg-accent text-foreground',
member.account_role === 'engineer' && 'bg-white/10 text-white/70', member.account_role === 'engineer' && 'bg-accent text-muted-foreground',
member.account_role === 'viewer' && 'bg-white/10 text-white/40' member.account_role === 'viewer' && 'bg-accent text-muted-foreground'
)} )}
> >
{member.account_role} {member.account_role}
@@ -360,7 +360,7 @@ export function AccountSettingsPage() {
{member.account_role !== 'owner' && ( {member.account_role !== 'owner' && (
<button <button
onClick={() => handleRemoveMember(member.id)} onClick={() => handleRemoveMember(member.id)}
className="text-white/40 hover:text-red-400" className="text-muted-foreground hover:text-red-400"
title="Remove member" title="Remove member"
> >
<X className="h-4 w-4" /> <X className="h-4 w-4" />
@@ -376,10 +376,10 @@ export function AccountSettingsPage() {
{/* Invite Member Section (owners only) */} {/* Invite Member Section (owners only) */}
{isAccountOwner && ( {isAccountOwner && (
<div className="glass-card rounded-2xl p-4 sm:p-6"> <div className="bg-card border border-border rounded-xl p-4 sm:p-6">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Mail className="h-5 w-5 text-white/50" /> <Mail className="h-5 w-5 text-muted-foreground" />
<h2 className="text-lg font-semibold text-white">Invite Member</h2> <h2 className="text-lg font-semibold text-foreground">Invite Member</h2>
</div> </div>
<form onSubmit={handleInvite} className="mt-4 space-y-3"> <form onSubmit={handleInvite} className="mt-4 space-y-3">
@@ -391,17 +391,17 @@ export function AccountSettingsPage() {
onChange={(e) => setInviteEmail(e.target.value)} onChange={(e) => setInviteEmail(e.target.value)}
required required
className={cn( className={cn(
'flex-1 rounded-md border border-white/10 bg-black/50 px-3 py-2', 'flex-1 rounded-md border border-border bg-card px-3 py-2',
'text-white placeholder:text-white/40', 'text-foreground placeholder:text-muted-foreground',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20' 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)} )}
/> />
<select <select
value={inviteRole} value={inviteRole}
onChange={(e) => setInviteRole(e.target.value)} onChange={(e) => setInviteRole(e.target.value)}
className={cn( className={cn(
'rounded-md border border-white/10 bg-black/50 px-3 py-2', 'rounded-md border border-border bg-card px-3 py-2',
'text-white focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20' 'text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)} )}
> >
<option value="engineer">Engineer</option> <option value="engineer">Engineer</option>
@@ -411,8 +411,8 @@ export function AccountSettingsPage() {
type="submit" type="submit"
disabled={isInviting || !inviteEmail.trim()} disabled={isInviting || !inviteEmail.trim()}
className={cn( className={cn(
'rounded-md bg-white px-4 py-2 text-sm font-medium text-black', 'rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium',
'hover:bg-white/90 disabled:opacity-50 disabled:cursor-not-allowed' 'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
)} )}
> >
{isInviting ? ( {isInviting ? (
@@ -437,8 +437,8 @@ export function AccountSettingsPage() {
{/* Pending Invites */} {/* Pending Invites */}
{invites.length > 0 && ( {invites.length > 0 && (
<div className="mt-6"> <div className="mt-6">
<h3 className="text-sm font-medium text-white">Pending Invites</h3> <h3 className="text-sm font-medium text-foreground">Pending Invites</h3>
<div className="mt-2 divide-y divide-white/[0.06]"> <div className="mt-2 divide-y divide-border">
{invites {invites
.filter((inv) => !inv.used_at) .filter((inv) => !inv.used_at)
.map((invite) => ( .map((invite) => (
@@ -447,21 +447,21 @@ export function AccountSettingsPage() {
className="flex items-center justify-between py-2" className="flex items-center justify-between py-2"
> >
<div> <div>
<p className="text-sm text-white">{invite.email}</p> <p className="text-sm text-foreground">{invite.email}</p>
<p className="text-xs text-white/40"> <p className="text-xs text-muted-foreground">
{invite.expires_at {invite.expires_at
? `Expires ${new Date(invite.expires_at).toLocaleDateString()}` ? `Expires ${new Date(invite.expires_at).toLocaleDateString()}`
: 'No expiration'} : 'No expiration'}
</p> </p>
</div> </div>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<span className="rounded-full bg-white/10 px-2.5 py-0.5 text-xs text-white/70"> <span className="rounded-full bg-accent px-2.5 py-0.5 text-xs text-muted-foreground">
{invite.role} {invite.role}
</span> </span>
<button <button
onClick={() => handleResendInvite(invite.id)} onClick={() => handleResendInvite(invite.id)}
disabled={resendingId === invite.id} disabled={resendingId === invite.id}
className="text-white/40 hover:text-white disabled:opacity-50" className="text-muted-foreground hover:text-foreground disabled:opacity-50"
title="Resend invite" title="Resend invite"
> >
{resendingId === invite.id ? ( {resendingId === invite.id ? (
@@ -483,34 +483,34 @@ export function AccountSettingsPage() {
{isAccountOwner && ( {isAccountOwner && (
<Link <Link
to="/account/categories" to="/account/categories"
className="glass-card rounded-2xl p-4 sm:p-6 flex items-center justify-between group hover:border-white/20 transition-all" className="bg-card border border-border rounded-xl p-4 sm:p-6 flex items-center justify-between group hover:border-border transition-all"
> >
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<FolderTree className="h-5 w-5 text-white/50" /> <FolderTree className="h-5 w-5 text-muted-foreground" />
<div> <div>
<h2 className="text-lg font-semibold text-white">Team Categories</h2> <h2 className="text-lg font-semibold text-foreground">Team Categories</h2>
<p className="text-sm text-white/40">Manage tree categories for your team</p> <p className="text-sm text-muted-foreground">Manage tree categories for your team</p>
</div> </div>
</div> </div>
<span className="text-white/30 group-hover:text-white transition-colors">&rarr;</span> <span className="text-muted-foreground group-hover:text-foreground transition-colors">&rarr;</span>
</Link> </Link>
)} )}
{/* Preferences Section */} {/* Preferences Section */}
<div className="glass-card rounded-2xl p-4 sm:p-6"> <div className="bg-card border border-border rounded-xl p-4 sm:p-6">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<Settings className="h-5 w-5 text-white/50" /> <Settings className="h-5 w-5 text-muted-foreground" />
<h2 className="text-lg font-semibold text-white">Preferences</h2> <h2 className="text-lg font-semibold text-foreground">Preferences</h2>
</div> </div>
<div className="mt-4"> <div className="mt-4">
<label <label
htmlFor="export-format" htmlFor="export-format"
className="block text-sm font-medium text-white" className="block text-sm font-medium text-foreground"
> >
Default Export Format Default Export Format
</label> </label>
<p className="text-sm text-white/40"> <p className="text-sm text-muted-foreground">
This format will be pre-selected when exporting sessions This format will be pre-selected when exporting sessions
</p> </p>
<select <select
@@ -521,9 +521,9 @@ export function AccountSettingsPage() {
toast.success('Preference saved') toast.success('Preference saved')
}} }}
className={cn( className={cn(
'mt-2 block w-full max-w-xs rounded-xl border border-white/10 bg-black/50 px-3 py-2', 'mt-2 block w-full max-w-xs rounded-xl border border-border bg-card px-3 py-2',
'text-sm text-white', 'text-sm text-foreground',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20' 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)} )}
> >
<option value="markdown">Markdown (.md)</option> <option value="markdown">Markdown (.md)</option>
@@ -554,24 +554,24 @@ function UsageStat({
return ( return (
<div className="glass-stat rounded-md p-3"> <div className="glass-stat rounded-md p-3">
<p className="text-xs font-medium text-white/40">{label}</p> <p className="text-xs font-medium text-muted-foreground">{label}</p>
<p <p
className={cn( className={cn(
'mt-1 text-lg font-semibold', 'mt-1 text-lg font-semibold',
isAtLimit ? 'text-red-400' : isNearLimit ? 'text-yellow-400' : 'text-white' isAtLimit ? 'text-red-400' : isNearLimit ? 'text-yellow-400' : 'text-foreground'
)} )}
> >
{current} {current}
<span className="text-sm font-normal text-white/40"> <span className="text-sm font-normal text-muted-foreground">
{' '}/ {isUnlimited ? 'Unlimited' : max} {' '}/ {isUnlimited ? 'Unlimited' : max}
</span> </span>
</p> </p>
{!isUnlimited && ( {!isUnlimited && (
<div className="mt-2 h-1.5 overflow-hidden rounded-full bg-white/10"> <div className="mt-2 h-1.5 overflow-hidden rounded-full bg-accent">
<div <div
className={cn( className={cn(
'h-full rounded-full transition-all', 'h-full rounded-full transition-all',
isAtLimit ? 'bg-red-400' : isNearLimit ? 'bg-yellow-500' : 'bg-white' isAtLimit ? 'bg-red-400' : isNearLimit ? 'bg-yellow-500' : 'bg-primary'
)} )}
style={{ width: `${percentage}%` }} style={{ width: `${percentage}%` }}
/> />

18
frontend/src/pages/AdminCategoriesPage.tsx
View File

@@ -145,7 +145,7 @@ export function AdminCategoriesPage() {
if (isLoading) { if (isLoading) {
return ( return (
<div className="flex h-64 items-center justify-center"> <div className="flex h-64 items-center justify-center">
<div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" /> <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-foreground" />
</div> </div>
) )
} }
@@ -155,18 +155,18 @@ export function AdminCategoriesPage() {
{/* Header */} {/* Header */}
<div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between"> <div className="mb-6 flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div> <div>
<h1 className="text-2xl font-bold text-white sm:text-3xl"> <h1 className="text-2xl font-bold text-foreground sm:text-3xl">
Step Categories Step Categories
</h1> </h1>
<p className="mt-2 text-white/40"> <p className="mt-2 text-muted-foreground">
Manage categories for organizing step library Manage categories for organizing step library
</p> </p>
</div> </div>
<button <button
onClick={() => setShowCreateModal(true)} onClick={() => setShowCreateModal(true)}
className={cn( className={cn(
'flex items-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black', 'flex items-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium',
'hover:bg-white/90' 'hover:opacity-90'
)} )}
> >
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
@@ -181,16 +181,16 @@ export function AdminCategoriesPage() {
type="checkbox" type="checkbox"
checked={includeArchived} checked={includeArchived}
onChange={(e) => setIncludeArchived(e.target.checked)} onChange={(e) => setIncludeArchived(e.target.checked)}
className="h-4 w-4 rounded border-white/10 text-white focus:ring-2 focus:ring-white/20 focus:ring-offset-0" className="h-4 w-4 rounded border-border text-foreground focus:ring-2 focus:ring-primary/20 focus:ring-offset-0"
/> />
<span className="text-sm text-white/40">Show archived categories</span> <span className="text-sm text-muted-foreground">Show archived categories</span>
</label> </label>
</div> </div>
{/* Categories List */} {/* Categories List */}
{categories.length === 0 ? ( {categories.length === 0 ? (
<div className="glass-card rounded-2xl p-12 text-center"> <div className="bg-card border border-border rounded-xl p-12 text-center">
<p className="text-white/40"> <p className="text-muted-foreground">
No categories found. Create your first category to get started. No categories found. Create your first category to get started.
</p> </p>
</div> </div>

28
frontend/src/pages/ForgotPasswordPage.tsx
View File

@@ -25,26 +25,26 @@ export function ForgotPasswordPage() {
} }
return ( return (
<div className="flex min-h-screen items-center justify-center bg-black px-4"> <div className="flex min-h-screen items-center justify-center bg-card px-4">
<div className="pointer-events-none fixed inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(100,100,120,0.03),transparent_50%)]" /> <div className="pointer-events-none fixed inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(100,100,120,0.03),transparent_50%)]" />
<div className="relative w-full max-w-md space-y-8"> <div className="relative w-full max-w-md space-y-8">
<div className="text-center"> <div className="text-center">
<div className="mb-4 flex justify-center sm:mb-6"> <div className="mb-4 flex justify-center sm:mb-6">
<div className="w-16 h-16 rounded-2xl bg-white flex items-center justify-center sm:w-20 sm:h-20"> <div className="w-16 h-16 rounded-2xl bg-gradient-brand flex items-center justify-center sm:w-20 sm:h-20">
<BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" /> <BrandLogo size="lg" className="h-10 w-10 invert sm:h-12 sm:w-12" />
</div> </div>
</div> </div>
<h1 className="text-3xl font-bold text-white tracking-tight"> <h1 className="text-3xl font-bold text-foreground tracking-tight">
Reset Password Reset Password
</h1> </h1>
<p className="mt-2 text-sm text-white/40"> <p className="mt-2 text-sm text-muted-foreground">
Enter your email and we'll send you a link to reset your password. Enter your email and we'll send you a link to reset your password.
</p> </p>
</div> </div>
{submitted ? ( {submitted ? (
<div className="glass-card rounded-2xl p-6 space-y-4"> <div className="bg-card border border-border rounded-xl p-6 space-y-4">
<div className="rounded-xl border border-green-400/20 bg-green-400/10 p-4 text-sm text-green-400"> <div className="rounded-xl border border-green-400/20 bg-green-400/10 p-4 text-sm text-green-400">
If an account with that email exists, we've sent a password reset link. If an account with that email exists, we've sent a password reset link.
Check your inbox and follow the instructions. Check your inbox and follow the instructions.
@@ -52,7 +52,7 @@ export function ForgotPasswordPage() {
<div className="text-center"> <div className="text-center">
<Link <Link
to="/login" to="/login"
className="text-sm text-white/60 hover:text-white transition-colors" className="text-sm text-muted-foreground hover:text-foreground transition-colors"
> >
Back to sign in Back to sign in
</Link> </Link>
@@ -60,9 +60,9 @@ export function ForgotPasswordPage() {
</div> </div>
) : ( ) : (
<form onSubmit={handleSubmit} className="mt-8 space-y-6"> <form onSubmit={handleSubmit} className="mt-8 space-y-6">
<div className="glass-card rounded-2xl p-6 space-y-4"> <div className="bg-card border border-border rounded-xl p-6 space-y-4">
<div> <div>
<label htmlFor="email" className="mb-1 block text-sm font-medium text-white"> <label htmlFor="email" className="mb-1 block text-sm font-medium text-foreground">
Email Address Email Address
</label> </label>
<input <input
@@ -73,9 +73,9 @@ export function ForgotPasswordPage() {
value={email} value={email}
onChange={(e) => setEmail(e.target.value)} onChange={(e) => setEmail(e.target.value)}
className={cn( className={cn(
'block w-full rounded-xl border border-white/10 bg-black/50 px-3 py-2', 'block w-full rounded-xl border border-border bg-card px-3 py-2',
'text-white placeholder:text-white/30', 'text-foreground placeholder:text-muted-foreground',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20', 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
'transition-colors' 'transition-colors'
)} )}
placeholder="you@example.com" placeholder="you@example.com"
@@ -87,8 +87,8 @@ export function ForgotPasswordPage() {
disabled={isLoading || !email} disabled={isLoading || !email}
className={cn( className={cn(
'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press', 'w-full rounded-xl px-4 py-2.5 text-sm font-semibold btn-press',
'bg-white text-black hover:bg-white/90', 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90',
'focus:outline-none focus:ring-2 focus:ring-white/30 focus:ring-offset-2 focus:ring-offset-black', 'focus:outline-none focus:ring-2 focus:ring-primary/30 focus:ring-offset-2 focus:ring-offset-background',
'disabled:cursor-not-allowed disabled:opacity-50', 'disabled:cursor-not-allowed disabled:opacity-50',
'transition-all' 'transition-all'
)} )}
@@ -99,7 +99,7 @@ export function ForgotPasswordPage() {
<div className="text-center"> <div className="text-center">
<Link <Link
to="/login" to="/login"
className="text-sm text-white/60 hover:text-white transition-colors" className="text-sm text-muted-foreground hover:text-foreground transition-colors"
> >
Back to sign in Back to sign in
</Link> </Link>

72
frontend/src/pages/MyTreesPage.tsx
View File

@@ -112,8 +112,8 @@ export function MyTreesPage() {
<div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8"> <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
<div className="mb-6 flex items-center justify-between sm:mb-8"> <div className="mb-6 flex items-center justify-between sm:mb-8">
<div> <div>
<h1 className="text-2xl font-bold text-white sm:text-3xl">My Flows</h1> <h1 className="text-2xl font-bold text-foreground sm:text-3xl">My Flows</h1>
<p className="mt-2 text-white/40"> <p className="mt-2 text-muted-foreground">
Your forked and custom flows Your forked and custom flows
</p> </p>
</div> </div>
@@ -121,7 +121,7 @@ export function MyTreesPage() {
<div className="relative"> <div className="relative">
<button <button
onClick={() => setShowCreateMenu(!showCreateMenu)} onClick={() => setShowCreateMenu(!showCreateMenu)}
className="flex items-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90" className="flex items-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90"
> >
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
Create New Create New
@@ -130,27 +130,27 @@ export function MyTreesPage() {
{showCreateMenu && ( {showCreateMenu && (
<> <>
<div className="fixed inset-0 z-10" onClick={() => setShowCreateMenu(false)} /> <div className="fixed inset-0 z-10" onClick={() => setShowCreateMenu(false)} />
<div className="absolute right-0 z-20 mt-1 w-56 rounded-lg border border-white/10 bg-black/95 p-1 shadow-xl backdrop-blur-sm"> <div className="absolute right-0 z-20 mt-1 w-56 rounded-lg border border-border bg-card p-1 shadow-xl backdrop-blur-sm">
<Link <Link
to="/trees/new" to="/trees/new"
onClick={() => setShowCreateMenu(false)} onClick={() => setShowCreateMenu(false)}
className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-white hover:bg-white/10" className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
> >
<FolderTree className="h-4 w-4 text-white/50" /> <FolderTree className="h-4 w-4 text-muted-foreground" />
<div> <div>
<div className="font-medium">Troubleshooting Tree</div> <div className="font-medium">Troubleshooting Tree</div>
<div className="text-xs text-white/40">Branching decision flow</div> <div className="text-xs text-muted-foreground">Branching decision flow</div>
</div> </div>
</Link> </Link>
<Link <Link
to="/flows/new" to="/flows/new"
onClick={() => setShowCreateMenu(false)} onClick={() => setShowCreateMenu(false)}
className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-white hover:bg-white/10" className="flex items-center gap-3 rounded-md px-3 py-2.5 text-sm text-foreground hover:bg-accent"
> >
<ListOrdered className="h-4 w-4 text-white/50" /> <ListOrdered className="h-4 w-4 text-muted-foreground" />
<div> <div>
<div className="font-medium">Procedural Flow</div> <div className="font-medium">Procedural Flow</div>
<div className="text-xs text-white/40">Step-by-step procedure</div> <div className="text-xs text-muted-foreground">Step-by-step procedure</div>
</div> </div>
</Link> </Link>
</div> </div>
@@ -163,21 +163,21 @@ export function MyTreesPage() {
{/* Loading State */} {/* Loading State */}
{isLoading ? ( {isLoading ? (
<div className="flex justify-center py-12"> <div className="flex justify-center py-12">
<div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" /> <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-foreground" />
</div> </div>
) : trees.length === 0 ? ( ) : trees.length === 0 ? (
<div className="rounded-lg border border-dashed border-white/10 bg-white/[0.02] px-4 py-12 text-center"> <div className="rounded-lg border border-dashed border-border bg-accent px-4 py-12 text-center">
<FolderTree className="mx-auto mb-4 h-12 w-12 text-white/20" /> <FolderTree className="mx-auto mb-4 h-12 w-12 text-muted-foreground" />
<h2 className="mb-2 text-lg font-semibold text-white">No personal flows yet</h2> <h2 className="mb-2 text-lg font-semibold text-foreground">No personal flows yet</h2>
<p className="mb-4 text-sm text-white/40"> <p className="mb-4 text-sm text-muted-foreground">
Fork a flow from the library to customize it for your workflow Fork a flow from the library to customize it for your workflow
</p> </p>
<div className="flex items-center justify-center gap-3"> <div className="flex items-center justify-center gap-3">
<Link <Link
to="/trees" to="/trees"
className={cn( className={cn(
'inline-flex items-center gap-2 rounded-md bg-white px-4 py-2 text-sm font-medium text-black', 'inline-flex items-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium',
'hover:bg-white/90' 'hover:opacity-90'
)} )}
> >
Browse Library Browse Library
@@ -186,8 +186,8 @@ export function MyTreesPage() {
<Link <Link
to="/trees/new" to="/trees/new"
className={cn( className={cn(
'inline-flex items-center gap-2 rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60', 'inline-flex items-center gap-2 rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-white/10 hover:text-white' 'hover:bg-accent hover:text-foreground'
)} )}
> >
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
@@ -201,15 +201,15 @@ export function MyTreesPage() {
{trees.map((tree) => ( {trees.map((tree) => (
<div <div
key={tree.id} key={tree.id}
className="glass-card rounded-2xl p-4 transition-all hover:glass-card-hover sm:p-6" className="bg-card border border-border rounded-xl p-4 transition-all hover:border-border/80 sm:p-6"
> >
{/* Header */} {/* Header */}
<div className="mb-3 flex items-start justify-between gap-2"> <div className="mb-3 flex items-start justify-between gap-2">
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{tree.tree_type === 'procedural' && ( {tree.tree_type === 'procedural' && (
<ListOrdered className="h-4 w-4 shrink-0 text-white/40" /> <ListOrdered className="h-4 w-4 shrink-0 text-muted-foreground" />
)} )}
<h3 className="font-semibold text-white">{tree.name}</h3> <h3 className="font-semibold text-foreground">{tree.name}</h3>
</div> </div>
<div className="flex items-center gap-1.5"> <div className="flex items-center gap-1.5">
{tree.tree_type === 'procedural' && ( {tree.tree_type === 'procedural' && (
@@ -218,7 +218,7 @@ export function MyTreesPage() {
</span> </span>
)} )}
{tree.category_info && ( {tree.category_info && (
<span className="rounded-full bg-white/10 px-2 py-0.5 text-xs text-white/70"> <span className="rounded-full bg-accent px-2 py-0.5 text-xs text-muted-foreground">
{tree.category_info.name} {tree.category_info.name}
</span> </span>
)} )}
@@ -226,19 +226,19 @@ export function MyTreesPage() {
</div> </div>
{/* Description */} {/* Description */}
<p className="mb-3 text-sm text-white/40 line-clamp-2"> <p className="mb-3 text-sm text-muted-foreground line-clamp-2">
{tree.description || 'No description available'} {tree.description || 'No description available'}
</p> </p>
{/* Fork Badge */} {/* Fork Badge */}
{tree.parent_tree_id && ( {tree.parent_tree_id && (
<div className="mb-3 flex items-center gap-2 rounded-md bg-white/5 px-2 py-1.5 text-sm"> <div className="mb-3 flex items-center gap-2 rounded-md bg-accent px-2 py-1.5 text-sm">
<GitBranch className="h-4 w-4 text-white/40" /> <GitBranch className="h-4 w-4 text-muted-foreground" />
<span className="text-white/40"> <span className="text-muted-foreground">
Forked from{' '} Forked from{' '}
<Link <Link
to={`/trees/${tree.parent_tree_id}/navigate`} to={`/trees/${tree.parent_tree_id}/navigate`}
className="font-medium text-white hover:underline" className="font-medium text-foreground hover:underline"
> >
original original
</Link> </Link>
@@ -254,7 +254,7 @@ export function MyTreesPage() {
)} )}
{/* Stats */} {/* Stats */}
<div className="mb-4 flex items-center gap-4 text-xs text-white/30"> <div className="mb-4 flex items-center gap-4 text-xs text-muted-foreground">
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<Clock className="h-3.5 w-3.5" /> <Clock className="h-3.5 w-3.5" />
<span>{formatDate(tree.lastUsed)}</span> <span>{formatDate(tree.lastUsed)}</span>
@@ -271,8 +271,8 @@ export function MyTreesPage() {
type="button" type="button"
onClick={() => handleStartSession(tree)} onClick={() => handleStartSession(tree)}
className={cn( className={cn(
'flex flex-1 items-center justify-center gap-2 rounded-md bg-white px-3 py-2 text-sm font-medium text-black', 'flex flex-1 items-center justify-center gap-2 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-3 py-2 text-sm font-medium',
'hover:bg-white/90' 'hover:opacity-90'
)} )}
> >
<Play className="h-4 w-4" /> <Play className="h-4 w-4" />
@@ -282,8 +282,8 @@ export function MyTreesPage() {
<Link <Link
to={getEditPath(tree)} to={getEditPath(tree)}
className={cn( className={cn(
'rounded-md border border-white/10 p-2 text-white/40', 'rounded-md border border-border p-2 text-muted-foreground',
'hover:bg-white/10 hover:text-white' 'hover:bg-accent hover:text-foreground'
)} )}
title="Edit tree" title="Edit tree"
> >
@@ -297,8 +297,8 @@ export function MyTreesPage() {
setShowShareModal(true) setShowShareModal(true)
}} }}
className={cn( className={cn(
'rounded-md border border-white/10 p-2 text-white/40', 'rounded-md border border-border p-2 text-muted-foreground',
'hover:bg-white/10 hover:text-white' 'hover:bg-accent hover:text-foreground'
)} )}
title="Share tree" title="Share tree"
> >
@@ -311,7 +311,7 @@ export function MyTreesPage() {
setShowDeleteConfirm(true) setShowDeleteConfirm(true)
}} }}
className={cn( className={cn(
'rounded-md border border-white/10 p-2 text-white/40', 'rounded-md border border-border p-2 text-muted-foreground',
'hover:bg-red-400/10 hover:text-red-400' 'hover:bg-red-400/10 hover:text-red-400'
)} )}
title="Delete tree" title="Delete tree"

32
frontend/src/pages/ProceduralEditorPage.tsx
View File

@@ -97,7 +97,7 @@ export function ProceduralEditorPage() {
if (isLoading) { if (isLoading) {
return ( return (
<div className="flex min-h-[50vh] items-center justify-center"> <div className="flex min-h-[50vh] items-center justify-center">
<div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" /> <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-foreground" />
</div> </div>
) )
} }
@@ -109,13 +109,13 @@ export function ProceduralEditorPage() {
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<button <button
onClick={() => navigate('/my-trees')} onClick={() => navigate('/my-trees')}
className="rounded-md p-2 text-white/40 hover:bg-white/10 hover:text-white" className="rounded-md p-2 text-muted-foreground hover:bg-accent hover:text-foreground"
> >
<ArrowLeft className="h-5 w-5" /> <ArrowLeft className="h-5 w-5" />
</button> </button>
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<ListOrdered className="h-5 w-5 text-white/50" /> <ListOrdered className="h-5 w-5 text-muted-foreground" />
<h1 className="text-xl font-bold text-white sm:text-2xl"> <h1 className="text-xl font-bold text-foreground sm:text-2xl">
{isEditMode ? 'Edit Procedure' : 'New Procedure'} {isEditMode ? 'Edit Procedure' : 'New Procedure'}
</h1> </h1>
</div> </div>
@@ -123,19 +123,19 @@ export function ProceduralEditorPage() {
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
{isDirty && ( {isDirty && (
<span className="text-xs text-white/40">Unsaved changes</span> <span className="text-xs text-muted-foreground">Unsaved changes</span>
)} )}
<button <button
onClick={() => handleSave('draft')} onClick={() => handleSave('draft')}
disabled={isSaving} disabled={isSaving}
className="flex items-center gap-1.5 rounded-md border border-white/10 px-3 py-2 text-sm text-white/60 hover:bg-white/10 hover:text-white disabled:opacity-50" className="flex items-center gap-1.5 rounded-md border border-border px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
> >
Save Draft Save Draft
</button> </button>
<button <button
onClick={() => handleSave('published')} onClick={() => handleSave('published')}
disabled={isSaving} disabled={isSaving}
className="flex items-center gap-1.5 rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90 disabled:opacity-50" className="flex items-center gap-1.5 rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50"
> >
<Save className="h-4 w-4" /> <Save className="h-4 w-4" />
{isSaving ? 'Saving...' : 'Publish'} {isSaving ? 'Saving...' : 'Publish'}
@@ -146,44 +146,44 @@ export function ProceduralEditorPage() {
{/* Content */} {/* Content */}
<div className="space-y-6"> <div className="space-y-6">
{/* Metadata */} {/* Metadata */}
<div className="glass-card rounded-2xl p-4 sm:p-6"> <div className="bg-card border border-border rounded-xl p-4 sm:p-6">
<h2 className="mb-4 text-lg font-semibold text-white">Details</h2> <h2 className="mb-4 text-lg font-semibold text-foreground">Details</h2>
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<label className="mb-1 block text-sm font-medium text-white/60">Name</label> <label className="mb-1 block text-sm font-medium text-muted-foreground">Name</label>
<input <input
type="text" type="text"
value={name} value={name}
onChange={(e) => setName(e.target.value)} onChange={(e) => setName(e.target.value)}
placeholder="e.g. Domain Controller Build" placeholder="e.g. Domain Controller Build"
className="w-full rounded-lg border border-white/10 bg-black/50 px-3 py-2 text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20" className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
/> />
</div> </div>
<div> <div>
<label className="mb-1 block text-sm font-medium text-white/60">Description</label> <label className="mb-1 block text-sm font-medium text-muted-foreground">Description</label>
<textarea <textarea
value={description} value={description}
onChange={(e) => setDescription(e.target.value)} onChange={(e) => setDescription(e.target.value)}
placeholder="Brief description of this procedure..." placeholder="Brief description of this procedure..."
rows={2} rows={2}
className="w-full rounded-lg border border-white/10 bg-black/50 px-3 py-2 text-white placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20" className="w-full rounded-lg border border-border bg-card px-3 py-2 text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20"
/> />
</div> </div>
<div className="grid grid-cols-2 gap-4"> <div className="grid grid-cols-2 gap-4">
<div> <div>
<label className="mb-1 block text-sm font-medium text-white/60">Tags</label> <label className="mb-1 block text-sm font-medium text-muted-foreground">Tags</label>
<TagInput tags={tags} onChange={setTags} /> <TagInput tags={tags} onChange={setTags} />
</div> </div>
<div className="flex items-end pb-1"> <div className="flex items-end pb-1">
<label className="flex items-center gap-2 text-sm text-white/60"> <label className="flex items-center gap-2 text-sm text-muted-foreground">
<input <input
type="checkbox" type="checkbox"
checked={isPublic} checked={isPublic}
onChange={(e) => setIsPublic(e.target.checked)} onChange={(e) => setIsPublic(e.target.checked)}
className="rounded border-white/20" className="rounded border-border"
/> />
Public (visible to all users) Public (visible to all users)
</label> </label>

32
frontend/src/pages/ProceduralNavigationPage.tsx
View File

@@ -278,7 +278,7 @@ export function ProceduralNavigationPage() {
if (isLoading) { if (isLoading) {
return ( return (
<div className="flex min-h-[50vh] items-center justify-center"> <div className="flex min-h-[50vh] items-center justify-center">
<div className="h-8 w-8 animate-spin rounded-full border-4 border-white/20 border-t-white" /> <div className="h-8 w-8 animate-spin rounded-full border-4 border-border border-t-foreground" />
</div> </div>
) )
} }
@@ -332,17 +332,17 @@ export function ProceduralNavigationPage() {
return ( return (
<div className="flex h-full flex-col"> <div className="flex h-full flex-col">
{/* Top bar */} {/* Top bar */}
<div className="border-b border-white/[0.06] px-4 py-3 sm:px-6"> <div className="border-b border-border px-4 py-3 sm:px-6">
<div className="flex items-center justify-between gap-4"> <div className="flex items-center justify-between gap-4">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<button <button
onClick={() => setSidebarOpen(!sidebarOpen)} onClick={() => setSidebarOpen(!sidebarOpen)}
className="rounded-md p-1.5 text-white/40 hover:bg-white/10 hover:text-white lg:hidden" className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground lg:hidden"
> >
{sidebarOpen ? <ChevronLeft className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />} {sidebarOpen ? <ChevronLeft className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
</button> </button>
<ListOrdered className="h-5 w-5 text-white/40" /> <ListOrdered className="h-5 w-5 text-muted-foreground" />
<h1 className="text-sm font-semibold text-white sm:text-base">{tree.name}</h1> <h1 className="text-sm font-semibold text-foreground sm:text-base">{tree.name}</h1>
</div> </div>
</div> </div>
<div className="mt-2"> <div className="mt-2">
@@ -360,7 +360,7 @@ export function ProceduralNavigationPage() {
{/* Left sidebar - step checklist */} {/* Left sidebar - step checklist */}
<div <div
className={cn( className={cn(
'border-r border-white/[0.06] bg-black/30 transition-all duration-200', 'border-r border-border bg-card transition-all duration-200',
sidebarOpen ? 'w-72 p-3' : 'w-0 overflow-hidden p-0' sidebarOpen ? 'w-72 p-3' : 'w-0 overflow-hidden p-0'
)} )}
> >
@@ -375,10 +375,10 @@ export function ProceduralNavigationPage() {
{/* View Parameters button */} {/* View Parameters button */}
{Object.keys(sessionVariables).length > 0 && ( {Object.keys(sessionVariables).length > 0 && (
<div className="mt-3 border-t border-white/[0.06] pt-3"> <div className="mt-3 border-t border-border pt-3">
<button <button
onClick={() => setParamsOpen(true)} onClick={() => setParamsOpen(true)}
className="flex w-full items-center gap-2 rounded-lg border border-white/10 px-3 py-2 text-xs text-white/40 hover:bg-white/[0.06] hover:text-white/60" className="flex w-full items-center gap-2 rounded-lg border border-border px-3 py-2 text-xs text-muted-foreground hover:bg-accent hover:text-muted-foreground"
> >
<Settings2 className="h-3.5 w-3.5" /> <Settings2 className="h-3.5 w-3.5" />
View Parameters ({Object.keys(sessionVariables).length}) View Parameters ({Object.keys(sessionVariables).length})
@@ -413,15 +413,15 @@ export function ProceduralNavigationPage() {
{paramsOpen && ( {paramsOpen && (
<div className="fixed inset-0 z-50 flex items-center justify-center"> <div className="fixed inset-0 z-50 flex items-center justify-center">
<div <div
className="absolute inset-0 bg-black/60 backdrop-blur-sm" className="absolute inset-0 bg-background/60 backdrop-blur-sm"
onClick={() => setParamsOpen(false)} onClick={() => setParamsOpen(false)}
/> />
<div className="relative w-full max-w-md rounded-2xl border border-white/10 bg-black/95 shadow-2xl backdrop-blur-sm"> <div className="relative w-full max-w-md rounded-2xl border border-border bg-card shadow-2xl backdrop-blur-sm">
<div className="flex items-center justify-between border-b border-white/[0.06] px-5 py-4"> <div className="flex items-center justify-between border-b border-border px-5 py-4">
<h3 className="text-sm font-semibold text-white">Project Parameters</h3> <h3 className="text-sm font-semibold text-foreground">Project Parameters</h3>
<button <button
onClick={() => setParamsOpen(false)} onClick={() => setParamsOpen(false)}
className="rounded-lg p-1 text-white/40 hover:bg-white/10 hover:text-white" className="rounded-lg p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
> >
<X className="h-4 w-4" /> <X className="h-4 w-4" />
</button> </button>
@@ -429,9 +429,9 @@ export function ProceduralNavigationPage() {
<div className="max-h-[60vh] overflow-y-auto p-5"> <div className="max-h-[60vh] overflow-y-auto p-5">
<div className="space-y-2"> <div className="space-y-2">
{Object.entries(sessionVariables).map(([key, value]) => ( {Object.entries(sessionVariables).map(([key, value]) => (
<div key={key} className="flex items-baseline justify-between gap-4 rounded-lg bg-white/[0.03] px-3 py-2"> <div key={key} className="flex items-baseline justify-between gap-4 rounded-lg bg-accent px-3 py-2">
<span className="text-xs font-medium text-white/40">{key.replace(/_/g, ' ')}</span> <span className="text-xs font-medium text-muted-foreground">{key.replace(/_/g, ' ')}</span>
<span className="text-right text-sm text-white/70">{value || 'N/A'}</span> <span className="text-right text-sm text-muted-foreground">{value || 'N/A'}</span>
</div> </div>
))} ))}
</div> </div>

52
frontend/src/pages/account/TeamCategoriesPage.tsx
View File

@@ -77,16 +77,16 @@ export function TeamCategoriesPage() {
setForm({ name: cat.name, slug: cat.slug, description: cat.description || '' }) setForm({ name: cat.name, slug: cat.slug, description: cat.description || '' })
} }
const inputCn = cn('w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white', 'placeholder:text-white/40 focus:outline-none focus:border-white/30 focus:ring-2 focus:ring-white/20') const inputCn = cn('w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground', 'placeholder:text-muted-foreground focus:outline-none focus:border-primary focus:ring-2 focus:ring-primary/20')
return ( return (
<div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8"> <div className="container mx-auto px-4 py-6 sm:px-6 sm:py-8">
<div className="mb-6 flex items-center justify-between"> <div className="mb-6 flex items-center justify-between">
<div> <div>
<h1 className="text-2xl font-bold text-white">Team Categories</h1> <h1 className="text-2xl font-bold text-foreground">Team Categories</h1>
<p className="mt-1 text-sm text-white/40">Manage tree categories for your team</p> <p className="mt-1 text-sm text-muted-foreground">Manage tree categories for your team</p>
</div> </div>
<button onClick={() => setCreateOpen(true)} className={cn('flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium', 'bg-white text-black hover:bg-white/90')}> <button onClick={() => setCreateOpen(true)} className={cn('flex items-center gap-2 rounded-md px-4 py-2 text-sm font-medium', 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90')}>
<Plus className="h-4 w-4" /> <Plus className="h-4 w-4" />
Create Category Create Category
</button> </button>
@@ -95,30 +95,30 @@ export function TeamCategoriesPage() {
{loading ? ( {loading ? (
<div className="space-y-3"> <div className="space-y-3">
{Array.from({ length: 3 }).map((_, i) => ( {Array.from({ length: 3 }).map((_, i) => (
<div key={i} className="h-16 animate-pulse rounded-lg bg-white/10" /> <div key={i} className="h-16 animate-pulse rounded-lg bg-accent" />
))} ))}
</div> </div>
) : categories.length === 0 ? ( ) : categories.length === 0 ? (
<div className="flex flex-col items-center justify-center glass-card rounded-2xl py-16"> <div className="flex flex-col items-center justify-center bg-card border border-border rounded-xl py-16">
<FolderTree className="h-12 w-12 text-white/30" /> <FolderTree className="h-12 w-12 text-muted-foreground" />
<h3 className="mt-4 font-medium text-white">No team categories</h3> <h3 className="mt-4 font-medium text-foreground">No team categories</h3>
<p className="mt-1 text-sm text-white/40">Create categories to organize your team's trees.</p> <p className="mt-1 text-sm text-muted-foreground">Create categories to organize your team's trees.</p>
</div> </div>
) : ( ) : (
<div className="space-y-2"> <div className="space-y-2">
{categories.map((cat) => ( {categories.map((cat) => (
<div key={cat.id} className="flex items-center justify-between rounded-lg border border-white/[0.06] px-4 py-3"> <div key={cat.id} className="flex items-center justify-between rounded-lg border border-border px-4 py-3">
<div> <div>
<span className="font-medium text-white">{cat.name}</span> <span className="font-medium text-foreground">{cat.name}</span>
<span className="ml-3 text-sm text-white/40">{cat.slug}</span> <span className="ml-3 text-sm text-muted-foreground">{cat.slug}</span>
{cat.description && <span className="ml-3 text-sm text-white/40">- {cat.description}</span>} {cat.description && <span className="ml-3 text-sm text-muted-foreground">- {cat.description}</span>}
<span className="ml-3 text-xs text-white/40">{cat.tree_count} trees</span> <span className="ml-3 text-xs text-muted-foreground">{cat.tree_count} trees</span>
</div> </div>
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
<button onClick={() => openEdit(cat)} className="rounded-md p-1.5 text-white/50 hover:bg-white/[0.06] hover:text-white"> <button onClick={() => openEdit(cat)} className="rounded-md p-1.5 text-muted-foreground hover:bg-accent hover:text-foreground">
<Pencil className="h-4 w-4" /> <Pencil className="h-4 w-4" />
</button> </button>
<button onClick={() => handleDelete(cat.id)} className="rounded-md p-1.5 text-white/50 hover:bg-red-400/10 hover:text-red-400"> <button onClick={() => handleDelete(cat.id)} className="rounded-md p-1.5 text-muted-foreground hover:bg-red-400/10 hover:text-red-400">
<Trash2 className="h-4 w-4" /> <Trash2 className="h-4 w-4" />
</button> </button>
</div> </div>
@@ -131,22 +131,22 @@ export function TeamCategoriesPage() {
<Modal isOpen={createOpen} onClose={() => setCreateOpen(false)} title="Create Category" size="sm" <Modal isOpen={createOpen} onClose={() => setCreateOpen(false)} title="Create Category" size="sm"
footer={ footer={
<div className="flex justify-end gap-3"> <div className="flex justify-end gap-3">
<button onClick={() => setCreateOpen(false)} className="rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60 hover:bg-white/10 hover:text-white">Cancel</button> <button onClick={() => setCreateOpen(false)} className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground">Cancel</button>
<button onClick={handleCreate} disabled={!form.name || !form.slug} className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90 disabled:opacity-50">Create</button> <button onClick={handleCreate} disabled={!form.name || !form.slug} className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50">Create</button>
</div> </div>
} }
> >
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<label className="mb-1 block text-sm font-medium text-white">Name</label> <label className="mb-1 block text-sm font-medium text-foreground">Name</label>
<input type="text" value={form.name} onChange={(e) => { const name = e.target.value; setForm(f => ({ ...f, name, slug: generateSlug(name) })) }} placeholder="e.g. Networking" className={inputCn} /> <input type="text" value={form.name} onChange={(e) => { const name = e.target.value; setForm(f => ({ ...f, name, slug: generateSlug(name) })) }} placeholder="e.g. Networking" className={inputCn} />
</div> </div>
<div> <div>
<label className="mb-1 block text-sm font-medium text-white">Slug</label> <label className="mb-1 block text-sm font-medium text-foreground">Slug</label>
<input type="text" value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} className={inputCn} /> <input type="text" value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} className={inputCn} />
</div> </div>
<div> <div>
<label className="mb-1 block text-sm font-medium text-white">Description</label> <label className="mb-1 block text-sm font-medium text-foreground">Description</label>
<input type="text" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} placeholder="Optional" className={inputCn} /> <input type="text" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} placeholder="Optional" className={inputCn} />
</div> </div>
</div> </div>
@@ -156,22 +156,22 @@ export function TeamCategoriesPage() {
<Modal isOpen={!!editCategory} onClose={() => setEditCategory(null)} title="Edit Category" size="sm" <Modal isOpen={!!editCategory} onClose={() => setEditCategory(null)} title="Edit Category" size="sm"
footer={ footer={
<div className="flex justify-end gap-3"> <div className="flex justify-end gap-3">
<button onClick={() => setEditCategory(null)} className="rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60 hover:bg-white/10 hover:text-white">Cancel</button> <button onClick={() => setEditCategory(null)} className="rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground hover:bg-accent hover:text-foreground">Cancel</button>
<button onClick={handleUpdate} disabled={!form.name || !form.slug} className="rounded-md bg-white px-4 py-2 text-sm font-medium text-black hover:bg-white/90 disabled:opacity-50">Save</button> <button onClick={handleUpdate} disabled={!form.name || !form.slug} className="rounded-md bg-gradient-brand text-white shadow-lg shadow-primary/20 px-4 py-2 text-sm font-medium hover:opacity-90 disabled:opacity-50">Save</button>
</div> </div>
} }
> >
<div className="space-y-4"> <div className="space-y-4">
<div> <div>
<label className="mb-1 block text-sm font-medium text-white">Name</label> <label className="mb-1 block text-sm font-medium text-foreground">Name</label>
<input type="text" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} className={inputCn} /> <input type="text" value={form.name} onChange={(e) => setForm({ ...form, name: e.target.value })} className={inputCn} />
</div> </div>
<div> <div>
<label className="mb-1 block text-sm font-medium text-white">Slug</label> <label className="mb-1 block text-sm font-medium text-foreground">Slug</label>
<input type="text" value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} className={inputCn} /> <input type="text" value={form.slug} onChange={(e) => setForm({ ...form, slug: e.target.value })} className={inputCn} />
</div> </div>
<div> <div>
<label className="mb-1 block text-sm font-medium text-white">Description</label> <label className="mb-1 block text-sm font-medium text-foreground">Description</label>
<input type="text" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} placeholder="Optional" className={inputCn} /> <input type="text" value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} placeholder="Optional" className={inputCn} />
</div> </div>
</div> </div>