feat(WEB-304): remaning UI from design system primitives

components/ContentType/LoyaltyPage.tsx

@@ -4,24 +4,21 @@ import { Blocks } from "@/components/Loyalty/Blocks"
 import Sidebar from "@/components/Loyalty/Sidebar"
 import MaxWidth from "@/components/MaxWidth"
 
-import Breadcrumbs from "../MyPages/Breadcrumbs"
-
 import styles from "./loyaltyPage.module.css"
 
-export default async function LoyaltyPage() {
+import type { LangParams } from "@/types/params"
+
+export default async function LoyaltyPage({ lang }: LangParams) {
   const loyaltyPage = await serverClient().contentstack.loyaltyPage.get()
   return (
-    <>
-      <Breadcrumbs />
-      <section className={styles.content}>
-        {loyaltyPage.sidebar.length ? (
-          <Sidebar blocks={loyaltyPage.sidebar} />
-        ) : null}
+    <section className={styles.content}>
+      {loyaltyPage.sidebar.length ? (
+        <Sidebar blocks={loyaltyPage.sidebar} lang={lang} />
+      ) : null}
 
-        <MaxWidth className={styles.blocks} tag="main">
-          {loyaltyPage.blocks ? <Blocks blocks={loyaltyPage.blocks} /> : null}
-        </MaxWidth>
-      </section>
-    </>
+      <MaxWidth className={styles.blocks} tag="main">
+        {loyaltyPage.blocks ? <Blocks blocks={loyaltyPage.blocks} /> : null}
+      </MaxWidth>
+    </section>
   )
 }

components/ContentType/Webviews/LoyaltyPage.tsx

@@ -17,7 +17,7 @@ export default async function AboutScandicFriends({ lang }: LangParams) {
 
       {loyaltyPage.sidebar ? (
         <section className={styles.sidebar}>
-          <Sidebar blocks={loyaltyPage.sidebar} />
+          <Sidebar blocks={loyaltyPage.sidebar} lang={lang} />
         </section>
       ) : null}
 

components/ContentType/loyaltyPage.module.css

@@ -1,37 +1,39 @@
 .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;
 }
 
 .blocks {
   display: grid;
-  gap: 4.2rem;
-  padding: 1.6rem;
+  gap: var(--Spacing-x5);
+  padding-left: var(--Spacing-x2);
+  padding-right: var(--Spacing-x2);
 }
 
 @media screen and (min-width: 1367px) {
   .content {
-    gap: 2.7rem;
-    padding-bottom: 17.5rem;
-    padding-left: 2.4rem;
-    padding-right: 2.4rem;
-    padding-top: 5.8rem;
+    gap: var(--Spacing-x3);
+    padding-left: var(--Spacing-x3);
+    padding-right: var(--Spacing-x3);
   }
 
   .content:has(> aside) {
-    grid-template-columns: 30rem 1fr;
+    grid-template-columns: 360px 1fr;
+  }
+
+  .content:has(> aside) .blocks {
+    grid-column: 2 / -1;
   }
 
   .blocks {
-    gap: 6.4rem;
-    padding-left: 0;
-    padding-right: 0;
+    padding-left: var(--Spacing-x0);
+    padding-right: var(--Spacing-x0);
   }
 
-  .hasLeftSidebar .blocks {
-    grid-column: 2 / -1;
+  .blocks > section:first-of-type > header {
+    gap: var(--Spacing-x2);
   }
 }