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

refactor: replace hardcoded hex values with Tailwind semantic tokens

Browse Source 
3,200+ hardcoded color values replaced with CSS variable-backed
Tailwind classes (bg-card, text-foreground, border-border, etc.).
Enables light mode via CSS variable swap. Only syntax highlighting
colors and intentional one-offs remain hardcoded (~15 values).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 04:34:35 -04:00
parent 123fc50af9
commit 303a558432
251 changed files with 3310 additions and 3310 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
frontend/src/pages/account/BrandingSettingsPage.tsx
View File

@@ -75,7 +75,7 @@ export function BrandingSettingsPage() {
<>
<PageMeta title="Branding Settings" />
<div className="flex justify-center py-12">
<Loader2 className="h-8 w-8 animate-spin text-[#848b9b]" />
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
</div>
</>
)
@@ -103,12 +103,12 @@ export function BrandingSettingsPage() {
<div>
<div className="mb-8">
<div className="flex items-center gap-3">
<Palette className="h-8 w-8 text-[#848b9b]" />
<h1 className="text-2xl font-bold font-heading text-[#e2e5eb] sm:text-3xl">
<Palette className="h-8 w-8 text-muted-foreground" />
<h1 className="text-2xl font-bold font-heading text-foreground sm:text-3xl">
Branding Settings
</h1>
</div>
<p className="mt-2 text-[#848b9b]">
<p className="mt-2 text-muted-foreground">
Customize your account branding — logo, accent color, and company name.
</p>
</div>
@@ -116,14 +116,14 @@ export function BrandingSettingsPage() {
<div className="max-w-2xl space-y-6">
{/* Branding Form */}
<div className="card-flat p-6">
<h2 className="text-lg font-semibold text-[#e2e5eb] mb-6">Custom Branding</h2>
<h2 className="text-lg font-semibold text-foreground mb-6">Custom Branding</h2>
<div className="space-y-5">
{/* Company Name */}
<div>
<label
htmlFor="company-name"
className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]"
className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground"
>
Company Name
</label>
@@ -135,12 +135,12 @@ export function BrandingSettingsPage() {
placeholder="Your Company Name"
maxLength={200}
className={cn(
'mt-1 w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm',
'text-[#e2e5eb] placeholder:text-[#848b9b]',
'mt-1 w-full rounded-lg border border-border bg-card px-3 py-2 text-sm',
'text-foreground placeholder:text-muted-foreground',
'focus:border-[rgba(6,182,212,0.3)] focus:outline-none focus:ring-1 focus:ring-primary/20'
)}
/>
<p className="mt-1 text-xs text-[#848b9b]">
<p className="mt-1 text-xs text-muted-foreground">
Displayed in the sidebar and exported documents.
</p>
</div>
@@ -149,7 +149,7 @@ export function BrandingSettingsPage() {
<div>
<label
htmlFor="logo-url"
className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]"
className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground"
>
Logo URL
</label>
@@ -161,16 +161,16 @@ export function BrandingSettingsPage() {
placeholder="https://example.com/logo.png"
maxLength={500}
className={cn(
'mt-1 w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm',
'text-[#e2e5eb] placeholder:text-[#848b9b] font-mono',
'mt-1 w-full rounded-lg border border-border bg-card px-3 py-2 text-sm',
'text-foreground placeholder:text-muted-foreground font-mono',
'focus:border-[rgba(6,182,212,0.3)] focus:outline-none focus:ring-1 focus:ring-primary/20'
)}
/>
<p className="mt-1 text-xs text-[#848b9b]">
<p className="mt-1 text-xs text-muted-foreground">
Publicly accessible URL to your logo image (PNG, SVG, or JPEG).
</p>
{logoUrl && (
<div className="mt-3 inline-flex items-center rounded-lg border border-[#1e2130] bg-[#14161d]/50 p-3">
<div className="mt-3 inline-flex items-center rounded-lg border border-border bg-card/50 p-3">
<img
src={logoUrl}
alt="Logo preview"
@@ -187,7 +187,7 @@ export function BrandingSettingsPage() {
<div>
<label
htmlFor="primary-color"
className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]"
className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground"
>
Accent Color
</label>
@@ -197,7 +197,7 @@ export function BrandingSettingsPage() {
type="color"
value={previewColor}
onChange={(e) => setPrimaryColor(e.target.value)}
className="h-9 w-14 cursor-pointer rounded-lg border border-[#1e2130] bg-[#14161d] p-0.5"
className="h-9 w-14 cursor-pointer rounded-lg border border-border bg-card p-0.5"
title="Pick accent color"
/>
<input
@@ -210,20 +210,20 @@ export function BrandingSettingsPage() {
placeholder="#06b6d4"
maxLength={7}
className={cn(
'w-32 rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm',
'text-[#e2e5eb] placeholder:text-[#848b9b] font-mono',
'w-32 rounded-lg border border-border bg-card px-3 py-2 text-sm',
'text-foreground placeholder:text-muted-foreground font-mono',
'focus:border-[rgba(6,182,212,0.3)] focus:outline-none focus:ring-1 focus:ring-primary/20'
)}
/>
<button
type="button"
onClick={() => setPrimaryColor(DEFAULT_COLOR)}
className="text-xs text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
className="text-xs text-muted-foreground hover:text-foreground transition-colors"
>
Reset to default
</button>
</div>
<p className="mt-1 text-xs text-[#848b9b]">
<p className="mt-1 text-xs text-muted-foreground">
Hex color code for the primary accent color (e.g. #06b6d4).
</p>
</div>
@@ -237,7 +237,7 @@ export function BrandingSettingsPage() {
disabled={isSaving || !isDirty}
className={cn(
'inline-flex items-center gap-2 rounded-lg px-5 py-2.5 text-sm font-semibold',
'bg-[#22d3ee] text-white',
'bg-primary text-white',
'hover:brightness-110 active:scale-[0.98] transition-all',
'disabled:opacity-50 disabled:cursor-not-allowed'
)}
@@ -250,15 +250,15 @@ export function BrandingSettingsPage() {
Save Branding
</button>
{!isDirty && !isSaving && (
<span className="text-xs text-[#848b9b]">No changes</span>
<span className="text-xs text-muted-foreground">No changes</span>
)}
</div>
</div>
{/* Preview Section */}
<div className="card-flat p-6">
<h2 className="text-lg font-semibold text-[#e2e5eb] mb-4">Preview</h2>
<p className="text-sm text-[#848b9b] mb-4">
<h2 className="text-lg font-semibold text-foreground mb-4">Preview</h2>
<p className="text-sm text-muted-foreground mb-4">
This is how your accent color will appear on interactive elements.
</p>
@@ -293,7 +293,7 @@ export function BrandingSettingsPage() {
</div>
{companyName && (
<p className="text-sm text-[#e2e5eb]">
<p className="text-sm text-foreground">
Company: <span className="font-medium">{companyName}</span>
</p>
)}

22
frontend/src/pages/account/ChatRetentionSettingsPage.tsx
View File

@@ -45,7 +45,7 @@ export default function ChatRetentionSettingsPage() {
if (loading) {
return (
<div className="flex items-center justify-center py-20">
<Loader2 className="animate-spin text-[#22d3ee]" size={24} />
<Loader2 className="animate-spin text-primary" size={24} />
</div>
)
}
@@ -53,18 +53,18 @@ export default function ChatRetentionSettingsPage() {
return (
<div className="max-w-2xl mx-auto py-8 px-6">
<div className="flex items-center gap-3 mb-6">
<Clock size={20} className="text-[#22d3ee]" />
<h1 className="text-xl font-heading font-bold text-[#e2e5eb]">Chat Retention</h1>
<Clock size={20} className="text-primary" />
<h1 className="text-xl font-heading font-bold text-foreground">Chat Retention</h1>
</div>
<div className="card-flat rounded-2xl p-6 space-y-6">
<p className="text-sm text-[#848b9b]">
<p className="text-sm text-muted-foreground">
Configure how long AI assistant conversations are retained. Pinned chats are never automatically deleted.
</p>
<div className="space-y-4">
<div>
<label className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b] block mb-1.5">
<label className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground block mb-1.5">
Retention Period (days)
</label>
<input
@@ -73,16 +73,16 @@ export default function ChatRetentionSettingsPage() {
onChange={e => setRetentionDays(e.target.value)}
min={1}
max={365}
className="w-full rounded-xl border bg-[#14161d] text-[#e2e5eb] text-sm px-4 py-2.5 focus:outline-hidden focus:border-primary/30"
className="w-full rounded-xl border bg-card text-foreground text-sm px-4 py-2.5 focus:outline-hidden focus:border-primary/30"
style={{ borderColor: 'var(--glass-border)' }}
/>
<p className="text-xs text-[#848b9b] mt-1">
<p className="text-xs text-muted-foreground mt-1">
Chats older than this will be automatically deleted (1-365 days)
</p>
</div>
<div>
<label className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-[#848b9b] block mb-1.5">
<label className="font-sans text-xs text-[0.625rem] uppercase tracking-widest text-muted-foreground block mb-1.5">
Max Conversations
</label>
<input
@@ -91,10 +91,10 @@ export default function ChatRetentionSettingsPage() {
onChange={e => setMaxCount(e.target.value)}
min={10}
max={10000}
className="w-full rounded-xl border bg-[#14161d] text-[#e2e5eb] text-sm px-4 py-2.5 focus:outline-hidden focus:border-primary/30"
className="w-full rounded-xl border bg-card text-foreground text-sm px-4 py-2.5 focus:outline-hidden focus:border-primary/30"
style={{ borderColor: 'var(--glass-border)' }}
/>
<p className="text-xs text-[#848b9b] mt-1">
<p className="text-xs text-muted-foreground mt-1">
When this limit is exceeded, oldest unpinned chats are deleted
</p>
</div>
@@ -104,7 +104,7 @@ export default function ChatRetentionSettingsPage() {
<button
onClick={handleSave}
disabled={saving}
className="bg-[#22d3ee] text-white font-semibold text-sm rounded-lg px-5 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-40 flex items-center gap-2"
className="bg-primary text-white font-semibold text-sm rounded-lg px-5 py-2.5 hover:brightness-110 active:scale-[0.98] transition-all disabled:opacity-40 flex items-center gap-2"
>
{saving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
Save Settings

164
frontend/src/pages/account/IntegrationsPage.tsx
View File

@@ -197,7 +197,7 @@ export function IntegrationsPage() {
<>
<PageMeta title="Integrations" />
<div className="flex justify-center py-12">
<Loader2 className="h-8 w-8 animate-spin text-[#848b9b]" />
<Loader2 className="h-8 w-8 animate-spin text-muted-foreground" />
</div>
</>
)
@@ -223,16 +223,16 @@ export function IntegrationsPage() {
<div>
<div className="mb-8">
<div className="flex items-center gap-3">
<Plug className="h-8 w-8 text-[#848b9b]" />
<h1 className="text-2xl font-bold font-heading text-[#e2e5eb] sm:text-3xl">Integrations</h1>
<Plug className="h-8 w-8 text-muted-foreground" />
<h1 className="text-2xl font-bold font-heading text-foreground sm:text-3xl">Integrations</h1>
</div>
<p className="mt-2 text-[#848b9b]">
<p className="mt-2 text-muted-foreground">
Connect your PSA to post session documentation directly to tickets.
</p>
</div>
{/* Tabs */}
<div className="mb-6 flex gap-1 border-b border-[#1e2130]">
<div className="mb-6 flex gap-1 border-b border-border">
{([
{ id: 'connection' as Tab, label: 'Connection', icon: Plug },
{ id: 'member-mapping' as Tab, label: 'Member Mapping', icon: Users },
@@ -246,8 +246,8 @@ export function IntegrationsPage() {
className={cn(
'inline-flex items-center gap-2 border-b-2 px-4 py-2.5 text-sm font-medium transition-colors -mb-px',
activeTab === id
? 'border-primary text-[#e2e5eb]'
: 'border-transparent text-[#848b9b] hover:text-[#e2e5eb] hover:border-[#1e2130]'
? 'border-primary text-foreground'
: 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
)}
>
<Icon className="h-4 w-4" />
@@ -261,7 +261,7 @@ export function IntegrationsPage() {
<div className="max-w-3xl">
{/* PSA Provider Grid */}
<div className="mb-6">
<p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] mb-3">
<p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground mb-3">
Available PSA Integrations
</p>
<div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
@@ -270,43 +270,43 @@ export function IntegrationsPage() {
'rounded-xl border p-4 flex flex-col gap-2',
connection
? 'border-primary/40 bg-primary/5'
: 'border-[#1e2130] bg-[#14161d]/30'
: 'border-border bg-card/30'
)}>
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-[#e2e5eb]">ConnectWise PSA</span>
<span className="text-sm font-medium text-foreground">ConnectWise PSA</span>
{connection ? (
<span className="inline-flex items-center rounded-full bg-emerald-400/10 px-2 py-0.5 text-[0.625rem] font-sans text-xs text-emerald-400">
Connected
</span>
) : (
<span className="inline-flex items-center rounded-full bg-[rgba(34,211,238,0.10)] px-2 py-0.5 text-[0.625rem] font-sans text-xs text-[#22d3ee]">
<span className="inline-flex items-center rounded-full bg-accent-dim px-2 py-0.5 text-[0.625rem] font-sans text-xs text-primary">
Available
</span>
)}
</div>
<p className="text-xs text-[#848b9b]">Manage, ticket linking, time entries</p>
<p className="text-xs text-muted-foreground">Manage, ticket linking, time entries</p>
</div>
{/* Autotask — coming soon */}
<div className="rounded-xl border border-[#1e2130] bg-[#14161d]/20 p-4 flex flex-col gap-2 opacity-60 cursor-not-allowed select-none">
<div className="rounded-xl border border-border bg-card/20 p-4 flex flex-col gap-2 opacity-60 cursor-not-allowed select-none">
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-[#e2e5eb]">Autotask PSA</span>
<span className="text-sm font-medium text-foreground">Autotask PSA</span>
<span className="inline-flex items-center rounded-full bg-amber-400/10 px-2 py-0.5 text-[0.625rem] font-sans text-xs text-amber-400">
Coming Soon
</span>
</div>
<p className="text-xs text-[#848b9b]">Datto / Kaseya integration</p>
<p className="text-xs text-muted-foreground">Datto / Kaseya integration</p>
</div>
{/* Halo PSA — coming soon */}
<div className="rounded-xl border border-[#1e2130] bg-[#14161d]/20 p-4 flex flex-col gap-2 opacity-60 cursor-not-allowed select-none">
<div className="rounded-xl border border-border bg-card/20 p-4 flex flex-col gap-2 opacity-60 cursor-not-allowed select-none">
<div className="flex items-center justify-between">
<span className="text-sm font-medium text-[#e2e5eb]">Halo PSA</span>
<span className="text-sm font-medium text-foreground">Halo PSA</span>
<span className="inline-flex items-center rounded-full bg-amber-400/10 px-2 py-0.5 text-[0.625rem] font-sans text-xs text-amber-400">
Coming Soon
</span>
</div>
<p className="text-xs text-[#848b9b]">HaloPSA / HaloITSM integration</p>
<p className="text-xs text-muted-foreground">HaloPSA / HaloITSM integration</p>
</div>
</div>
</div>
@@ -327,15 +327,15 @@ export function IntegrationsPage() {
{(mode === 'setup' || mode === 'edit') && (
<div className="card-flat p-6">
<div className="flex items-center gap-2 mb-6">
<Shield className="h-5 w-5 text-[#848b9b]" />
<h2 className="text-lg font-semibold text-[#e2e5eb]">
<Shield className="h-5 w-5 text-muted-foreground" />
<h2 className="text-lg font-semibold text-foreground">
{mode === 'setup' ? 'Connect to ConnectWise PSA' : 'Edit Connection'}
</h2>
</div>
<form onSubmit={mode === 'setup' ? handleCreate : handleUpdate} className="space-y-4">
<div>
<label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
<label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
Display Name
</label>
<Input
@@ -349,7 +349,7 @@ export function IntegrationsPage() {
</div>
<div>
<label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
<label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
Site URL
</label>
<Input
@@ -363,7 +363,7 @@ export function IntegrationsPage() {
</div>
<div>
<label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
<label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
Company ID
</label>
<Input
@@ -377,7 +377,7 @@ export function IntegrationsPage() {
</div>
<div>
<label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
<label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
Public Key
</label>
<Input
@@ -391,7 +391,7 @@ export function IntegrationsPage() {
</div>
<div>
<label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">
<label className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">
Private Key
</label>
<Input
@@ -417,7 +417,7 @@ export function IntegrationsPage() {
disabled={isSaving}
className={cn(
'inline-flex items-center gap-2 rounded-lg px-5 py-2.5 text-sm font-semibold',
'bg-[#22d3ee] text-white',
'bg-primary text-white',
'hover:brightness-110 active:scale-[0.98] transition-all',
'disabled:opacity-50 disabled:cursor-not-allowed'
)}
@@ -430,7 +430,7 @@ export function IntegrationsPage() {
<button
type="button"
onClick={cancelEdit}
className="text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
>
Cancel
</button>
@@ -447,10 +447,10 @@ export function IntegrationsPage() {
<div className="card-flat p-6">
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-3">
<span className="inline-flex items-center rounded-full bg-[rgba(34,211,238,0.10)] px-2.5 py-0.5 text-xs font-sans text-xs font-medium text-[#22d3ee]">
<span className="inline-flex items-center rounded-full bg-accent-dim px-2.5 py-0.5 text-xs font-sans text-xs font-medium text-primary">
ConnectWise
</span>
<h2 className="text-lg font-semibold text-[#e2e5eb]">{connection.display_name}</h2>
<h2 className="text-lg font-semibold text-foreground">{connection.display_name}</h2>
</div>
<div className="flex items-center gap-2">
<span
@@ -470,24 +470,24 @@ export function IntegrationsPage() {
<div className="grid gap-4 sm:grid-cols-2">
<div>
<p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Site URL</p>
<p className="mt-1 text-sm text-[#e2e5eb]">{connection.site_url}</p>
<p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Site URL</p>
<p className="mt-1 text-sm text-foreground">{connection.site_url}</p>
</div>
<div>
<p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Company ID</p>
<p className="mt-1 text-sm text-[#e2e5eb]">{connection.company_id}</p>
<p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Company ID</p>
<p className="mt-1 text-sm text-foreground">{connection.company_id}</p>
</div>
<div>
<p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Public Key</p>
<p className="mt-1 text-sm text-[#e2e5eb] font-mono">{connection.public_key_hint}</p>
<p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Public Key</p>
<p className="mt-1 text-sm text-foreground font-mono">{connection.public_key_hint}</p>
</div>
<div>
<p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Private Key</p>
<p className="mt-1 text-sm text-[#e2e5eb] font-mono">{connection.private_key_hint}</p>
<p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Private Key</p>
<p className="mt-1 text-sm text-foreground font-mono">{connection.private_key_hint}</p>
</div>
<div>
<p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Last Validated</p>
<p className="mt-1 text-sm text-[#e2e5eb]">
<p className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Last Validated</p>
<p className="mt-1 text-sm text-foreground">
{connection.last_validated_at ? formatRelativeTime(connection.last_validated_at) : 'Never'}
</p>
</div>
@@ -511,7 +511,7 @@ export function IntegrationsPage() {
)}
<span>{testResult.message}</span>
{testResult.server_version && (
<span className="ml-auto text-xs text-[#848b9b]">
<span className="ml-auto text-xs text-muted-foreground">
v{testResult.server_version}
</span>
)}
@@ -525,7 +525,7 @@ export function IntegrationsPage() {
disabled={isTesting}
className={cn(
'inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium',
'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb]',
'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground',
'hover:border-[rgba(255,255,255,0.12)] transition-all',
'disabled:opacity-50 disabled:cursor-not-allowed'
)}
@@ -542,7 +542,7 @@ export function IntegrationsPage() {
onClick={startEdit}
className={cn(
'inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium',
'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb]',
'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground',
'hover:border-[rgba(255,255,255,0.12)] transition-all'
)}
>
@@ -552,7 +552,7 @@ export function IntegrationsPage() {
{showDeleteConfirm ? (
<div className="flex items-center gap-2 ml-auto">
<span className="text-sm text-[#848b9b]">Disconnect?</span>
<span className="text-sm text-muted-foreground">Disconnect?</span>
<button
onClick={handleDelete}
disabled={isDeleting}
@@ -563,7 +563,7 @@ export function IntegrationsPage() {
</button>
<button
onClick={() => setShowDeleteConfirm(false)}
className="text-sm text-[#848b9b] hover:text-[#e2e5eb] transition-colors"
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
>
Cancel
</button>
@@ -593,10 +593,10 @@ export function IntegrationsPage() {
<div className="max-w-3xl">
<div className="card-flat p-6">
<div className="flex items-center gap-3 mb-4">
<Ticket className="h-5 w-5 text-[#848b9b]" />
<h2 className="text-lg font-semibold text-[#e2e5eb]">Post History</h2>
<Ticket className="h-5 w-5 text-muted-foreground" />
<h2 className="text-lg font-semibold text-foreground">Post History</h2>
</div>
<p className="text-sm text-[#848b9b]">
<p className="text-sm text-muted-foreground">
View post history from individual sessions by clicking on linked tickets.
When a session has a ConnectWise ticket linked, use the Update button to post
session documentation and view previous posts.
@@ -729,10 +729,10 @@ function MemberMappingTab({ connection }: { connection: PsaConnectionResponse |
<div className="max-w-3xl">
<div className="card-flat p-6">
<div className="flex items-center gap-3 mb-4">
<Users className="h-5 w-5 text-[#848b9b]" />
<h2 className="text-lg font-semibold text-[#e2e5eb]">Member Mapping</h2>
<Users className="h-5 w-5 text-muted-foreground" />
<h2 className="text-lg font-semibold text-foreground">Member Mapping</h2>
</div>
<p className="text-sm text-[#848b9b]">
<p className="text-sm text-muted-foreground">
Set up a PSA connection first to map team members to ConnectWise members.
</p>
</div>
@@ -746,8 +746,8 @@ function MemberMappingTab({ connection }: { connection: PsaConnectionResponse |
<div className="card-flat p-6">
<div className="flex items-center justify-between mb-2">
<div className="flex items-center gap-3">
<Users className="h-5 w-5 text-[#848b9b]" />
<h2 className="text-lg font-semibold text-[#e2e5eb]">Member Mapping</h2>
<Users className="h-5 w-5 text-muted-foreground" />
<h2 className="text-lg font-semibold text-foreground">Member Mapping</h2>
</div>
<button
type="button"
@@ -755,7 +755,7 @@ function MemberMappingTab({ connection }: { connection: PsaConnectionResponse |
disabled={isAutoMatching || isLoadingData}
className={cn(
'inline-flex items-center gap-2 rounded-lg px-4 py-2 text-sm font-medium',
'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-[#e2e5eb]',
'bg-[rgba(255,255,255,0.04)] border border-[rgba(255,255,255,0.06)] text-foreground',
'hover:border-[rgba(255,255,255,0.12)] transition-all',
'disabled:opacity-50 disabled:cursor-not-allowed'
)}
@@ -768,7 +768,7 @@ function MemberMappingTab({ connection }: { connection: PsaConnectionResponse |
Auto-Match by Email
</button>
</div>
<p className="text-sm text-[#848b9b]">
<p className="text-sm text-muted-foreground">
Map your ResolutionFlow users to ConnectWise members so session posts are attributed correctly.
</p>
</div>
@@ -776,7 +776,7 @@ function MemberMappingTab({ connection }: { connection: PsaConnectionResponse |
{/* Loading state */}
{isLoadingData && (
<div className="flex justify-center py-8">
<Loader2 className="h-6 w-6 animate-spin text-[#848b9b]" />
<Loader2 className="h-6 w-6 animate-spin text-muted-foreground" />
</div>
)}
@@ -784,17 +784,17 @@ function MemberMappingTab({ connection }: { connection: PsaConnectionResponse |
{hasLoaded && !isLoadingData && (
<div className="card-flat overflow-hidden">
{uniqueUsers.length === 0 ? (
<div className="p-6 text-center text-sm text-[#848b9b]">
<div className="p-6 text-center text-sm text-muted-foreground">
No users found. Use Auto-Match to discover and map users.
</div>
) : (
<>
{/* Table header */}
<div className="grid grid-cols-[1fr_1fr_1fr_auto] gap-4 border-b border-[#1e2130] px-6 py-3">
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">User</span>
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Email</span>
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b]">Mapped To</span>
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-[#848b9b] w-20 text-center">Method</span>
<div className="grid grid-cols-[1fr_1fr_1fr_auto] gap-4 border-b border-border px-6 py-3">
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">User</span>
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Email</span>
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground">Mapped To</span>
<span className="font-sans text-xs text-[0.625rem] uppercase tracking-[0.1em] text-muted-foreground w-20 text-center">Method</span>
</div>
{/* Rows */}
@@ -803,18 +803,18 @@ function MemberMappingTab({ connection }: { connection: PsaConnectionResponse |
return (
<div
key={user.user_id}
className="grid grid-cols-[1fr_1fr_1fr_auto] gap-4 items-center border-b border-[#1e2130]/50 px-6 py-3 last:border-b-0"
className="grid grid-cols-[1fr_1fr_1fr_auto] gap-4 items-center border-b border-border/50 px-6 py-3 last:border-b-0"
>
<span className="text-sm text-[#e2e5eb] truncate">{user.user_name}</span>
<span className="text-sm text-[#848b9b] truncate">{user.user_email}</span>
<span className="text-sm text-foreground truncate">{user.user_name}</span>
<span className="text-sm text-muted-foreground truncate">{user.user_email}</span>
<select
title={`Map ${user.user_name} to a ConnectWise member`}
value={currentMapping?.external_member_id || ''}
onChange={(e) => handleMemberChange(user.user_id, e.target.value)}
className={cn(
'w-full rounded-lg border bg-[#14161d] px-3 py-1.5 text-sm text-[#e2e5eb]',
'border-[#1e2130] focus:border-[rgba(6,182,212,0.3)] focus:outline-none',
!currentMapping && 'text-[#848b9b]'
'w-full rounded-lg border bg-card px-3 py-1.5 text-sm text-foreground',
'border-border focus:border-[rgba(6,182,212,0.3)] focus:outline-none',
!currentMapping && 'text-muted-foreground'
)}
>
<option value="">-- Unmapped --</option>
@@ -829,17 +829,17 @@ function MemberMappingTab({ connection }: { connection: PsaConnectionResponse |
<span className={cn(
'inline-flex items-center rounded-full px-2 py-0.5 text-[0.625rem] font-sans text-xs',
user.matched_by === 'auto_email'
? 'bg-[rgba(34,211,238,0.10)] text-[#22d3ee]'
: 'bg-[#14161d] border border-[#1e2130] text-[#848b9b]'
? 'bg-accent-dim text-primary'
: 'bg-card border border-border text-muted-foreground'
)}>
{user.matched_by === 'auto_email' ? 'auto' : 'manual'}
</span>
) : currentMapping ? (
<span className="inline-flex items-center rounded-full px-2 py-0.5 text-[0.625rem] font-sans text-xs bg-[#14161d] border border-[#1e2130] text-[#848b9b]">
<span className="inline-flex items-center rounded-full px-2 py-0.5 text-[0.625rem] font-sans text-xs bg-card border border-border text-muted-foreground">
manual
</span>
) : (
<span className="text-[0.625rem] text-[#848b9b]/50">—</span>
<span className="text-[0.625rem] text-muted-foreground/50">—</span>
)}
</span>
</div>
@@ -859,7 +859,7 @@ function MemberMappingTab({ connection }: { connection: PsaConnectionResponse |
disabled={isSavingMappings}
className={cn(
'inline-flex items-center gap-2 rounded-lg px-5 py-2.5 text-sm font-semibold',
'bg-[#22d3ee] text-white',
'bg-primary text-white',
'hover:brightness-110 active:scale-[0.98] transition-all',
'disabled:opacity-50 disabled:cursor-not-allowed'
)}
@@ -915,7 +915,7 @@ function FlowPilotSettingsTab({ connection }: { connection: PsaConnectionRespons
return (
<div className="max-w-3xl">
<div className="card-flat p-6 text-center">
<p className="text-sm text-[#848b9b]">Connect your PSA first to configure FlowPilot settings.</p>
<p className="text-sm text-muted-foreground">Connect your PSA first to configure FlowPilot settings.</p>
</div>
</div>
)
@@ -924,7 +924,7 @@ function FlowPilotSettingsTab({ connection }: { connection: PsaConnectionRespons
if (isLoading) {
return (
<div className="flex justify-center py-12">
<Loader2 className="h-5 w-5 animate-spin text-[#848b9b]" />
<Loader2 className="h-5 w-5 animate-spin text-muted-foreground" />
</div>
)
}
@@ -935,10 +935,10 @@ function FlowPilotSettingsTab({ connection }: { connection: PsaConnectionRespons
<div className="max-w-3xl space-y-4">
<div className="card-flat p-6">
<div className="flex items-center gap-3 mb-4">
<Zap className="h-5 w-5 text-[#22d3ee]" />
<h2 className="text-lg font-semibold text-[#e2e5eb]">FlowPilot Settings</h2>
<Zap className="h-5 w-5 text-primary" />
<h2 className="text-lg font-semibold text-foreground">FlowPilot Settings</h2>
</div>
<p className="text-sm text-[#848b9b] mb-6">
<p className="text-sm text-muted-foreground mb-6">
Configure how FlowPilot integrates with your ConnectWise PSA when sessions are resolved or escalated.
</p>
@@ -1039,8 +1039,8 @@ function SettingToggle({
return (
<div className="flex items-start justify-between gap-4">
<div>
<p className="text-sm font-medium text-[#e2e5eb]">{label}</p>
<p className="text-xs text-[#848b9b] mt-0.5">{description}</p>
<p className="text-sm font-medium text-foreground">{label}</p>
<p className="text-xs text-muted-foreground mt-0.5">{description}</p>
</div>
<button
onClick={() => onChange(!checked)}
@@ -1078,13 +1078,13 @@ function SettingSelect({
}) {
return (
<div>
<p className="text-sm font-medium text-[#e2e5eb]">{label}</p>
<p className="text-xs text-[#848b9b] mt-0.5 mb-2">{description}</p>
<p className="text-sm font-medium text-foreground">{label}</p>
<p className="text-xs text-muted-foreground mt-0.5 mb-2">{description}</p>
<select
value={value}
onChange={(e) => onChange(e.target.value)}
disabled={disabled}
className="w-full max-w-xs rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb] focus:border-[rgba(6,182,212,0.3)] focus:outline-none disabled:opacity-50"
className="w-full max-w-xs rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground focus:border-[rgba(6,182,212,0.3)] focus:outline-none disabled:opacity-50"
>
{options.map((opt) => (
<option key={opt.value} value={opt.value}>{opt.label}</option>

30
frontend/src/pages/account/ProfileSettingsPage.tsx
View File

@@ -8,8 +8,8 @@ import { toast } from '@/lib/toast'
import type { UserUpdate } from '@/types'
const inputClass = cn(
'mt-1 block w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2',
'text-[#e2e5eb] placeholder:text-[#848b9b]',
'mt-1 block w-full rounded-lg border border-border bg-card px-3 py-2',
'text-foreground placeholder:text-muted-foreground',
'focus:border-primary/30 focus:outline-hidden focus:ring-1 focus:ring-primary/20'
)
@@ -67,10 +67,10 @@ export function ProfileSettingsPage() {
<div>
<div className="mb-8">
<div className="flex items-center gap-3">
<UserIcon className="h-8 w-8 text-[#848b9b]" />
<h1 className="text-2xl font-bold font-heading text-[#e2e5eb] sm:text-3xl">Profile Settings</h1>
<UserIcon className="h-8 w-8 text-muted-foreground" />
<h1 className="text-2xl font-bold font-heading text-foreground sm:text-3xl">Profile Settings</h1>
</div>
<p className="mt-2 text-[#848b9b]">
<p className="mt-2 text-muted-foreground">
Update your name, email, and personal details
</p>
</div>
@@ -79,40 +79,40 @@ export function ProfileSettingsPage() {
<form onSubmit={handleSave} className="card-flat p-6 space-y-5">
{/* Name */}
<div>
<label htmlFor="profile-name" className="block text-sm font-medium text-[#e2e5eb]">Name</label>
<label htmlFor="profile-name" className="block text-sm font-medium text-foreground">Name</label>
<input id="profile-name" type="text" value={name} onChange={(e) => setName(e.target.value)} required className={inputClass} />
</div>
{/* Email */}
<div>
<label htmlFor="profile-email" className="block text-sm font-medium text-[#e2e5eb]">Email</label>
<label htmlFor="profile-email" className="block text-sm font-medium text-foreground">Email</label>
<input id="profile-email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} required className={inputClass} />
</div>
{/* Password confirmation for email change */}
{emailChanged && (
<div>
<label htmlFor="profile-password" className="block text-sm font-medium text-[#e2e5eb]">Current Password</label>
<p className="text-xs text-[#848b9b]">Required to change your email address</p>
<label htmlFor="profile-password" className="block text-sm font-medium text-foreground">Current Password</label>
<p className="text-xs text-muted-foreground">Required to change your email address</p>
<input id="profile-password" type="password" value={currentPassword} onChange={(e) => setCurrentPassword(e.target.value)} required className={inputClass} />
</div>
)}
{/* Phone */}
<div>
<label htmlFor="profile-phone" className="block text-sm font-medium text-[#e2e5eb]">Phone</label>
<label htmlFor="profile-phone" className="block text-sm font-medium text-foreground">Phone</label>
<input id="profile-phone" type="tel" value={phone} onChange={(e) => setPhone(e.target.value)} placeholder="Optional" className={inputClass} />
</div>
{/* Job Title */}
<div>
<label htmlFor="profile-job-title" className="block text-sm font-medium text-[#e2e5eb]">Job Title</label>
<label htmlFor="profile-job-title" className="block text-sm font-medium text-foreground">Job Title</label>
<input id="profile-job-title" type="text" value={jobTitle} onChange={(e) => setJobTitle(e.target.value)} placeholder="e.g. Network Engineer" className={inputClass} />
</div>
{/* Timezone */}
<div>
<label htmlFor="profile-timezone" className="block text-sm font-medium text-[#e2e5eb]">Timezone</label>
<label htmlFor="profile-timezone" className="block text-sm font-medium text-foreground">Timezone</label>
<select id="profile-timezone" value={timezone} onChange={(e) => setTimezone(e.target.value)} className={inputClass}>
{COMMON_TIMEZONES.map((tz) => (
<option key={tz} value={tz}>{tz}</option>
@@ -132,7 +132,7 @@ export function ProfileSettingsPage() {
type="submit"
disabled={isSaving || !hasChanges}
className={cn(
'inline-flex items-center gap-2 rounded-lg bg-[#22d3ee] px-4 py-2 text-sm font-semibold text-white',
'inline-flex items-center gap-2 rounded-lg bg-primary px-4 py-2 text-sm font-semibold text-white',
'hover:brightness-110 active:scale-[0.98]',
'disabled:opacity-50 disabled:cursor-not-allowed'
)}
@@ -145,8 +145,8 @@ export function ProfileSettingsPage() {
to="/change-password"
className={cn(
'inline-flex items-center rounded-lg px-4 py-2 text-sm font-medium',
'bg-[#191c25] border border-[#1e2130] text-[#e2e5eb]',
'hover:border-[#2a2f3d]'
'bg-input border border-border text-foreground',
'hover:border-border-hover'
)}
>
Change Password

30
frontend/src/pages/account/TargetListsPage.tsx
View File

@@ -114,7 +114,7 @@ export default function TargetListsPage() {
action={(
<button
onClick={() => openEditor()}
className="flex items-center gap-1.5 rounded-lg bg-[#22d3ee] px-4 py-2 text-[0.875rem] font-medium text-white hover:brightness-110"
className="flex items-center gap-1.5 rounded-lg bg-primary px-4 py-2 text-[0.875rem] font-medium text-white hover:brightness-110"
>
<Plus className="h-4 w-4" />
New List
@@ -137,14 +137,14 @@ export default function TargetListsPage() {
{lists.map(list => (
<div
key={list.id}
className="flex items-center justify-between rounded-xl border border-[#1e2130] bg-[#14161d] px-5 py-4"
className="flex items-center justify-between rounded-xl border border-border bg-card px-5 py-4"
>
<div>
<p className="font-medium text-[#e2e5eb]">{list.name}</p>
<p className="font-medium text-foreground">{list.name}</p>
{list.description && (
<p className="text-[0.8125rem] text-[#848b9b]">{list.description}</p>
<p className="text-[0.8125rem] text-muted-foreground">{list.description}</p>
)}
<p className="mt-0.5 font-sans text-xs text-[0.6875rem] uppercase tracking-wide text-[#848b9b]">
<p className="mt-0.5 font-sans text-xs text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
{list.targets.length} target{list.targets.length !== 1 ? 's' : ''}
{list.targets.length > 0 && (
<> &middot; {list.targets.slice(0, 3).map(t => t.label).join(', ')}{list.targets.length > 3 ? '\u2026' : ''}</>
@@ -154,14 +154,14 @@ export default function TargetListsPage() {
<div className="flex items-center gap-1">
<button
onClick={() => openEditor(list)}
className="rounded-lg p-2 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
className="rounded-lg p-2 text-muted-foreground hover:bg-accent hover:text-foreground"
title="Edit"
>
<Pencil className="h-4 w-4" />
</button>
<button
onClick={() => setDeleteTarget(list)}
className="rounded-lg p-2 text-[#848b9b] hover:bg-accent hover:text-red-400"
className="rounded-lg p-2 text-muted-foreground hover:bg-accent hover:text-red-400"
title="Delete"
>
<Trash2 className="h-4 w-4" />
@@ -182,14 +182,14 @@ export default function TargetListsPage() {
<div className="flex justify-end gap-2">
<button
onClick={() => setShowEditor(false)}
className="rounded-lg border border-[#1e2130] px-4 py-2 text-[0.875rem] text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]"
className="rounded-lg border border-border px-4 py-2 text-[0.875rem] text-muted-foreground hover:bg-accent hover:text-foreground"
>
Cancel
</button>
<button
onClick={handleSave}
disabled={isSaving}
className="rounded-lg bg-[#22d3ee] px-4 py-2 text-[0.875rem] font-medium text-white hover:brightness-110 disabled:opacity-50"
className="rounded-lg bg-primary px-4 py-2 text-[0.875rem] font-medium text-white hover:brightness-110 disabled:opacity-50"
>
{isSaving ? 'Saving\u2026' : 'Save'}
</button>
@@ -198,38 +198,38 @@ export default function TargetListsPage() {
>
<div className="space-y-4">
<div>
<label className="mb-1 block font-sans text-xs text-[0.6875rem] uppercase tracking-wide text-[#848b9b]">
<label className="mb-1 block font-sans text-xs text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
Name
</label>
<input
type="text"
value={editorName}
onChange={e => setEditorName(e.target.value)}
className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-[0.875rem] text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
placeholder="e.g. RDS Farm A"
/>
</div>
<div>
<label className="mb-1 block font-sans text-xs text-[0.6875rem] uppercase tracking-wide text-[#848b9b]">
<label className="mb-1 block font-sans text-xs text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
Description (optional)
</label>
<input
type="text"
value={editorDescription}
onChange={e => setEditorDescription(e.target.value)}
className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-[0.875rem] text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
placeholder="e.g. Production RDS servers"
/>
</div>
<div>
<label className="mb-1 block font-sans text-xs text-[0.6875rem] uppercase tracking-wide text-[#848b9b]">
<label className="mb-1 block font-sans text-xs text-[0.6875rem] uppercase tracking-wide text-muted-foreground">
Targets &mdash; one per line (add notes after #)
</label>
<textarea
value={editorTargets}
onChange={e => setEditorTargets(e.target.value)}
rows={6}
className="w-full rounded-lg border border-[#1e2130] bg-[#14161d] px-3 py-2 text-[0.875rem] text-[#e2e5eb] placeholder:text-[#848b9b] focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
className="w-full rounded-lg border border-border bg-card px-3 py-2 text-[0.875rem] text-foreground placeholder:text-muted-foreground focus:border-primary focus:outline-hidden focus:ring-1 focus:ring-primary/20"
placeholder={"RDS-01 # 192.168.1.10\nRDS-02\nRDS-03 # Backup server"}
/>
</div>

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

@@ -99,26 +99,26 @@ export function TeamCategoriesPage() {
))}
</div>
) : categories.length === 0 ? (
<div className="flex flex-col items-center justify-center bg-[#14161d] border border-[#1e2130] rounded-xl py-16">
<FolderTree className="h-12 w-12 text-[#848b9b]" />
<h3 className="mt-4 font-medium text-[#e2e5eb]">No team categories</h3>
<p className="mt-1 text-sm text-[#848b9b]">Create categories to organize your team's trees.</p>
<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-muted-foreground" />
<h3 className="mt-4 font-medium text-foreground">No team categories</h3>
<p className="mt-1 text-sm text-muted-foreground">Create categories to organize your team's trees.</p>
</div>
) : (
<div className="space-y-2">
{categories.map((cat) => (
<div key={cat.id} className="flex items-center justify-between rounded-lg border border-[#1e2130] px-4 py-3">
<div key={cat.id} className="flex items-center justify-between rounded-lg border border-border px-4 py-3">
<div>
<span className="font-medium text-[#e2e5eb]">{cat.name}</span>
<span className="ml-3 text-sm text-[#848b9b]">{cat.slug}</span>
{cat.description && <span className="ml-3 text-sm text-[#848b9b]">- {cat.description}</span>}
<span className="ml-3 text-xs text-[#848b9b]">{cat.tree_count} trees</span>
<span className="font-medium text-foreground">{cat.name}</span>
<span className="ml-3 text-sm text-muted-foreground">{cat.slug}</span>
{cat.description && <span className="ml-3 text-sm text-muted-foreground">- {cat.description}</span>}
<span className="ml-3 text-xs text-muted-foreground">{cat.tree_count} trees</span>
</div>
<div className="flex items-center gap-1">
<button onClick={() => openEdit(cat)} className="rounded-md p-1.5 text-[#848b9b] hover:bg-accent hover:text-[#e2e5eb]">
<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" />
</button>
<button onClick={() => handleDelete(cat.id)} className="rounded-md p-1.5 text-[#848b9b] 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" />
</button>
</div>
@@ -138,15 +138,15 @@ export function TeamCategoriesPage() {
>
<div className="space-y-4">
<div>
<label className="mb-1 block text-sm font-medium text-[#e2e5eb]">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" />
</div>
<div>
<label className="mb-1 block text-sm font-medium text-[#e2e5eb]">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 })} />
</div>
<div>
<label className="mb-1 block text-sm font-medium text-[#e2e5eb]">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" />
</div>
</div>
@@ -163,15 +163,15 @@ export function TeamCategoriesPage() {
>
<div className="space-y-4">
<div>
<label className="mb-1 block text-sm font-medium text-[#e2e5eb]">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 })} />
</div>
<div>
<label className="mb-1 block text-sm font-medium text-[#e2e5eb]">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 })} />
</div>
<div>
<label className="mb-1 block text-sm font-medium text-[#e2e5eb]">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" />
</div>
</div>