fix(SW-369): center on mobile

2024-10-18 09:47:21 +02:00
parent df2203b97f
commit 5e3b2fb8fa
2 changed files with 20 additions and 1 deletions
--- a/components/Sidebar/JoinLoyalty/index.tsx
+++ b/components/Sidebar/JoinLoyalty/index.tsx
@@ -32,7 +32,11 @@ export default async function JoinLoyaltyContact({
          {block.title}
        </Title>
        <ScandicFriends color="red" />
-        {block.preamble ? <Body>{block.preamble}</Body> : null}
+        {block.preamble ? (
+          <Body textAlign={null} className={styles.preamble}>
+            {block.preamble}
+          </Body>
+        ) : null}
        {block.button ? (
          <Button
            asChild
--- a/components/Sidebar/JoinLoyalty/joinLoyalty.module.css
+++ b/components/Sidebar/JoinLoyalty/joinLoyalty.module.css
@@ -3,6 +3,11 @@
  gap: var(--Spacing-x3);
  padding-bottom: var(--Spacing-x5);
  padding-top: var(--Spacing-x4);
+  justify-items: center;
+}
+
+.preamble {
+  text-align: center;
 }

 .loginContainer {
@@ -22,3 +27,13 @@
 .icon {
  align-self: center;
 }
+
+@media screen and (min-width: 1367px) {
+  .wrapper {
+    justify-items: start;
+  }
+
+  .preamble {
+    text-align: left;
+  }
+}