melabidi/carmanagement
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

update style

Browse Source
This commit is contained in:
root
2026-05-24 01:53:27 -04:00
parent f5292f8b6c
commit 31e06a1d61
62 changed files with 431 additions and 459 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/admin/src/app/dashboard/admin-users/page.tsx
+2 -2
View File
@@ -69,7 +69,7 @@ export default function AdminUsersPage() {
const ROLE_COLORS: Record<string, string> = {
SUPER_ADMIN: 'text-emerald-400 bg-emerald-950/40',
ADMIN: 'text-sky-400 bg-sky-950/40',
SUPPORT: 'text-amber-400 bg-amber-950/40',
SUPPORT: 'text-orange-400 bg-orange-950/40',
FINANCE: 'text-violet-400 bg-violet-950/40',
VIEWER: 'text-zinc-400 bg-zinc-800',
}
@@ -137,7 +137,7 @@ export default function AdminUsersPage() {
</div>
{showModal && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
<div className="fixed inset-0 z-50 flex items-center justify-center bg-[#07101e]/60 backdrop-blur-sm">
<div className="w-full max-w-md rounded-2xl border border-zinc-700 bg-zinc-900 p-8 shadow-2xl">
<div className="flex items-center justify-between mb-6">
<h2 className="text-lg font-semibold">New admin user</h2>
apps/admin/src/app/dashboard/audit-logs/page.tsx
+1 -1
View File
@@ -16,7 +16,7 @@ const ACTION_COLORS: Record<string, string> = {
CREATE: 'text-emerald-400 bg-emerald-950/40',
UPDATE: 'text-sky-400 bg-sky-950/40',
DELETE: 'text-red-400 bg-red-950/40',
SUSPEND: 'text-amber-400 bg-amber-950/40',
SUSPEND: 'text-orange-400 bg-orange-950/40',
ACTIVATE: 'text-emerald-400 bg-emerald-950/40',
LOGIN: 'text-zinc-400 bg-zinc-800',
}
apps/admin/src/app/dashboard/billing/page.tsx
+5 -5
View File
@@ -56,14 +56,14 @@ interface Stats {
const SUB_STATUS_COLORS: Record<string, string> = {
ACTIVE: 'text-emerald-400 bg-emerald-900/30',
TRIALING: 'text-sky-400 bg-sky-900/30',
PAST_DUE: 'text-amber-400 bg-amber-900/30',
PAST_DUE: 'text-orange-400 bg-orange-900/30',
CANCELLED: 'text-zinc-400 bg-zinc-800',
UNPAID: 'text-red-400 bg-red-900/30',
}
const INVOICE_STATUS_COLORS: Record<string, string> = {
PAID: 'text-emerald-400 bg-emerald-900/30',
PENDING: 'text-amber-400 bg-amber-900/30',
PENDING: 'text-orange-400 bg-orange-900/30',
FAILED: 'text-red-400 bg-red-900/30',
REFUNDED: 'text-zinc-400 bg-zinc-800',
}
@@ -302,7 +302,7 @@ export default function AdminBillingPage() {
</div>
<div className="panel p-4">
<p className="text-xs text-zinc-500 uppercase tracking-wider">{copy.pastDue}</p>
<p className="mt-1 text-2xl font-bold text-amber-400">{stats.pastDueCount}</p>
<p className="mt-1 text-2xl font-bold text-orange-400">{stats.pastDueCount}</p>
</div>
<div className="panel p-4">
<p className="text-xs text-zinc-500 uppercase tracking-wider">{copy.cancelled}</p>
@@ -365,7 +365,7 @@ export default function AdminBillingPage() {
{sub.status}
</span>
{sub.cancelAtPeriodEnd && (
<span className="text-xs text-amber-500">{copy.cancelAtEnd}</span>
<span className="text-xs text-orange-500">{copy.cancelAtEnd}</span>
)}
</div>
</td>
@@ -388,7 +388,7 @@ export default function AdminBillingPage() {
</div>
{invoiceModal && (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4">
<div className="fixed inset-0 z-50 flex items-center justify-center bg-[#07101e]/70 p-4">
<div className="w-full max-w-2xl rounded-2xl bg-zinc-900 border border-zinc-800 shadow-2xl flex flex-col max-h-[80vh]">
<div className="flex items-center justify-between px-6 py-4 border-b border-zinc-800">
<div>
apps/admin/src/app/dashboard/companies/[id]/page.tsx
+1 -1
View File
@@ -140,7 +140,7 @@ const STATUS_COLORS: Record<string, string> = {
ACTIVE: 'text-emerald-400',
TRIALING: 'text-sky-400',
SUSPENDED: 'text-red-400',
PENDING: 'text-amber-400',
PENDING: 'text-orange-400',
CANCELLED: 'text-zinc-400',
PAST_DUE: 'text-orange-400',
}
apps/admin/src/app/dashboard/companies/page.tsx
+1 -1
View File
@@ -19,7 +19,7 @@ const STATUS_COLORS: Record<string, string> = {
ACTIVE: 'text-emerald-400 bg-emerald-900/30',
TRIALING: 'text-sky-400 bg-sky-900/30',
SUSPENDED: 'text-red-400 bg-red-900/30',
PENDING: 'text-amber-400 bg-amber-900/30',
PENDING: 'text-orange-400 bg-orange-900/30',
CANCELLED: 'text-zinc-400 bg-zinc-800',
}
apps/admin/src/app/dashboard/containers/page.tsx
+4 -4
View File
@@ -34,7 +34,7 @@ function StatusBadge({ status }: { status: ContainerStatus }) {
PENDING: { label: 'Pending', className: 'bg-zinc-700 text-zinc-300' },
CREATING: { label: 'Creating…', className: 'bg-blue-900 text-blue-300 animate-pulse' },
RUNNING: { label: 'Running', className: 'bg-emerald-900 text-emerald-300' },
STOPPED: { label: 'Stopped', className: 'bg-yellow-900 text-yellow-300' },
STOPPED: { label: 'Stopped', className: 'bg-orange-900 text-orange-300' },
RESTARTING: { label: 'Restarting…',className: 'bg-orange-900 text-orange-300 animate-pulse' },
REMOVING: { label: 'Removing…', className: 'bg-red-900 text-red-300 animate-pulse' },
ERROR: { label: 'Error', className: 'bg-red-950 text-red-400' },
@@ -71,7 +71,7 @@ function LogsModal({ companyId, companyName, onClose }: { companyId: string; com
useEffect(() => { bottomRef.current?.scrollIntoView() }, [logs])
return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4" onClick={onClose}>
<div className="fixed inset-0 z-50 flex items-center justify-center bg-[#07101e]/70 p-4" onClick={onClose}>
<div className="flex h-[80vh] w-full max-w-4xl flex-col rounded-2xl border border-zinc-700 bg-zinc-900 shadow-2xl" onClick={(e) => e.stopPropagation()}>
<div className="flex items-center justify-between border-b border-zinc-700 px-5 py-4">
<div>
@@ -272,7 +272,7 @@ export default function ContainersPage() {
{[
{ label: 'Total', value: stats.total, color: 'text-zinc-100' },
{ label: 'Running', value: stats.running, color: 'text-emerald-400' },
{ label: 'Stopped', value: stats.stopped, color: 'text-yellow-400' },
{ label: 'Stopped', value: stats.stopped, color: 'text-orange-400' },
{ label: 'Error', value: stats.error, color: 'text-red-400' },
].map((s) => (
<div key={s.label} className="rounded-xl border border-zinc-800 bg-zinc-900 p-4">
@@ -418,7 +418,7 @@ function ActionButton({
}) {
const colorMap: Record<string, string> = {
emerald: 'border-emerald-800 text-emerald-400 hover:bg-emerald-900/40',
yellow: 'border-yellow-800 text-yellow-400 hover:bg-yellow-900/40',
yellow: 'border-orange-800 text-orange-400 hover:bg-orange-900/40',
blue: 'border-blue-800 text-blue-400 hover:bg-blue-900/40',
purple: 'border-purple-800 text-purple-400 hover:bg-purple-900/40',
zinc: 'border-zinc-700 text-zinc-400 hover:bg-zinc-700/40',
apps/admin/src/app/dashboard/layout.tsx
+9 -9
View File
@@ -50,18 +50,18 @@ export default function AdminDashboardLayout({ children }: { children: React.Rea
if (!ready) {
return (
<div className="flex h-screen items-center justify-center bg-[linear-gradient(180deg,#f8f5ef_0%,#f4efe6_28%,#fffdf8_58%,#ffffff_100%)] dark:bg-[linear-gradient(180deg,#14110f_0%,#17120d_35%,#0c0a09_100%)]">
<div className="h-6 w-6 animate-spin rounded-full border-2 border-amber-500 border-t-transparent" aria-label={dict.loading} />
<div className="flex h-screen items-center justify-center bg-[linear-gradient(180deg,#ffffff_0%,#f5f8ff_28%,#eef4ff_58%,#ffffff_100%)] dark:bg-[linear-gradient(180deg,#0a1128_0%,#0d1b38_35%,#07101e_100%)]">
<div className="h-6 w-6 animate-spin rounded-full border-2 border-orange-500 border-t-transparent" aria-label={dict.loading} />
</div>
)
}
return (
<div className="flex h-screen bg-[linear-gradient(180deg,#f8f5ef_0%,#f4efe6_28%,#fffdf8_58%,#ffffff_100%)] text-stone-900 transition-colors dark:bg-[linear-gradient(180deg,#14110f_0%,#17120d_35%,#0c0a09_100%)] dark:text-stone-100">
<aside className="flex w-60 flex-shrink-0 flex-col border-r border-stone-200/80 bg-white/78 backdrop-blur-xl transition-colors dark:border-stone-800 dark:bg-stone-950/78">
<div className="flex h-screen bg-[linear-gradient(180deg,#ffffff_0%,#f5f8ff_28%,#eef4ff_58%,#ffffff_100%)] text-stone-900 transition-colors dark:bg-[linear-gradient(180deg,#0a1128_0%,#0d1b38_35%,#07101e_100%)] dark:text-slate-100">
<aside className="flex w-60 flex-shrink-0 flex-col border-r border-stone-200/80 bg-white/78 backdrop-blur-xl transition-colors dark:border-blue-900 dark:bg-[#07101e]/78">
<Link href="/" className="block px-5 py-6">
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-amber-700 dark:text-amber-300">{dict.admin}</p>
<p className="mt-0.5 text-sm font-semibold text-stone-950 dark:text-stone-100">RentalDriveGo</p>
<p className="text-xs font-semibold uppercase tracking-[0.2em] text-orange-700 dark:text-orange-300">{dict.admin}</p>
<p className="mt-0.5 text-sm font-semibold text-blue-950 dark:text-stone-100">RentalDriveGo</p>
</Link>
<nav className="flex-1 px-3 space-y-0.5">
{navLinks.map((link) => {
@@ -71,7 +71,7 @@ export default function AdminDashboardLayout({ children }: { children: React.Rea
key={link.href}
href={link.href}
className={`flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition-colors ${
active ? 'bg-stone-900 text-white dark:bg-amber-400 dark:text-stone-950' : 'text-stone-500 hover:text-stone-950 hover:bg-stone-100 dark:text-stone-400 dark:hover:text-white dark:hover:bg-stone-800'
active ? 'bg-orange-600 text-white dark:bg-orange-500 dark:text-white' : 'text-stone-500 hover:text-blue-900 hover:bg-stone-100 dark:text-slate-400 dark:hover:text-white dark:hover:bg-[#162038]'
}`}
>
<svg className="h-4 w-4 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
@@ -85,14 +85,14 @@ export default function AdminDashboardLayout({ children }: { children: React.Rea
<div className="px-3 py-4">
<button
onClick={handleLogout}
className="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-stone-500 transition-colors hover:bg-stone-100 hover:text-red-500 dark:text-stone-400 dark:hover:bg-stone-800 dark:hover:text-red-300"
className="flex w-full items-center gap-3 rounded-xl px-3 py-2.5 text-sm font-medium text-stone-500 transition-colors hover:bg-stone-100 hover:text-red-500 dark:text-stone-400 dark:hover:bg-[#162038] dark:hover:text-red-300"
>
<svg className="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={1.5}>
<path strokeLinecap="round" strokeLinejoin="round" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1" />
</svg>
{dict.logout}
</button>
<div className="mt-4 flex flex-col items-center gap-3 border-t border-stone-200/80 pt-4 dark:border-stone-800">
<div className="mt-4 flex flex-col items-center gap-3 border-t border-stone-200/80 pt-4 dark:border-blue-900">
<AdminLanguageSwitcher />
<AdminThemeSwitcher />
</div>
apps/admin/src/app/dashboard/site-config/page.tsx
+19 -19
View File
@@ -28,7 +28,7 @@ const STATUS_COLORS: Record<string, string> = {
ACTIVE: 'text-emerald-400 bg-emerald-900/30',
TRIALING: 'text-sky-400 bg-sky-900/30',
SUSPENDED: 'text-red-400 bg-red-900/30',
PENDING: 'text-amber-400 bg-amber-900/30',
PENDING: 'text-orange-400 bg-orange-900/30',
CANCELLED: 'text-zinc-400 bg-zinc-800',
}
@@ -415,7 +415,7 @@ export default function AdminSiteConfigPage() {
<div className="border-b border-stone-200 bg-white/90 px-5 py-4">
<div className="flex flex-wrap items-center justify-between gap-3">
<div>
<p className="text-xs font-bold uppercase tracking-[0.32em] text-amber-700">{activeContent.heroKicker}</p>
<p className="text-xs font-bold uppercase tracking-[0.32em] text-orange-700">{activeContent.heroKicker}</p>
<p className="mt-2 text-sm text-stone-500">rentaldrivego.com</p>
</div>
<div className="flex flex-wrap gap-2 text-xs font-semibold text-stone-600">
@@ -431,17 +431,17 @@ export default function AdminSiteConfigPage() {
<div className="space-y-10 px-5 py-6 lg:px-8">
{activeSections.includes('hero') ? <section className="grid gap-6 lg:grid-cols-[1.1fr_0.9fr] lg:items-center">
<div>
<h4 className="text-4xl font-black tracking-[-0.04em] text-stone-950">{activeContent.heroTitle}</h4>
<h4 className="text-4xl font-black tracking-[-0.04em] text-blue-950">{activeContent.heroTitle}</h4>
<p className="mt-5 max-w-2xl text-base leading-8 text-stone-600">{activeContent.heroBody}</p>
<div className="mt-8 flex flex-wrap gap-3">
<span className="rounded-full bg-stone-950 px-5 py-3 text-sm font-semibold text-white">{activeContent.startTrial}</span>
<span className="rounded-full bg-orange-600 px-5 py-3 text-sm font-semibold text-white">{activeContent.startTrial}</span>
<span className="rounded-full border border-stone-300 bg-white px-5 py-3 text-sm font-semibold text-stone-700">{activeContent.exploreVehicles}</span>
</div>
</div>
{activeSections.includes('surface') ? (
<div className="rounded-[1.5rem] bg-stone-950 p-6 text-white">
<div className="rounded-[1.5rem] bg-[#06132e] p-6 text-white">
<div className="flex items-center justify-between gap-3">
<span className="rounded-full border border-white/15 bg-white/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.22em] text-amber-200">
<span className="rounded-full border border-white/15 bg-white/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.22em] text-orange-200">
{activeContent.surfaceLabel}
</span>
<span className="rounded-full bg-emerald-400/15 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.22em] text-emerald-200">
@@ -462,9 +462,9 @@ export default function AdminSiteConfigPage() {
</section> : null}
{activeSections.includes('surface') && !activeSections.includes('hero') ? (
<section className="rounded-[1.5rem] bg-stone-950 p-6 text-white">
<section className="rounded-[1.5rem] bg-[#06132e] p-6 text-white">
<div className="flex items-center justify-between gap-3">
<span className="rounded-full border border-white/15 bg-white/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.22em] text-amber-200">
<span className="rounded-full border border-white/15 bg-white/10 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.22em] text-orange-200">
{activeContent.surfaceLabel}
</span>
<span className="rounded-full bg-emerald-400/15 px-3 py-1 text-[11px] font-semibold uppercase tracking-[0.22em] text-emerald-200">
@@ -480,7 +480,7 @@ export default function AdminSiteConfigPage() {
{activeContent.pillars.map((pillar, index) => (
<article
key={`${pillar.title}-${index}`}
className={`rounded-[1.5rem] border p-5 ${index === 1 ? 'border-stone-900 bg-stone-950 text-white' : 'border-stone-200 bg-white text-stone-900'}`}
className={`rounded-[1.5rem] border p-5 ${index === 1 ? 'border-orange-700 bg-orange-600 text-white' : 'border-stone-200 bg-white text-stone-900'}`}
>
<p className={`text-xs font-bold uppercase tracking-[0.24em] ${index === 1 ? 'text-stone-300' : 'text-stone-400'}`}>0{index + 1}</p>
<h5 className="mt-3 text-xl font-black">{pillar.title}</h5>
@@ -492,12 +492,12 @@ export default function AdminSiteConfigPage() {
{activeSections.includes('audiences') ? <section className="grid gap-4 lg:grid-cols-2">
<article className="rounded-[1.5rem] border border-stone-200 bg-white p-5">
<p className="text-xs font-bold uppercase tracking-[0.24em] text-stone-500">{activeContent.companyKicker}</p>
<h5 className="mt-3 text-2xl font-black text-stone-950">{activeContent.companyTitle}</h5>
<h5 className="mt-3 text-2xl font-black text-blue-950">{activeContent.companyTitle}</h5>
<p className="mt-3 text-sm leading-7 text-stone-600">{activeContent.companyBody}</p>
</article>
<article className="rounded-[1.5rem] border border-stone-200 bg-[#f7efe2] p-5">
<p className="text-xs font-bold uppercase tracking-[0.24em] text-amber-700">{activeContent.renterKicker}</p>
<h5 className="mt-3 text-2xl font-black text-stone-950">{activeContent.renterTitle}</h5>
<p className="text-xs font-bold uppercase tracking-[0.24em] text-orange-700">{activeContent.renterKicker}</p>
<h5 className="mt-3 text-2xl font-black text-blue-950">{activeContent.renterTitle}</h5>
<p className="mt-3 text-sm leading-7 text-stone-700">{activeContent.renterBody}</p>
</article>
</section> : null}
@@ -509,7 +509,7 @@ export default function AdminSiteConfigPage() {
<div className="mt-5 space-y-3">
{activeContent.features.map((feature, index) => (
<div key={`${feature}-${index}`} className="flex items-start gap-3 rounded-[1rem] border border-stone-200 bg-white px-4 py-3">
<span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-stone-950 text-xs font-bold text-white">
<span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-orange-600 text-xs font-bold text-white">
{index + 1}
</span>
<p className="text-sm font-semibold leading-6 text-stone-800">{feature}</p>
@@ -520,13 +520,13 @@ export default function AdminSiteConfigPage() {
) : <div />}
{activeSections.includes('steps') ? (
<article className="rounded-[1.5rem] border border-stone-200 bg-white p-5">
<p className="text-xs font-bold uppercase tracking-[0.24em] text-amber-700">{activeContent.readyKicker}</p>
<h5 className="mt-3 text-2xl font-black text-stone-950">{activeContent.stepsTitle}</h5>
<p className="text-xs font-bold uppercase tracking-[0.24em] text-orange-700">{activeContent.readyKicker}</p>
<h5 className="mt-3 text-2xl font-black text-blue-950">{activeContent.stepsTitle}</h5>
<div className="mt-5 space-y-3">
{activeContent.steps.map((step) => (
<div key={step.step} className="rounded-[1rem] border border-stone-200 bg-stone-50 p-4">
<p className="text-xs font-bold uppercase tracking-[0.24em] text-stone-500">{activeContent.stepLabel} {step.step}</p>
<h6 className="mt-2 text-lg font-black text-stone-950">{step.title}</h6>
<h6 className="mt-2 text-lg font-black text-blue-950">{step.title}</h6>
<p className="mt-2 text-sm leading-7 text-stone-600">{step.body}</p>
</div>
))}
@@ -535,13 +535,13 @@ export default function AdminSiteConfigPage() {
) : <div />}
</section> : null}
{activeSections.includes('closing') ? <section className="rounded-[1.5rem] bg-stone-950 px-6 py-7 text-white">
<p className="text-xs font-bold uppercase tracking-[0.28em] text-amber-300">{activeContent.readyKicker}</p>
{activeSections.includes('closing') ? <section className="rounded-[1.5rem] bg-[#06132e] px-6 py-7 text-white">
<p className="text-xs font-bold uppercase tracking-[0.28em] text-orange-300">{activeContent.readyKicker}</p>
<h5 className="mt-4 max-w-3xl text-3xl font-black tracking-[-0.04em]">{activeContent.readyTitle}</h5>
<p className="mt-4 max-w-2xl text-sm leading-8 text-stone-300">{activeContent.readyBody}</p>
<div className="mt-6 flex flex-wrap gap-3">
<span className="rounded-full border border-white/20 px-5 py-3 text-sm font-semibold">{activeContent.viewPricing}</span>
<span className="rounded-full bg-amber-300 px-5 py-3 text-sm font-semibold text-stone-950">{activeContent.createWorkspace}</span>
<span className="rounded-full bg-orange-300 px-5 py-3 text-sm font-semibold text-blue-950">{activeContent.createWorkspace}</span>
</div>
</section> : null}
</div>
apps/admin/src/app/forgot-password/page.tsx
+3 -3
View File
@@ -35,7 +35,7 @@ export default function AdminForgotPasswordPage() {
<main className="flex flex-1 items-center justify-center px-4">
<div className="w-full max-w-md">
<div className="mb-8 text-center">
<Link href="/" className="text-xs font-semibold uppercase tracking-[0.2em] text-amber-700 dark:text-amber-300">RentalDriveGo</Link>
<Link href="/" className="text-xs font-semibold uppercase tracking-[0.2em] text-orange-700 dark:text-orange-300">RentalDriveGo</Link>
<h1 className="mt-3 text-3xl font-black tracking-tight">Forgot password</h1>
<p className="mt-1 text-sm text-zinc-400">Enter your admin email to receive a reset link.</p>
</div>
@@ -64,13 +64,13 @@ export default function AdminForgotPasswordPage() {
value={email}
onChange={(e) => setEmail(e.target.value)}
placeholder="admin@rentaldrivego.com"
className="w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-amber-500 dark:border-stone-700 dark:bg-stone-950/80 dark:text-stone-100 dark:placeholder:text-stone-500"
className="w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm text-stone-900 placeholder:text-stone-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 dark:border-blue-800 dark:bg-[#07101e]/80 dark:text-stone-100 dark:placeholder:text-stone-500"
/>
</div>
<button
type="submit"
disabled={loading}
className="inline-flex w-full justify-center rounded-full bg-stone-900 px-6 py-3 text-sm font-semibold text-white transition hover:bg-stone-700 disabled:opacity-50 dark:bg-amber-400 dark:text-stone-950 dark:hover:bg-amber-300"
className="inline-flex w-full justify-center rounded-full bg-stone-900 px-6 py-3 text-sm font-semibold text-white transition hover:bg-orange-700 disabled:opacity-50 dark:bg-orange-400 dark:text-white dark:hover:bg-orange-300"
>
{loading ? 'Sending…' : 'Send reset link'}
</button>
apps/admin/src/app/globals.css
+28 -25
View File
@@ -11,9 +11,9 @@ html.dark {
}
body {
@apply text-stone-900 antialiased transition-colors dark:text-stone-100;
@apply text-blue-950 antialiased transition-colors dark:text-slate-100;
background-image:
linear-gradient(180deg, #f8f5ef 0%, #f4efe6 28%, #fffdf8 58%, #ffffff 100%);
linear-gradient(180deg, #ffffff 0%, #f5f8ff 28%, #eef4ff 58%, #ffffff 100%);
}
.shell {
@@ -21,19 +21,19 @@ body {
}
.panel {
@apply rounded-[1.75rem] border shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors dark:shadow-[0_30px_80px_rgba(0,0,0,0.26)];
@apply rounded-[1.75rem] border shadow-[0_30px_80px_rgba(28,25,23,0.08)] backdrop-blur transition-colors dark:shadow-[0_30px_80px_rgba(0,0,0,0.36)];
border-color: rgb(231 229 228 / 0.8);
background-color: rgb(255 255 255 / 0.82);
}
html.dark body {
background-image:
linear-gradient(180deg, #14110f 0%, #17120d 35%, #0c0a09 100%);
linear-gradient(180deg, #0a1128 0%, #0d1b38 35%, #07101e 100%);
}
html.dark .panel {
border-color: rgb(41 37 36 / 0.96);
background-color: rgb(28 25 23 / 0.72);
border-color: rgb(30 60 140 / 0.40);
background-color: rgb(11 25 55 / 0.72);
}
@layer utilities {
@@ -41,89 +41,92 @@ html.dark .panel {
color: rgb(28 25 23);
}
/* ── Dark mode: zinc classes → deep navy blue ─────────────── */
.bg-zinc-950 {
background-color: rgb(12 10 9);
background-color: rgb(6 13 30);
}
.bg-zinc-950\/90 {
background-color: rgb(28 25 23 / 0.9);
background-color: rgb(6 13 30 / 0.9);
}
.bg-zinc-900 {
background-color: rgb(28 25 23);
background-color: rgb(11 25 55);
}
.bg-zinc-800,
.bg-zinc-800\/50 {
background-color: rgb(41 37 36);
background-color: rgb(20 42 90);
}
.border-zinc-800,
.border-zinc-700 {
border-color: rgb(68 64 60);
border-color: rgb(30 60 130);
}
.text-zinc-100,
.text-zinc-200 {
color: rgb(250 250 249);
color: rgb(241 245 249);
}
.text-zinc-500 {
color: rgb(168 162 158);
color: rgb(148 163 184);
}
.text-zinc-400,
.text-zinc-300 {
color: rgb(120 113 108);
color: rgb(100 116 139);
}
.hover\:bg-zinc-800:hover,
.hover\:bg-zinc-800\/50:hover {
background-color: rgb(68 64 60);
background-color: rgb(30 55 115);
}
.hover\:text-zinc-200:hover {
color: rgb(250 250 249);
color: rgb(241 245 249);
}
/* ── Primary action (emerald class → orange) ──────────────── */
.text-emerald-400 {
color: rgb(252 211 77);
color: rgb(251 146 60);
}
.bg-emerald-600 {
background-color: rgb(28 25 23);
background-color: rgb(234 88 12);
}
.hover\:bg-emerald-500:hover {
background-color: rgb(68 64 60);
background-color: rgb(194 65 12);
}
.dark .bg-emerald-600 {
background-color: rgb(251 191 36);
background-color: rgb(249 115 22);
}
.dark .hover\:bg-emerald-500:hover {
background-color: rgb(252 211 77);
background-color: rgb(251 146 60);
}
.bg-emerald-900\/30,
.bg-emerald-950\/40,
.bg-emerald-950\/50 {
background-color: rgb(120 53 15 / 0.32);
background-color: rgb(154 52 18 / 0.22);
}
.border-emerald-500 {
border-color: rgb(245 158 11);
border-color: rgb(249 115 22);
}
.focus\:ring-emerald-500:focus {
--tw-ring-color: rgb(217 119 6 / 0.45);
--tw-ring-color: rgb(234 88 12 / 0.45);
}
.hover\:bg-emerald-900\/50:hover {
background-color: rgb(146 64 14 / 0.42);
background-color: rgb(154 52 18 / 0.35);
}
/* ── Light mode: zinc classes → white / stone-light ──────── */
.light .bg-zinc-950 {
background-color: rgb(255 253 248);
}
apps/admin/src/app/reset-password/page.tsx
+5 -5
View File
@@ -77,7 +77,7 @@ function AdminResetPasswordContent() {
<button
type="button"
onClick={() => router.push('/login')}
className="mt-2 inline-flex w-full justify-center rounded-full bg-stone-900 px-6 py-3 text-sm font-semibold text-white transition hover:bg-stone-700 dark:bg-amber-400 dark:text-stone-950 dark:hover:bg-amber-300"
className="mt-2 inline-flex w-full justify-center rounded-full bg-stone-900 px-6 py-3 text-sm font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-400 dark:text-white dark:hover:bg-orange-300"
>
Sign in
</button>
@@ -101,7 +101,7 @@ function AdminResetPasswordContent() {
value={password}
onChange={(e) => setPassword(e.target.value)}
placeholder="••••••••"
className="w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm text-stone-900 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-amber-500 dark:border-stone-700 dark:bg-stone-950/80 dark:text-stone-100"
className="w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm text-stone-900 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 dark:border-blue-800 dark:bg-[#07101e]/80 dark:text-stone-100"
/>
</div>
<div>
@@ -113,13 +113,13 @@ function AdminResetPasswordContent() {
value={confirm}
onChange={(e) => setConfirm(e.target.value)}
placeholder="••••••••"
className="w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm text-stone-900 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-amber-500 dark:border-stone-700 dark:bg-stone-950/80 dark:text-stone-100"
className="w-full rounded-2xl border border-stone-200 bg-white px-4 py-3 text-sm text-stone-900 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-orange-500 dark:border-blue-800 dark:bg-[#07101e]/80 dark:text-stone-100"
/>
</div>
<button
type="submit"
disabled={loading}
className="inline-flex w-full justify-center rounded-full bg-stone-900 px-6 py-3 text-sm font-semibold text-white transition hover:bg-stone-700 disabled:opacity-50 dark:bg-amber-400 dark:text-stone-950 dark:hover:bg-amber-300"
className="inline-flex w-full justify-center rounded-full bg-stone-900 px-6 py-3 text-sm font-semibold text-white transition hover:bg-orange-700 disabled:opacity-50 dark:bg-orange-400 dark:text-white dark:hover:bg-orange-300"
>
{loading ? 'Resetting…' : 'Reset password'}
</button>
@@ -140,7 +140,7 @@ function AdminResetShell({ children }: { children: React.ReactNode }) {
<main className="flex flex-1 items-center justify-center px-4">
<div className="w-full max-w-md">
<div className="mb-8 text-center">
<Link href="/" className="text-xs font-semibold uppercase tracking-[0.2em] text-amber-700 dark:text-amber-300">RentalDriveGo</Link>
<Link href="/" className="text-xs font-semibold uppercase tracking-[0.2em] text-orange-700 dark:text-orange-300">RentalDriveGo</Link>
<h1 className="mt-3 text-3xl font-black tracking-tight">Reset password</h1>
</div>
<div className="panel p-8">{children}</div>
apps/admin/src/components/I18nProvider.tsx
+4 -4
View File
@@ -167,7 +167,7 @@ export function AdminLanguageSwitcher() {
if (embedded) return null
return (
<div className="flex items-center gap-1 rounded-full border border-stone-200/80 bg-white/95 px-2 py-1 shadow-sm transition-colors dark:border-stone-700 dark:bg-stone-900/85">
<div className="flex items-center gap-1 rounded-full border border-stone-200/80 bg-white/95 px-2 py-1 shadow-sm transition-colors dark:border-blue-800 dark:bg-[#0d1b38]/85">
<span className="px-2 text-[11px] font-semibold uppercase tracking-[0.16em] text-stone-500 dark:text-stone-400">{dict.language}</span>
{(['en', 'fr', 'ar'] as AdminLanguage[]).map((value) => {
const active = value === language
@@ -178,7 +178,7 @@ export function AdminLanguageSwitcher() {
type="button"
onClick={() => setLanguage(value)}
className={`rounded-full px-3 py-1.5 text-xs font-semibold transition ${
active ? 'bg-stone-900 text-white dark:bg-amber-400 dark:text-stone-950' : 'text-stone-600 hover:bg-stone-100 dark:text-stone-300 dark:hover:bg-stone-800'
active ? 'bg-blue-900 text-white dark:bg-orange-400 dark:text-white' : 'text-stone-600 hover:bg-stone-100 dark:text-stone-300 dark:hover:bg-[#162038]'
}`}
>
<span className="inline-flex items-center gap-1.5">
@@ -203,7 +203,7 @@ export function AdminThemeSwitcher() {
if (embedded) return null
return (
<div className="flex items-center gap-1 rounded-full border border-stone-200/80 bg-white/95 px-2 py-1 shadow-sm transition-colors dark:border-stone-700 dark:bg-stone-900/85">
<div className="flex items-center gap-1 rounded-full border border-stone-200/80 bg-white/95 px-2 py-1 shadow-sm transition-colors dark:border-blue-800 dark:bg-[#0d1b38]/85">
{(['light', 'dark'] as AdminTheme[]).map((value) => {
const active = value === theme
return (
@@ -212,7 +212,7 @@ export function AdminThemeSwitcher() {
type="button"
onClick={() => setTheme(value)}
className={`rounded-full px-3 py-1.5 text-xs font-semibold transition ${
active ? 'bg-stone-900 text-white dark:bg-amber-400 dark:text-stone-950' : 'text-stone-600 hover:bg-stone-100 dark:text-stone-300 dark:hover:bg-stone-800'
active ? 'bg-blue-900 text-white dark:bg-orange-400 dark:text-white' : 'text-stone-600 hover:bg-stone-100 dark:text-stone-300 dark:hover:bg-[#162038]'
}`}
>
{value === 'light' ? dict.light : dict.dark}
apps/admin/src/components/PublicFooter.tsx
+2 -2
View File
@@ -28,11 +28,11 @@ export default function PublicFooter() {
}[language]
return (
<footer className="border-t border-stone-200/80 bg-white/72 px-4 py-4 backdrop-blur-xl transition-colors dark:border-stone-800 dark:bg-stone-950/72">
<footer className="border-t border-stone-200/80 bg-white/72 px-4 py-4 backdrop-blur-xl transition-colors dark:border-blue-900 dark:bg-[#07101e]/72">
<div className="mx-auto flex max-w-6xl flex-col items-center justify-between gap-3 lg:flex-row">
<div className="flex items-center gap-3 text-xs font-medium uppercase tracking-[0.16em] text-stone-400 dark:text-stone-500">
<p>{dict.preferences}</p>
<span className="inline-flex items-center gap-1 rounded-full border border-stone-200/80 bg-white/95 px-2.5 py-1 text-stone-700 dark:border-stone-700 dark:bg-stone-900/85 dark:text-stone-200">
<span className="inline-flex items-center gap-1 rounded-full border border-stone-200/80 bg-white/95 px-2.5 py-1 text-stone-700 dark:border-blue-800 dark:bg-[#0d1b38]/85 dark:text-stone-200">
<span aria-hidden="true">{currentLanguage.flag}</span>
<span>{currentLanguage.shortLabel}</span>
</span>
apps/admin/src/components/PublicHeader.tsx
+4 -4
View File
@@ -28,18 +28,18 @@ export default function PublicHeader() {
}[language]
return (
<header className="sticky top-0 z-30 border-b border-stone-200/80 bg-white/78 backdrop-blur-xl transition-colors dark:border-stone-800 dark:bg-stone-950/76">
<header className="sticky top-0 z-30 border-b border-stone-200/80 bg-white/78 backdrop-blur-xl transition-colors dark:border-blue-900 dark:bg-[#07101e]/76">
<div className="mx-auto flex max-w-6xl items-center justify-between gap-4 px-4 py-4">
<Link href="/" className="flex items-center gap-3">
<span className="text-xs font-semibold uppercase tracking-[0.24em] text-amber-700 dark:text-amber-300">RentalDriveGo</span>
<span className="text-xs font-semibold uppercase tracking-[0.24em] text-orange-700 dark:text-orange-300">RentalDriveGo</span>
<span className="hidden text-sm font-semibold text-stone-500 dark:text-stone-400 sm:inline">{dict.admin}</span>
</Link>
<nav className="flex items-center gap-2">
<span className="inline-flex min-w-[3.5rem] items-center justify-center gap-1 rounded-full border border-stone-200/80 bg-white/95 px-2.5 py-2 text-xs font-semibold text-stone-700 dark:border-stone-700 dark:bg-stone-900/85 dark:text-stone-200">
<span className="inline-flex min-w-[3.5rem] items-center justify-center gap-1 rounded-full border border-stone-200/80 bg-white/95 px-2.5 py-2 text-xs font-semibold text-stone-700 dark:border-blue-800 dark:bg-[#0d1b38]/85 dark:text-stone-200">
<span aria-hidden="true">{currentLanguage.flag}</span>
<span>{currentLanguage.shortLabel}</span>
</span>
<Link href="/login" className="rounded-full bg-stone-900 px-4 py-2 text-sm font-semibold text-white transition hover:bg-stone-700 dark:bg-amber-400 dark:text-stone-950 dark:hover:bg-amber-300">
<Link href="/login" className="rounded-full bg-blue-900 px-4 py-2 text-sm font-semibold text-white transition hover:bg-orange-700 dark:bg-orange-400 dark:text-white dark:hover:bg-orange-300">
{dict.signIn}
</Link>
</nav>
apps/admin/src/components/PublicShell.tsx
+1 -1
View File
@@ -5,7 +5,7 @@ import PublicHeader from '@/components/PublicHeader'
export default function PublicShell({ children }: { children: React.ReactNode }) {
return (
<div className="flex min-h-screen flex-col bg-[linear-gradient(180deg,#f8f5ef_0%,#f4efe6_28%,#fffdf8_58%,#ffffff_100%)] text-stone-900 transition-colors dark:bg-[linear-gradient(180deg,#14110f_0%,#17120d_35%,#0c0a09_100%)] dark:text-stone-100">
<div className="flex min-h-screen flex-col bg-[linear-gradient(180deg,#ffffff_0%,#f5f8ff_28%,#eef4ff_58%,#ffffff_100%)] text-blue-950 transition-colors dark:bg-[linear-gradient(180deg,#0a1128_0%,#0d1b38_35%,#07101e_100%)] dark:text-slate-100">
<PublicHeader />
<div className="flex flex-1 flex-col">{children}</div>
<PublicFooter />