fix(BOOK-138): Added underline to explore city link

fix(BOOK-138): removed duplicate back to cities button on mobile

Approved-by: Matilda Landström

apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/BackToCitiesLink/backToCitiesLink.module.css

@@ -1,10 +0,0 @@
-.backToCities {
-  display: none;
-}
-
-@media screen and (min-width: 950px) {
-  .backToCities {
-    display: flex;
-    margin-bottom: var(--Space-x2);
-  }
-}

apps/scandic-web/components/ContentType/DestinationPage/DestinationCityPage/CityMap/BackToCitiesLink/index.tsx

@@ -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>
-  )
-}

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;
   }
 }

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">
+      <div className={styles.topSection}>
-        {fromCountryPage ? <BackToCities /> : null}
+        {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>
   )

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",
               })}

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",
               })}