Merged in fix/STAY-37-arrow-margin (pull request #3236)

Fix/STAY-37 arrow margin

* fix: mobile padding on button

* fix: remove deprecated button and fix border radius on booking widget button


Approved-by: Erik Tiekstra

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/RoomDetailsSidePeek.tsx

@@ -3,8 +3,8 @@
 import { useState } 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 { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
 import SidePeekSelfControlled from "@scandic-hotels/design-system/SidePeekSelfControlled"
 
 import { useMyStayStore } from "@/stores/my-stay"
@@ -29,10 +29,9 @@ export default function RoomDetailsSidePeek({
   return (
     <>
       <Button
-        intent="text"
+        variant="Text"
-        size="small"
+        size="Small"
-        theme="base"
+        color="Primary"
-        variant="icon"
         wrapping
         onPress={() => {
           setIsOpen(true)

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/index.tsx

@@ -74,7 +74,9 @@ export default function SingleRoom({ user }: RoomProps) {
             </div>
             <BookingInformation />
           </div>
-          <PriceDetails />
+          <div className={styles.priceDetailsButton}>
+            <PriceDetails />
+          </div>
           <div className={styles.guestDetailsMobileWrapper}>
             <GuestDetails
               refId={refId}

apps/scandic-web/components/HotelReservation/MyStay/Rooms/SingleRoom/room.module.css

@@ -57,6 +57,10 @@
   display: none;
 }
 
+.priceDetailsButton {
+  padding: 0 var(--Space-x2);
+}
+
 @media (min-width: 768px) {
   .room {
     background-color: transparent;
@@ -86,4 +90,8 @@
     display: block;
     margin-top: auto;
   }
+
+  .priceDetailsButton {
+    padding: 0;
+  }
 }

packages/booking-flow/lib/components/BookingWidget/MobileToggleButton/button.module.css

@@ -14,7 +14,8 @@
   /* To avoid this "flash" the styling is set to transparent) */
   /* It is a non-standard css proprty, so shouldn't have too much of an effect on accessibility. */
   -webkit-tap-highlight-color: transparent;
-  border-radius: 10px;
+  border-bottom-right-radius: 10px;
+  border-bottom-left-radius: 10px;
 }
 
 .complete {