From 4c9e9de11350f06fe924af827749e3b8b5171f91 Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Mon, 18 Nov 2024 13:13:41 +0100
Subject: [PATCH] fix: add mobile design for details form

---
 .../EnterDetails/Details/details.module.css   | 32 ++++++++++++-
 .../Form/Checkbox/checkbox.module.css         |  1 +
 .../Form/JoinScandicFriendsCard/index.tsx     | 48 ++++++++++---------
 .../joinScandicFriendsCard.module.css         |  3 +-
 4 files changed, 57 insertions(+), 27 deletions(-)

diff --git a/components/HotelReservation/EnterDetails/Details/details.module.css b/components/HotelReservation/EnterDetails/Details/details.module.css
index f89dfa7cc..2dc4266ed 100644
--- a/components/HotelReservation/EnterDetails/Details/details.module.css
+++ b/components/HotelReservation/EnterDetails/Details/details.module.css
@@ -1,11 +1,12 @@
 .form {
   display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Spacing-x1);
+  padding: var(--Spacing-x3) 0px;
 }
 
 .container {
   display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Spacing-x1);
   grid-template-columns: 1fr 1fr;
   width: min(100%, 600px);
 }
@@ -23,3 +24,30 @@
   justify-items: flex-start;
   margin-top: var(--Spacing-x1);
 }
+
+@media screen and (min-width: 1367px) {
+  .form {
+    gap: var(--Spacing-x2);
+    padding: var(--Spacing-x3) 0px;
+  }
+
+  .container {
+    gap: var(--Spacing-x2);
+    grid-template-columns: 1fr 1fr;
+    width: min(100%, 600px);
+  }
+
+  .country,
+  .email,
+  .membershipNo,
+  .phone {
+    grid-column: 1/-1;
+  }
+
+  .footer {
+    display: grid;
+    gap: var(--Spacing-x3);
+    justify-items: flex-start;
+    margin-top: var(--Spacing-x1);
+  }
+}
diff --git a/components/TempDesignSystem/Form/Checkbox/checkbox.module.css b/components/TempDesignSystem/Form/Checkbox/checkbox.module.css
index 2e924b226..11c558af9 100644
--- a/components/TempDesignSystem/Form/Checkbox/checkbox.module.css
+++ b/components/TempDesignSystem/Form/Checkbox/checkbox.module.css
@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
   color: var(--text-color);
+  cursor: pointer;
 }
 
 .container[data-selected] .checkbox {
diff --git a/components/TempDesignSystem/Form/JoinScandicFriendsCard/index.tsx b/components/TempDesignSystem/Form/JoinScandicFriendsCard/index.tsx
index 629a904fc..70f03e6fe 100644
--- a/components/TempDesignSystem/Form/JoinScandicFriendsCard/index.tsx
+++ b/components/TempDesignSystem/Form/JoinScandicFriendsCard/index.tsx
@@ -34,29 +34,31 @@ export default function JoinScandicFriendsCard({
   ]
 
   return (
-    <label className={styles.cardContainer}>
+    <div className={styles.cardContainer}>
       <header className={styles.header}>
-        <Checkbox name={name} className={styles.checkBox} />
-        <div>
-          <Caption type="label" textTransform="uppercase" color="red">
-            {intl.formatMessage(
-              {
-                id: "Only pay {amount} {currency}",
-              },
-              {
-                amount: intl.formatNumber(difference.price),
-                currency: difference.currency,
-              }
-            )}
-          </Caption>
-          <Caption
-            type="label"
-            textTransform="uppercase"
-            color="uiTextHighContrast"
-          >
-            {intl.formatMessage({ id: "Join Scandic Friends" })}
-          </Caption>
-        </div>
+        <Checkbox name={name} className={styles.checkBox}>
+          <div>
+            <Caption type="label" textTransform="uppercase" color="red">
+              {intl.formatMessage(
+                {
+                  id: "Only pay {amount} {currency}",
+                },
+                {
+                  amount: intl.formatNumber(difference.price),
+                  currency: difference.currency,
+                }
+              )}
+            </Caption>
+            <Caption
+              type="label"
+              textTransform="uppercase"
+              color="uiTextHighContrast"
+            >
+              {intl.formatMessage({ id: "Join Scandic Friends" })}
+            </Caption>
+          </div>
+        </Checkbox>
+
         <Footnote color="uiTextHighContrast">
           {intl.formatMessage({ id: "Already a friend?" })}{" "}
           <LoginButton
@@ -103,6 +105,6 @@ export default function JoinScandicFriendsCard({
           }
         )}
       </Footnote>
-    </label>
+    </div>
   )
 }
diff --git a/components/TempDesignSystem/Form/JoinScandicFriendsCard/joinScandicFriendsCard.module.css b/components/TempDesignSystem/Form/JoinScandicFriendsCard/joinScandicFriendsCard.module.css
index 42dcc86d0..8238c0bf2 100644
--- a/components/TempDesignSystem/Form/JoinScandicFriendsCard/joinScandicFriendsCard.module.css
+++ b/components/TempDesignSystem/Form/JoinScandicFriendsCard/joinScandicFriendsCard.module.css
@@ -4,7 +4,6 @@
   border: 1px solid var(--Base-Border-Subtle);
   border-radius: var(--Corner-radius-Large);
   display: grid;
-  cursor: pointer;
   gap: var(--Spacing-x2);
   padding: var(--Spacing-x-one-and-half) var(--Spacing-x2);
   width: min(100%, 600px);
@@ -13,7 +12,7 @@
 .header {
   display: grid;
   gap: var(--Spacing-x-one-and-half);
-  grid-template-columns: auto 1fr auto;
+  grid-template-columns: 1fr auto;
 }
 
 .checkBox {