feat(BOOK-757): Replaced Biroscript component with Typography

Approved-by: Bianca Widstam

apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/index.tsx

@@ -4,7 +4,6 @@ import { Typography } from "@scandic-hotels/design-system/Typography"
 import { serverClient } from "@/lib/trpc/server"
 
 import MembershipLevelIcon from "@/components/Levels/Icon"
-import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
 import { getIntl } from "@/i18n"
 
 import SectionWrapper from "../SectionWrapper"
@@ -62,19 +61,17 @@ async function LevelCard({ level }: LevelCardProps) {
   return (
     <article className={styles.card}>
       <header>
-        <BiroScript
-          type="two"
-          color="primaryLightOnSurfaceAccent"
-          tilted="large"
-        >
-          {intl.formatMessage(
-            {
-              id: "common.membershipLevelWithValue",
-              defaultMessage: "Level {level}",
-            },
-            { level: level.user_facing_tag }
-          )}
-        </BiroScript>
+        <Typography variant="Title/Decorative/md">
+          <p className={styles.scriptedText}>
+            {intl.formatMessage(
+              {
+                id: "common.membershipLevelWithValue",
+                defaultMessage: "Level {level}",
+              },
+              { level: level.user_facing_tag }
+            )}
+          </p>
+        </Typography>
         <MembershipLevelIcon level={level.level_id} color="red" />
       </header>
       <Typography variant="Title/xs" className={styles.pointMsg}>

apps/scandic-web/components/Blocks/DynamicContent/LoyaltyLevels/loyaltyLevels.module.css

@@ -32,6 +32,13 @@
   justify-content: center;
 }
 
+.scriptedText {
+  color: var(--Icon-Accent);
+  transform: rotate(-11deg);
+  transform-origin: left;
+  margin-bottom: -4px;
+}
+
 .redText {
   color: var(--Base-Text-Accent);
 }