From 3f2f435461303f149a83ee3012be12c49fbf4eb2 Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Mon, 8 Jul 2024 18:01:45 +0200
Subject: [PATCH] fix: remove custom style and add tiltedMedium variant

---
 components/ContentType/HotelPage/IntroSection/index.tsx       | 2 +-
 .../HotelPage/IntroSection/introSection.module.css            | 4 ----
 .../TempDesignSystem/Text/BiroScript/biroScript.module.css    | 4 ++++
 components/TempDesignSystem/Text/BiroScript/variants.ts       | 1 +
 4 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/components/ContentType/HotelPage/IntroSection/index.tsx b/components/ContentType/HotelPage/IntroSection/index.tsx
index ae1dfdbe4..007f2c0ac 100644
--- a/components/ContentType/HotelPage/IntroSection/index.tsx
+++ b/components/ContentType/HotelPage/IntroSection/index.tsx
@@ -36,7 +36,7 @@ export default async function IntroSection({
     <section className={styles.introSection}>
       <div className={styles.mainContent}>
         <div className={styles.titleContainer}>
-          <BiroScript className={styles.welcomeLabel} color="red">
+          <BiroScript tilted="medium" color="red">
             {formatMessage({ id: "Welcome to" })}:
           </BiroScript>
           <Title level="h2">{hotelName}</Title>
diff --git a/components/ContentType/HotelPage/IntroSection/introSection.module.css b/components/ContentType/HotelPage/IntroSection/introSection.module.css
index 847d6ade5..4332cadbc 100644
--- a/components/ContentType/HotelPage/IntroSection/introSection.module.css
+++ b/components/ContentType/HotelPage/IntroSection/introSection.module.css
@@ -14,10 +14,6 @@
   gap: var(--Spacing-x-one-and-half);
 }
 
-.welcomeLabel {
-  transform: rotate(-4deg) translate(0px, -15px);
-}
-
 .introLink {
   text-decoration-color: var(--Scandic-Peach-80);
   width: fit-content;
diff --git a/components/TempDesignSystem/Text/BiroScript/biroScript.module.css b/components/TempDesignSystem/Text/BiroScript/biroScript.module.css
index 1dc3567c4..e7df4085a 100644
--- a/components/TempDesignSystem/Text/BiroScript/biroScript.module.css
+++ b/components/TempDesignSystem/Text/BiroScript/biroScript.module.css
@@ -30,6 +30,10 @@
   transform: rotate(-2deg);
 }
 
+.tiltedMedium {
+  transform: rotate(-4deg) translate(0px, -15px);
+}
+
 .tiltedLarge {
   transform: rotate(-13deg) translate(0px, -15px);
 }
diff --git a/components/TempDesignSystem/Text/BiroScript/variants.ts b/components/TempDesignSystem/Text/BiroScript/variants.ts
index 96de5ddf1..3e0aaa4fa 100644
--- a/components/TempDesignSystem/Text/BiroScript/variants.ts
+++ b/components/TempDesignSystem/Text/BiroScript/variants.ts
@@ -22,6 +22,7 @@ const config = {
     },
     tilted: {
       small: styles.tiltedSmall,
+      medium: styles.tiltedMedium,
       large: styles.tiltedLarge,
     },
   },