Merged in fix/sw-1828-tier-comparison-title-fix (pull request #1485)

Fix styling issues in SASTierComparison

* Fix styling issues in SASTierComparison

- Center title
- Use props for tier title font styles


Approved-by: Matilda Landström
This commit is contained in:
Anton Gunnarsson
2025-03-06 08:38:58 +00:00
parent 41d2089c40
commit c92529fcde
2 changed files with 13 additions and 5 deletions

View File

@@ -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}>

View File

@@ -118,8 +118,6 @@
.tierTitle {
flex-grow: 1;
text-align: center;
font-weight: 500;
z-index: 1;
}