Refactor reservation pause banner

Previously it was not clear if a pause was active or not, and a toggle button was used to open a modal for changing settings.

src/apps/reservation-list/list/reservation-list.dev.tsx

@@ -185,14 +185,22 @@ export default {
       defaultValue: "Pause your reservations",
       control: { type: "text" }
     },
+    reservationListPauseReservationOnHoldText: {
+      defaultValue: "Your reservations are paused",
+      control: { type: "text" }
+    },
     reservationListOnHoldAriaText: {
       defaultValue:
         "Reservations have been paused in the following time span: ",
       control: { type: "text" }
     },
     reservationListPauseReservationAriaModalText: {
       defaultValue:
-        "This button opens a modal that covers the entire page and contains the possibility to pause physical reservations",
+        "Opens a modal that covers the entire page where it is possible to pause physical reservations",
+      control: { type: "text" }
+    },
+    reservationListPauseReservationButtonText: {
+      defaultValue: "Settings",
       control: { type: "text" }
     },
     pauseReservationModalAriaDescriptionText: {
@@ -234,6 +242,10 @@ export default {
       defaultValue: "Save",
       control: { type: "text" }
     },
+    pauseReservationModalCancelButtonLabelText: {
+      defaultValue: "Cancel pause",
+      control: { type: "text" }
+    },
     showMoreText: {
       name: "Show more Text",
       defaultValue: "show more",

src/apps/reservation-list/list/reservation-list.entry.tsx

@@ -46,7 +46,9 @@ export interface ReservationListTextProps {
   reservationListAvailableInText: string;
   reservationDetailsExpiresTitleText: string;
   reservationDetailsOthersInQueueText: string;
+  reservationListPauseReservationButtonText: string;
   reservationListPauseReservationText: string;
+  reservationListPauseReservationOnHoldText: string;
   reservationListOnHoldAriaText: string;
   reservationListPauseReservationAriaModalText: string;
   pauseReservationModalAriaDescriptionText: string;
@@ -58,6 +60,7 @@ export interface ReservationListTextProps {
   pauseReservationModalBelowInputsTextText: string;
   pauseReservationModalLinkText: string;
   pauseReservationModalSaveButtonLabelText: string;
+  pauseReservationModalCancelButtonLabelText: string;
   reservationListReadyForPickupTitleText: string;
   reservationListReadyForPickupEmptyText: string;
   reservationListPhysicalReservationsEmptyText: string;

src/apps/reservation-list/list/reservation-pause-toggler.tsx

@@ -40,7 +40,9 @@ const ReservationPauseToggler: FC<ReservationPauseTogglerProps> = ({
           <img src={ReservationsIcon} alt="" />
         </div>
         <div className="dpl-pause-reservation-component__flex__text">
-          {t("reservationListPauseReservationText")}
+          {onHoldDates
+            ? t("reservationListPauseReservationOnHoldText")
+            : t("reservationListPauseReservationText")}
         </div>
         {onHoldDates && (
           <span
@@ -55,10 +57,10 @@ const ReservationPauseToggler: FC<ReservationPauseTogglerProps> = ({
             aria-label={t("reservationListPauseReservationAriaModalText")}
             type="button"
             onClick={openPauseReservationModal}
-            className={`dpl-toggle-button dpl-toggle-button--${
-              !onHoldDates ? "in" : ""
-            }active`}
-          />
+            className="btn-primary btn-filled btn-small"
+          >
+            {t("reservationListPauseReservationButtonText")}
+          </button>
         </div>
       </div>
     </div>

src/core/storybook/reservationListArgs.ts

@@ -163,13 +163,21 @@ export default {
     defaultValue: "Pause your reservations",
     control: { type: "text" }
   },
+  reservationListPauseReservationOnHoldText: {
+    defaultValue: "Your reservations are paused",
+    control: { type: "text" }
+  },
   reservationListOnHoldAriaText: {
     defaultValue: "Reservations have been paused in the following time span: ",
     control: { type: "text" }
   },
   reservationListPauseReservationAriaModalText: {
     defaultValue:
-      "This button opens a modal that covers the entire page and contains the possibility to pause physical reservations",
+      "Opens a modal that covers the entire page where it is possible to pause physical reservations",
+    control: { type: "text" }
+  },
+  reservationListPauseReservationButtonText: {
+    defaultValue: "Settings",
     control: { type: "text" }
   },
   pauseReservationModalAriaDescriptionText: {