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