chore(plan-issue): formata o rascunho UI do B200 (prettier)

This commit is contained in:
Francisco Solla 2026-08-11 20:39:45 -03:00
parent 980f66983a
commit d004a2b0eb

View file

@ -9,17 +9,27 @@
<body class="bg-zinc-950 text-zinc-100 antialiased">
<main class="mx-auto max-w-5xl p-8">
<p class="text-sm text-zinc-400">
Coordenação/assessoria no celular varrendo /campanha/municipios — densidade dos cards, alinhamento das labels e
comportamento dos avatares. Cenas mobile 390px (sucessor de B196).
Coordenação/assessoria no celular varrendo /campanha/municipios — densidade dos cards,
alinhamento das labels e comportamento dos avatares. Cenas mobile 390px (sucessor de B196).
</p>
<!-- ============ CENA: ATUAL (referência) ============ -->
<h2 class="mt-8 text-sm font-semibold uppercase tracking-wide text-zinc-500">Atual (referência — 390px)</h2>
<section data-shot="atual" class="mt-4 w-[390px] overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950">
<h2 class="mt-8 text-sm font-semibold uppercase tracking-wide text-zinc-500">
Atual (referência — 390px)
</h2>
<section
data-shot="atual"
class="mt-4 w-[390px] overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950"
>
<!-- header do app (56px) + barra de filtro 40px colada -->
<div class="flex h-14 items-center justify-between border-b border-zinc-800 bg-zinc-900 px-4">
<div
class="flex h-14 items-center justify-between border-b border-zinc-800 bg-zinc-900 px-4"
>
<p class="text-sm font-semibold">Municípios</p>
<span class="flex size-9 items-center justify-center rounded-full bg-zinc-800 text-xs text-zinc-300">SR</span>
<span
class="flex size-9 items-center justify-center rounded-full bg-zinc-800 text-xs text-zinc-300"
>SR</span
>
</div>
<div class="flex items-center gap-1.5 border-b border-zinc-800 px-4 py-1">
<div class="flex min-h-8 flex-1 items-center gap-1.5 rounded-lg px-2">
@ -27,7 +37,10 @@
class="min-h-8 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-zinc-500"
placeholder="Digite para filtrar (município, território, cenário…)"
/>
<span class="flex size-8 shrink-0 items-center justify-center rounded-full bg-zinc-800 text-xs text-zinc-400">✕</span>
<span
class="flex size-8 shrink-0 items-center justify-center rounded-full bg-zinc-800 text-xs text-zinc-400"
>✕</span
>
</div>
</div>
@ -36,7 +49,9 @@
<div class="flex items-start justify-between gap-2">
<div class="flex min-w-0 flex-col gap-0.5">
<h3 class="text-lg leading-tight font-medium">Abaré</h3>
<p class="text-sm text-zinc-400">Território de Identidade Chapada Diamantina · ZE 45</p>
<p class="text-sm text-zinc-400">
Território de Identidade Chapada Diamantina · ZE 45
</p>
</div>
<div class="shrink-0 text-right">
<p class="text-sm font-medium">12,4%</p>
@ -46,9 +61,16 @@
<div class="flex w-full items-center rounded-md bg-zinc-900 p-2">
<div class="grid flex-1 grid-cols-3 gap-1">
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400">Pessimista</span>
<span class="rounded border border-emerald-400/40 bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-200">Central</span>
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400">Otimista</span>
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
>Pessimista</span
>
<span
class="rounded border border-emerald-400/40 bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-200"
>Central</span
>
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
>Otimista</span
>
</div>
<span class="ml-2 h-4 w-px bg-zinc-700"></span>
<span class="ml-2 text-[11px] text-zinc-400">15.000</span>
@ -75,10 +97,16 @@
<span class="text-xs font-medium text-zinc-500">Assessores</span>
<div class="flex w-full min-w-0 items-center overflow-hidden">
<div class="flex min-w-0 flex-1 justify-center">
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]">JM</span>
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
>JM</span
>
</div>
<div class="flex min-w-0 flex-1 justify-center">
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]">AP</span>
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
>AP</span
>
</div>
</div>
</div>
@ -88,7 +116,10 @@
<span class="text-xs font-medium text-zinc-500">Lideranças</span>
<div class="flex w-full min-w-0 items-center overflow-hidden">
<div class="flex min-w-0 flex-1 justify-center">
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]">CR</span>
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
>CR</span
>
</div>
</div>
</div>
@ -98,7 +129,10 @@
<span class="text-xs font-medium text-zinc-500">Dobradinhas</span>
<div class="flex w-full min-w-0 items-center overflow-hidden">
<div class="flex min-w-0 flex-1 justify-center">
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]">RS</span>
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
>RS</span
>
</div>
</div>
</div>
@ -126,9 +160,16 @@
<div class="flex w-full items-center rounded-md bg-zinc-900 p-2">
<div class="grid flex-1 grid-cols-3 gap-1">
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400">Pessimista</span>
<span class="rounded border border-emerald-400/40 bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-200">Central</span>
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400">Otimista</span>
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
>Pessimista</span
>
<span
class="rounded border border-emerald-400/40 bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-200"
>Central</span
>
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
>Otimista</span
>
</div>
<span class="ml-2 h-4 w-px bg-zinc-700"></span>
<span class="ml-2 text-[11px] text-zinc-400">9.800</span>
@ -155,19 +196,34 @@
<span class="text-xs font-medium text-zinc-500">Assessores</span>
<div class="flex w-full min-w-0 items-center overflow-hidden">
<div class="flex min-w-0 flex-1 justify-center">
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]">JM</span>
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
>JM</span
>
</div>
<div class="flex min-w-0 flex-1 justify-center">
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]">AP</span>
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
>AP</span
>
</div>
<div class="flex min-w-0 flex-1 justify-center">
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]">CR</span>
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
>CR</span
>
</div>
<div class="flex min-w-0 flex-1 justify-center">
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]">LS</span>
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
>LS</span
>
</div>
<div class="flex min-w-0 flex-1 justify-center">
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]">RS</span>
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
>RS</span
>
</div>
</div>
</div>
@ -177,10 +233,16 @@
<span class="text-xs font-medium text-zinc-500">Lideranças</span>
<div class="flex w-full min-w-0 items-center overflow-hidden">
<div class="flex min-w-0 flex-1 justify-center">
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]">FT</span>
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
>FT</span
>
</div>
<div class="flex min-w-0 flex-1 justify-center">
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]">DA</span>
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-900 bg-zinc-700 text-[11px]"
>DA</span
>
</div>
</div>
</div>
@ -201,12 +263,22 @@
</section>
<!-- ============ CENA: PROPOSTO ============ -->
<h2 class="mt-10 text-sm font-semibold uppercase tracking-wide text-zinc-500">Proposto (390px)</h2>
<section data-shot="proposto" class="mt-4 w-[390px] overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950">
<h2 class="mt-10 text-sm font-semibold uppercase tracking-wide text-zinc-500">
Proposto (390px)
</h2>
<section
data-shot="proposto"
class="mt-4 w-[390px] overflow-hidden rounded-xl border border-zinc-800 bg-zinc-950"
>
<!-- header + barra de filtro mais alta (≈48px), sem pb → 1º card colado -->
<div class="flex h-14 items-center justify-between border-b border-zinc-800 bg-zinc-900 px-4">
<div
class="flex h-14 items-center justify-between border-b border-zinc-800 bg-zinc-900 px-4"
>
<p class="text-sm font-semibold">Municípios</p>
<span class="flex size-9 items-center justify-center rounded-full bg-zinc-800 text-xs text-zinc-300">SR</span>
<span
class="flex size-9 items-center justify-center rounded-full bg-zinc-800 text-xs text-zinc-300"
>SR</span
>
</div>
<div class="flex items-center gap-1.5 border-b border-zinc-800 px-4 pt-1 pb-0">
<div class="flex min-h-10 flex-1 items-center gap-1.5 rounded-lg px-2">
@ -214,7 +286,10 @@
class="min-h-10 min-w-0 flex-1 bg-transparent text-sm outline-none placeholder:text-zinc-500"
placeholder="Digite para filtrar (município, território, cenário…)"
/>
<span class="flex size-9 shrink-0 items-center justify-center rounded-full bg-zinc-800 text-xs text-zinc-400">✕</span>
<span
class="flex size-9 shrink-0 items-center justify-center rounded-full bg-zinc-800 text-xs text-zinc-400"
>✕</span
>
</div>
</div>
@ -223,7 +298,9 @@
<div class="flex items-start justify-between gap-2">
<div class="flex min-w-0 flex-col gap-0">
<h3 class="text-lg leading-tight font-medium">Abaré</h3>
<p class="text-sm leading-tight text-zinc-400">Território de Identidade Chapada Diamantina · ZE 45</p>
<p class="text-sm leading-tight text-zinc-400">
Território de Identidade Chapada Diamantina · ZE 45
</p>
</div>
<div class="shrink-0 text-right">
<p class="text-sm font-medium">12,4%</p>
@ -233,9 +310,16 @@
<div class="flex w-full items-center rounded-md bg-zinc-900 p-2">
<div class="grid flex-1 grid-cols-3 gap-1">
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400">Pessimista</span>
<span class="rounded border border-emerald-400/40 bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-200">Central</span>
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400">Otimista</span>
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
>Pessimista</span
>
<span
class="rounded border border-emerald-400/40 bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-200"
>Central</span
>
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
>Otimista</span
>
</div>
<span class="ml-2 h-4 w-px bg-zinc-700"></span>
<span class="ml-2 text-[11px] text-zinc-400">15.000</span>
@ -261,8 +345,14 @@
<div class="flex w-full flex-col gap-1">
<span class="text-xs font-medium text-zinc-500">Assessores</span>
<div class="flex w-full min-w-0 items-center">
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">JM</span>
<span class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">AP</span>
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>JM</span
>
<span
class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>AP</span
>
</div>
</div>
</div>
@ -270,7 +360,10 @@
<div class="flex w-full flex-col gap-1">
<span class="text-xs font-medium text-zinc-500">Lideranças</span>
<div class="flex w-full min-w-0 items-center">
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">CR</span>
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>CR</span
>
</div>
</div>
</div>
@ -278,7 +371,10 @@
<div class="flex w-full flex-col gap-1">
<span class="text-xs font-medium text-zinc-500">Dobradinhas</span>
<div class="flex w-full min-w-0 items-center">
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">RS</span>
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>RS</span
>
</div>
</div>
</div>
@ -295,7 +391,9 @@
<div class="flex items-start justify-between gap-2">
<div class="flex min-w-0 flex-col gap-0">
<h3 class="text-lg leading-tight font-medium">Adustina</h3>
<p class="text-sm leading-tight text-zinc-400">Território de Identidade Nordeste · ZE 62</p>
<p class="text-sm leading-tight text-zinc-400">
Território de Identidade Nordeste · ZE 62
</p>
</div>
<div class="shrink-0 text-right">
<p class="text-sm font-medium">7,1%</p>
@ -305,9 +403,16 @@
<div class="flex w-full items-center rounded-md bg-zinc-900 p-2">
<div class="grid flex-1 grid-cols-3 gap-1">
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400">Pessimista</span>
<span class="rounded border border-emerald-400/40 bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-200">Central</span>
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400">Otimista</span>
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
>Pessimista</span
>
<span
class="rounded border border-emerald-400/40 bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-200"
>Central</span
>
<span class="rounded bg-zinc-800 px-2 py-1 text-center text-[11px] text-zinc-400"
>Otimista</span
>
</div>
<span class="ml-2 h-4 w-px bg-zinc-700"></span>
<span class="ml-2 text-[11px] text-zinc-400">9.800</span>
@ -333,11 +438,26 @@
<div class="flex w-full flex-col gap-1">
<span class="text-xs font-medium text-zinc-500">Assessores</span>
<div class="flex w-full min-w-0 items-center">
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">JM</span>
<span class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">AP</span>
<span class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">CR</span>
<span class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">LS</span>
<span class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">RS</span>
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>JM</span
>
<span
class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>AP</span
>
<span
class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>CR</span
>
<span
class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>LS</span
>
<span
class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>RS</span
>
</div>
</div>
</div>
@ -345,12 +465,30 @@
<div class="flex w-full flex-col gap-1">
<span class="text-xs font-medium text-zinc-500">Lideranças</span>
<div class="flex w-full min-w-0 items-center">
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">FT</span>
<span class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">DA</span>
<span class="-ml-3 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">MB</span>
<span class="-ml-3 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">TC</span>
<span class="-ml-3 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">VL</span>
<span class="-ml-3 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">PN</span>
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>FT</span
>
<span
class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>DA</span
>
<span
class="-ml-3 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>MB</span
>
<span
class="-ml-3 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>TC</span
>
<span
class="-ml-3 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>VL</span
>
<span
class="-ml-3 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>PN</span
>
</div>
</div>
</div>
@ -358,8 +496,14 @@
<div class="flex w-full flex-col gap-1">
<span class="text-xs font-medium text-zinc-500">Dobradinhas</span>
<div class="flex w-full min-w-0 items-center">
<span class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">RS</span>
<span class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]">TB</span>
<span
class="flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>RS</span
>
<span
class="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-full border border-zinc-950 bg-zinc-700 text-[11px]"
>TB</span
>
</div>
</div>
</div>