paul/picpeak
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat(branding): symmetric light/dark logo fallback + customer surface

Browse Source 
Pick the logo by the active color mode with a symmetric fallback: a
single uploaded logo serves both modes (dark uses dark||light, light
uses light||dark). Apply to admin header, customer gallery, and the
customer portal (follows branding_force_color_mode). PDFs already use
the light branding logo with the business-profile PDF logo as override
(resolveLogoFile) — unchanged.
This commit is contained in:
Luca
2026-06-03 13:33:27 +02:00
parent 4790ea5ccd
commit 44590b8c0b
3 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/admin/AdminHeader.tsx
+5 -4
View File
@@ -33,10 +33,11 @@ export const AdminHeader: React.FC<AdminHeaderProps> = ({ onMenuClick }) => {
const { data: brandingSettings } = usePublicSettings();
const companyName = brandingSettings?.branding_company_name?.trim() || 'PicPeak';
// Dark-mode logo variant: use it when the admin theme is dark and a dark
// logo was uploaded; otherwise fall back to the light logo.
const logoUrl = (isDark && brandingSettings?.branding_logo_url_dark?.trim())
|| brandingSettings?.branding_logo_url?.trim();
// Dark-mode logo variant. Symmetric fallback: if only one logo is set,
// use it for both modes (dark → dark||light, light → light||dark).
const lightLogo = brandingSettings?.branding_logo_url?.trim();
const darkLogo = brandingSettings?.branding_logo_url_dark?.trim();
const logoUrl = isDark ? (darkLogo || lightLogo) : (lightLogo || darkLogo);
const logoDisplayMode = brandingSettings?.branding_logo_display_mode || 'logo_and_text';
// Logo placement honours the same Branding > Logo Position setting
// the gallery does. 'sidepanel' moves the logo into the AdminSidebar
frontend/src/components/gallery/GalleryLayout.tsx
+5 -3
View File
@@ -123,9 +123,11 @@ export const GalleryLayout: React.FC<GalleryLayoutProps> = ({
const { t } = useTranslation();
const { format } = useLocalizedDate();
const { theme } = useTheme();
// Dark-mode logo variant: prefer it on dark gallery themes, else light.
const brandLogoUrl = (theme.colorMode === 'dark' && brandingSettings?.logo_url_dark)
|| brandingSettings?.logo_url;
// Dark-mode logo variant. Symmetric fallback: a single uploaded logo
// serves both modes (dark → dark||light, light → light||dark).
const brandLogoUrl = theme.colorMode === 'dark'
? (brandingSettings?.logo_url_dark || brandingSettings?.logo_url)
: (brandingSettings?.logo_url || brandingSettings?.logo_url_dark);
const guestIdentity = useGuestIdentityOptional();
// Footer legal-link config. Cached aggressively because the toggle state