fix(branding): dark logo in the Branding live preview
GalleryPreview used only branding.logo_url, so the Live Preview kept the light logo when previewing a dark theme. Pick the logo by theme.colorMode (symmetric fallback) and pass logo_url_dark through from BrandingPage.
This commit is contained in:
@@ -8,6 +8,7 @@ interface GalleryPreviewBranding {
|
|||||||
company_name?: string;
|
company_name?: string;
|
||||||
company_tagline?: string;
|
company_tagline?: string;
|
||||||
logo_url?: string;
|
logo_url?: string;
|
||||||
|
logo_url_dark?: string;
|
||||||
logo_display_mode?: 'logo_only' | 'text_only' | 'logo_and_text';
|
logo_display_mode?: 'logo_only' | 'text_only' | 'logo_and_text';
|
||||||
logo_position?: 'left' | 'center' | 'right';
|
logo_position?: 'left' | 'center' | 'right';
|
||||||
}
|
}
|
||||||
@@ -82,10 +83,13 @@ export const GalleryPreview: React.FC<GalleryPreviewProps> = ({
|
|||||||
const showText = displayMode === 'text_only' || displayMode === 'logo_and_text';
|
const showText = displayMode === 'text_only' || displayMode === 'logo_and_text';
|
||||||
const brandName = branding?.company_name?.trim() || 'Your Studio';
|
const brandName = branding?.company_name?.trim() || 'Your Studio';
|
||||||
const brandTagline = branding?.company_tagline?.trim() || '';
|
const brandTagline = branding?.company_tagline?.trim() || '';
|
||||||
const resolvedLogoUrl = showLogo && branding?.logo_url
|
// Theme-aware logo with symmetric fallback — mirror the live surfaces
|
||||||
? (branding.logo_url.startsWith('http')
|
// so the preview reflects what the gallery will actually show.
|
||||||
? branding.logo_url
|
const previewLogo = theme.colorMode === 'dark'
|
||||||
: buildResourceUrl(branding.logo_url))
|
? (branding?.logo_url_dark || branding?.logo_url)
|
||||||
|
: (branding?.logo_url || branding?.logo_url_dark);
|
||||||
|
const resolvedLogoUrl = showLogo && previewLogo
|
||||||
|
? (previewLogo.startsWith('http') ? previewLogo : buildResourceUrl(previewLogo))
|
||||||
: null;
|
: null;
|
||||||
const logoPosition = branding?.logo_position || 'left';
|
const logoPosition = branding?.logo_position || 'left';
|
||||||
const brandFlexClass = logoPosition === 'center'
|
const brandFlexClass = logoPosition === 'center'
|
||||||
|
|||||||
@@ -1124,7 +1124,7 @@ export const BrandingPage: React.FC = () => {
|
|||||||
</h3>
|
</h3>
|
||||||
<GalleryPreview
|
<GalleryPreview
|
||||||
theme={currentTheme}
|
theme={currentTheme}
|
||||||
branding={brandingSettings}
|
branding={{ ...brandingSettings, logo_url_dark: logoDarkUrl }}
|
||||||
className="shadow-lg"
|
className="shadow-lg"
|
||||||
/>
|
/>
|
||||||
</Card>
|
</Card>
|
||||||
|
|||||||
Reference in New Issue
Block a user