tyler/route-commerce
1
0
Fork 1
Code Issues Pull Requests 3 Actions Packages Projects Releases Wiki Activity

fix: admin pages CSS variables - consistent design system colors

Browse Source
This commit is contained in:
default
2026-06-02 05:02:19 +00:00
parent 454515965e
commit d7fe1ea3fd
15 changed files with 215 additions and 99 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/admin/communications/abandoned-carts/page.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ export default async function AbandonedCartsPage() {
const brandName = settingsResult?.success ? (settingsResult.settings?.brand_name ?? "Farm") : "Farm";
return (
<main className="min-h-screen bg-stone-100 px-6 py-10">
<main className="min-h-screen px-6 py-10" style={{ backgroundColor: "var(--admin-bg)" }}>
<div className="mx-auto max-w-5xl space-y-6">
{/* Header */}
<div>
src/app/admin/communications/welcome-sequence/page.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ export default async function WelcomeSequencePage() {
const brandName = settingsResult?.success ? (settingsResult.settings?.brand_name ?? "Farm") : "Farm";
return (
<main className="min-h-screen bg-stone-100 px-6 py-10">
<main className="min-h-screen px-6 py-10" style={{ backgroundColor: "var(--admin-bg)" }}>
<div className="mx-auto max-w-5xl space-y-6">
{/* Header */}
<div>
src/app/admin/me/AdminMeClient.tsx
+79 -30
View File
@@ -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>
src/app/admin/products/[id]/page.tsx
+2 -2
View File
@@ -30,7 +30,7 @@ export default async function ProductDetailPage({ params }: ProductDetailPagePro
if (error || !product) {
return (
<main className="min-h-screen bg-stone-100 px-6 py-12">
<main className="min-h-screen px-6 py-12" style={{ backgroundColor: "var(--admin-bg)" }}>
<div className="mx-auto max-w-4xl">
<h1 className="text-3xl font-bold text-red-600">Product not found</h1>
<pre className="mt-4 rounded-xl bg-white p-4 text-sm text-stone-600">
@@ -48,7 +48,7 @@ export default async function ProductDetailPage({ params }: ProductDetailPagePro
}
return (
<main className="min-h-screen bg-stone-100 px-6 py-12">
<main className="min-h-screen px-6 py-12" style={{ backgroundColor: "var(--admin-bg)" }}>
<div className="mx-auto max-w-4xl">
<a
href="/admin/products"
src/app/admin/products/import/page.tsx
+1 -1
View File
@@ -81,7 +81,7 @@ Citrus Gift Box,Seasonal citrus assortment,34.99,Shipping,TRUE,
}
return (
<main className="min-h-screen bg-stone-100 px-6 py-10">
<main className="min-h-screen px-6 py-10" style={{ backgroundColor: "var(--admin-bg)" }}>
<div className="mx-auto max-w-4xl">
<div className="mb-6 flex items-center justify-between">
<div>
src/app/admin/products/new/page.tsx
+1 -1
View File
@@ -6,7 +6,7 @@ export default async function NewProductPage() {
const adminUser = await getAdminUser();
if (!adminUser?.can_manage_products) redirect("/admin/pickup");
return (
<main className="min-h-screen bg-stone-100 px-6 py-12">
<main className="min-h-screen px-6 py-12" style={{ backgroundColor: "var(--admin-bg)" }}>
<div className="mx-auto max-w-4xl">
<div className="mb-8">
<a
src/app/admin/reports/page.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ export default async function ReportsPage() {
: adminUser.brand_id ?? null;
return (
<main className="min-h-screen bg-stone-100 px-6 py-10">
<main className="min-h-screen px-6 py-10" style={{ backgroundColor: "var(--admin-bg)" }}>
<div className="mx-auto max-w-7xl">
<PageHeader
title="Reports"
src/app/admin/route-trace/lots/[id]/page.tsx
+2 -2
View File
@@ -41,7 +41,7 @@ export default async function LotDetailPage({ params }: { params: Promise<{ id:
if (!detailResult.success || !detailResult.lot) {
return (
<div className="min-h-screen bg-stone-50 px-6 py-10">
<div className="min-h-screen px-6 py-10" style={{ backgroundColor: "var(--admin-bg)" }}>
<div className="mx-auto max-w-2xl">
<div className="rounded-xl border border-red-200 bg-white p-6 text-center">
<p className="text-red-600">Lot not found</p>
@@ -53,7 +53,7 @@ export default async function LotDetailPage({ params }: { params: Promise<{ id:
}
return (
<div className="min-h-screen bg-stone-50 px-6 py-10">
<div className="min-h-screen px-6 py-10" style={{ backgroundColor: "var(--admin-bg)" }}>
<div className="mx-auto max-w-3xl">
<div className="mb-6">
<a href="/admin/route-trace/lots" className="text-sm text-stone-500 hover:text-stone-700">← Back to Lots</a>
src/app/admin/route-trace/lots/new/page.tsx
+1 -1
View File
@@ -25,7 +25,7 @@ export default async function NewLotPage() {
if (!enabled) redirect("/admin/settings/apps?reason=route_trace");
return (
<div className="min-h-screen bg-stone-50 px-6 py-10">
<div className="min-h-screen px-6 py-10" style={{ backgroundColor: "var(--admin-bg)" }}>
<div className="mx-auto max-w-2xl">
<div className="mb-6">
<a href="/admin/route-trace/lots" className="text-sm text-stone-500 hover:text-stone-700">← Back to Lots</a>
src/app/admin/sales/import/page.tsx
+1 -1
View File
@@ -77,7 +77,7 @@ John Doe,john@example.com,555-5678,{STOP_ID},{PRODUCT_ID},1,shipping
}
return (
<main className="min-h-screen bg-stone-100 px-6 py-10">
<main className="min-h-screen px-6 py-10" style={{ backgroundColor: "var(--admin-bg)" }}>
<div className="mx-auto max-w-4xl">
<div className="mb-6">
<Link href="/admin/orders" className="text-sm text-stone-500 hover:text-stone-800">
src/app/admin/settings/shipping/page.tsx
+9 -9
View File
@@ -26,30 +26,30 @@ export default async function ShippingSettingsPage() {
const settings = result.success ? result.settings : null;
return (
<main className="min-h-screen bg-stone-100 px-6 py-10">
<main className="min-h-screen px-6 py-10" style={{ backgroundColor: "var(--admin-bg)" }}>
<div className="mx-auto max-w-2xl">
{/* Breadcrumb */}
<nav className="flex items-center gap-2 text-xs text-stone-500 mb-6">
<a href="/admin" className="hover:text-stone-800 transition-colors">Admin</a>
<nav className="flex items-center gap-2 text-xs mb-6" style={{ color: "var(--admin-text-muted)" }}>
<a href="/admin" className="hover:text-[var(--admin-text-primary)] transition-colors">Admin</a>
<span>/</span>
<span className="text-stone-800">Shipping</span>
<span style={{ color: "var(--admin-text-primary)" }}>Shipping</span>
</nav>
<div className="mb-8">
<div className="flex items-center gap-3 mb-2">
<div className="flex h-10 w-10 items-center justify-center rounded-xl bg-stone-200 border border-stone-300">
<svg className="h-5 w-5 text-stone-600" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<div className="flex h-10 w-10 items-center justify-center rounded-xl" style={{ backgroundColor: "var(--admin-accent)", color: "white" }}>
<svg className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M8.25 18.75a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h6m-9 0H3.375a1.125 1.125 0 01-1.125-1.125V14.25m17.25 4.5a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m3 0h1.125c.621 0 1.129-.504 1.09-1.124a17.902 17.902 0 00-3.213-9.193 2.056 2.056 0 00-1.58-.86H14.25m-2.25 0h2.25m0 0v-.375c0-.621-.504-1.125-1.125-1.125H15m-1.5-3l1.5 0l.75 0v-.375c0-.621-.504-1.125-1.125-1.125H15m0 0v-.375c0-.621-.504-1.125-1.125-1.125H12" />
</svg>
</div>
<h1 className="text-3xl font-bold text-stone-950">Shipping Settings</h1>
<h1 className="text-3xl font-bold" style={{ color: "var(--admin-text-primary)" }}>Shipping Settings</h1>
</div>
<p className="mt-2 text-stone-500">
<p className="mt-2 text-sm" style={{ color: "var(--admin-text-muted)" }}>
Configure FedEx integration for shipping fresh produce — sweet corn, onions, and more.
</p>
</div>
<div className="card p-6 shadow-xl">
<div className="rounded-2xl border p-6 shadow-lg" style={{ backgroundColor: "white", borderColor: "var(--admin-border)" }}>
<ShippingSettingsForm
settings={settings}
brandId={effectiveBrandId}
src/app/admin/stops/[id]/page.tsx
+2 -2
View File
@@ -38,7 +38,7 @@ export default async function StopDetailPage({ params }: StopDetailPageProps) {
if (error || !stop) {
return (
<main className="min-h-screen bg-stone-100 px-6 py-12">
<main className="min-h-screen px-6 py-12" style={{ backgroundColor: "var(--admin-bg)" }}>
<div className="mx-auto max-w-4xl">
<h1 className="text-3xl font-bold text-red-600">Stop not found</h1>
<pre className="mt-4 rounded-xl bg-white border border-stone-200 p-4 text-sm text-stone-600">
@@ -72,7 +72,7 @@ export default async function StopDetailPage({ params }: StopDetailPageProps) {
.filter(Boolean);
return (
<main className="min-h-screen bg-stone-100 px-6 py-12">
<main className="min-h-screen px-6 py-12" style={{ backgroundColor: "var(--admin-bg)" }}>
<div className="mx-auto max-w-4xl">
<a
href="/admin/stops"
src/app/admin/stops/new/page.tsx
+1 -1
View File
@@ -51,7 +51,7 @@ export default async function NewStopPage({
]);
return (
<main className="min-h-screen bg-stone-100 px-6 py-12">
<main className="min-h-screen px-6 py-12" style={{ backgroundColor: "var(--admin-bg)" }}>
<div className="mx-auto max-w-4xl">
<div className="mb-8">
<a
src/app/admin/taxes/page.tsx
+14 -6
View File
@@ -29,12 +29,20 @@ export default async function TaxesPage({ params }: Props) {
resolvedBrandId = firstBrand.id;
} else {
return (
<main className="min-h-screen bg-stone-100 px-6 py-12">
<main className="min-h-screen px-6 py-12" style={{ backgroundColor: "var(--admin-bg)" }}>
<div className="mx-auto max-w-6xl">
<div className="card p-8 text-center">
<h1 className="text-2xl font-bold text-stone-950">No Brands Found</h1>
<p className="mt-2 text-stone-500">Create a brand in the database first.</p>
<a href="/admin" className="mt-4 inline-block rounded-xl bg-stone-200 px-6 py-3 text-sm font-medium text-stone-700 border border-stone-300 hover:bg-stone-300 transition-colors">
<div className="rounded-2xl p-8 text-center border" style={{
backgroundColor: "white",
borderColor: "var(--admin-border)"
}}>
<h1 className="text-2xl font-bold" style={{ color: "var(--admin-text-primary)" }}>No Brands Found</h1>
<p className="mt-2" style={{ color: "var(--admin-text-muted)" }}>Create a brand in the database first.</p>
<a href="/admin" className="mt-4 inline-block rounded-xl px-6 py-3 text-sm font-medium border transition-colors"
style={{
backgroundColor: "var(--admin-bg-subtle)",
borderColor: "var(--admin-border)",
color: "var(--admin-text-primary)"
}}>
Back to Admin
</a>
</div>
@@ -54,7 +62,7 @@ export default async function TaxesPage({ params }: Props) {
const allBrands = (brands ?? []) as Array<{ id: string; name: string }>;
return (
<main className="min-h-screen bg-stone-100">
<main className="min-h-screen" style={{ backgroundColor: "var(--admin-bg)" }}>
<div className="mx-auto max-w-6xl px-6 py-10">
<PageHeader
title="Tax Dashboard"