From c84d686d9daf65f990decfa39456f17406dadb5c Mon Sep 17 00:00:00 2001
From: Erik Tiekstra <erik.tiekstra@scandichotels.com>
Date: Fri, 10 Oct 2025 07:46:10 +0000
Subject: [PATCH] fix(BOOK-138): Added underline to explore city link
 fix(BOOK-138): removed duplicate back to cities button on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Approved-by: Matilda Landström
---
 .../backToCitiesLink.module.css               | 10 -------
 .../CityMap/BackToCitiesLink/index.tsx        | 30 -------------------
 .../CityMap/cityMap.module.css                |  8 ++++-
 .../DestinationCityPage/CityMap/index.tsx     | 28 +++++++++++++----
 .../CityMapCard/index.tsx                     |  7 ++++-
 .../CountryMap/CityListItem/index.tsx         |  7 ++++-
 6 files changed, 42 insertions(+), 48 deletions(-)
 delete mode 100644 apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/BackToCitiesLink/backToCitiesLink.module.css
 delete mode 100644 apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/BackToCitiesLink/index.tsx

diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/BackToCitiesLink/backToCitiesLink.module.css b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/BackToCitiesLink/backToCitiesLink.module.css
deleted file mode 100644
index 26772dd0d..000000000
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/BackToCitiesLink/backToCitiesLink.module.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.backToCities {
-  display: none;
-}
-
-@media screen and (min-width: 950px) {
-  .backToCities {
-    display: flex;
-    margin-bottom: var(--Space-x2);
-  }
-}
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/BackToCitiesLink/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/BackToCitiesLink/index.tsx
deleted file mode 100644
index 20ad32d8f..000000000
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/BackToCitiesLink/index.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-"use client"
-import { useRouter } from "next/navigation"
-import { useIntl } from "react-intl"
-
-import { Button } from "@scandic-hotels/design-system/Button"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-
-import styles from "./backToCitiesLink.module.css"
-
-export function BackToCities() {
-  const intl = useIntl()
-  const router = useRouter()
-
-  function handleGoBack() {
-    router.back()
-  }
-
-  return (
-    <Button
-      typography="Body/Paragraph/mdBold"
-      variant="Text"
-      color="Primary"
-      className={styles.backToCities}
-      onClick={handleGoBack}
-    >
-      <MaterialIcon icon="arrow_back" color="CurrentColor" size={24} />
-      <span>{intl.formatMessage({ defaultMessage: "Back to cities" })}</span>
-    </Button>
-  )
-}
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/cityMap.module.css b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/cityMap.module.css
index a1c3fcd88..c56acbe1d 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/cityMap.module.css
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/cityMap.module.css
@@ -2,8 +2,14 @@
   color: var(--Text-Heading);
 }
 
+.topSection {
+  display: grid;
+  gap: var(--Space-x2);
+  justify-items: start;
+}
+
 @media screen and (max-width: 949px) {
-  .title {
+  .topSection {
     display: none;
   }
 }
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/index.tsx
index 97e941f06..f0137afbd 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/index.tsx
@@ -1,15 +1,16 @@
 "use client"
-import { useParams } from "next/navigation"
+import { useParams, useRouter } from "next/navigation"
 import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useDestinationDataStore } from "@/stores/destination-data"
 
 import CityMapContainer from "../../Map/CityMapContainer"
 import { getHeadingText } from "../../utils"
-import { BackToCities } from "./BackToCitiesLink"
 import HotelList from "./HotelList"
 
 import styles from "./cityMap.module.css"
@@ -32,6 +33,7 @@ export default function CityMap({
   defaultLocation,
 }: CityMapProps) {
   const intl = useIntl()
+  const router = useRouter()
   const { activeHotels, activeSeoFilter } = useDestinationDataStore(
     (state) => ({
       activeHotels: state.activeHotels,
@@ -46,6 +48,10 @@ export default function CityMap({
     setIsFromCountryPage(url.searchParams.has("fromCountry"))
   }, [params])
 
+  function handleGoBack() {
+    router.back()
+  }
+
   return (
     <CityMapContainer
       hotels={activeHotels}
@@ -53,14 +59,26 @@ export default function CityMap({
       apiKey={apiKey}
       defaultLocation={defaultLocation}
     >
-      <span className="topSection">
-        {fromCountryPage ? <BackToCities /> : null}
+      <div className={styles.topSection}>
+        {fromCountryPage ? (
+          <Button
+            typography="Body/Paragraph/mdBold"
+            variant="Text"
+            color="Primary"
+            onClick={handleGoBack}
+          >
+            <MaterialIcon icon="arrow_back" color="CurrentColor" size={24} />
+            <span>
+              {intl.formatMessage({ defaultMessage: "Back to cities" })}
+            </span>
+          </Button>
+        ) : null}
         <Typography variant="Title/sm">
           <h1 className={styles.title}>
             {getHeadingText(intl, city.name, "city", activeSeoFilter)}
           </h1>
         </Typography>
-      </span>
+      </div>
       <HotelList />
     </CityMapContainer>
   )
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CityMapCard/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CityMapCard/index.tsx
index e05216b67..fe6fe4202 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CityMapCard/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CityMapCard/index.tsx
@@ -96,7 +96,12 @@ export default function CityMapCard({
               </Typography>
             </ButtonLink>
 
-            <Link href={url} className={styles.exploreLink} size="small">
+            <Link
+              href={url}
+              className={styles.exploreLink}
+              size="small"
+              textDecoration="underline"
+            >
               {intl.formatMessage({
                 defaultMessage: "Explore city",
               })}
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/index.tsx
index f6271865c..3d54636af 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationCountryPage/CountryMap/CityListItem/index.tsx
@@ -104,7 +104,12 @@ export function CityListItem({
             <h3>{cityName}</h3>
           </Typography>
           <div>
-            <Link href={url} className={styles.exploreLink} size="small">
+            <Link
+              href={url}
+              className={styles.exploreLink}
+              size="small"
+              textDecoration="underline"
+            >
               {intl.formatMessage({
                 defaultMessage: "Explore city",
               })}