Redesign do Dashboard — Modo Claro/Escuro e Maior Densidade de Informação
- dashboard
Em 2026-06-05, publicamos um redesign completo do dashboard do HeatMapX (heatmapx.com/dashboard). A visibilidade e a usabilidade melhoraram significativamente.
O que mudou
☀ Tema triplo: Claro / Escuro / Sistema
Um toggle triplo — "☀ Claro", "💻 Sistema", "🌙 Escuro" — foi adicionado ao canto superior direito do cabeçalho.
- Sistema (padrão): Segue automaticamente a configuração de aparência do seu SO. No macOS definido como "Automático", muda para escuro à noite sem nenhuma ação manual.
- Substituição manual: Você pode fixar o modo claro ou escuro a qualquer momento. A preferência é salva no seu navegador.
- O flash de conteúdo sem estilo (FOUC) no carregamento inicial é prevenido, então o tema correto é renderizado imediatamente no recarregamento.
▤ Sites registrados redesenhados como lista tabular
O grid de cards em duas colunas anterior foi substituído por um layout de tabela de linha única, melhorando significativamente a legibilidade quando você tem múltiplos sites registrados.
- As colunas são alinhadas verticalmente em todas as linhas, facilitando a comparação de status e contagens de eventos de uma olhada
- Nome do site, URL, chave de API e tag de rastreamento são exibidos de forma compacta em uma única linha
- Detalhes de configuração se recolhem em "▸ Informações de configuração" (expanda para copiar a chave de API e a tag de rastreamento)
- Nomes e URLs longos são automaticamente truncados com "…" para que o layout nunca quebre
＋ Botão "Adicionar site" ao lado do título da seção
Um botão compacto "＋ Adicionar site" agora aparece ao lado do título "Sites Registrados", permitindo adicionar um novo site sem precisar rolar (o botão original na parte inferior da lista permanece também).
◐ Design plano unificado no estilo GitHub
O esquema de cores foi simplificado, reduzindo substancialmente o ruído visual.
- Fundo da página: cinza neutro (
#f5f5f5), combinando com o tom de produtos SaaS modernos como Linear e Supabase - Cards: base branca + borda fina, sem sombra, raio de borda de 6px
- Laranja como único acento de marca (antes: azul, verde, roxo e âmbar misturados)
- Cores de status semânticas preservadas: verde (ativo) / âmbar (aviso) / vermelho (erro)
Antes / Depois
| Aspecto | Antes | Depois |
|---|---|---|
| Tema de cor | Dashboard escuro fixo | Triplo: Claro / Escuro / Sistema |
| Layout | Grid de cards em duas colunas (baixa densidade de informação) | Lista tabular de coluna única (colunas alinhadas verticalmente) |
| Exibição do site | Empilhado verticalmente, ocupa muito espaço | Um site = uma linha + detalhes recolhíveis |
| Botão adicionar | Apenas na parte inferior da página | Tanto ao lado do título quanto na parte inferior |
| Cor da marca | Azul / verde / roxo / âmbar misturados | Eixo de acento único laranja unificado |
Melhorias adicionais
- Limites de tamanho para nome do site e URL: 60 caracteres para nomes / 512 caracteres para URLs, evitando quebra de layout.
- Placeholders de adicionar site atualizados: Substituídos
ex: in-gol/https://in-gol.comporex: Meu site/https://example.comem todos os 15 idiomas suportados. - Modal de onboarding: Aparece gradualmente 1 segundo após chegar ao dashboard, suavizando a sensação de "pop repentino".
- Trechos de código: As exibições de tag de rastreamento e comando CLI foram atualizadas de fundos escuros para um estilo de pílula cinza claro, em harmonia com o tema claro.
Escopo do impacto
Esta versão é somente UI/UX — a lógica de medição, as estruturas de dados e a API não foram alteradas. As tags de rastreamento incorporadas existentes continuam funcionando normalmente.