- {/* Logo / header — matches AdminLoginPage's tinted square frame
- so the brand presentation is identical across admin and
- customer entry points. The frame itself is admin-controllable
- via Branding → "Show tinted frame behind login logo" — same
- toggle drives both login pages. */}
+ {/* Logo / header — matches AdminLoginPage. The frame and size
+ are admin-controllable via Branding → "Login pages logo"
+ settings; both toggles apply to /admin/login and
+ /customer/login exclusively (the rest of the app uses its
+ own logo_size). */}
- {settingsData?.branding_login_logo_frame_enabled !== false ? (
-
+ {(() => {
+ const cls = resolveLoginLogoClasses(settingsData?.branding_login_logo_size);
+ const showFrame = settingsData?.branding_login_logo_frame_enabled !== false;
+ return showFrame ? (
+
+
+
+ ) : (
-
- ) : (
-
- )}
+ );
+ })()}
{t('customer.login.title', 'Customer login')}
diff --git a/frontend/src/services/publicSettings.service.ts b/frontend/src/services/publicSettings.service.ts
index b3640cde..0ee322cd 100644
--- a/frontend/src/services/publicSettings.service.ts
+++ b/frontend/src/services/publicSettings.service.ts
@@ -25,6 +25,12 @@ export interface PublicSettings {
* AdminDarkModeContext + ThemeContext both honor this.
*/
branding_force_color_mode?: 'dark' | 'light' | null;
+ /**
+ * Login-page-only branding (#354 follow-up). Applies exclusively to
+ * /admin/login and /customer/login. Defaults: frame on, size 'medium'.
+ */
+ branding_login_logo_frame_enabled?: boolean;
+ branding_login_logo_size?: 'small' | 'medium' | 'large' | 'xlarge';
// Footer overhaul (#441 + #440). Empty strings mean "hide".
branding_facebook_url?: string;
branding_instagram_url?: string;
diff --git a/frontend/src/services/settings.service.ts b/frontend/src/services/settings.service.ts
index 270461cd..40276c24 100644
--- a/frontend/src/services/settings.service.ts
+++ b/frontend/src/services/settings.service.ts
@@ -25,6 +25,13 @@ export interface BrandingSettings {
* `colorMode` override is ignored. `null` means no force (default behavior).
*/
force_color_mode?: 'dark' | 'light' | null;
+ /**
+ * Login-page-only branding (#354 follow-up). Applies exclusively to
+ * /admin/login and /customer/login. Frame default is true; size
+ * default is 'medium' (matches the visual state before the toggle).
+ */
+ login_logo_frame_enabled?: boolean;
+ login_logo_size?: 'small' | 'medium' | 'large' | 'xlarge';
// Footer overhaul (#441 + #440). Empty strings hide each social
// icon individually; promo_markdown empty hides the slot for events
// in 'inherit' mode. Position controls global default placement.
@@ -309,7 +316,14 @@ export const settingsService = {
? 'dark'
: rawSettings.branding_force_color_mode === 'light'
? 'light'
- : null
+ : null,
+ // Login-only knobs (#354). Default to frame ON, size 'medium' so
+ // installs that haven't toggled them keep the visual state shipped
+ // before the controls existed.
+ login_logo_frame_enabled: this._parseBoolean(rawSettings.branding_login_logo_frame_enabled, true),
+ login_logo_size: ['small', 'medium', 'large', 'xlarge'].includes(rawSettings.branding_login_logo_size)
+ ? rawSettings.branding_login_logo_size
+ : 'medium'
};
},
diff --git a/frontend/src/utils/loginLogoSize.ts b/frontend/src/utils/loginLogoSize.ts
new file mode 100644
index 00000000..020fdbf6
--- /dev/null
+++ b/frontend/src/utils/loginLogoSize.ts
@@ -0,0 +1,51 @@
+/**
+ * Login-page logo sizing (#354 follow-up).
+ *
+ * Used ONLY on /admin/login and /customer/login. The rest of the app
+ * (gallery headers, admin chrome) keeps its own `branding_logo_size` /
+ * `branding_logo_max_height` knobs — kept separate so admins can have a
+ * compact logo in the in-app header but a hero-sized one on the login
+ * splash.
+ *
+ * Returns Tailwind class strings for both modes:
+ * - `frame`: dimensions of the tinted square frame + the inner image.
+ * - `bare`: height/width of the standalone image when the frame is off.
+ */
+export type LoginLogoSize = 'small' | 'medium' | 'large' | 'xlarge';
+
+interface LoginLogoClasses {
+ frameOuter: string; // tinted square dimensions
+ frameInner: string; // logo image inside the frame
+ bare: string; // logo image when frame is off
+}
+
+const SIZE_MAP: Record
= {
+ small: {
+ frameOuter: 'w-[140px] h-[105px]',
+ frameInner: 'w-[120px] h-[90px]',
+ bare: 'h-16 w-auto',
+ },
+ medium: {
+ // Matches the visual state shipped before the size toggle existed.
+ frameOuter: 'w-[200px] h-[150px]',
+ frameInner: 'w-[180px] h-[130px]',
+ bare: 'h-24 w-auto',
+ },
+ large: {
+ frameOuter: 'w-[260px] h-[195px]',
+ frameInner: 'w-[240px] h-[175px]',
+ bare: 'h-32 w-auto',
+ },
+ xlarge: {
+ frameOuter: 'w-[320px] h-[240px]',
+ frameInner: 'w-[300px] h-[220px]',
+ bare: 'h-40 w-auto',
+ },
+};
+
+export function resolveLoginLogoClasses(size: LoginLogoSize | string | undefined | null): LoginLogoClasses {
+ if (size && size in SIZE_MAP) return SIZE_MAP[size as LoginLogoSize];
+ return SIZE_MAP.medium;
+}
+
+export const LOGIN_LOGO_SIZES: LoginLogoSize[] = ['small', 'medium', 'large', 'xlarge'];