From 7db90a6627b5cdd2e8f982da2542399ca60d2536 Mon Sep 17 00:00:00 2001
From: Daniel Fosco <daniel.pe@miro.com>
Date: Wed, 13 Dec 2023 12:48:41 +0100
Subject: [PATCH] Update relative timer rendering to change timer button text
 Update finish session button variant

---
 .../src/components/BreakoutManager/BreakoutManager.tsx | 10 +++++-----
 examples/breakout-rooms/src/components/Timer/Timer.tsx |  4 +++-
 examples/breakout-rooms/src/utils.ts                   |  2 +-
 3 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx b/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx
index 5f712000c..283585556 100644
--- a/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx
+++ b/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx
@@ -68,13 +68,13 @@ export const BreakoutManager: React.FC = () => {
       if (frame) {
         await service.setRoomTarget(selectedRoom, frame.id);
         await miro.board.notifications.showInfo(
-          `${frame.title} has been set as starting point for the room.`,
+          `${frame.title} is set as starting point for the room`,
         );
         await miro.board.deselect({ id: frame.id });
         setSelectedRoom(undefined);
       } else {
         await miro.board.notifications.showError(
-          "We only support frames as starting point for now",
+          "Only frames are supported as starting point for rooms",
         );
       }
     };
@@ -87,7 +87,7 @@ export const BreakoutManager: React.FC = () => {
       const handleNudge = async (currentUser?: Json) => {
         if (isUser(currentUser)) {
           await miro.board.notifications.showInfo(
-            `<strong>${currentUser?.name}</strong> is waiting to start the session`,
+            `<strong>${currentUser?.name}</strong> is waiting for you to start the session`,
           );
         }
       };
@@ -259,10 +259,10 @@ export const BreakoutManager: React.FC = () => {
           {breakout?.state === "started" ? (
             <Button
               onClick={() => handleStopSession()}
-              variant="solid-danger"
+              variant="outline-danger"
               size="x-large"
             >
-              Stop session
+              Finish session
               {canUseTimer && timer.state === "started"
                 ? ` (${formatDisplayTime(timer.restDuration)})`
                 : null}
diff --git a/examples/breakout-rooms/src/components/Timer/Timer.tsx b/examples/breakout-rooms/src/components/Timer/Timer.tsx
index 560bdde2d..51f56b6b5 100644
--- a/examples/breakout-rooms/src/components/Timer/Timer.tsx
+++ b/examples/breakout-rooms/src/components/Timer/Timer.tsx
@@ -98,6 +98,8 @@ export const Timer: React.FunctionComponent<Props> = ({
     setTimeChanged(true);
   };
 
+  const minutes = formatTime(time) > 1 ? "minutes" : "minute";
+
   return (
     <>
       <DropdownMenu onClose={() => handleSetTime()}>
@@ -107,7 +109,7 @@ export const Timer: React.FunctionComponent<Props> = ({
               <IconTimer />
             </Button.IconSlot>
             <Button.Label>
-              {timeChanged ? formatTime(time) : "Set timer"}
+              {timeChanged ? `${formatTime(time)} ${minutes}` : "Set timer"}
             </Button.Label>
           </Button>
         </DropdownMenu.Trigger>
diff --git a/examples/breakout-rooms/src/utils.ts b/examples/breakout-rooms/src/utils.ts
index d5ceee100..c2da64936 100644
--- a/examples/breakout-rooms/src/utils.ts
+++ b/examples/breakout-rooms/src/utils.ts
@@ -34,7 +34,7 @@ export const formatTime = (
   value: number,
   unit: TimeUnit = "milliseconds",
 ): string => {
-  const formatter = new Intl.RelativeTimeFormat("en", { numeric: "auto" });
+  const formatter = new Intl.NumberFormat("en");
   let formattedValue = value;
   let formattedUnit = unit;