From 2d5d8a5ec9ed697e5a2a570ff01ec62635d121c6 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Sun, 10 Nov 2024 10:03:10 +0100
Subject: [PATCH] feat(SW-340): Fixed Map Link in desktop

---
 .../(standard)/select-hotel/page.module.css   | 26 +++++++++++-----
 .../(standard)/select-hotel/page.tsx          | 30 +++++++++----------
 2 files changed, 34 insertions(+), 22 deletions(-)

diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css
index 800ffe8f9..9f8df3025 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css
@@ -9,17 +9,13 @@
   margin: 0 auto;
 }
 
-.section {
+.sideBar {
   display: flex;
   flex-direction: column;
+  max-width: 340px;
 }
 
 .link {
-  display: flex;
-  padding: var(--Spacing-x2) var(--Spacing-x0);
-}
-
-.mapContainer {
   display: none;
 }
 
@@ -34,11 +30,27 @@
 }
 
 @media (min-width: 768px) {
+  .link {
+    display: flex;
+    padding-bottom: var(--Spacing-x6);
+  }
   .mapContainer {
-    display: block;
+    display: flex;
+    flex-direction: column;
+    background: var(--Base-Surface-Primary-light-Normal);
+    border-radius: var(--Corner-radius-Medium);
+    border: 1px solid var(--Base-Border-Subtle);
+  }
+  .mapLinkText {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--Spacing-x-half);
+    padding: var(--Spacing-x-one-and-half) var(--Spacing-x0);
   }
   .main {
     flex-direction: row;
+    gap: var(--Spacing-x5);
   }
   .buttonContainer {
     display: none;
diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
index 29d16df1a..843accbd3 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx
@@ -62,9 +62,14 @@ export default async function SelectHotelPage({
 
   return (
     <main className={styles.main}>
-      <section className={styles.section}>
-        <div className={styles.mapContainer}>
-          <Link href={selectHotelMap[params.lang]} keepSearchParams>
+      <div className={styles.sideBar}>
+        <Link
+          className={styles.link}
+          color="burgundy"
+          href={selectHotelMap[params.lang]}
+          keepSearchParams
+        >
+          <div className={styles.mapContainer}>
             <StaticMap
               city={searchParams.city}
               width={340}
@@ -73,20 +78,15 @@ export default async function SelectHotelPage({
               mapType="roadmap"
               altText={`Map of ${searchParams.city} city center`}
             />
-          </Link>
-          <Link
-            className={styles.link}
-            color="burgundy"
-            href={selectHotelMap[params.lang]}
-            keepSearchParams
-          >
-            {intl.formatMessage({ id: "Show map" })}
-            <ChevronRightIcon color="burgundy" height={20} width={20} />
-          </Link>
-        </div>
+            <div className={styles.mapLinkText}>
+              {intl.formatMessage({ id: "Show map" })}
+              <ChevronRightIcon color="burgundy" />
+            </div>
+          </div>
+        </Link>
         <MobileMapButtonContainer city={searchParams.city} />
         <HotelFilter filters={filterList} />
-      </section>
+      </div>
       <HotelCardListing hotelData={hotels} />
     </main>
   )