Update relative timer rendering to change timer button text

Update finish session button variant
miroapp · Dec 13, 2023 · 7db90a6 · 7db90a6
1 parent eef3647
commit 7db90a6
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 7 deletions.
diff --git 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
@@ -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
@@ -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;