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

Approved-by: Bianca Widstam

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/index.tsx

@@ -16,6 +16,7 @@ export default function RewardValue({ reward }: RewardValueProps) {
         icon="check_circle"
         size={32}
         color="Icon/Feedback/Success"
+        className={styles.checkIcon}
       />
     )
   }

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardValue/rewardValue.module.css

@@ -17,3 +17,7 @@
   text-align: center;
   color: var(--UI-Grey-80);
 }
+
+.checkIcon {
+  display: inline-flex;
+}

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/YourLevelScript/index.tsx

@@ -1,22 +1,19 @@
 import { useIntl } from "react-intl"
 
-import BiroScript from "@/components/TempDesignSystem/Text/BiroScript"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./yourLevel.module.css"
 
 export default function YourLevel() {
   const intl = useIntl()
   return (
-    <BiroScript
-      className={styles.script}
-      color="peach80"
-      type="two"
-      textAlign="center"
-    >
-      {intl.formatMessage({
-        id: "overviewTable.yourLevel",
-        defaultMessage: "Your level",
-      })}
-    </BiroScript>
+    <Typography variant="Title/Decorative/md">
+      <span className={styles.script}>
+        {intl.formatMessage({
+          id: "overviewTable.yourLevel",
+          defaultMessage: "Your level",
+        })}
+      </span>
+    </Typography>
   )
 }

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/YourLevelScript/yourLevel.module.css

@@ -1,6 +1,8 @@
 .script {
   transform: rotate(-4deg);
   padding-bottom: var(--Space-x05);
+  text-align: center;
+  color: var(--Text-Interactive-Secondary);
 }
 
 @media screen and (min-width: 950px) {