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

style: unify marketplace color system across all pages (light + dark)

Browse Source 
Apply a consistent design token set across every public page:
- Page bg: stone-50 / dark:stone-950
- Cards/surfaces: white / dark:stone-900 (via .card class)
- Primary text: stone-900 / dark:stone-100
- Secondary text: stone-600 / dark:stone-400
- Muted/label: stone-500 / dark:stone-500, stone-400 / dark:stone-500
- Accent kicker: amber-700 / dark:amber-400
- Image placeholder: stone-100 / dark:stone-800
- Primary button: stone-900 white / dark:white dark:stone-900
- Amber button: amber-500 white / dark:amber-400 dark:stone-900
- Status available: emerald-100 emerald-700 / dark:emerald-950/50 dark:emerald-400
- Status unavailable: rose-100 rose-700 / dark:rose-950/50 dark:rose-400

Also: remove dead medium-theme CSS overrides from globals.css,
add dark:[color-scheme:dark] to date/time inputs so browser
native pickers adapt, and unify amber accent to amber-400 in dark.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
root
2026-05-23 03:06:46 -04:00
parent b82a5d4633
commit fd10d0db6a
11 changed files with 185 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/marketplace/src/components/FooterContentPage.tsx
+10 -10
View File
@@ -12,7 +12,7 @@ const pageMeta = {
fr: {
kicker: 'Informations du pied de page',
cta: 'Besoin de plus de détails ?',
support: 'Contactez l’équipe RentalDriveGo via nos canaux officiels pour toute demande commerciale, support ou partenariat.',
support: "Contactez l'équipe RentalDriveGo via nos canaux officiels pour toute demande commerciale, support ou partenariat.",
},
ar: {
kicker: 'معلومات التذييل',
@@ -28,30 +28,30 @@ export default function FooterContentPage({ slug }: { slug: FooterPageSlug }) {
const isArabic = language === 'ar'
return (
<main className="min-h-screen bg-stone-50">
<main className="min-h-screen bg-stone-50 dark:bg-stone-950">
<div className="mx-auto max-w-4xl px-4 py-16 sm:px-6 lg:px-8">
<section className="overflow-hidden rounded-[2rem] border border-stone-200 bg-white shadow-[0_30px_80px_rgba(12,18,28,0.08)]">
<div className="bg-[linear-gradient(135deg,#f8fafc,white_45%,#fef3c7)] px-6 py-10 sm:px-10 sm:py-14">
<p className="text-sm font-semibold uppercase tracking-[0.24em] text-amber-700">
<section className="overflow-hidden rounded-[2rem] border border-stone-200 dark:border-stone-800 bg-white dark:bg-stone-900 shadow-[0_30px_80px_rgba(12,18,28,0.08)]">
<div className="bg-stone-50 dark:bg-stone-900 px-6 py-10 sm:px-10 sm:py-14 border-b border-stone-100 dark:border-stone-800">
<p className="text-sm font-semibold uppercase tracking-[0.24em] text-amber-700 dark:text-amber-400">
{meta.kicker}
</p>
<h1 className="mt-4 text-4xl font-black tracking-tight text-stone-900 sm:text-5xl">
<h1 className="mt-4 text-4xl font-black tracking-tight text-stone-900 dark:text-stone-100 sm:text-5xl">
{content.title}
</h1>
</div>
<div className={`space-y-6 px-6 py-10 sm:px-10 sm:py-12 ${isArabic ? 'text-right' : 'text-left'}`}>
{content.paragraphs.map((paragraph) => (
<p key={paragraph} className="text-lg leading-8 text-stone-700">
<p key={paragraph} className="text-lg leading-8 text-stone-700 dark:text-stone-300">
{paragraph}
</p>
))}
<div className="rounded-3xl border border-amber-200 bg-amber-50 px-6 py-5 text-stone-700">
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-amber-800">
<div className="rounded-3xl border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-950/30 px-6 py-5">
<p className="text-sm font-semibold uppercase tracking-[0.18em] text-amber-800 dark:text-amber-400">
{meta.cta}
</p>
<p className="mt-2 text-base leading-7">{meta.support}</p>
<p className="mt-2 text-base leading-7 text-stone-700 dark:text-stone-300">{meta.support}</p>
</div>
</div>
</section>