refactor: migrate page components to Design System v4

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 02:04:16 -04:00
parent fd28921373
commit e4ef904707
58 changed files with 1416 additions and 1416 deletions

View File

@@ -110,8 +110,8 @@ export function InviteCodesPage() {
}
const selectClass = cn(
'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'placeholder:text-muted-foreground focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
'w-full rounded-md border border-[#1e2130] bg-[#14161d] px-3 py-2 text-sm text-[#e2e5eb]',
'placeholder:text-[#848b9b] focus:outline-hidden focus:border-primary focus:ring-2 focus:ring-primary/20'
)
const columns: Column<InviteCodeResponse>[] = [
@@ -119,7 +119,7 @@ export function InviteCodesPage() {
key: 'code',
header: 'Code',
render: (c) => (
<code className="rounded bg-accent px-2 py-1 text-sm font-mono text-muted-foreground">{c.code}</code>
<code className="rounded bg-accent px-2 py-1 text-sm font-mono text-[#848b9b]">{c.code}</code>
),
},
{
@@ -130,12 +130,12 @@ export function InviteCodesPage() {
{c.email_sent ? (
<MailCheck className="h-3.5 w-3.5 text-emerald-400" />
) : (
<Mail className="h-3.5 w-3.5 text-muted-foreground" />
<Mail className="h-3.5 w-3.5 text-[#848b9b]" />
)}
<span className="text-sm text-muted-foreground">{c.email}</span>
<span className="text-sm text-[#848b9b]">{c.email}</span>
</div>
) : (
<span className="text-sm text-muted-foreground">&mdash;</span>
<span className="text-sm text-[#848b9b]">&mdash;</span>
),
},
{
@@ -151,9 +151,9 @@ export function InviteCodesPage() {
key: 'trial',
header: 'Trial',
render: (c) => c.has_trial ? (
<span className="text-sm text-muted-foreground">{c.trial_duration_days}d</span>
<span className="text-sm text-[#848b9b]">{c.trial_duration_days}d</span>
) : (
<span className="text-sm text-muted-foreground">&mdash;</span>
<span className="text-sm text-[#848b9b]">&mdash;</span>
),
},
{
@@ -170,7 +170,7 @@ export function InviteCodesPage() {
key: 'expires_at',
header: 'Expires',
render: (c) => (
<span className="text-sm text-muted-foreground">
<span className="text-sm text-[#848b9b]">
{c.expires_at ? new Date(c.expires_at).toLocaleDateString() : 'Never'}
</span>
),
@@ -179,7 +179,7 @@ export function InviteCodesPage() {
key: 'created_at',
header: 'Created',
render: (c) => (
<span className="text-sm text-muted-foreground">
<span className="text-sm text-[#848b9b]">
{new Date(c.created_at).toLocaleDateString()}
</span>
),
@@ -254,7 +254,7 @@ export function InviteCodesPage() {
>
<div className="space-y-4">
<div>
<label className="mb-1 block text-sm font-medium text-foreground">Recipient Email</label>
<label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Recipient Email</label>
<Input
type="email"
value={email}
@@ -264,7 +264,7 @@ export function InviteCodesPage() {
</div>
<div>
<label className="mb-1 block text-sm font-medium text-foreground">Plan</label>
<label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Plan</label>
<select
aria-label="Plan"
value={assignedPlan}
@@ -283,7 +283,7 @@ export function InviteCodesPage() {
{assignedPlan !== 'free' && (
<div>
<label className="mb-1 block text-sm font-medium text-foreground">Trial Duration (days)</label>
<label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Trial Duration (days)</label>
<Input
type="number"
value={trialDays}
@@ -292,12 +292,12 @@ export function InviteCodesPage() {
min={1}
max={90}
/>
<p className="mt-1 text-xs text-muted-foreground">Leave empty for no trial account gets full plan immediately.</p>
<p className="mt-1 text-xs text-[#848b9b]">Leave empty for no trial account gets full plan immediately.</p>
</div>
)}
<div>
<label className="mb-1 block text-sm font-medium text-foreground">Expires in (days)</label>
<label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Expires in (days)</label>
<Input
type="number"
value={expiresInDays}
@@ -307,7 +307,7 @@ export function InviteCodesPage() {
</div>
<div>
<label className="mb-1 block text-sm font-medium text-foreground">Note</label>
<label className="mb-1 block text-sm font-medium text-[#e2e5eb]">Note</label>
<Input
type="text"
value={note}