2026-01-17_emoji-ui-symbols
Documentação KOLOS

2026-01-17_emoji-ui-symbols

🧭 Contexto

Foi solicitado aplicar o mesmo padrão visual de emojis (usado nos documentos Markdown) também na UI do app — especialmente nos menus lateral/mobile, ações do header (notificações/criar) e títulos das páginas.

✅ Decisão

Substituir os “símbolos” baseados em ícones nas áreas de navegação/ações principais por emojis visíveis no texto, mantendo componentes do Flux (sem reinventar layout/comportamento).

No mobile (tela pequena), o rodapé fixo (bottom nav) mostra apenas os emojis (sem texto), com tamanho aumentado e aria-label/title para acessibilidade.

O item central do bottom nav ficou maior (e levemente elevado) para dar sensação de app nativo.

Também recebeu um “halo” sutil (fundo + ring + glow) para reforçar o CTA central sem poluir o layout.

Os demais emojis do rodapé mobile também foram aumentados, com caixas de tamanho fixo para evitar quebra de espaçamento.

Para comparação visual, os itens não-centrais ficaram em ~2/3 do tamanho (mantendo o central como destaque/CTA).

A navegação de “Jogar” foi ajustada para usar ⚔️ (espadas cruzadas), conforme preferência visual.

Para evitar “vazamento” visual (conteúdo aparecendo por baixo do rodapé), o container do rodapé passou a ter fundo full width colado na base e padding apenas do safe-area-inset-bottom.

🛠️ Passos (comandos via Sail)

  • sail artisan test

Opcional (se estiver usando Vite dev):

  • sail npm run dev

🧪 Validação

  • Navegar em /dashboard, /booking, /tournaments, /community, /my-card e confirmar:
    • Sidebar e bottom nav exibem emojis antes dos labels
    • Header mostra botões com 🔔 e ➕
    • Títulos (header) exibem emoji + nome

📦 Impacto

  • Ajustes de texto/labels em views Blade (sem mudanças de domínio).
  • Reduz dependência de sets de ícones para navegação primária.