Merged in feat/LOY-377-margin-top (pull request #2912)

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

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>
   )
 }

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}

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);
 }