Merged in fix/SW-3328-campaign-page-fix (pull request #2726)

Fix/SW-3328 campaign page design fix

* fix(SW-3328): align essentials text

* fix(SW-3328): campaign page design fix

* fix(SW-3328): update hero width

* fix(SW-3328): change burgundy code text


Approved-by: Erik Tiekstra

apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/campaign_page/[uid]/page.tsx

@@ -7,7 +7,7 @@ import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs
 
 export default function CampaignPageBreadcrumbs() {
   const variants: Pick<BreadcrumbsProps, "color" | "size"> = {
-    color: "Surface/Primary/OnSurface/Default",
+    color: "Background/Primary",
     size: "contentWidth",
   }
 

apps/scandic-web/components/Blocks/Essentials/essentials.module.css

@@ -42,7 +42,7 @@
 .text {
   display: grid;
   gap: var(--Space-x1);
-  justify-items: center;
+  text-align: center;
 }
 
 @media screen and (max-width: 949px) {

apps/scandic-web/components/ContentType/CampaignPage/Hero/hero.module.css

@@ -25,7 +25,6 @@
 .benefitList > li {
   display: flex;
   gap: var(--Space-x1);
-  align-items: center;
 }
 
 .peach {
@@ -54,11 +53,8 @@
     background-color: var(--Surface-Brand-Primary-3-Default);
   }
 
-  .highlight {
-    color: var(--Text-Brand-OnPrimary-3-Heading);
-  }
-
   .heading,
+  .highlight,
   .rateText {
     color: var(--Text-Brand-OnPrimary-3-Accent);
   }
@@ -71,33 +67,51 @@
 }
 
 @media screen and (min-width: 768px) {
-  .content {
-    position: relative;
-    width: 100%;
-    transform: none;
-    border-radius: 0;
-    margin: 0;
-    align-content: center;
-    padding: var(--Space-x7) var(--Space-x3);
-  }
-
   .hero {
-    border-radius: var(--Corner-radius-Large);
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: 1fr auto;
+    border-radius: var(--Corner-radius-Large);
     overflow: hidden;
     min-height: 478px;
     height: 100%;
 
     &.hotelPage {
       min-height: 310px;
+      grid-template-columns: repeat(2, 1fr);
     }
   }
 
   .imageContainer {
-    grid-column: span 2;
     position: relative;
     border-radius: 0;
     height: 100%;
   }
+
+  .content {
+    position: relative;
+    width: 388px;
+    transform: none;
+    border-radius: 0;
+    margin: 0;
+    align-content: center;
+    padding: var(--Space-x7) var(--Space-x3);
+
+    &.hotelPage {
+      width: 100%;
+    }
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  .hero {
+    &.hotelPage {
+      grid-template-columns: repeat(3, 1fr);
+    }
+  }
+
+  .imageContainer {
+    &.hotelPage {
+      grid-column: span 2;
+    }
+  }
 }

apps/scandic-web/components/ContentType/CampaignPage/Hero/index.tsx

@@ -40,7 +40,7 @@ export default async function CampaignHero({
   return (
     <header className={cx(classNames, styles[pageType])}>
       {image ? (
-        <div className={styles.imageContainer}>
+        <div className={cx(styles.imageContainer, styles[pageType])}>
           <Image
             src={image.url}
             alt={image.meta.alt || image.meta.caption || ""}
@@ -51,7 +51,7 @@ export default async function CampaignHero({
           />
         </div>
       ) : null}
-      <div className={styles.content}>
+      <div className={cx(styles.content, styles[pageType])}>
         <Typography variant="Title/xs" className={styles.heading}>
           <h3>{heading}</h3>
         </Typography>

apps/scandic-web/components/TempDesignSystem/Breadcrumbs/breadcrumbs.module.css

@@ -13,6 +13,9 @@
 .breadcrumbs.surfacePrimaryOnSurfaceDefault {
   background-color: var(--Surface-Primary-On-Surface-Default);
 }
+.breadcrumbs.backgroundPrimary {
+  background-color: var(--Background-Primary);
+}
 
 .breadcrumbs .list {
   display: flex;

apps/scandic-web/components/TempDesignSystem/Breadcrumbs/variants.ts

@@ -9,6 +9,7 @@ export const breadcrumbsVariants = cva(styles.breadcrumbs, {
       "Surface/Secondary/Default": styles.surfaceSecondaryDefault,
       "Surface/Primary/OnSurface/Default":
         styles.surfacePrimaryOnSurfaceDefault,
+      "Background/Primary": styles.backgroundPrimary,
     },
     size: {
       pageWidth: styles.pageWidth,