fix: tema claro blanco, logo 4Ventures y menú original
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
@@ -242,9 +242,9 @@ function KpiTile({
|
||||
value: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="rounded-xl border border-gray-800 bg-[#0D121F] px-3 py-3">
|
||||
<div className="rounded-xl border border-gray-200 bg-white px-3 py-3">
|
||||
<p className="text-[10px] uppercase tracking-wider text-gray-500">{label}</p>
|
||||
<p className="mt-1 text-xl font-bold text-white tabular-nums">{value}</p>
|
||||
<p className="mt-1 text-xl font-bold text-gray-900 tabular-nums">{value}</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -259,19 +259,19 @@ function CampaignTable({
|
||||
empty: string;
|
||||
}) {
|
||||
return (
|
||||
<section className="rounded-2xl border border-gray-800 bg-[#111827] overflow-hidden">
|
||||
<div className="px-4 py-3 border-b border-gray-800">
|
||||
<section className="rounded-2xl border border-gray-200 bg-white overflow-hidden">
|
||||
<div className="px-4 py-3 border-b border-gray-200">
|
||||
<p className="text-[10px] uppercase tracking-wider text-gray-500">
|
||||
Campañas activas
|
||||
</p>
|
||||
<h3 className="text-lg font-bold text-white">{title}</h3>
|
||||
<h3 className="text-lg font-bold text-gray-900">{title}</h3>
|
||||
</div>
|
||||
{rows.length === 0 ? (
|
||||
<p className="px-4 py-8 text-sm text-gray-500">{empty}</p>
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="min-w-full text-left text-sm">
|
||||
<thead className="text-[10px] uppercase tracking-wider text-gray-500 bg-black/20">
|
||||
<thead className="text-[10px] uppercase tracking-wider text-gray-500 bg-gray-50">
|
||||
<tr>
|
||||
<th className="px-4 py-2 font-medium">Campaña</th>
|
||||
<th className="px-3 py-2 font-medium">Gasto</th>
|
||||
@@ -282,20 +282,20 @@ function CampaignTable({
|
||||
</thead>
|
||||
<tbody>
|
||||
{rows.slice(0, 25).map((r) => (
|
||||
<tr key={r.name} className="border-t border-gray-800/80">
|
||||
<td className="px-4 py-2.5 text-gray-200 max-w-[220px] truncate">
|
||||
<tr key={r.name} className="border-t border-gray-200">
|
||||
<td className="px-4 py-2.5 text-gray-800 max-w-[220px] truncate">
|
||||
{r.name}
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-white tabular-nums">
|
||||
<td className="px-3 py-2.5 text-gray-900 tabular-nums">
|
||||
{formatEur(r.spend)}
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-gray-300 tabular-nums">
|
||||
<td className="px-3 py-2.5 text-gray-600 tabular-nums">
|
||||
{formatNum(r.clicks)}
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-gray-300 tabular-nums">
|
||||
<td className="px-3 py-2.5 text-gray-600 tabular-nums">
|
||||
{formatNum(r.conversions)}
|
||||
</td>
|
||||
<td className="px-3 py-2.5 text-gray-300 tabular-nums">
|
||||
<td className="px-3 py-2.5 text-gray-600 tabular-nums">
|
||||
{r.cpl != null ? formatEur(r.cpl) : '—'}
|
||||
</td>
|
||||
</tr>
|
||||
@@ -428,13 +428,13 @@ export default function AdTrackerClient({
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-semibold ${
|
||||
preset === p.id
|
||||
? 'bg-brand-500 text-white'
|
||||
: 'bg-gray-800/70 text-gray-300 hover:bg-gray-800'
|
||||
: 'bg-gray-100 text-gray-600 hover:bg-gray-50'
|
||||
}`}
|
||||
>
|
||||
{p.label}
|
||||
</button>
|
||||
))}
|
||||
<span className="px-3 py-1.5 rounded-lg text-xs font-medium border border-gray-700 text-gray-300">
|
||||
<span className="px-3 py-1.5 rounded-lg text-xs font-medium border border-gray-200 text-gray-600">
|
||||
{range.label}
|
||||
</span>
|
||||
</div>
|
||||
@@ -455,8 +455,8 @@ export default function AdTrackerClient({
|
||||
onClick={() => setTab(t.id)}
|
||||
className={`px-3 py-1.5 rounded-lg text-xs font-semibold ${
|
||||
tab === t.id
|
||||
? 'bg-white text-gray-900'
|
||||
: 'bg-gray-800/70 text-gray-300'
|
||||
? 'bg-gray-900 text-white'
|
||||
: 'bg-gray-100 text-gray-600'
|
||||
}`}
|
||||
>
|
||||
{t.label}
|
||||
@@ -471,7 +471,7 @@ export default function AdTrackerClient({
|
||||
<p className="text-[10px] uppercase tracking-wider text-gray-500">
|
||||
Resumen de cuenta
|
||||
</p>
|
||||
<h3 className="text-xl font-bold text-white mt-1">
|
||||
<h3 className="text-xl font-bold text-gray-900 mt-1">
|
||||
Meta + Google, juntos
|
||||
</h3>
|
||||
<p className="text-xs text-gray-500 mt-1 max-w-3xl">
|
||||
@@ -509,7 +509,7 @@ export default function AdTrackerClient({
|
||||
<KpiTile label="Ads" value={formatNum(combined.ads)} />
|
||||
</div>
|
||||
|
||||
<div className="h-2.5 rounded-full overflow-hidden border border-gray-800 bg-gray-900 flex">
|
||||
<div className="h-2.5 rounded-full overflow-hidden border border-gray-200 bg-gray-900 flex">
|
||||
<div
|
||||
className="bg-[#7C66B8]"
|
||||
style={{ width: `${metaShare}%` }}
|
||||
@@ -526,12 +526,12 @@ export default function AdTrackerClient({
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setTab('meta')}
|
||||
className="rounded-xl border border-gray-800 bg-[#0D121F] p-4 text-left hover:border-[#7C66B8]/50"
|
||||
className="rounded-xl border border-gray-200 bg-white p-4 text-left hover:border-[#7C66B8]/50"
|
||||
>
|
||||
<p className="text-[11px] uppercase tracking-wider text-[#a78bfa]">
|
||||
Meta Ads
|
||||
</p>
|
||||
<p className="text-xl font-bold text-white mt-1">
|
||||
<p className="text-xl font-bold text-gray-900 mt-1">
|
||||
{formatEur(meta.spend)}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
@@ -542,12 +542,12 @@ export default function AdTrackerClient({
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setTab('google')}
|
||||
className="rounded-xl border border-gray-800 bg-[#0D121F] p-4 text-left hover:border-sky-500/50"
|
||||
className="rounded-xl border border-gray-200 bg-white p-4 text-left hover:border-sky-500/50"
|
||||
>
|
||||
<p className="text-[11px] uppercase tracking-wider text-sky-400">
|
||||
Google Ads
|
||||
</p>
|
||||
<p className="text-xl font-bold text-white mt-1">
|
||||
<p className="text-xl font-bold text-gray-900 mt-1">
|
||||
{formatEur(google.spend)}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
@@ -573,13 +573,13 @@ export default function AdTrackerClient({
|
||||
onZoom={setZoomAd}
|
||||
/>
|
||||
|
||||
<section className="rounded-2xl border border-gray-800 bg-[#111827] p-4 md:p-5">
|
||||
<section className="rounded-2xl border border-gray-200 bg-white p-4 md:p-5">
|
||||
<div className="flex flex-wrap items-start justify-between gap-3 mb-3">
|
||||
<div>
|
||||
<p className="text-[10px] uppercase tracking-wider text-gray-500">
|
||||
Rendimiento diario
|
||||
</p>
|
||||
<h3 className="text-lg font-bold text-white">
|
||||
<h3 className="text-lg font-bold text-gray-900">
|
||||
Conversiones y CPL
|
||||
</h3>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
@@ -596,7 +596,7 @@ export default function AdTrackerClient({
|
||||
className={`px-3 py-1 rounded-full text-[11px] font-medium ${
|
||||
chartMode === c.id
|
||||
? 'bg-brand-500 text-white'
|
||||
: 'border border-gray-700 text-gray-300'
|
||||
: 'border border-gray-200 text-gray-600'
|
||||
}`}
|
||||
>
|
||||
{c.label}
|
||||
@@ -607,13 +607,13 @@ export default function AdTrackerClient({
|
||||
<SparkBars data={daily} mode={chartMode} metric="cpl" />
|
||||
</section>
|
||||
|
||||
<section className="rounded-2xl border border-gray-800 bg-[#111827] p-4 md:p-5">
|
||||
<section className="rounded-2xl border border-gray-200 bg-white p-4 md:p-5">
|
||||
<div className="flex flex-wrap items-start justify-between gap-3 mb-3">
|
||||
<div>
|
||||
<p className="text-[10px] uppercase tracking-wider text-gray-500">
|
||||
Rendimiento diario
|
||||
</p>
|
||||
<h3 className="text-lg font-bold text-white">Coste y clics</h3>
|
||||
<h3 className="text-lg font-bold text-gray-900">Coste y clics</h3>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
Barras: coste. Línea: clics. {formatEur(combined.spend)} ·{' '}
|
||||
{formatNum(combined.clicks)} clics
|
||||
@@ -628,7 +628,7 @@ export default function AdTrackerClient({
|
||||
className={`px-3 py-1 rounded-full text-[11px] font-medium ${
|
||||
chartMode === c.id
|
||||
? 'bg-brand-500 text-white'
|
||||
: 'border border-gray-700 text-gray-300'
|
||||
: 'border border-gray-200 text-gray-600'
|
||||
}`}
|
||||
>
|
||||
{c.label}
|
||||
@@ -672,14 +672,14 @@ export default function AdTrackerClient({
|
||||
warning={creativesWarning}
|
||||
onZoom={setZoomAd}
|
||||
/>
|
||||
<section className="rounded-2xl border border-gray-800 bg-[#111827] p-4">
|
||||
<h3 className="text-lg font-bold text-white mb-3">
|
||||
<section className="rounded-2xl border border-gray-200 bg-white p-4">
|
||||
<h3 className="text-lg font-bold text-gray-900 mb-3">
|
||||
Conversiones y CPL · Meta
|
||||
</h3>
|
||||
<SparkBars data={daily} mode="meta" metric="cpl" />
|
||||
</section>
|
||||
<section className="rounded-2xl border border-gray-800 bg-[#111827] p-4">
|
||||
<h3 className="text-lg font-bold text-white mb-3">
|
||||
<section className="rounded-2xl border border-gray-200 bg-white p-4">
|
||||
<h3 className="text-lg font-bold text-gray-900 mb-3">
|
||||
Coste y clics · Meta
|
||||
</h3>
|
||||
<SparkBars data={daily} mode="meta" metric="spend" />
|
||||
@@ -710,14 +710,14 @@ export default function AdTrackerClient({
|
||||
warning={creativesWarning}
|
||||
onZoom={setZoomAd}
|
||||
/>
|
||||
<section className="rounded-2xl border border-gray-800 bg-[#111827] p-4">
|
||||
<h3 className="text-lg font-bold text-white mb-3">
|
||||
<section className="rounded-2xl border border-gray-200 bg-white p-4">
|
||||
<h3 className="text-lg font-bold text-gray-900 mb-3">
|
||||
Conversiones y CPL · Google
|
||||
</h3>
|
||||
<SparkBars data={daily} mode="google" metric="cpl" />
|
||||
</section>
|
||||
<section className="rounded-2xl border border-gray-800 bg-[#111827] p-4">
|
||||
<h3 className="text-lg font-bold text-white mb-3">
|
||||
<section className="rounded-2xl border border-gray-200 bg-white p-4">
|
||||
<h3 className="text-lg font-bold text-gray-900 mb-3">
|
||||
Coste y clics · Google
|
||||
</h3>
|
||||
<SparkBars data={daily} mode="google" metric="spend" />
|
||||
|
||||
Reference in New Issue
Block a user