From 9d62333aca13031ecdd75b754e3b40886c4348c8 Mon Sep 17 00:00:00 2001
From: Emma Zettervall <emma.zettervall@scandichotels.com>
Date: Tue, 7 Oct 2025 08:59:07 +0000
Subject: [PATCH] Merged in feat/LOY-377-margin-top (pull request #2912)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Feat/LOY-377 margin top

* changed Title to Typography, added some css

* feat(LOY-377): Changed variants based on isUserLoggedIn in LoyaltyPageBreadcrubs and removed the previous added padding

* feat(LOY-377): Changed p to h1. Sends the variants to the skeleton aswell


Approved-by: Linus Flood
Approved-by: Matilda Landström
---
 .../@breadcrumbs/loyalty_page/[uid]/page.tsx          | 11 +++++++++--
 .../components/ContentType/LoyaltyPage/index.tsx      |  6 ++++--
 .../ContentType/LoyaltyPage/loyaltyPage.module.css    |  4 ++++
 3 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/loyalty_page/[uid]/page.tsx b/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/loyalty_page/[uid]/page.tsx
index a871de478..72be8de1a 100644
--- a/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/loyalty_page/[uid]/page.tsx
+++ b/apps/scandic-web/app/[lang]/(live)/(public)/(contentTypes)/@breadcrumbs/loyalty_page/[uid]/page.tsx
@@ -4,12 +4,19 @@ import Breadcrumbs from "@/components/Breadcrumbs"
 import BreadcrumbsSkeleton from "@/components/TempDesignSystem/Breadcrumbs/BreadcrumbsSkeleton"
 import { isLoggedInUser } from "@/utils/isLoggedInUser"
 
+import type { BreadcrumbsProps } from "@/components/TempDesignSystem/Breadcrumbs/breadcrumbs"
+
 export default async function LoyaltyPageBreadcrumbs() {
   const isUserLoggedIn = await isLoggedInUser()
 
+  const variants: Pick<BreadcrumbsProps, "color" | "size"> = {
+    color: "Background/Primary",
+    size: isUserLoggedIn ? "contentWidth" : "pageWidth",
+  }
+
   return (
-    <Suspense fallback={<BreadcrumbsSkeleton />}>
-      <Breadcrumbs {...(isUserLoggedIn && { size: "contentWidth" })} />
+    <Suspense fallback={<BreadcrumbsSkeleton {...variants} />}>
+      <Breadcrumbs {...variants} />
     </Suspense>
   )
 }
diff --git a/apps/scandic-web/components/ContentType/LoyaltyPage/index.tsx b/apps/scandic-web/components/ContentType/LoyaltyPage/index.tsx
index dc0cdbe8d..64bd288c7 100644
--- a/apps/scandic-web/components/ContentType/LoyaltyPage/index.tsx
+++ b/apps/scandic-web/components/ContentType/LoyaltyPage/index.tsx
@@ -2,7 +2,7 @@ import { cx } from "class-variance-authority"
 import { Suspense } from "react"
 
 import Preamble from "@scandic-hotels/design-system/Preamble"
-import Title from "@scandic-hotels/design-system/Title"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 import { TrackingSDK } from "@scandic-hotels/tracking/TrackingSDK"
 
 import { serverClient } from "@/lib/trpc/server"
@@ -44,7 +44,9 @@ export default async function LoyaltyPage() {
 
         <MaxWidth className={styles.blocks}>
           <header className={styles.header}>
-            <Title as="h2">{loyaltyPage.heading}</Title>
+            <Typography variant="Title/md" className={styles.title}>
+              <h1>{loyaltyPage.heading}</h1>
+            </Typography>
             {loyaltyPage.preamble ? (
               <Preamble>{loyaltyPage.preamble}</Preamble>
             ) : null}
diff --git a/apps/scandic-web/components/ContentType/LoyaltyPage/loyaltyPage.module.css b/apps/scandic-web/components/ContentType/LoyaltyPage/loyaltyPage.module.css
index 99165231e..121b0360f 100644
--- a/apps/scandic-web/components/ContentType/LoyaltyPage/loyaltyPage.module.css
+++ b/apps/scandic-web/components/ContentType/LoyaltyPage/loyaltyPage.module.css
@@ -26,6 +26,10 @@
   gap: var(--Spacing-x4);
 }
 
+.title {
+  color: var(--Scandic-Brand-Burgundy);
+}
+
 .contentWidth {
   max-width: var(--max-width-content);
 }