fix: admin pages CSS variables - consistent design system colors
This commit is contained in:
@@ -71,44 +71,62 @@ export default function AdminMeClient({ currentUser }: ProfilePageProps) {
|
||||
}
|
||||
|
||||
return (
|
||||
<main className="min-h-screen bg-stone-50 px-6 py-12">
|
||||
<main className="min-h-screen px-6 py-12" style={{ backgroundColor: "var(--admin-bg)" }}>
|
||||
<div className="mx-auto max-w-2xl">
|
||||
<Link href="/admin" className="text-sm text-stone-500 hover:text-stone-700">
|
||||
<Link
|
||||
href="/admin"
|
||||
className="text-sm transition-colors"
|
||||
style={{ color: "var(--admin-text-muted)" }}
|
||||
>
|
||||
← Back to dashboard
|
||||
</Link>
|
||||
|
||||
<h1 className="mt-6 text-3xl font-bold text-stone-950">My Profile</h1>
|
||||
<p className="mt-1 text-sm text-stone-500">
|
||||
<h1 className="mt-6 text-3xl font-bold" style={{ color: "var(--admin-text-primary)" }}>My Profile</h1>
|
||||
<p className="mt-1 text-sm" style={{ color: "var(--admin-text-muted)" }}>
|
||||
Manage your profile information and preferences.
|
||||
</p>
|
||||
|
||||
{error && (
|
||||
<div className="mt-4 rounded-xl bg-red-50 p-4 text-sm text-red-700">{error}</div>
|
||||
<div className="mt-4 rounded-xl p-4 text-sm" style={{
|
||||
backgroundColor: "rgba(239, 68, 68, 0.1)",
|
||||
color: "rgb(239, 68, 68)"
|
||||
}}>{error}</div>
|
||||
)}
|
||||
|
||||
{/* Profile card */}
|
||||
<div className="mt-6 rounded-2xl bg-white p-6 shadow-black/20 ring-1 ring-stone-200">
|
||||
<div className="mt-6 rounded-2xl p-6 shadow-lg border" style={{
|
||||
backgroundColor: "white",
|
||||
boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
|
||||
borderColor: "var(--admin-border)"
|
||||
}}>
|
||||
<div className="flex items-start justify-between">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold text-stone-950">
|
||||
<h2 className="text-lg font-semibold" style={{ color: "var(--admin-text-primary)" }}>
|
||||
{currentUser.display_name || currentUser.email}
|
||||
</h2>
|
||||
{currentUser.display_name && (
|
||||
<p className="text-sm text-stone-500">{currentUser.email}</p>
|
||||
<p className="text-sm" style={{ color: "var(--admin-text-muted)" }}>{currentUser.email}</p>
|
||||
)}
|
||||
<div className="mt-2 flex items-center gap-2">
|
||||
<span className="rounded-full bg-stone-50 px-2.5 py-0.5 text-xs font-semibold capitalize text-stone-500">
|
||||
<span className="rounded-full px-2.5 py-0.5 text-xs font-semibold capitalize" style={{
|
||||
backgroundColor: "var(--admin-bg-subtle)",
|
||||
color: "var(--admin-text-muted)"
|
||||
}}>
|
||||
{currentUser.role.replace("_", " ")}
|
||||
</span>
|
||||
{currentUser.brand_name && (
|
||||
<span className="text-xs text-stone-500">{currentUser.brand_name}</span>
|
||||
<span className="text-xs" style={{ color: "var(--admin-text-muted)" }}>{currentUser.brand_name}</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{!editing && (
|
||||
<button
|
||||
onClick={() => setEditing(true)}
|
||||
className="rounded-lg border border-stone-200 px-4 py-2 text-sm font-medium text-stone-500 hover:bg-stone-100"
|
||||
className="rounded-lg border px-4 py-2 text-sm font-medium transition-colors"
|
||||
style={{
|
||||
borderColor: "var(--admin-border)",
|
||||
color: "var(--admin-text-muted)"
|
||||
}}
|
||||
>
|
||||
Edit Profile
|
||||
</button>
|
||||
@@ -120,12 +138,12 @@ export default function AdminMeClient({ currentUser }: ProfilePageProps) {
|
||||
<div className="mt-6 space-y-4">
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<p className="text-xs font-medium uppercase tracking-wide text-stone-500">Phone</p>
|
||||
<p className="mt-1 text-sm text-stone-700">{currentUser.phone_number ?? "—"}</p>
|
||||
<p className="text-xs font-medium uppercase tracking-wide" style={{ color: "var(--admin-text-muted)" }}>Phone</p>
|
||||
<p className="mt-1 text-sm" style={{ color: "var(--admin-text-primary)" }}>{currentUser.phone_number ?? "—"}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-xs font-medium uppercase tracking-wide text-stone-500">Email</p>
|
||||
<p className="mt-1 text-sm text-stone-700">{currentUser.email}</p>
|
||||
<p className="text-xs font-medium uppercase tracking-wide" style={{ color: "var(--admin-text-muted)" }}>Email</p>
|
||||
<p className="mt-1 text-sm" style={{ color: "var(--admin-text-primary)" }}>{currentUser.email}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -135,22 +153,32 @@ export default function AdminMeClient({ currentUser }: ProfilePageProps) {
|
||||
{editing && (
|
||||
<form onSubmit={handleSaveProfile} className="mt-6 space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-stone-700">Display Name</label>
|
||||
<label className="block text-sm font-medium" style={{ color: "var(--admin-text-primary)" }}>Display Name</label>
|
||||
<input
|
||||
type="text"
|
||||
value={displayName}
|
||||
onChange={(e) => setDisplayName(e.target.value)}
|
||||
className="mt-1 w-full rounded-lg border border-stone-300 px-3 py-2 text-sm focus:border-emerald-500 focus:outline-none focus:ring-1 focus:ring-emerald-500"
|
||||
className="mt-1 w-full rounded-lg border px-3 py-2 text-sm focus:outline-none focus:ring-1"
|
||||
style={{
|
||||
borderColor: "var(--admin-border)",
|
||||
color: "var(--admin-text-primary)",
|
||||
backgroundColor: "white"
|
||||
}}
|
||||
placeholder="Your name"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-stone-700">Phone Number</label>
|
||||
<label className="block text-sm font-medium" style={{ color: "var(--admin-text-primary)" }}>Phone Number</label>
|
||||
<input
|
||||
type="tel"
|
||||
value={phoneNumber}
|
||||
onChange={(e) => setPhoneNumber(e.target.value)}
|
||||
className="mt-1 w-full rounded-lg border border-stone-300 px-3 py-2 text-sm focus:border-emerald-500 focus:outline-none focus:ring-1 focus:ring-emerald-500"
|
||||
className="mt-1 w-full rounded-lg border px-3 py-2 text-sm focus:outline-none focus:ring-1"
|
||||
style={{
|
||||
borderColor: "var(--admin-border)",
|
||||
color: "var(--admin-text-primary)",
|
||||
backgroundColor: "white"
|
||||
}}
|
||||
placeholder="+1 (555) 000-0000"
|
||||
/>
|
||||
</div>
|
||||
@@ -158,14 +186,19 @@ export default function AdminMeClient({ currentUser }: ProfilePageProps) {
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => { setEditing(false); setError(null); }}
|
||||
className="rounded-lg border border-stone-200 px-4 py-2 text-sm font-medium text-stone-500 hover:bg-stone-100"
|
||||
className="rounded-lg border px-4 py-2 text-sm font-medium transition-colors"
|
||||
style={{
|
||||
borderColor: "var(--admin-border)",
|
||||
color: "var(--admin-text-muted)"
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
disabled={saving}
|
||||
className="rounded-lg bg-stone-800 px-4 py-2 text-sm font-medium text-white hover:bg-stone-700 disabled:opacity-50"
|
||||
className="rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors disabled:opacity-50"
|
||||
style={{ backgroundColor: "var(--admin-accent)" }}
|
||||
>
|
||||
{saving ? "Saving…" : "Save Changes"}
|
||||
</button>
|
||||
@@ -175,35 +208,51 @@ export default function AdminMeClient({ currentUser }: ProfilePageProps) {
|
||||
</div>
|
||||
|
||||
{/* Email change section */}
|
||||
<div className="mt-6 rounded-2xl bg-white p-6 shadow-black/20 ring-1 ring-stone-200">
|
||||
<h3 className="text-base font-semibold text-stone-950">Email Address</h3>
|
||||
<p className="mt-1 text-sm text-stone-500">
|
||||
Current: <span className="font-medium text-stone-700">{currentUser.email}</span>
|
||||
<div className="mt-6 rounded-2xl p-6 shadow-lg border" style={{
|
||||
backgroundColor: "white",
|
||||
boxShadow: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)",
|
||||
borderColor: "var(--admin-border)"
|
||||
}}>
|
||||
<h3 className="text-base font-semibold" style={{ color: "var(--admin-text-primary)" }}>Email Address</h3>
|
||||
<p className="mt-1 text-sm" style={{ color: "var(--admin-text-muted)" }}>
|
||||
Current: <span className="font-medium" style={{ color: "var(--admin-text-primary)" }}>{currentUser.email}</span>
|
||||
</p>
|
||||
|
||||
{emailChangeSent ? (
|
||||
<div className="mt-4 rounded-lg bg-green-50 p-4 text-sm text-green-700">
|
||||
<div className="mt-4 rounded-lg p-4 text-sm" style={{
|
||||
backgroundColor: "rgba(16, 185, 129, 0.1)",
|
||||
color: "var(--admin-accent)"
|
||||
}}>
|
||||
A confirmation email has been sent to <strong>{newEmail}</strong>. Click the link in the email to confirm the change.
|
||||
</div>
|
||||
) : (
|
||||
<form onSubmit={handleEmailChange} className="mt-4 space-y-3">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-stone-700">New Email Address</label>
|
||||
<label className="block text-sm font-medium" style={{ color: "var(--admin-text-primary)" }}>New Email Address</label>
|
||||
<input
|
||||
type="email"
|
||||
value={newEmail}
|
||||
onChange={(e) => setNewEmail(e.target.value)}
|
||||
className="mt-1 w-full rounded-lg border border-stone-300 px-3 py-2 text-sm focus:border-emerald-500 focus:outline-none focus:ring-1 focus:ring-emerald-500"
|
||||
className="mt-1 w-full rounded-lg border px-3 py-2 text-sm focus:outline-none focus:ring-1"
|
||||
style={{
|
||||
borderColor: "var(--admin-border)",
|
||||
color: "var(--admin-text-primary)",
|
||||
backgroundColor: "white"
|
||||
}}
|
||||
placeholder="new@example.com"
|
||||
/>
|
||||
</div>
|
||||
{emailError && (
|
||||
<div className="rounded-lg bg-red-50 p-3 text-sm text-red-700">{emailError}</div>
|
||||
<div className="rounded-lg p-3 text-sm" style={{
|
||||
backgroundColor: "rgba(239, 68, 68, 0.1)",
|
||||
color: "rgb(239, 68, 68)"
|
||||
}}>{emailError}</div>
|
||||
)}
|
||||
<button
|
||||
type="submit"
|
||||
disabled={changingEmail || !newEmail || !newEmail.includes("@")}
|
||||
className="rounded-lg bg-stone-800 px-4 py-2 text-sm font-medium text-white hover:bg-stone-700 disabled:opacity-50"
|
||||
className="rounded-lg px-4 py-2 text-sm font-medium text-white transition-colors disabled:opacity-50"
|
||||
style={{ backgroundColor: "var(--admin-accent)" }}
|
||||
>
|
||||
{changingEmail ? "Sending…" : "Change Email"}
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user