PF-1391 - Adding breakout room example app

examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.css

@@ -5,20 +5,6 @@
   gap: 1em;
 }
 
-.container {
-  display: flex;
-  flex-direction: column;
-  gap: 1em;
-  align-items: center;
-  flex: 1;
-}
-
-.breakout-controls {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
 .validation-messages {
   background: #f5f5f3;
   padding: 1em;

examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx

@@ -10,23 +10,16 @@ import {
   useSelectedItems,
   useTimer,
 } from "../../hooks";
-import { convertTime, formatDisplayTime, isUser } from "../../utils";
-import { RoomConfig } from "../RoomConfig/RoomConfig";
-import { DEFAULT_TIME, Timer } from "../Timer/Timer";
-import {
-  DropdownMenu,
-  IconButton,
-  IconPlus,
-  IconHandFilled,
-  IconDotsThreeVertical,
-  Button,
-} from "@mirohq/design-system";
+import { formatDisplayTime, isUser } from "../../utils";
+import { DEFAULT_TIME } from "../Timer/Timer";
+import { Button } from "@mirohq/design-system";
 
-import "./BreakoutManager.css";
 import { BreakoutStarter } from "../BreakoutStarter";
 import { WaitingList } from "../WaitingList";
 import { RoomsManager } from "../RoomsManager";
 
+import "./BreakoutManager.css";
+
 export const BreakoutManager: React.FC = () => {
   const { breakout, rooms, isFacilitator, ...service } = useBreakout();
   const onlineUsers = useOnlineUsers();

examples/breakout-rooms/src/components/BreakoutStarter/BreakoutStarter.css

@@ -21,7 +21,7 @@
   width: 100%;
 }
 
-.starter-action h5 {
+.starter-action .starter-action-title {
   font-size: 1em;
   font-weight: 600;
   line-height: 1.5em;

examples/breakout-rooms/src/components/BreakoutStarter/BreakoutStarter.tsx

@@ -1,9 +1,10 @@
 import { IconButton, IconPlus } from "@mirohq/design-system";
 import React from "react";
 
-import "./BreakoutStarter.css";
 import { WaitingIcon } from "../WaitingIcon";
 
+import "./BreakoutStarter.css";
+
 type Props = {
   onAddGroup: () => void;
 };
@@ -20,7 +21,7 @@ export const BreakoutStarter: React.FC<Props> = ({ onAddGroup }) => {
         >
           <IconPlus />
         </IconButton>
-        <h5>Create a room to get started</h5>
+        <h5 className="starter-action-title">Create a room to get started</h5>
       </div>
 
       <WaitingIcon />

examples/breakout-rooms/src/components/RoomConfig/RoomConfig.css

@@ -1,19 +1,4 @@
-.rooms-container {
-  display: flex;
-  flex-direction: column;
-  max-height: 25em;
-  min-height: 10em;
-  gap: 0.5em;
-  overflow: auto;
-  width: 100%;
-  height: 100%;
-}
-
-.rooms-container > p {
-  text-align: center;
-}
-
-.room-container {
+.room {
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -31,7 +16,7 @@
   align-items: center;
 }
 
-.room-container h3 {
+.room .room-controls-title {
   margin: 0;
   margin-right: auto;
   white-space: nowrap;

examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx

@@ -11,9 +11,9 @@ import {
 import { OnlineUserInfo } from "@mirohq/websdk-types";
 
 import type { Participant, Room } from "../../types";
+import { Avatar } from "../Avatar";
 
 import "./RoomConfig.css";
-import { Avatar } from "../Avatar";
 
 export type Props = {
   room: Room;
@@ -36,9 +36,11 @@ export const RoomConfig: React.FunctionComponent<Props> = ({
   onRemoveParticipant,
 }) => {
   return (
-    <div key={room.id} className="room-container">
+    <div key={room.id} className="room">
       <div className="room-controls">
-        <h3 title={room.name}>{room.name}</h3>
+        <h3 className="room-controls-title" title={room.name}>
+          {room.name}
+        </h3>
         <IconButton
           label="Select frame"
           variant="ghost"

examples/breakout-rooms/src/components/RoomsManager/RoomsManager.css

@@ -0,0 +1,24 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  align-items: center;
+  flex: 1;
+}
+
+.rooms-container {
+  display: flex;
+  flex-direction: column;
+  max-height: 24em;
+  min-height: 10em;
+  gap: 0.5em;
+  overflow: auto;
+  width: 100%;
+}
+
+.breakout-controls {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

examples/breakout-rooms/src/components/RoomsManager/RoomsManager.tsx

@@ -9,9 +9,12 @@ import {
   IconHandFilled,
   IconPlus,
 } from "@mirohq/design-system";
+
 import { Timer } from "../Timer";
 import { Room } from "../../types";
 
+import "./RoomsManager.css";
+
 export type Props = {
   rooms: Room[];
   selectedRoom?: Room;
@@ -59,42 +62,42 @@ export const RoomsManager: React.FC<Props> = ({
             onRemoveParticipant={onRemoveParticipant}
           />
         ))}
-        <div className="breakout-controls">
-          <IconButton
-            label="Add a room"
-            variant="solid-prominent"
-            css={{ borderRadius: "100%" }}
-            onClick={onAddGroup}
-          >
-            <IconPlus />
-          </IconButton>
+      </section>
+      <div className="breakout-controls">
+        <IconButton
+          label="Add a room"
+          variant="solid-prominent"
+          css={{ borderRadius: "100%" }}
+          onClick={onAddGroup}
+        >
+          <IconPlus />
+        </IconButton>
 
-          {canUseTimer && (
-            <Timer
-              onSet={onSetTime}
-              step={convertTime(1, "milliseconds", "minutes")}
-            />
-          )}
+        {canUseTimer && (
+          <Timer
+            onSet={onSetTime}
+            step={convertTime(1, "milliseconds", "minutes")}
+          />
+        )}
 
-          {isFacilitator && (
-            <DropdownMenu>
-              <DropdownMenu.Trigger asChild>
-                <IconDotsThreeVertical />
-              </DropdownMenu.Trigger>
-              <DropdownMenu.Content>
-                <>
-                  <DropdownMenu.Item onClick={() => onReleaseFacilitator()}>
-                    <DropdownMenu.IconSlot>
-                      <IconHandFilled />
-                    </DropdownMenu.IconSlot>
-                    Release facilitator role
-                  </DropdownMenu.Item>
-                </>
-              </DropdownMenu.Content>
-            </DropdownMenu>
-          )}
-        </div>
-      </section>
+        {isFacilitator && (
+          <DropdownMenu>
+            <DropdownMenu.Trigger asChild>
+              <IconDotsThreeVertical />
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content>
+              <>
+                <DropdownMenu.Item onClick={() => onReleaseFacilitator()}>
+                  <DropdownMenu.IconSlot>
+                    <IconHandFilled />
+                  </DropdownMenu.IconSlot>
+                  Release facilitator role
+                </DropdownMenu.Item>
+              </>
+            </DropdownMenu.Content>
+          </DropdownMenu>
+        )}
+      </div>
     </div>
   );
 };