marmelab/atomic-crm

actualizar-marca

Resumen

Cambia el logotipo y/o el título del CRM. El logotipo se muestra en dos temas en cinco pantallas (encabezado de escritorio + móvil, inicio de sesión, registro, confirmación) y el título está codificado en tres lugares, por lo que una edición ingenua de un solo archivo deja uno desactualizado. Los pasos a continuación cubren todos ellos. Criterio de salida: el logotipo se renderiza correctamente en ambos temas en las cinco pantallas y el título es coherente en el encabezado, la pestaña del navegador y el nombre de la PWA.

Cuándo usar

• El usuario quiere cambiar, intercambiar o renovar la marca del CRM (logotipo y/o título/nombre).
• Opcionalmente, cuando también solicite actualizar el favicon o los iconos de la aplicación PWA.

No para colores de tema o estilos de componentes; consulte Skill({skill: "shadcn-customization"}).

Logotipo: dos familias de activos

Confirme a cuál se refiere el usuario; la mayoría de las solicitudes solo se refieren a la #1.

1. Logotipo de la aplicación / marca (común) — src/components/atomic-crm/root/logos/, importados como activos de módulo por defaultConfiguration.ts (Vite resuelve la URL relativa al chunk JS, por lo que sobrevive a rutas anidadas como /oauth/consent e implementaciones en sub-rutas). logo_atomic_crm_dark.svg es un gráfico de color claro que se muestra en modo oscuro + todas las páginas de autenticación; logo_atomic_crm_light.svg es un gráfico de color oscuro que se muestra en modo claro. (Un logo_atomic_crm.svg independiente no utilizado aún vive en public/logos/).

   Los archivos se nombran por el modo en que se muestran, no por su color; el logotipo del "modo oscuro" debe leerse sobre un fondo oscuro.

2. Favicon + iconos PWA — solo si se solicita. Mucho más grandes (34 PNG); consulte más abajo.

Valores predeterminados del código frente a configuración en tiempo de ejecución: entran en conflicto

• Valores predeterminados del código (este skill): edite defaultConfiguration.ts + activos. Se confirman, se aplican en todas partes y es la única forma de cambiar el título de la pestaña del navegador / favicon / iconos PWA.
• Interfaz de configuración (/settings → Marca, SettingsPage.tsx): un usuario conectado edita el título y sube logotipos, por navegador, guardados en localStorage como CRM.app.configuration (logotipos como base64), nunca confirmados. Cubre solo el logotipo dentro de la aplicación + el título del encabezado.

⚠️ El almacén sombrea el código. useConfigurationContext devuelve { ...defaultConfiguration, ...storedConfig } (ConfigurationContext.tsx). Si la marca se guardó alguna vez a través de /settings, sus ediciones en defaultConfiguration.ts no se mostrarán en ese navegador; borre la clave CRM.app.configuration de localStorage. Sospeche esto siempre que un cambio de código no tenga efecto visual.

Pasos

1. Recopile el activo. Pida el archivo/URL, el formato (SVG vs PNG) y si existen variantes separadas claro/oscuro o una sola imagen.
   • Una variante → establezca ambas claves de configuración en esa; advierta sobre el contraste deficiente en un tema (las páginas de autenticación siempre usan la clave del modo oscuro).
   • SVG de un solo color → derive la otra variante intercambiando el color de relleno (blanco ↔ negro).
2. Coloque los archivos en src/components/atomic-crm/root/logos/:
   • Sustitución directa (la más sencilla): sobrescriba logo_atomic_crm_dark.svg / logo_atomic_crm_light.svg, manteniendo exactamente los nombres de archivo + .svg. Las importaciones en defaultConfiguration.ts ya apuntan aquí; listo. (Solo SVG).
   • Nuevo nombre / formato (ej. PNG): guárdelo como archivos nuevos junto a ellos, luego actualice las dos sentencias import al inicio de defaultConfiguration.ts (alimentan defaultDarkModeLogo / defaultLightModeLogo; rutas relativas al módulo, por lo tanto "./logos/<archivo>"). No las revierta a cadenas de ruta pública simples; eso reintroduce el problema #291.
3. Actualice el título (si cambia el nombre) en los tres lugares — defaultTitle impulsa solo el primero:
   • defaultConfiguration.ts → defaultTitle — encabezado <h1> + alt del logotipo.
   • index.html → <title> — título de la pestaña del navegador (codificado, no se establece en tiempo de ejecución).
   • public/manifest.json → short_name + name — nombre de la PWA instalada.

Consumidores (sin ediciones si mantiene las claves de configuración): layout/Header.tsx + dashboard/MobileDashboard.tsx renderizan ambas variantes (alternadas con CSS, h-6); login/{LoginPage,SignupPage,ConfirmationRequired}.tsx renderizan solo darkModeLogo.

Racionalizaciones

Racionalización	Realidad
"Cambié el archivo del logotipo, ese es todo el trabajo."	El logotipo se muestra en dos temas en cinco pantallas y el título vive en tres archivos. Una edición deja una variante desactualizada.
"Mi cambio de código no tiene efecto visual, por lo tanto no se aplicó."	El almacén /settings sombrea defaultConfiguration.ts por navegador. Borre la clave CRM.app.configuration de localStorage.
"Una imagen es suficiente para ambos temas."	Las páginas de autenticación siempre usan la clave del modo oscuro; un solo activo se ve mal en un fondo. Advierta o derive la segunda variante.
"Regeneraré un par de tamaños de favicon."	El conjunto PWA son 34 PNG. Regenere cada tamaño a partir de una fuente única o pida el conjunto; no edite manualmente solo unos pocos.

Señales de alerta

• Editar solo una de las dos claves de activo del logotipo, o intercambiar los archivos claro/oscuro.
• Cambiar el título en defaultConfiguration.ts pero no en index.html y manifest.json.
• Un cambio de código sin efecto visible, con el almacén CRM.app.configuration sin limpiar.
• Editar manualmente un subconjunto de tamaños de favicon/PWA en lugar de regenerar el conjunto completo.
• Tocar el logotipo del sitio de documentación (doc/) cuando no se solicitó.

Verificación

make typecheck detecta solo errores tipográficos en las claves de configuración. Luego make start y compruebe: encabezado en ambos temas, escritorio + móvil; las páginas de inicio de sesión/registro (fondo oscuro); y si el título cambió, el encabezado <h1>, la pestaña del navegador y el nombre de la PWA. Un logotipo incorrecto en exactamente un tema significa que ambas claves apuntan a un mismo activo, o que los archivos claro/oscuro están intercambiados.

• Ambas variantes del logotipo apuntan a los activos claro/oscuro correctos (nombrados por modo de visualización, no por color).
• El logotipo se renderiza en ambos temas, escritorio + móvil, y en inicio de sesión/registro/confirmación.
• Si el nombre cambió, el título se actualiza en defaultConfiguration.ts, index.html y manifest.json.
• Si no aparece efecto visual, se borró la clave CRM.app.configuration de localStorage.
• Los iconos de favicon/PWA se regeneraron como un conjunto completo solo si se solicitó explícitamente.

Favicon e iconos de app (opcional)

Solo si se solicita. Referenciados por index.html + public/manifest.json: public/favicon.ico y public/appIcon/*.png (34 tamaños incl. maskable_icon*). Regenere cada tamaño a partir de una fuente cuadrada única (sharp / pwa-asset-generator) o pida al usuario el conjunto; no edite manualmente solo unos pocos. Confirme el alcance primero; es posible que también sea necesario actualizar theme_color/background_color en manifest.json.

El logotipo del sitio de documentación (doc/astro.config.mjs → doc/public/logo_atomic_crm_*.svg) es un sitio Astro separado; déjelo en paz a menos que se solicite.