Merged in feat/SW-337-hotel-page-ui (pull request #848)

Feat(SW-337): Update lightbox UI

* chore(SW-337): hotelPage UI fixes

* refactor(SW-337): move width and height as props

* xhore(SW-337): update lightbox UI

* fix(SW-337): move margin

* fix(SW-337): update mobile fullview

* fix(SW-337): remove test border

* fix(SW-337): remove radius on fullview


Approved-by: Erik Tiekstra
Approved-by: Fredrik Thorsson

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

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 {

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,

components/Lightbox/FullView.tsx

@@ -25,10 +25,16 @@ export default function FullView({
       <Button
         intent="text"
         size="small"
+        variant="icon"
         className={styles.fullViewCloseButton}
         onClick={onClose}
       >
-        <CloseIcon color="white" width={32} height={32} />
+        <CloseIcon
+          width={32}
+          height={32}
+          className={styles.fullViewCloseIcon}
+          color="white"
+        />
       </Button>
       <div className={styles.fullViewHeader}>
         <span className={styles.imagePosition}>

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}
       >
-        <CloseIcon width={32} height={32} />
+        <CloseIcon
+          width={32}
+          height={32}
+          className={styles.desktopGalleryCloseIcon}
+        />
       </Button>
       {/* Desktop Gallery */}
       <div className={styles.desktopGallery}>

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;
+  width: 100%;
-  height: 240px;
+  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: 70%;
-    width: 90%;
     max-width: 90.875rem;
-    height: 100%;
     max-height: 43.75rem;
   }