diff --git a/components/ContentType/HotelPage/Map/MapCard/index.tsx b/components/ContentType/HotelPage/Map/MapCard/index.tsx index c305ff445..eabe98a50 100644 --- a/components/ContentType/HotelPage/Map/MapCard/index.tsx +++ b/components/ContentType/HotelPage/Map/MapCard/index.tsx @@ -56,7 +56,6 @@ export default function MapCard({ hotelName, pois }: MapCardProps) { intent="secondary" size="small" fullWidth - className={styles.ctaButton} onClick={openDynamicMap} > {intl.formatMessage({ id: "Explore nearby" })} diff --git a/components/ContentType/HotelPage/Map/MapCard/mapCard.module.css b/components/ContentType/HotelPage/Map/MapCard/mapCard.module.css index 22f248cbd..79b6c1603 100644 --- a/components/ContentType/HotelPage/Map/MapCard/mapCard.module.css +++ b/components/ContentType/HotelPage/Map/MapCard/mapCard.module.css @@ -10,13 +10,10 @@ border-top-right-radius: var(--Corner-radius-Medium); } -.ctaButton { - margin-top: var(--Spacing-x2); -} - .poiList { list-style: none; margin-top: var(--Spacing-x1); + margin-bottom: var(--Spacing-x2); } .poiItem { diff --git a/components/GuestsRoomsPicker/Counter/index.tsx b/components/GuestsRoomsPicker/Counter/index.tsx index cce0bad68..099bf9632 100644 --- a/components/GuestsRoomsPicker/Counter/index.tsx +++ b/components/GuestsRoomsPicker/Counter/index.tsx @@ -6,7 +6,7 @@ import Body from "@/components/TempDesignSystem/Text/Body" import styles from "./counter.module.css" -import { CounterProps } from "@/types/components/bookingWidget/guestsRoomsPicker" +import type { CounterProps } from "@/types/components/bookingWidget/guestsRoomsPicker" export default function Counter({ count, diff --git a/components/Lightbox/FullView.tsx b/components/Lightbox/FullView.tsx index 360b7a276..c1b08c49f 100644 --- a/components/Lightbox/FullView.tsx +++ b/components/Lightbox/FullView.tsx @@ -25,10 +25,16 @@ export default function FullView({
diff --git a/components/Lightbox/Gallery.tsx b/components/Lightbox/Gallery.tsx index 578cc961e..85a52fce5 100644 --- a/components/Lightbox/Gallery.tsx +++ b/components/Lightbox/Gallery.tsx @@ -47,10 +47,15 @@ export default function Gallery({ intent="text" size="small" theme="base" + variant="icon" className={styles.desktopGalleryCloseButton} onClick={onClose} > - + {/* Desktop Gallery */}
diff --git a/components/Lightbox/Lightbox.module.css b/components/Lightbox/Lightbox.module.css index c98745601..231e652b7 100644 --- a/components/Lightbox/Lightbox.module.css +++ b/components/Lightbox/Lightbox.module.css @@ -32,6 +32,11 @@ z-index: 1; } +.fullViewCloseButton:hover .fullViewCloseIcon { + background-color: var(--UI-Text-Medium-contrast); + border-radius: 50%; +} + .leftTransformIcon { transform: scaleX(-1); } @@ -137,8 +142,10 @@ padding: var(--Spacing-x2); position: relative; align-items: center; + justify-items: center; display: grid; grid-template-rows: auto 1fr auto; + grid-template-columns: 1fr; place-content: center; gap: var(--Spacing-x5); } @@ -151,8 +158,9 @@ .fullViewImageContainer { position: relative; - width: 358px; - height: 240px; + width: 100%; + height: 100%; + max-height: 25rem; margin-bottom: var(--Spacing-x5); } @@ -187,17 +195,12 @@ .image { object-fit: cover; } - @media (min-width: 768px) and (max-width: 1367px) { .fullViewContainer { - grid-template-columns: 1fr; - justify-items: center; padding: var(--Spacing-x5); } .fullViewImageContainer { - position: relative; - width: 100%; height: 100%; max-height: 35rem; } @@ -210,13 +213,16 @@ } .content { - border-radius: var(--Corner-radius-Large); position: fixed; top: 50%; left: 50%; overflow: hidden; } + .content:not(.fullViewContent) { + border-radius: var(--Corner-radius-Large); + } + .galleryContent { width: 1090px; height: 725px; @@ -246,6 +252,12 @@ position: absolute; top: var(--Spacing-x-one-and-half); right: var(--Spacing-x-half); + z-index: 1; + } + + .desktopGalleryCloseButton:hover .desktopGalleryCloseIcon { + background-color: var(--Base-Surface-Primary-light-Hover-alt); + border-radius: 50%; } .desktopThumbnailGrid { @@ -279,17 +291,13 @@ margin-top: 0; padding: var(--Spacing-x5); grid-template-rows: auto 1fr auto; - grid-template-columns: 1fr; - justify-items: center; width: 100%; height: 100%; } .fullViewImageContainer { - position: relative; - width: 90%; + width: 70%; max-width: 90.875rem; - height: 100%; max-height: 43.75rem; }