feat(WEB-250): overview hero final ui

app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/[...path]/page.tsx

@@ -0,0 +1,5 @@
+import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
+
+export default function AllBreadcrumbs() {
+  return <Breadcrumbs />
+}

app/[lang]/(live)/(protected)/my-pages/@breadcrumbs/default.tsx

@@ -0,0 +1,3 @@
+export default function DefaultMyPages() {
+  return null
+}

app/[lang]/(live)/(protected)/my-pages/[...path]/page.module.css

@@ -1,34 +1,29 @@
 .content {
   display: grid;
-  padding-bottom: 7.7rem;
-  padding-left: 0;
-  padding-right: 0;
+  padding-bottom: var(--Spacing-x9);
+  padding-left: var(--Spacing-x0);
+  padding-right: var(--Spacing-x0);
   position: relative;
 }
 
-@media screen and (min-width: 950px) {
-  .content {
-    gap: 10rem;
-    grid-template-columns: 25rem 1fr;
-    padding-bottom: 17.5rem;
-    padding-left: 2.4rem;
-    padding-right: 2.4rem;
-    padding-top: 5.8rem;
-  }
-}
-
 .blocks {
   display: grid;
-  gap: 4.2rem;
-  padding-top: 4rem;
-  padding-left: 1.6rem;
-  padding-right: 1.6rem;
+  gap: var(--Spacing-x5);
+  padding-left: var(--Spacing-x2);
+  padding-right: var(--Spacing-x2);
 }
 
-@media screen and (min-width: 950px) {
+@media screen and (min-width: 1367px) {
+  .content {
+    gap: var(--Spacing-x9);
+    grid-template-columns: 25rem 1fr;
+    padding-left: var(--Spacing-x3);
+    padding-right: var(--Spacing-x3);
+  }
+
   .blocks {
-    gap: 6.4rem;
-    padding-left: 0;
-    padding-right: 0;
+    gap: var(--Spacing-x7);
+    padding-left: var(--Spacing-x0);
+    padding-right: var(--Spacing-x0);
   }
 }

app/[lang]/(live)/(protected)/my-pages/[...path]/page.tsx

@@ -1,8 +1,7 @@
+import { _ } from "@/lib/translation"
 import { serverClient } from "@/lib/trpc/server"
 
-import MaxWidth from "@/components/MaxWidth"
 import Content from "@/components/MyPages/AccountPage/Content"
-import Breadcrumbs from "@/components/MyPages/Breadcrumbs"
 import Sidebar from "@/components/MyPages/Sidebar"
 
 import styles from "./page.module.css"
@@ -15,19 +14,15 @@ export default async function MyPages({
   const accountPage = await serverClient().contentstack.accountPage.get()
 
   return (
-    <>
-      <Breadcrumbs />
-
-      <div className={styles.content}>
-        <Sidebar lang={params.lang} />
-        <MaxWidth className={styles.blocks} tag="main">
-          {accountPage.content.length ? (
-            <Content lang={params.lang} content={accountPage.content} />
-          ) : (
-            <p>No content published</p>
-          )}
-        </MaxWidth>
-      </div>
-    </>
+    <section className={styles.content}>
+      <Sidebar lang={params.lang} />
+      <main className={styles.blocks}>
+        {accountPage.content.length ? (
+          <Content lang={params.lang} content={accountPage.content} />
+        ) : (
+          <p>{_("No content published")}</p>
+        )}
+      </main>
+    </section>
   )
 }

app/[lang]/(live)/(protected)/my-pages/layout.module.css

@@ -3,7 +3,8 @@
 
   background-color: var(--Scandic-Brand-Warm-White);
   display: grid;
-  font-family: var(--ff-fira-sans);
-  grid-template-rows: var(--header-height) auto 1fr;
+  font-family: var(--typography-Body-Regular-fontFamily);
+  gap: var(--Spacing-x3);
+  grid-template-rows: auto 1fr;
   min-height: 100dvh;
 }

app/[lang]/(live)/(protected)/my-pages/layout.tsx

@@ -1,17 +1,17 @@
-import { firaMono, firaSans } from "@/app/fonts"
-
 import styles from "./layout.module.css"
 
 import { LangParams, LayoutArgs } from "@/types/params"
 
 export default async function MyPagesLayout({
+  breadcrumbs,
   children,
-}: React.PropsWithChildren<LayoutArgs<LangParams>>) {
+}: React.PropsWithChildren<LayoutArgs<LangParams>> & {
+  breadcrumbs: React.ReactNode
+}) {
   return (
-    <div
-      className={`${firaMono.variable} ${firaSans.variable} ${styles.layout}`}
-    >
+    <section className={styles.layout}>
+      {breadcrumbs}
       {children}
-    </div>
+    </section>
   )
 }

app/[lang]/(live)/(public)/[contentType]/[uid]/page.tsx

@@ -15,7 +15,7 @@ export default async function ContentTypePage({
 }: PageArgs<LangParams & ContentTypeParams & UIDParams, {}>) {
   switch (params.contentType) {
     case "loyalty-page":
-      return <LoyaltyPage lang={params.lang} />
+      return <LoyaltyPage />
     case "content-page":
       return <ContentPage />
     default:

app/[lang]/(live)/error.module.css

@@ -2,7 +2,7 @@
   --header-height: 4.5rem;
 
   display: grid;
-  font-family: var(--ff-fira-sans);
+  font-family: var(--typography-Body-Regular-fontFamily);
   grid-template-rows: var(--header-height) auto 1fr;
   min-height: 100dvh;
 }
@@ -15,7 +15,7 @@
   position: relative;
 }
 
-@media screen and (min-width: 950px) {
+@media screen and (min-width: 1367px) {
   .content {
     gap: 10rem;
     grid-template-columns: 25rem 1fr;

app/[lang]/(live)/error.tsx

@@ -7,8 +7,6 @@ import { findLang } from "@/constants/languages"
 import { login } from "@/constants/routes/handleAuth"
 import { SESSION_EXPIRED } from "@/server/errors/trpc"
 
-import { firaMono, firaSans } from "@/app/fonts"
-
 import styles from "./error.module.css"
 
 import { LangParams } from "@/types/params"
@@ -34,9 +32,7 @@ export default function Error({
   const lang = findLang(pathname)
 
   return (
-    <div
-      className={`${firaMono.variable} ${firaSans.variable} ${styles.layout}`}
-    >
+    <div className={styles.layout}>
       <div className={styles.content}>{lang}: Something went wrong!</div>
     </div>
   )

app/[lang]/(live)/layout.tsx

@@ -5,7 +5,6 @@ import Script from "next/script"
 
 import TrpcProvider from "@/lib/trpc/Provider"
 
-import { biroScriptPlus, firaMono, firaSans } from "@/app/fonts"
 import AdobeScript from "@/components/Current/AdobeScript"
 import VwoScript from "@/components/Current/VwoScript"
 
@@ -43,9 +42,7 @@ export default async function RootLayout({
         <AdobeScript />
         <VwoScript />
       </head>
-      <body
-        className={`${firaMono.variable} ${firaSans.variable} ${biroScriptPlus.variable} `}
-      >
+      <body>
         <TrpcProvider lang={params.lang}>{children}</TrpcProvider>
         <Script id="page-tracking">{`
           typeof _satellite !== "undefined" && _satellite.pageBottom();

app/[lang]/(live)/middleware-error/[status]/page.tsx

@@ -1,5 +1,3 @@
-import { firaMono, firaSans } from "@/app/fonts"
-
 import styles from "./page.module.css"
 
 import { LangParams, LayoutArgs, StatusParams } from "@/types/params"
@@ -8,9 +6,7 @@ export default function MiddlewareError({
   params,
 }: LayoutArgs<LangParams & StatusParams>) {
   return (
-    <div
-      className={`${firaMono.variable} ${firaSans.variable} ${styles.layout}`}
-    >
+    <div className={styles.layout}>
       Middleware Error {params.lang}: {params.status}
     </div>
   )