fix(SW-1241): Adjusted amenities sidepeek on hotel pages and booking flow

Approved-by: Michael Zetterberg
Approved-by: Matilda Landström

apps/scandic-web/components/HotelReservation/ReadMore/index.tsx

@@ -1,30 +1,29 @@
 "use client"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import useSidePeekStore from "@/stores/sidepeek"
 
-import Button from "@/components/TempDesignSystem/Button"
-
-import styles from "./readMore.module.css"
-
 import type { ReadMoreProps } from "@/types/components/hotelReservation/selectHotel/selectHotel"
-import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
 
-export default function ReadMore({ label, hotelId, showCTA }: ReadMoreProps) {
+export default function ReadMore({
+  label,
+  hotelId,
+  showCTA,
+  sidePeekKey,
+}: ReadMoreProps) {
   const openSidePeek = useSidePeekStore((state) => state.openSidePeek)
   return (
     <Button
       onPress={() => {
-        openSidePeek({ key: SidePeekEnum.hotelDetails, hotelId, showCTA })
+        openSidePeek({ key: sidePeekKey, hotelId, showCTA })
       }}
-      intent="text"
-      theme="base"
-      wrapping
-      className={styles.detailsButton}
+      variant="Text"
+      typography="Body/Paragraph/mdBold"
     >
       {label}
-      <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
+      <MaterialIcon icon="chevron_right" size={24} color="CurrentColor" />
     </Button>
   )
 }

apps/scandic-web/components/HotelReservation/ReadMore/readMore.module.css

@@ -1,25 +0,0 @@
-.detailsButton {
-  align-self: start;
-  border-radius: 0;
-  height: auto;
-  padding-left: 0;
-  padding-right: 0;
-}
-
-.content {
-  display: grid;
-  gap: var(--Spacing-x2);
-}
-
-.amenity {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  border-bottom: 1px solid var(--Base-Border-Subtle);
-  /* padding set to align with AccordionItem which has a different composition */
-  padding: var(--Spacing-x2)
-    calc(var(--Spacing-x1) + var(--Spacing-x-one-and-half));
-}
-
-.list {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  list-style: inside;
-}