Marketing/4ventures-client-portal
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: tema claro blanco, logo 4Ventures y menú original

Browse Source 
Fondo blanco en la app; menú con labels/iconos originales; logo en sidebar y login.

Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
4Ventures
2026-09-24 09:53:36 +02:00
parent 6d1602bd68
commit 068faa3d25
33 changed files with 642 additions and 633 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/components/AdCreativesGallery.tsx
View File

@@ -67,9 +67,9 @@ function previewUrlFor(ad: AdCreativeCard): string {
function MiniKpi({ label, value }: { label: string; value: string }) {
return (
<div className="rounded-lg border border-gray-800 bg-black/25 px-2.5 py-2">
<div className="rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-2">
<p className="text-[9px] uppercase tracking-wider text-gray-500">{label}</p>
<p className="text-sm font-semibold text-white mt-0.5 tabular-nums">
<p className="text-sm font-semibold text-gray-900 mt-0.5 tabular-nums">
{value}
</p>
</div>
@@ -111,7 +111,7 @@ export function CreativesGallery({
<p className="text-[10px] uppercase tracking-wider text-gray-500">
Creatividades · preview por anuncio
</p>
<h3 className="text-lg font-bold text-white">
<h3 className="text-lg font-bold text-gray-900">
{platform === 'meta' ? 'Meta Ads' : 'Google Ads'} · creatividades
</h3>
<p className="text-xs text-gray-500 mt-1">
@@ -128,7 +128,7 @@ export function CreativesGallery({
Cargando creatividades…
</p>
) : filtered.length === 0 ? (
<p className="text-sm text-gray-500 py-8 text-center border border-dashed border-gray-800 rounded-xl">
<p className="text-sm text-gray-500 py-8 text-center border border-dashed border-gray-200 rounded-xl">
Sin creatividades para este periodo.
</p>
) : (
@@ -161,11 +161,11 @@ function CreativeCard({
const extraCount = Math.max(0, assets.length - 1);
return (
<article className="grid gap-4 rounded-2xl border border-gray-800 bg-[#111827] p-4 md:grid-cols-[minmax(160px,220px)_1fr]">
<article className="grid gap-4 rounded-2xl border border-gray-200 bg-white p-4 md:grid-cols-[minmax(160px,220px)_1fr]">
<button
type="button"
onClick={onZoom}
className="relative mx-auto w-full max-w-[220px] overflow-hidden rounded-xl bg-black/40 border border-gray-800 aspect-[4/5] flex items-center justify-center group"
className="relative mx-auto w-full max-w-[220px] overflow-hidden rounded-xl bg-gray-100 border border-gray-200 aspect-[4/5] flex items-center justify-center group"
>
{preview ? (
// eslint-disable-next-line @next/next/no-img-element
@@ -212,11 +212,11 @@ function CreativeCard({
<div className="min-w-0 space-y-3">
<div>
<div className="flex flex-wrap items-start justify-between gap-2">
<h4 className="text-base font-semibold text-white leading-snug">
<h4 className="text-base font-semibold text-gray-900 leading-snug">
{ad.adName || 'Sin nombre'}
</h4>
<div className="flex items-center gap-2">
<span className="text-[10px] uppercase tracking-wider text-gray-500 border border-gray-700 px-2 py-0.5 rounded">
<span className="text-[10px] uppercase tracking-wider text-gray-500 border border-gray-200 px-2 py-0.5 rounded">
{ad.status || ad.platform}
</span>
<button
@@ -243,19 +243,19 @@ function CreativeCard({
{ad.platform === 'meta' ? 'Meta' : 'Google'}
</span>
{ad.mediaType && ad.mediaType !== 'unknown' ? (
<span className="rounded-full border border-gray-700 px-2 py-0.5 text-[10px] uppercase text-gray-400">
<span className="rounded-full border border-gray-200 px-2 py-0.5 text-[10px] uppercase text-gray-400">
{ad.mediaType}
</span>
) : null}
{assets.length > 0 ? (
<span className="rounded-full border border-gray-700 px-2 py-0.5 text-[10px] text-gray-400">
<span className="rounded-full border border-gray-200 px-2 py-0.5 text-[10px] text-gray-400">
{assets.length} piezas
</span>
) : null}
</div>
</div>
{(headlines.length > 0 || bodies.length > 0) && (
<div className="space-y-2 text-xs border border-gray-800/80 rounded-xl p-3 bg-black/20">
<div className="space-y-2 text-xs border border-gray-200 rounded-xl p-3 bg-gray-50">
{headlines.length > 0 ? (
<div>
<p className="text-[9px] uppercase tracking-wider text-gray-500 mb-1">
@@ -265,7 +265,7 @@ function CreativeCard({
{headlines.slice(0, 4).map((h) => (
<li
key={h}
className="text-gray-200 font-medium leading-snug"
className="text-gray-800 font-medium leading-snug"
>
{h}
</li>
@@ -353,16 +353,16 @@ export function CreativeZoomModal({
onClick={onClose}
>
<div
className="relative flex w-full max-w-6xl flex-col overflow-hidden rounded-2xl border border-gray-700 bg-[#0D121F] shadow-2xl max-h-[95vh]"
className="relative flex w-full max-w-6xl flex-col overflow-hidden rounded-2xl border border-gray-200 bg-white shadow-2xl max-h-[95vh]"
onClick={(e) => e.stopPropagation()}
>
<header className="flex items-start justify-between gap-3 border-b border-gray-800 px-4 py-3 md:px-6 shrink-0">
<header className="flex items-start justify-between gap-3 border-b border-gray-200 px-4 py-3 md:px-6 shrink-0">
<div className="min-w-0">
<p className="text-[10px] uppercase tracking-wider text-gray-500">
Zoom creatividades ·{' '}
{ad.platform === 'meta' ? 'Meta Ads' : 'Google Ads'}
</p>
<h2 className="text-lg font-bold text-white truncate">
<h2 className="text-lg font-bold text-gray-900 truncate">
{ad.adName || 'Anuncio'}
</h2>
<p className="text-xs text-gray-500 mt-0.5">
@@ -373,7 +373,7 @@ export function CreativeZoomModal({
<button
type="button"
onClick={onClose}
className="rounded-lg border border-gray-700 p-2 text-gray-300 hover:bg-gray-800"
className="rounded-lg border border-gray-200 p-2 text-gray-600 hover:bg-gray-50"
aria-label="Cerrar"
>
<X className="w-4 h-4" />
@@ -383,7 +383,7 @@ export function CreativeZoomModal({
<div className="flex-1 overflow-y-auto p-4 md:p-6 space-y-6">
<div className="grid gap-6 lg:grid-cols-[minmax(220px,320px)_1fr]">
<div className="space-y-3">
<div className="relative mx-auto w-full max-w-[320px] overflow-hidden rounded-2xl border border-gray-800 bg-black aspect-[4/5]">
<div className="relative mx-auto w-full max-w-[320px] overflow-hidden rounded-2xl border border-gray-200 bg-black aspect-[4/5]">
{main ? (
// eslint-disable-next-line @next/next/no-img-element
<img
@@ -409,17 +409,17 @@ export function CreativeZoomModal({
<div className="text-xs text-gray-500 space-y-1">
<p>
Impresiones:{' '}
<span className="text-gray-300">
<span className="text-gray-600">
{formatNum(ad.impressions)}
</span>
</p>
<p>
Formato:{' '}
<span className="text-gray-300">{ad.mediaType || '—'}</span>
<span className="text-gray-600">{ad.mediaType || '—'}</span>
</p>
<p>
Estado:{' '}
<span className="text-gray-300">{ad.status || '—'}</span>
<span className="text-gray-600">{ad.status || '—'}</span>
</p>
{ad.cta ? (
<p>
@@ -429,7 +429,7 @@ export function CreativeZoomModal({
{ad.businessName ? (
<p>
Negocio:{' '}
<span className="text-gray-300">{ad.businessName}</span>
<span className="text-gray-600">{ad.businessName}</span>
</p>
) : null}
{ad.linkUrl ? (
@@ -449,14 +449,14 @@ export function CreativeZoomModal({
<div className="space-y-5">
{images.length > 0 ? (
<section>
<h3 className="text-sm font-semibold text-white mb-2">
<h3 className="text-sm font-semibold text-gray-900 mb-2">
Imágenes y logos ({images.length})
</h3>
<div className="grid grid-cols-2 sm:grid-cols-3 gap-2">
{images.map((asset, i) => (
<figure
key={`${asset.url}-${i}`}
className="overflow-hidden rounded-xl border border-gray-800 bg-black/40"
className="overflow-hidden rounded-xl border border-gray-200 bg-gray-100"
>
<div
className={
@@ -491,14 +491,14 @@ export function CreativeZoomModal({
{videos.length > 0 ? (
<section>
<h3 className="text-sm font-semibold text-white mb-2">
<h3 className="text-sm font-semibold text-gray-900 mb-2">
Vídeos ({videos.length})
</h3>
<div className="grid gap-3 sm:grid-cols-2">
{videos.map((v, i) => (
<div
key={`${v.youtubeId || v.url}-${i}`}
className="rounded-xl border border-gray-800 overflow-hidden bg-black/40"
className="rounded-xl border border-gray-200 overflow-hidden bg-gray-100"
>
{v.youtubeId ? (
<div className="aspect-video">
@@ -534,14 +534,14 @@ export function CreativeZoomModal({
{headlines.length > 0 ? (
<section>
<h3 className="text-sm font-semibold text-white mb-2">
<h3 className="text-sm font-semibold text-gray-900 mb-2">
Titulares ({headlines.length})
</h3>
<ul className="space-y-1.5 text-sm text-gray-200">
<ul className="space-y-1.5 text-sm text-gray-800">
{headlines.map((h) => (
<li
key={h}
className="rounded-lg border border-gray-800 bg-black/25 px-3 py-2"
className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2"
>
{h}
</li>
@@ -552,14 +552,14 @@ export function CreativeZoomModal({
{longH.length > 0 ? (
<section>
<h3 className="text-sm font-semibold text-white mb-2">
<h3 className="text-sm font-semibold text-gray-900 mb-2">
Titulares largos ({longH.length})
</h3>
<ul className="space-y-1.5 text-sm text-gray-200">
<ul className="space-y-1.5 text-sm text-gray-800">
{longH.map((h) => (
<li
key={h}
className="rounded-lg border border-gray-800 bg-black/25 px-3 py-2"
className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2"
>
{h}
</li>
@@ -570,14 +570,14 @@ export function CreativeZoomModal({
{bodies.length > 0 ? (
<section>
<h3 className="text-sm font-semibold text-white mb-2">
<h3 className="text-sm font-semibold text-gray-900 mb-2">
Textos / descripciones ({bodies.length})
</h3>
<ul className="space-y-2 text-sm text-gray-300">
<ul className="space-y-2 text-sm text-gray-600">
{bodies.map((b) => (
<li
key={b}
className="rounded-lg border border-gray-800 bg-black/25 px-3 py-2 leading-relaxed whitespace-pre-wrap"
className="rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 leading-relaxed whitespace-pre-wrap"
>
{b}
</li>