Merged in feat/SW-904-add-back-to-top-button (pull request #923)

Feat/SW-904 add back to top button on hotel list page

* feat(SW-904): Added back to top button

* fix: removed alert on hotel listing page

* Remove console.log


Approved-by: Niclas Edenvin

components/HotelReservation/SelectHotel/SelectHotelMap/index.tsx

@@ -7,8 +7,9 @@ import { useMediaQuery } from "usehooks-ts"
 
 import { selectHotel } from "@/constants/routes/hotelReservation"
 
-import { CloseIcon, CloseLargeIcon } from "@/components/Icons"
+import { ArrowUpIcon, CloseIcon, CloseLargeIcon } from "@/components/Icons"
 import InteractiveMap from "@/components/Maps/InteractiveMap"
+import { BackToTopButton } from "@/components/TempDesignSystem/BackToTopButton"
 import Button from "@/components/TempDesignSystem/Button"
 import useLang from "@/hooks/useLang"
 
@@ -109,17 +110,7 @@ export default function SelectHotelMap({
             activeHotelPin={activeHotelPin}
             setActiveHotelPin={setActiveHotelPin}
           />
-          {showBackToTop && (
-            <Button
-              intent="inverted"
-              size="small"
-              theme="base"
-              className={styles.backToTopButton}
-              onClick={scrollToTop}
-            >
-              {intl.formatMessage({ id: "Back to top" })}
-            </Button>
-          )}
+          {showBackToTop && <BackToTopButton onClick={scrollToTop} />}
         </div>
         <InteractiveMap
           closeButton={closeButton}

components/HotelReservation/SelectHotel/SelectHotelMap/selectHotelMap.module.css

@@ -23,10 +23,6 @@
   height: 44px;
 }
 
-.backToTopButton {
-  display: none;
-}
-
 @media (min-width: 768px) {
   .container .closeButton {
     display: flex;
@@ -34,12 +30,7 @@
   .container .listingContainer .filterContainer .filterContainerCloseButton {
     display: none;
   }
-  .backToTopButton {
-    position: fixed;
-    bottom: 24px;
-    left: 32px;
-    display: flex;
-  }
+
   .listingContainer {
     background-color: var(--Base-Surface-Secondary-light-Normal);
     padding: var(--Spacing-x3) var(--Spacing-x4);