Merged in feat/SW-3072-desktop-new-button-for-see- (pull request #2408)

feat: SW-3072 Added overlay to static map on city page

* feat: SW-3072 Added overlay to static map on city page

* feat: SW-3072 Updated map link in desktop select-hotel page

* feat: SW-3072 Updated as review comments


Approved-by: Erik Tiekstra

apps/scandic-web/components/HotelReservation/SelectHotel/index.tsx

@@ -1,4 +1,5 @@
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
 import BookingCodeFilter from "@/components/HotelReservation/SelectHotel/BookingCodeFilter"
@@ -82,21 +83,19 @@ export default async function SelectHotel({
                   city={city.name}
                   country={isCityWithCountry(city) ? city.country : undefined}
                   width={340}
-                  height={180}
+                  height={200}
                   zoomLevel={11}
                   mapType="roadmap"
                   altText={`Map of ${city.name} city center`}
                 />
-                <div className={styles.linkText}>
-                  {intl.formatMessage({
-                    defaultMessage: "See map",
-                  })}
-                  <MaterialIcon
-                    icon="chevron_right"
-                    size={20}
-                    color="CurrentColor"
-                  />
-                </div>
+                <Typography variant="Body/Supporting text (caption)/smBold">
+                  <span className={styles.mapButton}>
+                    <MaterialIcon icon="map" color="CurrentColor" size={20} />
+                    {intl.formatMessage({
+                      defaultMessage: "See on map",
+                    })}
+                  </span>
+                </Typography>
               </div>
             </Link>
           ) : (
@@ -104,7 +103,7 @@ export default async function SelectHotel({
               <StaticMap
                 city={city.name}
                 width={340}
-                height={180}
+                height={200}
                 zoomLevel={11}
                 mapType="roadmap"
                 altText={`Map of ${city.name} city center`}

apps/scandic-web/components/HotelReservation/SelectHotel/selectHotel.module.css

@@ -68,11 +68,15 @@
   margin-bottom: var(--Spacing-x3);
 }
 
-.linkText {
+.mapButton {
   display: flex;
-  padding: var(--Space-x15) 0;
+  padding: 10px var(--Space-x2);
   justify-content: center;
-  font-weight: var(--Link-md-Font-weight);
+  align-items: center;
+  border-radius: var(--Corner-radius-rounded);
+  background: var(--Component-Button-Inverted-Fill-Default);
+  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
+  gap: var(--Space-x05);
 }
 
 @media (min-width: 768px) {
@@ -128,6 +132,18 @@
     background: var(--Base-Surface-Primary-light-Normal);
     border-radius: var(--Corner-radius-md);
     border: 1px solid var(--Base-Border-Subtle);
+    position: relative;
+  }
+
+  .mapButton {
+    position: absolute;
+    bottom: var(--Space-x2);
+    right: var(--Space-x2);
+  }
+
+  .mapButton:hover {
+    background-color: var(--Base-Button-Inverted-Fill-Hover);
+    color: var(--Base-Button-Inverted-On-Fill-Hover);
   }
 
   .buttonContainer {