scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
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
This commit is contained in:
Matilda Landström
2025-07-31 09:07:21 +00:00
parent e323ca9914
commit c20c6ed016
3 changed files with 40 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

3
apps/scandic-web/components/ContentType/DestinationPage/StaticMap/MapButton/mapButton.module.css Normal file
View File

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

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

@@ -7,15 +7,32 @@
align-items: center; align-items: center;
} }
.mapWrapper img { .mapWrapper {
border-radius: var(--Corner-radius-lg); border-radius: var(--Corner-radius-md);
overflow: hidden; 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 { .button {
position: absolute; position: absolute;
right: var(--Spacing-x2); right: var(--Space-x2);
bottom: var(--Spacing-x2); bottom: var(--Space-x2);
} }
@media screen and (max-width: 1366px) { @media screen and (max-width: 1366px) {