marmelab/atomic-crm

Atualizar Marca

Visão Geral

Altera o logotipo e/ou título do CRM. O logotipo aparece em dois temas em cinco telas (cabeçalho desktop + mobile, login, inscrição, confirmação) e o título está codificado em três lugares — uma edição ingênua em um único arquivo deixaria um desatualizado. As etapas abaixo capturam todos eles. Critério de saída: o logotipo renderiza corretamente em ambos os temas em todas as cinco telas, e o título é consistente no cabeçalho, na aba do navegador e no nome do PWA.

Quando Usar

• O usuário quer alterar, trocar ou renomear o logotipo e/ou título do CRM.
• Opcionalmente, quando também pedir para atualizar o favicon ou os ícones do aplicativo PWA.

Não para cores de tema ou estilização de componentes — veja Skill({skill: "shadcn-customization"}).

Logotipo: dois grupos de ativos

Confirme qual o usuário se refere — a maioria dos pedidos significa apenas #1.

1. Logotipo do aplicativo / marca textual (comum) — src/components/atomic-crm/root/logos/, importados como ativos de módulo por defaultConfiguration.ts (o Vite resolve a URL relativa ao chunk JS, então funciona em rotas aninhadas como /oauth/consent e implantações com sub-caminho). logo_atomic_crm_dark.svg é uma arte de cor clara exibida em modo escuro + todas as páginas de autenticação; logo_atomic_crm_light.svg é uma arte de cor escura exibida em modo claro. (Um logo_atomic_crm.svg independente não utilizado ainda existe em public/logos/.)

   Os arquivos são nomeados pelo modo em que são exibidos, não pela sua cor — o logotipo "modo escuro" deve ser legível em um fundo escuro.

2. Favicon + ícones PWA — apenas se solicitado. Muito maior (34 PNGs); veja abaixo.

Padrões do código vs. Configurações em tempo de execução — eles entram em conflito

• Padrões do código (esta skill): edite defaultConfiguration.ts + ativos. Comitado, aplica-se em todos os lugares e é a única maneira de alterar o título da aba do navegador / favicon / ícones PWA.
• Interface de Configurações (/settings → Marca, SettingsPage.tsx): um usuário logado edita o título + faz upload de logotipos, por navegador, salvos em localStorage como CRM.app.configuration (logotipos como base64), nunca comitado. Cobre apenas o logotipo no aplicativo + título do cabeçalho.

⚠️ O armazenamento oculta o código. useConfigurationContext retorna { ...defaultConfiguration, ...storedConfig } (ConfigurationContext.tsx). Se a marca já foi salva via /settings, suas edições em defaultConfiguration.ts não aparecerão naquele navegador — limpe a chave CRM.app.configuration do localStorage. Suspeite disso sempre que uma alteração de código não tiver efeito visual.

Etapas

1. Obtenha o(s) ativo(s). Peça o arquivo/URL, formato (SVG vs PNG) e se existem variantes separadas claro/escuro ou uma única imagem.
   • Uma variante → defina ambas as chaves de configuração para ela; avise sobre baixo contraste em um tema (páginas de autenticação sempre usam a chave do modo escuro).
   • SVG com preenchimento único → derive a outra variante trocando o preenchimento (white ↔ black).
2. Coloque os arquivos em src/components/atomic-crm/root/logos/:
   • Substituição direta (mais simples): sobrescreva logo_atomic_crm_dark.svg / logo_atomic_crm_light.svg, mantendo os nomes de arquivo exatos + .svg. As importações em defaultConfiguration.ts já apontam para cá — pronto. (Apenas SVG.)
   • Novo nome / formato (ex.: PNG): salve como novos arquivos ao lado deles, depois atualize as duas declarações import no topo de defaultConfiguration.ts (elas alimentam defaultDarkModeLogo / defaultLightModeLogo; caminhos relativos ao módulo, então "./logos/<arquivo>"). Não as reverta para strings de caminho público simples — isso reintroduz o problema #291.
3. Atualize o título (se o nome mudar) em todos os três lugares — defaultTitle impulsiona apenas o primeiro:
   • defaultConfiguration.ts → defaultTitle — <h1> do cabeçalho + alt do logotipo.
   • index.html → <title> — título da aba do navegador (codificado, não definido em tempo de execução).
   • public/manifest.json → short_name + name — nome do PWA instalado.

Consumidores (sem edições se você mantiver as chaves de configuração): layout/Header.tsx + dashboard/MobileDashboard.tsx renderizam ambas as variantes (alternadas por CSS, h-6); login/{LoginPage,SignupPage,ConfirmationRequired}.tsx renderizam apenas darkModeLogo.

Justificativas

Justificativa	Realidade
"Eu mudei o arquivo do logotipo, esse é o trabalho todo."	O logotipo aparece em dois temas em cinco telas e o título mora em três arquivos. Uma edição deixa uma variante desatualizada.
"Minha alteração de código não tem efeito visual, então não foi aplicada."	O armazenamento de /settings oculta defaultConfiguration.ts por navegador. Limpe a chave CRM.app.configuration do localStorage.
"Uma imagem serve para ambos os temas."	As páginas de autenticação sempre usam a chave do modo escuro; um único ativo fica errado em um fundo. Avise ou derive a segunda variante.
"Vou regenerar alguns tamanhos de favicon."	O conjunto PWA tem 34 PNGs. Regenere cada tamanho a partir de uma fonte ou peça o conjunto — não edite manualmente alguns.

Bandeiras Vermelhas

• Editar apenas uma das duas chaves de ativo do logotipo, ou trocar os arquivos claro/escuro.
• Alterar o título em defaultConfiguration.ts mas não em index.html e manifest.json.
• Alteração de código sem efeito visível, com o armazenamento CRM.app.configuration não limpo.
• Editar manualmente um subconjunto de tamanhos de favicon/PWA em vez de regenerar o conjunto completo.
• Tocar no logotipo do site de documentação (doc/) quando não foi solicitado.

Verificação

make typecheck captura apenas erros de digitação em chaves de configuração. Depois make start e verifique: cabeçalho em ambos os temas, desktop + mobile; as páginas login/inscrição (fundo escuro); e se o título mudou, o <h1> do cabeçalho, a aba do navegador e o nome do PWA. Um logotipo errado em exatamente um tema significa que ambas as chaves apontam para um único ativo, ou os arquivos claro/escuro estão trocados.

• Ambas as variantes de logotipo apontam para os ativos claro/escuro corretos (nomeados pelo modo de exibição, não pela cor).
• Logotipo renderiza em ambos os temas, desktop + mobile, e em login/inscrição/confirmação.
• Se o nome mudou, o título foi atualizado em defaultConfiguration.ts, index.html e manifest.json.
• Se nenhum efeito visual apareceu, a chave CRM.app.configuration do localStorage foi limpa.
• Ícones favicon/PWA regenerados como um conjunto completo apenas se explicitamente solicitado.

Favicon e ícones do aplicativo (opcional)

Apenas se solicitado. Referenciados por index.html + public/manifest.json: public/favicon.ico e public/appIcon/*.png (34 tamanhos incl. maskable_icon*). Regenerar todos os tamanhos a partir de uma fonte quadrada (sharp / pwa-asset-generator) ou peça ao usuário o conjunto — não edite manualmente alguns. Confirme o escopo primeiro; theme_color/background_color em manifest.json também pode precisar de atualização.

O logotipo do site de documentação (doc/astro.config.mjs → doc/public/logo_atomic_crm_*.svg) é um site Astro separado — deixe-o como está a menos que solicitado.