feat(BOOK-743): Replaced deprecated Button component

Approved-by: Bianca Widstam

packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/DesktopSummary.tsx

@@ -3,7 +3,7 @@ import { useIntl } from "react-intl"
 
 import { RateEnum } from "@scandic-hotels/common/constants/rate"
 import { formatPrice } from "@scandic-hotels/common/utils/numberFormatting"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useIsLoggedIn } from "../../../../hooks/useIsLoggedIn"
@@ -215,9 +215,10 @@ export function DesktopSummary({
           </div>
           <Button
             className={styles.continueButton}
-            disabled={!isAllRoomsSelected || isSubmitting}
-            theme="base"
+            isDisabled={!isAllRoomsSelected}
+            isPending={isSubmitting}
             type="submit"
+            variant="Primary"
           >
             {intl.formatMessage({
               id: "common.continue",

packages/booking-flow/lib/components/SelectRate/RoomsContainer/RateSummary/rateSummary.module.css

@@ -78,7 +78,6 @@
 
 .continueButton {
   margin-left: auto;
-  height: fit-content;
   width: 100%;
   min-width: 140px;
 }

packages/booking-flow/lib/components/SelectRate/RoomsContainer/Rooms/MultiRoomWrapper/index.tsx

@@ -2,8 +2,7 @@ import { useEffect } from "react"
 import { useIntl } from "react-intl"
 
 import useStickyPosition from "@scandic-hotels/common/hooks/useStickyPosition"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import { Button } from "@scandic-hotels/design-system/Button"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import { useSelectRateContext } from "../../../../../contexts/SelectRate/SelectRateContext"
@@ -122,23 +121,15 @@ export function MultiRoomWrapper({ children, isMultiRoom, roomIndex }: Props) {
           )}
           {selectedRate && isActiveRoom ? (
             <Button
-              intent="text"
-              onClick={() => {
-                setActiveRoom("deselect")
-              }}
-              size="medium"
-              theme="base"
-              variant="icon"
+              variant="Text"
+              onPress={() => setActiveRoom("deselect")}
+              size="md"
+              trailingIconName="keyboard_arrow_up"
             >
               {intl.formatMessage({
                 id: "common.close",
                 defaultMessage: "Close",
               })}
-              <MaterialIcon
-                icon="keyboard_arrow_up"
-                size={20}
-                color="CurrentColor"
-              />
             </Button>
           ) : null}
         </div>