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/TempDesignSystem/BackToTopButton/backToTopButton.module.css

@@ -0,0 +1,45 @@
+.backToTopButton {
+  border-radius: var(--Corner-radius-Rounded);
+  cursor: pointer;
+  display: flex;
+  align-items: flex-end;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  z-index: 1000;
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  color: var(--Base-Button-Secondary-On-Fill-Normal);
+  border: 2px solid var(--Base-Button-Secondary-On-Fill-Normal);
+  gap: var(--Spacing-x-half);
+  padding: var(--Spacing-x1);
+  text-align: center;
+  transition:
+    background-color 300ms ease,
+    color 300ms ease;
+  font-family: var(--typography-Body-Bold-fontFamily);
+  font-weight: 500;
+  font-size: var(--typography-Caption-Bold-fontSize);
+  line-height: var(--typography-Caption-Bold-lineHeight);
+  letter-spacing: 0.6%;
+  text-decoration: none;
+}
+
+.backToTopButtonText {
+  display: none;
+}
+
+@media (min-width: 768px) {
+  .backToTopButtonText {
+    display: initial;
+  }
+  .backToTopButton:hover {
+    background-color: var(--Base-Button-Tertiary-Fill-Normal);
+    color: var(--Base-Button-Tertiary-On-Fill-Hover);
+  }
+  .backToTopButton:hover > svg * {
+    fill: var(--Base-Button-Tertiary-On-Fill-Hover);
+  }
+  .backToTopButton {
+    padding: calc(var(--Spacing-x1) + 2px) var(--Spacing-x2);
+  }
+}

components/TempDesignSystem/BackToTopButton/index.tsx

@@ -0,0 +1,20 @@
+"use client"
+
+import { Button as ButtonRAC } from "react-aria-components"
+import { useIntl } from "react-intl"
+
+import { ArrowUpIcon } from "@/components/Icons"
+
+import styles from "./backToTopButton.module.css"
+
+export function BackToTopButton({ onClick }: { onClick: () => void }) {
+  const intl = useIntl()
+  return (
+    <ButtonRAC className={styles.backToTopButton} onPress={onClick}>
+      <ArrowUpIcon color="burgundy" />
+      <span className={styles.backToTopButtonText}>
+        {intl.formatMessage({ id: "Back to top" })}
+      </span>
+    </ButtonRAC>
+  )
+}