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

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