@designcrowd/library.brand-page 5.16.21-jj-3 → 5.16.21

package/lib/src/shared/content-settings/components/content-settings/ContentSettings.mixin.d.ts

@@ -640,7 +640,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         }): void;
         setPageSettingsSectionValue({ sectionName, propName, index, value, merge, viewport, }: {
             sectionName: "footer" | "header" | "pages";
-            propName: "copyrightStyle" | "style" | "iconStyle" | "displayStyle" | "backgroundStyle" | "logoImage" | "logoImageStyle" | "isLogoOptional" | "viewport" | "isLogoVisible" | "logoTemplateImage" | "logoImageHeight" | "logoImageWidth" | "navigationStyles" | "navigation" | "logoImageUrl" | "logoDraftToken" | "logoVariation" | "logoImageBase64Url" | "copyrightText" | "socialLinks" | "textFontFamily";
+            propName: "copyrightStyle" | "style" | "iconStyle" | "displayStyle" | "backgroundStyle" | "logoImage" | "logoImageStyle" | "isLogoOptional" | "viewport" | "isLogoVisible" | "logoTemplateImage" | "logoImageHeight" | "logoImageWidth" | "navigationStyles" | "navigation" | "logoImageUrl" | "logoDraftToken" | "logoVariation" | "logoImageBase64Url" | "backgroundColorEnabled" | "copyrightText" | "socialLinks" | "textFontFamily";
             index?: number | undefined;
             value: string | number | boolean | BrandPageCssStyle | import("../../../../brand-page").LinksItem[] | Partial<import("../../../../brand-page").ImageItem> | null | undefined;
             merge?: boolean | undefined;

package/lib/src/shared/content-settings/components/content-settings/ReplaceImageSettingsForContent.mixin.d.ts

@@ -518,7 +518,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         }): void;
         setPageSettingsSectionValue({ sectionName, propName, index, value, merge, viewport, }: {
             sectionName: "footer" | "header" | "pages";
-            propName: "copyrightStyle" | "style" | "iconStyle" | "displayStyle" | "backgroundStyle" | "logoImage" | "logoImageStyle" | "isLogoOptional" | "viewport" | "isLogoVisible" | "logoTemplateImage" | "logoImageHeight" | "logoImageWidth" | "navigationStyles" | "navigation" | "logoImageUrl" | "logoDraftToken" | "logoVariation" | "logoImageBase64Url" | "copyrightText" | "socialLinks" | "textFontFamily";
+            propName: "copyrightStyle" | "style" | "iconStyle" | "displayStyle" | "backgroundStyle" | "logoImage" | "logoImageStyle" | "isLogoOptional" | "viewport" | "isLogoVisible" | "logoTemplateImage" | "logoImageHeight" | "logoImageWidth" | "navigationStyles" | "navigation" | "logoImageUrl" | "logoDraftToken" | "logoVariation" | "logoImageBase64Url" | "backgroundColorEnabled" | "copyrightText" | "socialLinks" | "textFontFamily";
             index?: number | undefined;
             value: string | number | boolean | BrandPageCssStyle | import("../../../../brand-page").LinksItem[] | Partial<import("../../../../brand-page").ImageItem> | null | undefined;
             merge?: boolean | undefined;

package/lib/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.d.ts

@@ -719,7 +719,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }): void;
         setPageSettingsSectionValue({ sectionName, propName, index, value, merge, viewport, }: {
             sectionName: "footer" | "header" | "pages";
-            propName: "copyrightStyle" | "style" | "iconStyle" | "displayStyle" | "backgroundStyle" | "logoImage" | "logoImageStyle" | "isLogoOptional" | "viewport" | "isLogoVisible" | "logoTemplateImage" | "logoImageHeight" | "logoImageWidth" | "navigationStyles" | "navigation" | "logoImageUrl" | "logoDraftToken" | "logoVariation" | "logoImageBase64Url" | "copyrightText" | "socialLinks" | "textFontFamily";
+            propName: "copyrightStyle" | "style" | "iconStyle" | "displayStyle" | "backgroundStyle" | "logoImage" | "logoImageStyle" | "isLogoOptional" | "viewport" | "isLogoVisible" | "logoTemplateImage" | "logoImageHeight" | "logoImageWidth" | "navigationStyles" | "navigation" | "logoImageUrl" | "logoDraftToken" | "logoVariation" | "logoImageBase64Url" | "backgroundColorEnabled" | "copyrightText" | "socialLinks" | "textFontFamily";
             index?: number | undefined;
             value: string | number | boolean | BrandPageCssStyle | import("../../../../brand-page").LinksItem[] | Partial<import("../../../../brand-page").ImageItem> | null | undefined;
             merge?: boolean | undefined;

package/lib/src/shared/content-settings/components/page-dropdown-field/PageDropdownField.mixin.d.ts

@@ -54,7 +54,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }): void;
         setPageSettingsSectionValue({ sectionName, propName, index, value, merge, viewport, }: {
             sectionName: "footer" | "header" | "pages";
-            propName: "copyrightStyle" | "style" | "iconStyle" | "displayStyle" | "backgroundStyle" | "logoImage" | "logoImageStyle" | "isLogoOptional" | "viewport" | "isLogoVisible" | "logoTemplateImage" | "logoImageHeight" | "logoImageWidth" | "navigationStyles" | "navigation" | "logoImageUrl" | "logoDraftToken" | "logoVariation" | "logoImageBase64Url" | "copyrightText" | "socialLinks" | "textFontFamily";
+            propName: "copyrightStyle" | "style" | "iconStyle" | "displayStyle" | "backgroundStyle" | "logoImage" | "logoImageStyle" | "isLogoOptional" | "viewport" | "isLogoVisible" | "logoTemplateImage" | "logoImageHeight" | "logoImageWidth" | "navigationStyles" | "navigation" | "logoImageUrl" | "logoDraftToken" | "logoVariation" | "logoImageBase64Url" | "backgroundColorEnabled" | "copyrightText" | "socialLinks" | "textFontFamily";
             index?: number | undefined;
             value: string | number | boolean | BrandPageCssStyle | import("../../../../brand-page").LinksItem[] | Partial<import("../../../../brand-page").ImageItem> | null | undefined;
             merge?: boolean | undefined;

package/lib/src/shared/content-settings/components/payment-config-field/PaymentConfigField.mixin.d.ts

@@ -401,7 +401,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }): void;
         setPageSettingsSectionValue({ sectionName, propName, index, value, merge, viewport, }: {
             sectionName: "footer" | "header" | "pages";
-            propName: "copyrightStyle" | "style" | "iconStyle" | "displayStyle" | "backgroundStyle" | "logoImage" | "logoImageStyle" | "isLogoOptional" | "viewport" | "isLogoVisible" | "logoTemplateImage" | "logoImageHeight" | "logoImageWidth" | "navigationStyles" | "navigation" | "logoImageUrl" | "logoDraftToken" | "logoVariation" | "logoImageBase64Url" | "copyrightText" | "socialLinks" | "textFontFamily";
+            propName: "copyrightStyle" | "style" | "iconStyle" | "displayStyle" | "backgroundStyle" | "logoImage" | "logoImageStyle" | "isLogoOptional" | "viewport" | "isLogoVisible" | "logoTemplateImage" | "logoImageHeight" | "logoImageWidth" | "navigationStyles" | "navigation" | "logoImageUrl" | "logoDraftToken" | "logoVariation" | "logoImageBase64Url" | "backgroundColorEnabled" | "copyrightText" | "socialLinks" | "textFontFamily";
             index?: number | undefined;
             value: string | number | boolean | BrandPageCssStyle | import("../../../../brand-page").LinksItem[] | Partial<import("../../../../brand-page").ImageItem> | null | undefined;
             merge?: boolean | undefined;

package/lib/src/shared/logo-settings/components/LogoSettings.mixin.d.ts

@@ -535,7 +535,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         }): void;
         setPageSettingsSectionValue({ sectionName, propName, index, value, merge, viewport, }: {
             sectionName: "footer" | "header" | "pages";
-            propName: "copyrightStyle" | "style" | "iconStyle" | "displayStyle" | "backgroundStyle" | "logoImage" | "logoImageStyle" | "isLogoOptional" | "viewport" | "isLogoVisible" | "logoTemplateImage" | "logoImageHeight" | "logoImageWidth" | "navigationStyles" | "navigation" | "logoImageUrl" | "logoDraftToken" | "logoVariation" | "logoImageBase64Url" | "copyrightText" | "socialLinks" | "textFontFamily";
+            propName: "copyrightStyle" | "style" | "iconStyle" | "displayStyle" | "backgroundStyle" | "logoImage" | "logoImageStyle" | "isLogoOptional" | "viewport" | "isLogoVisible" | "logoTemplateImage" | "logoImageHeight" | "logoImageWidth" | "navigationStyles" | "navigation" | "logoImageUrl" | "logoDraftToken" | "logoVariation" | "logoImageBase64Url" | "backgroundColorEnabled" | "copyrightText" | "socialLinks" | "textFontFamily";
             index?: number | undefined;
             value: string | number | boolean | BrandPageCssStyle | import("../../../brand-page").LinksItem[] | Partial<import("../../../brand-page").ImageItem> | null | undefined;
             merge?: boolean | undefined;

package/lib/src/shared/page-settings/components/new-page-modal/NewPageModal.mixin.d.ts

@@ -33,7 +33,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         }): void;
         setPageSettingsSectionValue({ sectionName, propName, index, value, merge, viewport, }: {
             sectionName: "footer" | "header" | "pages";
-            propName: "copyrightStyle" | "style" | "iconStyle" | "displayStyle" | "backgroundStyle" | "logoImage" | "logoImageStyle" | "isLogoOptional" | "viewport" | "isLogoVisible" | "logoTemplateImage" | "logoImageHeight" | "logoImageWidth" | "navigationStyles" | "navigation" | "logoImageUrl" | "logoDraftToken" | "logoVariation" | "logoImageBase64Url" | "copyrightText" | "socialLinks" | "textFontFamily";
+            propName: "copyrightStyle" | "style" | "iconStyle" | "displayStyle" | "backgroundStyle" | "logoImage" | "logoImageStyle" | "isLogoOptional" | "viewport" | "isLogoVisible" | "logoTemplateImage" | "logoImageHeight" | "logoImageWidth" | "navigationStyles" | "navigation" | "logoImageUrl" | "logoDraftToken" | "logoVariation" | "logoImageBase64Url" | "backgroundColorEnabled" | "copyrightText" | "socialLinks" | "textFontFamily";
             index?: number | undefined;
             value: string | number | boolean | BrandPageCssStyle | import("../../../../brand-page").LinksItem[] | Partial<import("../../../../brand-page").ImageItem> | null | undefined;
             merge?: boolean | undefined;

package/lib/src/shared/page-settings/components/page-settings/PageSettings.mixin.d.ts

@@ -1355,6 +1355,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                     wordBreak?: string | undefined;
                 };
                 viewport: import("../../../../brand-page").ViewportsType;
+                backgroundColorEnabled?: boolean | undefined;
             };
             mobile: {
                 displayStyle: import("../../../../brand-page").PageSectionDisplayStyle;
@@ -2638,6 +2639,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                     wordBreak?: string | undefined;
                 };
                 viewport: import("../../../../brand-page").ViewportsType;
+                backgroundColorEnabled?: boolean | undefined;
             };
         };
         footer: {
@@ -3928,7 +3930,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         }): void;
         setPageSettingsSectionValue({ sectionName, propName, index, value, merge, viewport, }: {
             sectionName: "footer" | "header" | "pages";
-            propName: "copyrightStyle" | "style" | "iconStyle" | "displayStyle" | "backgroundStyle" | "logoImage" | "logoImageStyle" | "isLogoOptional" | "viewport" | "isLogoVisible" | "logoTemplateImage" | "logoImageHeight" | "logoImageWidth" | "navigationStyles" | "navigation" | "logoImageUrl" | "logoDraftToken" | "logoVariation" | "logoImageBase64Url" | "copyrightText" | "socialLinks" | "textFontFamily";
+            propName: "copyrightStyle" | "style" | "iconStyle" | "displayStyle" | "backgroundStyle" | "logoImage" | "logoImageStyle" | "isLogoOptional" | "viewport" | "isLogoVisible" | "logoTemplateImage" | "logoImageHeight" | "logoImageWidth" | "navigationStyles" | "navigation" | "logoImageUrl" | "logoDraftToken" | "logoVariation" | "logoImageBase64Url" | "backgroundColorEnabled" | "copyrightText" | "socialLinks" | "textFontFamily";
             index?: number | undefined;
             value: string | number | boolean | BrandPageCssStyle | import("../../../../brand-page").LinksItem[] | Partial<import("../../../../brand-page").ImageItem> | null | undefined;
             merge?: boolean | undefined;

package/lib/src/shared/page-settings/components/page-settings-section-styles/PageSettingsSectionStyles.mixin.d.ts

@@ -1316,6 +1316,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     wordBreak?: string | undefined;
                 };
                 viewport: ViewportsType;
+                backgroundColorEnabled?: boolean | undefined;
             };
             mobile: {
                 displayStyle: import("../../../../brand-page").PageSectionDisplayStyle;
@@ -2599,6 +2600,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
                     wordBreak?: string | undefined;
                 };
                 viewport: ViewportsType;
+                backgroundColorEnabled?: boolean | undefined;
             };
         };
         footer: {
@@ -3243,7 +3245,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }): void;
         setPageSettingsSectionValue({ sectionName, propName, index, value, merge, viewport, }: {
             sectionName: "footer" | "header" | "pages";
-            propName: "copyrightStyle" | "style" | "iconStyle" | "displayStyle" | "backgroundStyle" | "logoImage" | "logoImageStyle" | "isLogoOptional" | "viewport" | "isLogoVisible" | "logoTemplateImage" | "logoImageHeight" | "logoImageWidth" | "navigationStyles" | "navigation" | "logoImageUrl" | "logoDraftToken" | "logoVariation" | "logoImageBase64Url" | "copyrightText" | "socialLinks" | "textFontFamily";
+            propName: "copyrightStyle" | "style" | "iconStyle" | "displayStyle" | "backgroundStyle" | "logoImage" | "logoImageStyle" | "isLogoOptional" | "viewport" | "isLogoVisible" | "logoTemplateImage" | "logoImageHeight" | "logoImageWidth" | "navigationStyles" | "navigation" | "logoImageUrl" | "logoDraftToken" | "logoVariation" | "logoImageBase64Url" | "backgroundColorEnabled" | "copyrightText" | "socialLinks" | "textFontFamily";
             index?: number | undefined;
             value: string | number | boolean | BrandPageCssStyle | LinksItem[] | Partial<import("../../../../brand-page").ImageItem> | null | undefined;
             merge?: boolean | undefined;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@designcrowd/library.brand-page",
   "description": "A collection of Maker/Designer applications",
-  "version": "5.16.21-jj-3",
+  "version": "5.16.21",
   "author": "Design.com Eng",
   "license": "UNLICENSED",
   "type": "module",

package/src/brand-page/components/page-header/HeaderLayout.vue

@@ -31,7 +31,6 @@ withDefaults(
 <style scoped>
 .root {
   --logo-width: v-bind('logoWidth');
-  --logo-max-width: 20rem;
   --tab-nav-height: 56px;
   --hamburger-nav-height: 32px;
   --hamburger-nav-width: 32px;
@@ -77,8 +76,8 @@ withDefaults(
 .desktop-tab-horizontal-stack-left-logo-centered-menu {
   @apply tw-grid;
   grid-template-columns:
-    [logo-start] var(--logo-max-width) [logo-end nav-start] 1fr [nav-end] var(
-      --logo-max-width
+    [logo-start] var(--logo-width) [logo-end nav-start] 1fr [nav-end] var(
+      --logo-width
     )
     [cols-end];
   @apply tw-gap-x-4;
@@ -87,7 +86,6 @@ withDefaults(
 }
 .desktop-tab-horizontal-stack-left-logo-centered-menu .logo-container {
   grid-column: logo-start / logo-end;
-  justify-self: start;
 }
 .desktop-tab-horizontal-stack-left-logo-centered-menu .nav-container {
   grid-column: nav-start / nav-end;
@@ -105,7 +103,7 @@ withDefaults(
 .desktop-tab-horizontal-stack-centered-logo-right-menu {
   @apply tw-grid;
   @apply tw-gap-x-4;
-  grid-template-columns: [col-start] 1fr [logo-start] var(--logo-max-width) [logo-end nav-start] 1fr [nav-end];
+  grid-template-columns: [col-start] 1fr [logo-start] var(--logo-width) [logo-end nav-start] 1fr [nav-end];
 }
 .desktop-tab-horizontal-stack-centered-logo-right-menu .logo-container {
   grid-column: logo-start / logo-end;

package/src/brand-page/components/page-header/PageHeader.mixin.ts

@@ -31,11 +31,13 @@ export default defineComponent({
   },
   computed: {
     containerCss(): BrandPageCssStyle {
-      return {
-        ...this.viewModel.backgroundStyle,
-        ...this.viewModel.style,
+      const backgroundStyle = this.viewModel.backgroundColorEnabled
+        ? this.viewModel.backgroundStyle
+        : null;
+
+      return Object.assign({}, backgroundStyle, this.viewModel.style, {
         padding: '1.5rem 0', // var(--page-padding) 0
-      };
+      });
     },
     showNav(): boolean {
       return this.viewModel.pages.length > 1;

package/src/brand-page/components/save-contact/i18n/save-contact.de-DE.json

@@ -2,7 +2,7 @@
   "saveContactWidget": {
     "saveContactButton": "Kontakt speichern",
     "createCard": "Erstellen Sie kostenlos Ihre eigene Karte auf {{ siteName }}",
-    "createbizCard": "Create a personalized business card that fits your brand identity",
+    "createbizCard": "Erstellen Sie eine personalisierte Visitenkarte, die zu Ihrer Markenidentität passt.",
     "startForFree": "Jetzt kostenlos ausprobieren"
   }
 }

package/src/brand-page/components/save-contact/i18n/save-contact.es-ES.json

@@ -2,7 +2,7 @@
   "saveContactWidget": {
     "saveContactButton": "Guardar contacto",
     "createCard": "Crea tu propia tarjeta gratis en {{ siteName }}",
-    "createbizCard": "Create a personalized business card that fits your brand identity",
+    "createbizCard": "Crea una tarjeta de visita personalizada que se ajuste a tu identidad de marca.",
     "startForFree": "Empieza gratis"
   }
 }

package/src/brand-page/components/save-contact/i18n/save-contact.fr-CA.json

@@ -2,7 +2,7 @@
   "saveContactWidget": {
     "saveContactButton": "Enregistrer le contact",
     "createCard": "Créez votre propre carte gratuitement sur {{ siteName }}",
-    "createbizCard": "Create a personalized business card that fits your brand identity",
+    "createbizCard": "Créez une carte professionnelle personnalisée qui correspond à votre identité de marque",
     "startForFree": "Commencez GRATUITEMENT"
   }
 }

package/src/brand-page/components/save-contact/i18n/save-contact.fr-FR.json

@@ -2,7 +2,7 @@
   "saveContactWidget": {
     "saveContactButton": "Enregistrer le contact",
     "createCard": "Créez votre propre carte gratuitement sur {{ siteName }}",
-    "createbizCard": "Create a personalized business card that fits your brand identity",
+    "createbizCard": "Créez une carte de visite personnalisée qui correspond à votre identité de marque",
     "startForFree": "Commencez GRATUITEMENT"
   }
 }

package/src/brand-page/components/save-contact/i18n/save-contact.pt-BR.json

@@ -2,7 +2,7 @@
   "saveContactWidget": {
     "saveContactButton": "Salvar contato",
     "createCard": "Crie seu próprio cartão gratuitamente em {{ siteName }}",
-    "createbizCard": "Create a personalized business card that fits your brand identity",
+    "createbizCard": "Crie um cartão de visita personalizado que se encaixe na identidade da marca.",
     "startForFree": "Comece a usar GRATUITAMENTE"
   }
 }

package/src/brand-page/components/save-contact/i18n/save-contact.pt-PT.json

@@ -2,7 +2,7 @@
   "saveContactWidget": {
     "saveContactButton": "Guardar contacto",
     "createCard": "Crie o seu próprio cartão em {{ siteName }}",
-    "createbizCard": "Create a personalized business card that fits your brand identity",
+    "createbizCard": "Crie um cartão de visita personalizado a combinar com a identidade da sua marca",
     "startForFree": "Comece a usar GRATUITAMENTE"
   }
 }

package/src/brand-page/constants/logo.constants.ts

@@ -7,3 +7,6 @@ export const LOGO_VARIATION = {
 
 export const DEFAULT_LOGO_VARIATION =
   LOGO_VARIATION.LOGO_WITH_TRANSPARENT_BACKGROUND;
+
+// migrating logo images to a fixed height
+export const LOGO_MIGRATION_VERSION = 6;

package/src/brand-page/models/index.ts

@@ -651,6 +651,8 @@ export abstract class AbstractPageHeaderStyles {
   style: BrandPageCssStyle;
   viewport: ViewportsType;
 
+  backgroundColorEnabled?: boolean;
+
   protected constructor(options: AbstractPageHeaderStylesType = {}) {
     if (typeof options.viewport === 'undefined') {
       throw new Error('"viewport" is required');
@@ -685,6 +687,10 @@ export abstract class AbstractPageHeaderStyles {
 
     this.style = options.style || {};
     this.backgroundStyle = options.backgroundStyle || {};
+    this.backgroundColorEnabled =
+      typeof options.backgroundColorEnabled === 'undefined'
+        ? true
+        : options.backgroundColorEnabled;
   }
 }
 

package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap

@@ -125,6 +125,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
       "viewport": "mobile",
     },
     "pageHeaderDesktop": PageHeaderDesktop {
+      "backgroundColorEnabled": true,
       "backgroundStyle": {},
       "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
@@ -196,6 +197,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
       "viewport": "desktop",
     },
     "pageHeaderMobile": PageHeaderMobile {
+      "backgroundColorEnabled": true,
       "backgroundStyle": {},
       "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
@@ -427,7 +429,7 @@ exports[`migration.util > Banner Contents - text Align and Font Family should no
         },
       },
     },
-    "v": 11,
+    "v": 10,
   },
   "useOldLogoRenderSize": true,
 }
@@ -558,6 +560,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       "viewport": "mobile",
     },
     "pageHeaderDesktop": PageHeaderDesktop {
+      "backgroundColorEnabled": true,
       "backgroundStyle": {},
       "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
@@ -629,6 +632,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       "viewport": "desktop",
     },
     "pageHeaderMobile": PageHeaderMobile {
+      "backgroundColorEnabled": true,
       "backgroundStyle": {},
       "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
@@ -843,7 +847,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 11,
+    "v": 10,
   },
   "useOldLogoRenderSize": true,
 }
@@ -974,6 +978,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       "viewport": "mobile",
     },
     "pageHeaderDesktop": PageHeaderDesktop {
+      "backgroundColorEnabled": true,
       "backgroundStyle": {},
       "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
@@ -1045,6 +1050,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
       "viewport": "desktop",
     },
     "pageHeaderMobile": PageHeaderMobile {
+      "backgroundColorEnabled": true,
       "backgroundStyle": {},
       "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
@@ -1266,7 +1272,7 @@ exports[`migration.util > migrateBrandPageModel should return brand page model w
         },
       },
     },
-    "v": 11,
+    "v": 10,
   },
   "useOldLogoRenderSize": true,
 }

package/src/brand-page/utils/__snapshots__/migration2.util.test.ts.snap

@@ -127,6 +127,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
       "viewport": "mobile",
     },
     "pageHeaderDesktop": PageHeaderDesktop {
+      "backgroundColorEnabled": true,
       "backgroundStyle": {},
       "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,
@@ -199,6 +200,7 @@ exports[`migration02.ts > migration02 should return converted letterspacing 1`]
       "viewport": "desktop",
     },
     "pageHeaderMobile": PageHeaderMobile {
+      "backgroundColorEnabled": true,
       "backgroundStyle": {},
       "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
       "isLogoOptional": false,

package/src/brand-page/utils/__snapshots__/model.util.test.ts.snap

@@ -126,6 +126,7 @@ BrandPageModel {
     "viewport": "mobile",
   },
   "pageHeaderDesktop": PageHeaderDesktop {
+    "backgroundColorEnabled": true,
     "backgroundStyle": {},
     "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
     "isLogoOptional": false,
@@ -198,6 +199,7 @@ BrandPageModel {
     "viewport": "desktop",
   },
   "pageHeaderMobile": PageHeaderMobile {
+    "backgroundColorEnabled": true,
     "backgroundStyle": {},
     "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
     "isLogoOptional": false,
@@ -566,6 +568,7 @@ BrandPageModel {
     "viewport": "mobile",
   },
   "pageHeaderDesktop": PageHeaderDesktop {
+    "backgroundColorEnabled": true,
     "backgroundStyle": {},
     "displayStyle": "desktop-tab-vertical-stack-centered-logo-centered-menu",
     "isLogoOptional": false,
@@ -638,6 +641,7 @@ BrandPageModel {
     "viewport": "desktop",
   },
   "pageHeaderMobile": PageHeaderMobile {
+    "backgroundColorEnabled": true,
     "backgroundStyle": {},
     "displayStyle": "mobile-tab-vertical-stack-centered-logo-centered-menu",
     "isLogoOptional": false,

package/src/brand-page/utils/logo.util.test.ts

@@ -208,4 +208,41 @@ describe('logo-util', () => {
       logoImage.logoDraftToken,
     );
   });
+
+  test('getOptimalLogoSize should scale up the logo', async () => {
+    // Should return same as the current size
+    const result = logoUtil.getOptimalLogoSize(100, 100, '12rem');
+
+    expect(result).toBe('12rem');
+
+    // should return max size
+    const result2 = logoUtil.getOptimalLogoSize(100, 50, '12rem');
+
+    expect(result2).toBe('11rem');
+
+    // should return new size
+    const result3 = logoUtil.getOptimalLogoSize(100, 80, '12rem');
+
+    expect(result3).toBe('11rem');
+
+    // should return current size because height is bigger than width
+    const result4 = logoUtil.getOptimalLogoSize(100, 120, '12rem');
+
+    expect(result4).toBe('12rem');
+
+    // should return new size
+    const result5 = logoUtil.getOptimalLogoSize(100, 60, '12rem');
+
+    expect(result5).toBe('11rem');
+
+    // should return current size because our max logic is 16rem
+    const result6 = logoUtil.getOptimalLogoSize(100, 60, '18rem');
+
+    expect(result6).toBe('18rem');
+
+    // should return current size because our max logic is 16rem
+    const result7 = logoUtil.getOptimalLogoSize(100, 60, '16rem');
+
+    expect(result7).toBe('16rem');
+  });
 });

package/src/brand-page/utils/logo.util.ts

@@ -1,8 +1,12 @@
-import { DEFAULT_LOGO_VARIATION, LOGO_VARIATION } from '../constants';
+import {
+  DEFAULT_LOGO_VARIATION,
+  LOGO_VARIATION,
+  DEFAULT_LOGO_WIDTH,
+  DEFAULT_LOGO_HEIGHT,
+} from '../constants';
 import type {
   AbstractPageFooterStyles,
   AbstractPageHeaderStyles,
-  BrandPageType,
 } from '../models';
 import {
   BRAND_PAGE_TYPES,
@@ -313,30 +317,27 @@ export const getLogoTemplateUrlByLogoTemplateImage = (
 };
 
 export const getOptimalLogoSize = (
-  brandPageType: BrandPageType,
   width: number,
   height: number,
-): { newLogoSize: string } => {
-  const ratio = width / height;
-
-  let newLogoSize = '11rem'; // default size
-
-  if (brandPageType === BRAND_PAGE_TYPES.brandSite) {
-    if (ratio < 0.95) {
-      // tall logos
-      newLogoSize = '10rem';
-    } else if (ratio >= 1.65) {
-      // wide logos
-      newLogoSize = '10rem';
-    }
-  } else {
-    // BP and BC default
-    newLogoSize = '8rem';
+  currentSize: string,
+): string => {
+  if (parseFloat(currentSize) >= 16) {
+    return currentSize;
   }
 
-  return {
-    newLogoSize,
-  };
+  const aspectRatio = width / height;
+
+  if (!parseFloat(`${aspectRatio}`) || aspectRatio <= 1) {
+    return currentSize;
+  }
+
+  const newSize = parseFloat(currentSize) + (aspectRatio - 1) * 4.5;
+
+  if (newSize > 11) {
+    return '11rem';
+  } else {
+    return `${Math.round(newSize)}rem`;
+  }
 };
 
 export const calculateLogoDimensions = (
@@ -446,14 +447,16 @@ export const recalculateLogoContentDimensions = async (
 
       // Apply dimensions or fallback logic
       if (logoData && logoData.width && logoData.height) {
-        const dimensions = getOptimalLogoSize(
-          BRAND_PAGE_TYPES.default,
-          logoData.width,
-          logoData.height,
+        const currentMaxWidth = content.logoImageWidth || DEFAULT_LOGO_WIDTH;
+        const currentMaxHeight = content.logoImageHeight || DEFAULT_LOGO_HEIGHT;
+        const dimensions = calculateOptimizedLogoDimensions(
+          logoData,
+          currentMaxWidth,
+          currentMaxHeight,
         );
 
-        content.logoImageHeight = dimensions.newLogoSize;
-        content.logoImageWidth = dimensions.newLogoSize;
+        content.logoImageHeight = dimensions.height;
+        content.logoImageWidth = dimensions.width;
       }
     });
   } catch (error) {

package/src/brand-page/utils/migration/migration-07.test.ts

@@ -85,10 +85,7 @@ describe('migration07', () => {
     const migrationData = createMigrationData(brandPageData);
     const originalDimensions = captureOriginalDimensions(migrationData);
 
-    const result = await migration07(migrationData, {
-      isServerRender: true,
-      isUserDraft: false,
-    });
+    const result = await migration07(migrationData, { isServerRender: true });
 
     // Should set useOldLogoRenderSize flag and return early
     expect(result.useOldLogoRenderSize).toBe(true);
@@ -122,10 +119,7 @@ describe('migration07', () => {
     const migrationData = createMigrationData(brandPageData);
     const originalDimensions = captureOriginalDimensions(migrationData);
 
-    const result = await migration07(migrationData, {
-      isServerRender: false,
-      isUserDraft: false,
-    });
+    const result = await migration07(migrationData, { isServerRender: false });
 
     // Dimensions should remain unchanged when no logo token
     expect(result.brandPageModel.pageHeaderDesktop?.logoImageWidth).toBe(
@@ -154,10 +148,7 @@ describe('migration07', () => {
     });
 
     const migrationData = createMigrationData(brandPageData);
-    const result = await migration07(migrationData, {
-      isServerRender: false,
-      isUserDraft: false,
-    });
+    const result = await migration07(migrationData, { isServerRender: false });
 
     // Should not crash and return the migrationData unchanged since no logo token
     expect(result).toBeDefined();
@@ -176,10 +167,7 @@ describe('migration07', () => {
 
     // Should not crash when pageHeaderDesktop is missing
     await expect(
-      migration07(migrationData, {
-        isServerRender: false,
-        isUserDraft: false,
-      }),
+      migration07(migrationData, { isServerRender: false }),
     ).resolves.toBeDefined();
   });
 
@@ -208,10 +196,7 @@ describe('migration07', () => {
     });
 
     const migrationData = createMigrationData(brandPageData);
-    const result = await migration07(migrationData, {
-      isServerRender: true,
-      isUserDraft: false,
-    });
+    const result = await migration07(migrationData, { isServerRender: true });
 
     // Should return the exact same migrationData instance
     expect(result).toBe(migrationData);
@@ -250,10 +235,7 @@ describe('migration07', () => {
 
     // The migration should attempt to process the template image
     // Since we can't mock the API call, we expect it to either succeed or fail gracefully
-    const result = await migration07(migrationData, {
-      isServerRender: false,
-      isUserDraft: false,
-    });
+    const result = await migration07(migrationData, { isServerRender: false });
 
     expect(result).toBeDefined();
     expect(result.brandPageModel.pageHeaderDesktop).toBeDefined();
@@ -294,10 +276,7 @@ describe('migration07', () => {
     });
 
     const migrationData = createMigrationData(brandPageData);
-    const result = await migration07(migrationData, {
-      isServerRender: false,
-      isUserDraft: false,
-    });
+    const result = await migration07(migrationData, { isServerRender: false });
 
     const { brandPageModel } = result;
 
@@ -351,10 +330,7 @@ describe('migration07', () => {
     });
 
     const migrationData = createMigrationData(brandPageData);
-    const result = await migration07(migrationData, {
-      isServerRender: false,
-      isUserDraft: false,
-    });
+    const result = await migration07(migrationData, { isServerRender: false });
 
     const { brandPageModel } = result;