From c92529fcdea18bcbe9ff54f1427af98a8205ca6f Mon Sep 17 00:00:00 2001
From: Anton Gunnarsson <anton.gunnarsson@scandichotels.com>
Date: Thu, 6 Mar 2025 08:38:58 +0000
Subject: [PATCH] Merged in fix/sw-1828-tier-comparison-title-fix (pull request
 #1485)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix styling issues in SASTierComparison

* Fix styling issues in SASTierComparison

- Center title
- Use props for tier title font styles


Approved-by: Matilda Landström
---
 .../components/SasTierComparison/index.tsx       | 16 +++++++++++++---
 .../sasTierComparison.module.css                 |  2 --
 2 files changed, 13 insertions(+), 5 deletions(-)
diff --git a/apps/scandic-web/components/SasTierComparison/index.tsx b/apps/scandic-web/components/SasTierComparison/index.tsx
index da701622e..8169b445f 100644
--- a/apps/scandic-web/components/SasTierComparison/index.tsx
+++ b/apps/scandic-web/components/SasTierComparison/index.tsx
@@ -32,7 +32,9 @@ export function SasTierComparison({
   return (
     <SectionContainer className={styles.comparisonSection}>
       <div className={styles.header}>
-        <Title level="h2">{title}</Title>
+        <Title level="h2" textAlign="center">
+          {title}
+        </Title>
         {preamble && <p className={styles.preamble}>{preamble}</p>}
       </div>
       <div>
@@ -92,7 +94,11 @@ function TierDetails({
     <details className={styles.tierDetails} name="sas-scandic-tier-match">
       <summary className={styles.tierSummary}>
         <div className={styles.tierTitles}>
-          <Body className={styles.tierTitle}>
+          <Body
+            textAlign="center"
+            textTransform="bold"
+            className={styles.tierTitle}
+          >
             {tierMatch.scandic_friends_tier_name}
           </Body>
           <div className={styles.comparisonIcon}>
@@ -105,7 +111,11 @@ function TierDetails({
               position: "relative",
             }}
           >
-            <Body className={styles.tierTitle}>
+            <Body
+              textAlign="center"
+              textTransform="bold"
+              className={styles.tierTitle}
+            >
               {tierMatch.sas_eb_tier_name}
             </Body>
             <div className={styles.iconWrapper}>
diff --git a/apps/scandic-web/components/SasTierComparison/sasTierComparison.module.css b/apps/scandic-web/components/SasTierComparison/sasTierComparison.module.css
index 02b21d857..b81435d40 100644
--- a/apps/scandic-web/components/SasTierComparison/sasTierComparison.module.css
+++ b/apps/scandic-web/components/SasTierComparison/sasTierComparison.module.css
@@ -118,8 +118,6 @@
 
 .tierTitle {
   flex-grow: 1;
-  text-align: center;
-  font-weight: 500;
   z-index: 1;
 }
 
