From a22daca1fbfc27391220c16d1f94840f7236c338 Mon Sep 17 00:00:00 2001 From: admbusiness Date: Sat, 30 May 2026 06:10:24 -0300 Subject: [PATCH 2/6] fix(ui): close 3 Sprint-1 follow-up bugs from same UX audit (B8/B9/B10) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 3 visual bugs reportados pelo usuário ao revisar o build pós-fix do Sprint 1: B8 — Filtro de campanhas com selects ocupando linhas inteiras - Causa: Bootstrap define .form-select { width: 100% } por padrão. Dentro do FilterBar (display:flex; flex-wrap:wrap), cada select preenchia 100% da largura disponível e forçava wrap, empilhando search/canal/status em 3 linhas separadas em vez de lado a lado. - Fix em FilterBar.vue: sobrescrever width:auto + flex:0 1 auto nos .form-select dentro do escopo do FilterBar. Search ganhou flex:1 1 220px para crescer dominante mas com base flexível. B9 — Cards de canal pendente/locked com texto fantasma e botão Upgrade fora do card. - Causa: opacity:0.55 aplicado no .sc-card--locked + opacity:0.3 nos elementos internos. Opacidades MULTIPLICAVAM (0.55 × 0.3 = 0.165), deixando texto quase invisível. Pior: o div com "Disponível no plano Starter+" + botão Upgrade ficava fora do contêiner flex centralizado, parecendo flutuar logo abaixo do card. - Fix em SelectChannel.vue: * Remover opacity do card raiz, trocar por filter:saturate(0.5/0.7) + cores muted (var(--bc-text-muted)) nos elementos * Novo bloco .sc-card__upgrade (flex column, items centered) que encaixa CTA dentro do card com hierarquia clara * Aplicado a pending_setup e locked (ambos tinham o mesmo problema) B10 — Etapa 1 "Identidade da Campanha" continuava dominando visualmente depois da campanha já ter sido criada. Hero centralizado com ícone 56px + H2 + descrição + input grande ocupava toda a tela ainda quando o usuário já tinha avançado para "Detalhes do Briefing". - Fix em Create.vue: v-if="!campaignId" no hero, v-else renderiza um header compacto inline com badge "01" + título pequeno + input edit inline (autosave on blur via onSaveField) + badge do canal. Briefing passa a ser o foco visual da etapa, como deveria. Removida redundância do badge "CANAL X" na sub-seção 02 (agora aparece só uma vez em 01). Validação: - vite build passa (17.66s) - Screenshots FIX-campaigns-list.jpeg, FIX-select-channel.jpeg, FIX-create-step1-after.jpeg confirmam os 3 fixes. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../frontend/src/components/ui/FilterBar.vue | 7 +- .../frontend/src/pages/campaigns/Create.vue | 18 ++++- .../src/pages/campaigns/SelectChannel.vue | 72 +++++++++++++------ 3 files changed, 72 insertions(+), 25 deletions(-) diff --git a/new_saas/frontend/src/components/ui/FilterBar.vue b/new_saas/frontend/src/components/ui/FilterBar.vue index f4a3094e..64d0e24e 100644 --- a/new_saas/frontend/src/components/ui/FilterBar.vue +++ b/new_saas/frontend/src/components/ui/FilterBar.vue @@ -45,7 +45,7 @@ defineEmits<{ border: 1px solid var(--bc-gray, #e4e8ef); border-radius: 8px; padding: 0 0.75rem; - flex: 1; + flex: 1 1 220px; min-width: 200px; transition: all 0.2s; } @@ -82,6 +82,11 @@ defineEmits<{ border-color: var(--bc-gray); background-color: var(--bc-white, #fff); min-width: 140px; + /* Bootstrap define form-select com width:100%, que dentro de flex+wrap empurra + cada select para uma linha inteira. Limitamos para o select crescer só até + o conteúdo natural — assim ficam lado a lado com o search. */ + width: auto; + flex: 0 1 auto; } .bc-filter-actions { margin-left: auto; diff --git a/new_saas/frontend/src/pages/campaigns/Create.vue b/new_saas/frontend/src/pages/campaigns/Create.vue index 0e4bd13f..5b28cf35 100644 --- a/new_saas/frontend/src/pages/campaigns/Create.vue +++ b/new_saas/frontend/src/pages/campaigns/Create.vue @@ -53,8 +53,8 @@
- -
+ +
@@ -73,12 +73,24 @@
+ +
+ 01 +

Identidade

+ + CANAL {{ form.type.toUpperCase() }} +
+
02

Detalhes do Briefing

- CANAL {{ form.type.toUpperCase() }}
-
- +
+
-

{{ ch.label }}

-

{{ ch.desc }}

+

{{ ch.label }}

+

{{ ch.desc }}

Configuração Necessária - -
- - Configuração disponível com o administrador. +
+ + + + Configuração disponível com o administrador. +
@@ -67,17 +69,17 @@ aria-disabled="true" tabindex="-1">
-
- +
+
-

{{ ch.label }}

-

{{ ch.desc }}

+

{{ ch.label }}

+

{{ ch.desc }}

Pendente -
- Disponível no plano Starter+ -
@@ -256,16 +258,44 @@ onMounted(loadChannels) outline-offset: 2px; } -/* Pending */ +/* Pending — atenua o conteúdo sem usar opacity no card (multiplica e some) */ .sc-card--pending { cursor: default; - opacity: 0.75; + background: var(--bc-gray); + filter: saturate(0.7); } -/* Locked */ +/* Locked — idem; texto fica legível, badge/lock indicam estado */ .sc-card--locked { cursor: default; - opacity: 0.55; + background: var(--bc-gray); + filter: saturate(0.5); +} + +/* Versões "muted" dos elementos do card, sem multiplicar opacity */ +.sc-card__icon--muted { opacity: 0.6; } +.sc-card__name--muted { color: var(--bc-text-muted); } +.sc-card__desc--muted { color: var(--bc-text-muted); opacity: 0.75; } + +/* Bloco de Upgrade / Configurar — empilhado e centralizado dentro do card */ +.sc-card__upgrade { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; + margin-top: 0.75rem; + width: 100%; +} +.sc-card__upgrade-label { + font-size: 0.72rem; + color: var(--bc-text-muted); + text-align: center; + line-height: 1.4; +} +.sc-card__upgrade-btn { + border-radius: 8px; + font-size: 0.78rem; + padding: 0.3rem 0.85rem; } /* ─── Icon square ─── */ -- 2.48.1.windows.1