Pular para o conteúdo principal

2 publicações com a etiqueta "topbar"

Ver todas as etiquetas

Changelog - 26/04/2026

Bottom Notification Widget (refator pra padrão topbar)

  • Substituição do InstallAppFloatingWidget por BottomNotification config-driven (app/components/layout/BottomNotification.tsx). O widget flutuante deixa de ser específico só pra "instalar app" e vira uma fila de tipos configuráveis, espelhando a arquitetura do topbar (types, store, handlers, definitions queue). O componente legado (InstallAppFloatingWidget.tsx, ~200 linhas) foi removido.
  • Seis tipos de notificação suportados: download_app, push_notify, rewards_available, referral, telegram e tournament. Cada brand define quais ficam habilitados e em qual ordem de prioridade — o primeiro que passa no shouldShow renderiza, igual à lógica do topbar.
  • Separação dados × runtime: app/config/bottom-notifications.config.ts carrega só dados puros (lista de enabled, rotationDelaySeconds, params por tipo) e é overrideable por brand. A lógica runtime (ícones Lucide, ctaHref/onCta, predicados shouldShow, estratégia de storage) fica em app/layouts/bottom-notification/handlers.ts — não overrideable, espelha 1:1 o buildTopbarDefinitions.
  • rotationDelaySeconds configurável: com 0 (default) o swap pro próximo widget elegível é instantâneo após dismiss, igual ao topbar. Valores maiores dão um "respiro" antes do próximo slide-up.
  • Revalidação reativa em auth/rewards: quando o usuário loga, desloga ou ganha um reward, a fila reavalia automaticamente (paridade com o topbar) — sem precisar navegar pra atualizar o estado do widget.

Changelog - 24/04/2026

Topbar de Notificações

  • Redesign completo da TopbarNotification (PR #333): novo layout com botão de fechar (X) à esquerda, ícone em chip arredondado com tokens dedicados (topbar.icon-bg / topbar.icon-text), pilha de título + subtítulo no centro e CTA pill à direita, com altura de 72 px alinhada às barras modernas de instalação de app. Os ícones emoji foram substituídos por componentes do lucide-react (Smartphone, Bell, Gift, Send, Trophy, ShieldAlert) e o tipo TopbarDefinition.icon virou LucideIcon. Os modos default e restricted foram unificados num TopbarShell compartilhado, e a topbar deixou de ser sticky — agora rola junto com a página enquanto o header permanece fixo no topo do viewport. Tooltip de instalação iOS foi reancorado para o rodapé do viewport com safe-area-inset-bottom para que a seta inferior alinhe com a barra de endereços do Safari.
  • Centralização do conteúdo no desktop (PR #334): o TopbarNotification recebeu um container interno max-w-[460px] mx-auto envolvendo close/ícone/texto/CTA. O fundo continua preenchendo edge-to-edge, mas em viewports largos o X e o CTA não escorregam mais para os cantos deixando um espaço vazio gigante no meio. Em mobile (< 460px) o comportamento é idêntico ao anterior — o container preenche naturalmente toda a largura.
  • Refresh de tokens de tema da topbar em todos os overrides (PR #347): sincronizou o override 7k-bet-br (que estava sem icon-bg e icon-text), padronizou a paleta com fundo mais suave (lifted bg-primary), chip do ícone tingido com primary e CTA combinando com o botão primário da brand. Ajustes manuais aplicados nas variantes 7k, state77, vera-bet-br, betpontobet-bet-br e cassino-bet-br. Altura interna da linha do TopbarNotification reduzida de 68 px para 62 px para compactar o footprint vertical.