From 8e1a83ee7d6e64a8e2527a6c9c030fbfbd5618f6 Mon Sep 17 00:00:00 2001
From: Christian Andolf <christian.andolf@scandichotels.com>
Date: Fri, 23 May 2025 11:16:35 +0200
Subject: [PATCH] fix(SW-2172): update sidepeek buttons to use new ones for
 accessibility

updated enter details header overlay to match design

updated change room button to use new one for accessibility

other minor fixes to match design
---
 .../EnterDetails/Header/ToggleSidePeek.tsx    | 24 +++++++------------
 .../EnterDetails/Header/header.module.css     | 23 +++++++++---------
 .../SelectedRoom/ToggleSidePeek.tsx           | 24 ++++++++-----------
 .../EnterDetails/SelectedRoom/index.tsx       | 24 ++++++++-----------
 .../RoomListItem/Details/ToggleSidePeek.tsx   | 13 +++++-----
 .../hotelReservation/toggleSidePeekProps.ts   |  1 -
 6 files changed, 47 insertions(+), 62 deletions(-)

diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Header/ToggleSidePeek.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Header/ToggleSidePeek.tsx
index 422f65b7d..d6330b703 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Header/ToggleSidePeek.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Header/ToggleSidePeek.tsx
@@ -1,38 +1,32 @@
 "use client"
+
 import { useIntl } from "react-intl"
 
+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 "./header.module.css"
-
 import { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
 import type { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps"
 
-export default function ToggleSidePeek({
-  hotelId,
-  intent = "textInverted",
-}: ToggleSidePeekProps) {
+export default function ToggleSidePeek({ hotelId }: ToggleSidePeekProps) {
   const intl = useIntl()
   const openSidePeek = useSidePeekStore((state) => state.openSidePeek)
 
   return (
     <Button
-      onClick={() => openSidePeek({ key: SidePeekEnum.hotelDetails, hotelId })}
-      theme="base"
-      size="small"
-      variant="icon"
-      intent={intent}
+      onPress={() => openSidePeek({ key: SidePeekEnum.hotelDetails, hotelId })}
+      size="Small"
+      variant="Text"
+      color="Inverted"
       wrapping
-      className={styles.toggle}
+      typography="Body/Paragraph/mdBold"
     >
       {intl.formatMessage({
         defaultMessage: "See hotel details",
       })}
-      <MaterialIcon icon="chevron_right" size={14} color="Icon/Inverted" />
+      <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
     </Button>
   )
 }
diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Header/header.module.css b/apps/scandic-web/components/HotelReservation/EnterDetails/Header/header.module.css
index 73a55d5ba..ae46f3407 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Header/header.module.css
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Header/header.module.css
@@ -15,7 +15,12 @@
 
 .wrapper {
   position: relative;
-  background-color: rgba(57, 57, 57, 0.5);
+  background: linear-gradient(
+    60deg,
+    rgb(0 0 0 / 25%) 0%,
+    rgb(0 0 0 / 50%) 50%,
+    rgb(0 0 0 / 75%) 100%
+  );
   width: 100dvw;
 }
 
@@ -25,15 +30,15 @@
   justify-content: center;
   align-items: flex-start;
   max-width: var(--max-width-page);
-  gap: var(--Spacing-x2);
-  padding: var(--Spacing-x3) 0;
+  gap: var(--Space-x05);
+  padding: var(--Space-x3) 0;
   margin: 0 auto;
 }
 
 .titleContainer {
   display: flex;
   flex-direction: column;
-  gap: var(--Spacing-x-half);
+  gap: var(--Space-x05);
 }
 
 .mobileTitle {
@@ -56,20 +61,16 @@
 .address {
   display: none;
   flex-wrap: wrap;
-  column-gap: var(--Spacing-x-one-and-half);
+  column-gap: var(--Space-x15);
   font-style: normal;
 }
 
-.toggle {
-  padding: 0px !important;
-}
-
 @media (min-width: 768px) {
   .address {
     display: flex;
   }
   .container {
-    padding: var(--Spacing-x3) 0;
+    padding: var(--Space-x3) 0;
   }
   .mobileTitle {
     display: none;
@@ -81,6 +82,6 @@
 
 @media screen and (min-width: 1367px) {
   .container {
-    padding: var(--Spacing-x6) 0;
+    padding: var(--Space-x6) 0;
   }
 }
diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek.tsx
index 3ca526871..35bd7dbb6 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/ToggleSidePeek.tsx
@@ -2,19 +2,17 @@
 
 import { useIntl } from "react-intl"
 
+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 { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
 import type { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps"
 
 export default function ToggleSidePeek({
   hotelId,
   roomTypeCode,
-  intent = "textInverted",
   title,
 }: ToggleSidePeekProps) {
   const intl = useIntl()
@@ -22,21 +20,19 @@ export default function ToggleSidePeek({
 
   return (
     <Button
-      onClick={() =>
+      onPress={() =>
         openSidePeek({ key: SidePeekEnum.roomDetails, hotelId, roomTypeCode })
       }
-      theme="base"
-      size="small"
-      variant="icon"
-      intent={intent}
+      size="Small"
+      variant="Text"
       wrapping
+      typography="Body/Paragraph/mdBold"
     >
-      {title
-        ? title
-        : intl.formatMessage({
-            defaultMessage: "See room details",
-          })}
-      <MaterialIcon icon="chevron_right" size={14} color="CurrentColor" />
+      {title ||
+        intl.formatMessage({
+          defaultMessage: "See room details",
+        })}
+      <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
     </Button>
   )
 }
diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx
index eb66c567a..737e230c9 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/SelectedRoom/index.tsx
@@ -4,13 +4,12 @@ import { useRouter } from "next/navigation"
 import { useTransition } from "react"
 import { useIntl } from "react-intl"
 
+import { Button } from "@scandic-hotels/design-system/Button"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 
 import { selectRate } from "@/constants/routes/hotelReservation"
 import { useEnterDetailsStore } from "@/stores/enter-details"
 
-import Button from "@/components/TempDesignSystem/Button"
-import Caption from "@/components/TempDesignSystem/Text/Caption"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { useRoomContext } from "@/contexts/Details/Room"
@@ -76,25 +75,22 @@ export default function SelectedRoom() {
             )}
           </Subtitle>
           <Button
-            variant="icon"
-            intent="text"
-            size="small"
-            onClick={changeRoom}
-            disabled={isPending}
+            variant="Text"
+            size="Small"
+            onPress={changeRoom}
+            isDisabled={isPending}
+            typography="Body/Supporting text (caption)/smBold"
           >
-            <MaterialIcon icon="edit_square" color="CurrentColor" />
-            <Caption color="burgundy" type="bold">
-              {intl.formatMessage({
-                defaultMessage: "Change",
-              })}
-            </Caption>
+            <MaterialIcon icon="edit_square" size={20} color="CurrentColor" />
+            {intl.formatMessage({
+              defaultMessage: "Change",
+            })}
           </Button>
         </div>
         {room.roomTypeCode && (
           <div className={styles.details}>
             <ToggleSidePeek
               hotelId={hotelId}
-              intent="text"
               roomTypeCode={room.roomTypeCode}
             />
           </div>
diff --git a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Details/ToggleSidePeek.tsx b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Details/ToggleSidePeek.tsx
index 608fcb3f1..5ca3b0c52 100644
--- a/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Details/ToggleSidePeek.tsx
+++ b/apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Details/ToggleSidePeek.tsx
@@ -1,12 +1,12 @@
 "use client"
+
 import { useIntl } from "react-intl"
 
+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 { SidePeekEnum } from "@/types/components/hotelReservation/sidePeek"
 import type { ToggleSidePeekProps } from "@/types/components/hotelReservation/toggleSidePeekProps"
 
@@ -26,14 +26,13 @@ export default function ToggleSidePeek({
           roomTypeCode,
         })
       }
-      intent="text"
-      size="small"
-      theme="base"
-      variant="icon"
+      size="Small"
+      variant="Text"
       wrapping
+      typography="Body/Supporting text (caption)/smBold"
     >
       {intl.formatMessage({ defaultMessage: "Room details" })}
-      <MaterialIcon icon="chevron_right" size={14} />
+      <MaterialIcon icon="chevron_right" size={20} color="CurrentColor" />
     </Button>
   )
 }
diff --git a/apps/scandic-web/types/components/hotelReservation/toggleSidePeekProps.ts b/apps/scandic-web/types/components/hotelReservation/toggleSidePeekProps.ts
index 3e63b9e0e..c3cd56cc1 100644
--- a/apps/scandic-web/types/components/hotelReservation/toggleSidePeekProps.ts
+++ b/apps/scandic-web/types/components/hotelReservation/toggleSidePeekProps.ts
@@ -3,7 +3,6 @@ import type { SafeUser } from "@/types/user"
 export type ToggleSidePeekProps = {
   hotelId: string
   roomTypeCode?: string
-  intent?: "text" | "textInverted"
   title?: string
   user?: SafeUser
   confirmationNumber?: string