Merged in fix/SW-2038-map-button (pull request #2583)

fix(SW-2038): add shadow to "See map" button and map overlay

* fix(SW-2038): add shadow to button

* fix(SW-2038): add overlay on map


Approved-by: Anton Gunnarsson

apps/scandic-web/components/ContentType/DestinationPage/StaticMap/MapButton/index.tsx

@@ -1,12 +1,14 @@
 "use client"
 
-import Link from "next/link"
 import { useParams } from "next/navigation"
 import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+
+import ButtonLink from "@/components/ButtonLink"
+
+import styles from "./mapButton.module.css"
 
 interface MapButtonProps {
   className?: string
@@ -28,20 +30,18 @@ export default function MapButton({ className = "" }: MapButtonProps) {
   }
 
   return (
-    <Button
-      intent="inverted"
-      variant="icon"
-      size="small"
-      theme="base"
-      className={className}
-      asChild
+    <ButtonLink
+      href={mapUrl}
+      variant="Primary"
+      color="Inverted"
+      size="Small"
+      typography="Body/Supporting text (caption)/smBold"
+      className={`${className} ${styles.button}`}
     >
-      <Link href={mapUrl} scroll={true}>
-        <MaterialIcon icon="map" color="CurrentColor" />
-        {intl.formatMessage({
-          defaultMessage: "See on map",
-        })}
-      </Link>
-    </Button>
+      <MaterialIcon icon="map" color="CurrentColor" />
+      {intl.formatMessage({
+        defaultMessage: "See on map",
+      })}
+    </ButtonLink>
   )
 }

apps/scandic-web/components/ContentType/DestinationPage/StaticMap/MapButton/mapButton.module.css

@@ -0,0 +1,3 @@
+.button {
+  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
+}

apps/scandic-web/components/ContentType/DestinationPage/StaticMap/staticMap.module.css

@@ -7,15 +7,32 @@
   align-items: center;
 }
 
-.mapWrapper img {
-  border-radius: var(--Corner-radius-lg);
+.mapWrapper {
+  border-radius: var(--Corner-radius-md);
   overflow: hidden;
 }
 
+.mapWrapper::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(31, 28, 27, 0);
+  transition: background-color 0.3s ease;
+  pointer-events: none;
+  z-index: 1;
+}
+
+.mapWrapper:hover::before {
+  background-color: rgba(31, 28, 27, 0.1);
+}
+
 .button {
   position: absolute;
-  right: var(--Spacing-x2);
-  bottom: var(--Spacing-x2);
+  right: var(--Space-x2);
+  bottom: var(--Space-x2);
 }
 
 @media screen and (max-width: 1366px) {