fix: update loyalty cards and join loyalty sidebar design

components/TempDesignSystem/Card/index.tsx

@@ -1,5 +1,4 @@
 import Button from "@/components/TempDesignSystem/Button"
-import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
 import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import Body from "@/components/TempDesignSystem/Text/Body"
@@ -47,7 +46,6 @@ export default function Card({
           <BiroScript className={styles.scriptedTitle} type="two">
             {scriptedTopTitle}
           </BiroScript>
-          <Divider />
         </section>
       ) : null}
       <Title as="h5" className={styles.heading} level="h3">

components/TempDesignSystem/Link/link.module.css

@@ -102,6 +102,10 @@
   color: var(--Scandic-Peach-80);
 }
 
+.white {
+  color: var(--Base-Button-Primary-On-Fill-Normal);
+}
+
 .regular {
   font-family: var(--typography-Body-Regular-fontFamily);
   font-size: var(--typography-Body-Regular-fontSize);

components/TempDesignSystem/Link/variants.ts

@@ -13,6 +13,7 @@ export const linkVariants = cva(styles.link, {
       none: "",
       pale: styles.pale,
       peach80: styles.peach80,
+      white: styles.white,
     },
     size: {
       small: styles.small,

components/TempDesignSystem/Text/BiroScript/biroScript.module.css

@@ -26,6 +26,14 @@
   line-height: var(--typography-Script-2-lineHeight);
 }
 
+.tiltedSmall {
+  transform: rotate(-2deg);
+}
+
+.tiltedLarge {
+  transform: rotate(-13deg) translate(0px, -15px);
+}
+
 .center {
   text-align: center;
 }

components/TempDesignSystem/Text/BiroScript/index.tsx

@@ -10,6 +10,7 @@ export default function BiroScript({
   color,
   textAlign,
   type,
+  tilted,
   ...props
 }: BiroScriptProps) {
   const Comp = asChild ? Slot : "span"
@@ -18,6 +19,7 @@ export default function BiroScript({
     color,
     textAlign,
     type,
+    tilted,
   })
   return <Comp className={classNames} {...props} />
 }

components/TempDesignSystem/Text/BiroScript/variants.ts

@@ -19,6 +19,10 @@ const config = {
       one: styles.one,
       two: styles.two,
     },
+    tilted: {
+      small: styles.tiltedSmall,
+      large: styles.tiltedLarge,
+    },
   },
   defaultVariants: {
     type: "one",

components/TempDesignSystem/Text/Footnote/footnote.module.css

@@ -43,4 +43,8 @@
 
 .pale {
   color: var(--Scandic-Brand-Pale-Peach);
-}
+}
+
+.textMediumContrast {
+  color: var(--Base-Text-UI-Medium-contrast);
+}

components/TempDesignSystem/Text/Footnote/variants.ts

@@ -8,6 +8,7 @@ const config = {
       black: styles.black,
       burgundy: styles.burgundy,
       pale: styles.pale,
+      textMediumContrast: styles.textMediumContrast,
     },
     textAlign: {
       center: styles.center,