From 05b414040ee0afdd5270bdc824795aec9d9347f1 Mon Sep 17 00:00:00 2001 From: Daniel Fosco Date: Tue, 12 Dec 2023 15:23:30 +0100 Subject: [PATCH 01/27] Fix UI on empty state button --- .../BreakoutStarter/BreakoutStarter.css | 47 ++++++++++++++----- .../BreakoutStarter/BreakoutStarter.tsx | 15 ++---- examples/breakout-rooms/src/styles.css | 2 +- 3 files changed, 42 insertions(+), 22 deletions(-) diff --git a/examples/breakout-rooms/src/components/BreakoutStarter/BreakoutStarter.css b/examples/breakout-rooms/src/components/BreakoutStarter/BreakoutStarter.css index 164ab0bd8..aa7119f72 100644 --- a/examples/breakout-rooms/src/components/BreakoutStarter/BreakoutStarter.css +++ b/examples/breakout-rooms/src/components/BreakoutStarter/BreakoutStarter.css @@ -11,21 +11,46 @@ } .starter-action { - background: #f2f4fc; - border-radius: 0.25em; - padding: 1em; + background: var(--blue200); + border: none; + border-radius: var(--border-radius-medium); + cursor: default; display: flex; + padding: 1em; gap: 1em; align-items: center; align-self: flex-start; width: 100%; -} -.starter-action .starter-action-title { - font-size: 1em; - font-weight: 600; - line-height: 1.5em; - text-align: left; - color: #3859ff; - margin: 0; + & .starter-action-title { + font-size: 1.25em; + font-weight: 600; + line-height: 1.5em; + text-align: left; + color: var(--blue700); + margin: 0; + } + + &:hover { + background: var(--blue300); + cursor: pointer; + + & .starter-action-title { + color: var(--blue900); + } + + & .rounded-plus { + background-color: var(--blue900); + } + } } + +.rounded-plus { + border-radius: var(--border-radius-circle); + background-color: var(--blue700); + padding: 8px; + + & svg { + color: var(--white); + } +} \ No newline at end of file diff --git a/examples/breakout-rooms/src/components/BreakoutStarter/BreakoutStarter.tsx b/examples/breakout-rooms/src/components/BreakoutStarter/BreakoutStarter.tsx index ca98966d1..4dbc949dc 100644 --- a/examples/breakout-rooms/src/components/BreakoutStarter/BreakoutStarter.tsx +++ b/examples/breakout-rooms/src/components/BreakoutStarter/BreakoutStarter.tsx @@ -1,4 +1,4 @@ -import { IconButton, IconPlus } from "@mirohq/design-system"; +import { IconPlus } from "@mirohq/design-system"; import React from "react"; import { WaitingIcon } from "../WaitingIcon"; @@ -12,17 +12,12 @@ type Props = { export const BreakoutStarter: React.FC = ({ onAddGroup }) => { return (
-
- +
+
diff --git a/examples/breakout-rooms/src/styles.css b/examples/breakout-rooms/src/styles.css index f1e02e887..de9005867 100644 --- a/examples/breakout-rooms/src/styles.css +++ b/examples/breakout-rooms/src/styles.css @@ -21,4 +21,4 @@ img { .waiting-icon { width: 2.5em; -} +} \ No newline at end of file From 66f337ccaf7ea101bcb15f944de33899f6595394 Mon Sep 17 00:00:00 2001 From: Daniel Fosco Date: Tue, 12 Dec 2023 15:49:53 +0100 Subject: [PATCH 02/27] Fix list of validations to always show missing steps --- .../BreakoutManager/BreakoutManager.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx b/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx index 1d42d9f89..c3ed46ff3 100644 --- a/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx +++ b/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx @@ -183,25 +183,31 @@ export const BreakoutManager: React.FC = () => { }); }; + const valRooms: string = "Add rooms to your session"; + const valUsers: string = "Add users to each room"; + const valFrames: string = "Set a frame to each room"; + const validations: string[] = []; if (!breakout?.rooms.length) { - validations.push("Add rooms to your session"); + validations.push(valRooms); + validations.push(valUsers); + validations.push(valFrames); } const allRoomsWithParticipants = breakout?.rooms.every( (room) => room.participants.length > 0, ); - if (!allRoomsWithParticipants) { - validations.push("Add users to each room"); + if (!allRoomsWithParticipants && !validations.includes(valUsers)) { + validations.push(valUsers); } const allRoomsWithTargets = breakout?.rooms.every((room) => Boolean(room.targetId), ); - if (!allRoomsWithTargets) { - validations.push("Set a frame to each room"); + if (!allRoomsWithTargets && !validations.includes(valFrames)) { + validations.push(valFrames); } const canStartSession = validations.length < 1; From dec2e913e352f0d29effbc2a0590bea9f4e066b2 Mon Sep 17 00:00:00 2001 From: Daniel Fosco Date: Tue, 12 Dec 2023 15:56:31 +0100 Subject: [PATCH 03/27] Improve style in validations --- .../src/components/BreakoutManager/BreakoutManager.css | 10 ++++++++-- .../src/components/BreakoutManager/BreakoutManager.tsx | 4 ++-- 2 files changed, 10 insertions(+), 4 deletions(-) diff --git a/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.css b/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.css index 9cfcc545f..f3f20e7fe 100644 --- a/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.css +++ b/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.css @@ -10,7 +10,7 @@ padding: 1em; } -.validation-messages .validatino-messages-title { +.validation-messages .validation-messages-title { font-size: 1em; font-weight: 600; line-height: 1em; @@ -18,8 +18,14 @@ color: #656b81; } -.validation-messages .validatino-messages-items { +.validation-messages .validation-messages-items { font-size: 0.9em; + padding-left: 1.6em; + margin-bottom: 0; +} + +.validation-messages-items li + li { + margin-top: var(--space-xsmall); } .toolbar { diff --git a/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx b/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx index c3ed46ff3..6baeb2b16 100644 --- a/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx +++ b/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx @@ -245,10 +245,10 @@ export const BreakoutManager: React.FC = () => { {isEditable && validations.length > 0 ? (
-
+
Before starting the session:
-
    +
      {validations.map((message) => (
    • {message}
      • ))} From 457cb3556f84994e33ab607b9c8c5daa97abbf55 Mon Sep 17 00:00:00 2001 From: Daniel Fosco Date: Tue, 12 Dec 2023 16:05:27 +0100 Subject: [PATCH 04/27] Make copy in user(s) splitting block dynamic --- .../breakout-rooms/src/components/RoomConfig/RoomConfig.tsx | 2 +- .../breakout-rooms/src/components/WaitingList/WaitingList.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx b/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx index 6ab4d318a..66695cd8d 100644 --- a/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx +++ b/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx @@ -88,7 +88,7 @@ export const RoomConfig: React.FunctionComponent = ({ {unassignedUsers.length ? (
      - Users not in the room + Users not in rooms {unassignedUsers.map((user) => ( = ({ return (
      - {unassignedUsers.length} user(s) not in rooms + {unassignedUsers.length} {unassignedUsers.length > 1 ? 'users' : 'user'} not in rooms
      +
      -
diff --git a/examples/breakout-rooms/src/utils.ts b/examples/breakout-rooms/src/utils.ts index d5fb77ca0..d5ceee100 100644 --- a/examples/breakout-rooms/src/utils.ts +++ b/examples/breakout-rooms/src/utils.ts @@ -45,14 +45,15 @@ export const formatTime = ( formattedValue = seconds / 60; formattedUnit = "minutes"; } - if (formattedValue >= 60) { - formattedValue = formattedValue / 60; - formattedUnit = "hours"; - } - if (formattedValue >= 24) { - formattedValue = formattedValue / 24; - formattedUnit = "days"; - } + // Commented for possible future use + // if (formattedValue >= 60) { + // formattedValue = formattedValue / 60; + // formattedUnit = "hours"; + // } + // if (formattedValue >= 24) { + // formattedValue = formattedValue / 24; + // formattedUnit = "days"; + // } return formatter.format(formattedValue, formattedUnit); }; From 88e3cd5f9dd5cc16c54adafdfa00890fddd9cbff Mon Sep 17 00:00:00 2001 From: Daniel Fosco Date: Tue, 12 Dec 2023 18:04:00 +0100 Subject: [PATCH 12/27] CSS fixes --- .../src/components/BreakoutManager/BreakoutManager.css | 7 ++++++- .../src/components/RoomsManager/RoomsManager.css | 1 - 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.css b/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.css index f3f20e7fe..11cc2ea0e 100644 --- a/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.css +++ b/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.css @@ -20,7 +20,7 @@ .validation-messages .validation-messages-items { font-size: 0.9em; - padding-left: 1.6em; + padding-left: 1em; margin-bottom: 0; } @@ -28,6 +28,11 @@ margin-top: var(--space-xsmall); } +.validation-messages-items li::marker { + color: var(--indigo500); + padding-left: 1em; +} + .toolbar { display: flex; flex-direction: column; diff --git a/examples/breakout-rooms/src/components/RoomsManager/RoomsManager.css b/examples/breakout-rooms/src/components/RoomsManager/RoomsManager.css index 9e965d2b9..982be4392 100644 --- a/examples/breakout-rooms/src/components/RoomsManager/RoomsManager.css +++ b/examples/breakout-rooms/src/components/RoomsManager/RoomsManager.css @@ -9,7 +9,6 @@ .rooms-container { display: flex; flex-direction: column; - max-height: 24em; gap: 0.5em; overflow: auto; width: 100%; From d1ca73756898753a47149e3c9b5818585d2a9812 Mon Sep 17 00:00:00 2001 From: Daniel Fosco Date: Wed, 13 Dec 2023 10:29:49 +0100 Subject: [PATCH 13/27] Remove CSS nesting --- .../BreakoutStarter/BreakoutStarter.css | 36 +++++++++---------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/examples/breakout-rooms/src/components/BreakoutStarter/BreakoutStarter.css b/examples/breakout-rooms/src/components/BreakoutStarter/BreakoutStarter.css index aa7119f72..482f3b354 100644 --- a/examples/breakout-rooms/src/components/BreakoutStarter/BreakoutStarter.css +++ b/examples/breakout-rooms/src/components/BreakoutStarter/BreakoutStarter.css @@ -21,28 +21,28 @@ align-items: center; align-self: flex-start; width: 100%; +} - & .starter-action-title { - font-size: 1.25em; - font-weight: 600; - line-height: 1.5em; - text-align: left; - color: var(--blue700); - margin: 0; - } +.starter-action .starter-action-title { + font-size: 1.25em; + font-weight: 600; + line-height: 1.5em; + text-align: left; + color: var(--blue700); + margin: 0; +} - &:hover { - background: var(--blue300); - cursor: pointer; +.starter-action:hover { + background: var(--blue300); + cursor: pointer; +} - & .starter-action-title { - color: var(--blue900); - } +.starter-action:hover .starter-action-title { + color: var(--blue900); +} - & .rounded-plus { - background-color: var(--blue900); - } - } +.starter-action:hover .rounded-plus { + background-color: var(--blue900); } .rounded-plus { From cd9a3048d90715bf8f612751687a507f9a228f21 Mon Sep 17 00:00:00 2001 From: Daniel Fosco Date: Wed, 13 Dec 2023 10:46:19 +0100 Subject: [PATCH 14/27] Update toast copy --- .../src/components/BreakoutManager/BreakoutManager.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx b/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx index 8780ca578..e7f43f5d7 100644 --- a/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx +++ b/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx @@ -68,7 +68,7 @@ export const BreakoutManager: React.FC = () => { if (frame) { await service.setRoomTarget(selectedRoom, frame.id); await miro.board.notifications.showInfo( - `Frame "${frame.title}" has been selected as starting point.`, + `${frame.title} has been set as starting point for the room.`, ); await miro.board.deselect({ id: frame.id }); setSelectedRoom(undefined); From 89f65b58d3aeb72a9016ac382640f005cd2e965e Mon Sep 17 00:00:00 2001 From: Daniel Fosco Date: Wed, 13 Dec 2023 12:20:47 +0100 Subject: [PATCH 15/27] Update examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx Co-authored-by: Mettin Parzinski --- .../src/components/BreakoutManager/BreakoutManager.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx b/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx index e7f43f5d7..78b797806 100644 --- a/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx +++ b/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx @@ -183,7 +183,7 @@ export const BreakoutManager: React.FC = () => { }); }; - const valRooms: string = "Add rooms to your session"; + const valRooms = "Add rooms to your session"; const valUsers: string = "Add users to each room"; const valFrames: string = "Set a frame to each room"; From e13d46381370a34984b8d2b85f85e317c376d3d0 Mon Sep 17 00:00:00 2001 From: Daniel Fosco Date: Wed, 13 Dec 2023 12:20:53 +0100 Subject: [PATCH 16/27] Update examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx Co-authored-by: Mettin Parzinski --- .../src/components/BreakoutManager/BreakoutManager.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx b/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx index 78b797806..5f712000c 100644 --- a/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx +++ b/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx @@ -185,7 +185,7 @@ export const BreakoutManager: React.FC = () => { const valRooms = "Add rooms to your session"; const valUsers: string = "Add users to each room"; - const valFrames: string = "Set a frame to each room"; + const valFrames = "Set a frame to each room"; const validations: string[] = []; if (!breakout?.rooms.length) { From 41bdd5969b30b406e1e02f42f9b74f44dad987cb Mon Sep 17 00:00:00 2001 From: Daniel Fosco Date: Wed, 13 Dec 2023 12:21:35 +0100 Subject: [PATCH 17/27] Update examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx Co-authored-by: Frederico Estrela --- .../breakout-rooms/src/components/RoomConfig/RoomConfig.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx b/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx index 3a4caa91d..63c7e88d7 100644 --- a/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx +++ b/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx @@ -53,7 +53,7 @@ export const RoomConfig: React.FunctionComponent = ({ {room.name} onSelectTarget(room)} From 848f836f2fefbf8a5936259137e36611b1dcbd8c Mon Sep 17 00:00:00 2001 From: Daniel Fosco Date: Wed, 13 Dec 2023 12:24:59 +0100 Subject: [PATCH 18/27] Iterate frame title rendering when set to room --- .../breakout-rooms/src/components/RoomConfig/RoomConfig.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx b/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx index 63c7e88d7..957a30ac2 100644 --- a/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx +++ b/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx @@ -46,6 +46,9 @@ export const RoomConfig: React.FunctionComponent = ({ } FetchFrame(); }, [room.targetId]); + + const renderedTitle = title ? `to ${title}` : 'frame'; + return (
@@ -53,7 +56,7 @@ export const RoomConfig: React.FunctionComponent = ({ {room.name} onSelectTarget(room)} From eef36471813755adf1199feba7f8b81dbb4c00bb Mon Sep 17 00:00:00 2001 From: Daniel Fosco Date: Wed, 13 Dec 2023 12:28:18 +0100 Subject: [PATCH 19/27] Update styles --- .../src/components/Avatar/Avatar.css | 6 +++--- .../BreakoutManager/BreakoutManager.css | 19 ++++++++++--------- .../BreakoutStarter/BreakoutStarter.css | 16 ++++++++-------- .../src/components/RoomConfig/RoomConfig.css | 8 ++++---- .../components/RoomsManager/RoomsManager.css | 4 ++-- .../components/WaitingList/WaitingList.css | 4 ++-- .../components/WaitingRoom/WaitingRoom.css | 4 ++-- 7 files changed, 31 insertions(+), 30 deletions(-) diff --git a/examples/breakout-rooms/src/components/Avatar/Avatar.css b/examples/breakout-rooms/src/components/Avatar/Avatar.css index 080f656fc..af0b02e43 100644 --- a/examples/breakout-rooms/src/components/Avatar/Avatar.css +++ b/examples/breakout-rooms/src/components/Avatar/Avatar.css @@ -1,13 +1,13 @@ .avatar { border-radius: 100%; flex-shrink: 0; - background: #817f99; + background: var(--indigo600); box-shadow: 0 0 0 6px var(--color, transparent); - outline: 4px solid #fff; + outline: 4px solid var(--white); width: 2.2em; height: 2.2em; font-size: 14px; - color: #fff; + color: var(--white); display: flex; justify-content: center; align-items: center; diff --git a/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.css b/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.css index 11cc2ea0e..a4776e21f 100644 --- a/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.css +++ b/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.css @@ -2,25 +2,26 @@ display: flex; height: 100%; flex-direction: column; - gap: 1em; + gap: var(--space-small); } .validation-messages { - background: #f5f5f3; - padding: 1em; + background: var(--indigo50); + border-radius: var(--border-radius-medium); + padding: var(--space-medium); } .validation-messages .validation-messages-title { font-size: 1em; font-weight: 600; - line-height: 1em; + line-height: var(--space-small); margin: 0; - color: #656b81; + color: var(--indigo600); } .validation-messages .validation-messages-items { font-size: 0.9em; - padding-left: 1em; + padding-left: var(--space-small); margin-bottom: 0; } @@ -30,19 +31,19 @@ .validation-messages-items li::marker { color: var(--indigo500); - padding-left: 1em; + padding-left: var(--space-small); } .toolbar { display: flex; flex-direction: column; justify-content: center; - gap: 1em; + gap: var(--space-small); } .toolbar button { justify-content: center; margin: 0; width: 100%; - padding: 1em; + padding: var(--space-small); } diff --git a/examples/breakout-rooms/src/components/BreakoutStarter/BreakoutStarter.css b/examples/breakout-rooms/src/components/BreakoutStarter/BreakoutStarter.css index 482f3b354..f036a781c 100644 --- a/examples/breakout-rooms/src/components/BreakoutStarter/BreakoutStarter.css +++ b/examples/breakout-rooms/src/components/BreakoutStarter/BreakoutStarter.css @@ -11,13 +11,13 @@ } .starter-action { - background: var(--blue200); + background: var(--blue300); border: none; border-radius: var(--border-radius-medium); cursor: default; display: flex; - padding: 1em; - gap: 1em; + padding: var(--space-small); + gap: var(--space-small); align-items: center; align-self: flex-start; width: 100%; @@ -33,7 +33,7 @@ } .starter-action:hover { - background: var(--blue300); + background: var(--blue400); cursor: pointer; } @@ -48,9 +48,9 @@ .rounded-plus { border-radius: var(--border-radius-circle); background-color: var(--blue700); - padding: 8px; + padding: var(--space-xsmall); +} - & svg { - color: var(--white); - } +.rounded-plus svg { + color: var(--white); } \ No newline at end of file diff --git a/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.css b/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.css index 6ebaf51a5..75a1dc780 100644 --- a/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.css +++ b/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.css @@ -3,11 +3,10 @@ flex-direction: column; justify-content: center; background: var(--indigo50); - border-radius: 0.25em; + border-radius: var(--border-radius-medium); gap: 0.5em; - padding: 1em; + padding: var(--space-small); width: 100%; - height: 8em; } .room-controls { @@ -49,7 +48,7 @@ .users .list .item { display: flex; align-items: center; - gap: 1em; + gap: var(--space-small); } .users .list .item + div { padding-left: 3.5em; @@ -57,6 +56,7 @@ .avatars { display: flex; + padding-left: var(--space-xxsmall); } .avatars .avatar:not(:first-child) { diff --git a/examples/breakout-rooms/src/components/RoomsManager/RoomsManager.css b/examples/breakout-rooms/src/components/RoomsManager/RoomsManager.css index 982be4392..df6aada83 100644 --- a/examples/breakout-rooms/src/components/RoomsManager/RoomsManager.css +++ b/examples/breakout-rooms/src/components/RoomsManager/RoomsManager.css @@ -1,7 +1,7 @@ .container { display: flex; flex-direction: column; - gap: 1em; + gap: var(--space-small); align-items: center; flex: 1; } @@ -18,7 +18,7 @@ width: 100%; display: flex; justify-content: flex-start; - gap: 1em; + gap: var(--space-small); align-items: center; } diff --git a/examples/breakout-rooms/src/components/WaitingList/WaitingList.css b/examples/breakout-rooms/src/components/WaitingList/WaitingList.css index 1716975ae..36f5e009a 100644 --- a/examples/breakout-rooms/src/components/WaitingList/WaitingList.css +++ b/examples/breakout-rooms/src/components/WaitingList/WaitingList.css @@ -1,10 +1,10 @@ .waiting-list { border: 1px solid #d4d4d9; - padding: 1em; + padding: var(--space-small); border-radius: 0.25em; display: flex; flex-direction: column; - gap: 1em; + gap: var(--space-small); } .waiting-list .waiting-list-title { diff --git a/examples/breakout-rooms/src/components/WaitingRoom/WaitingRoom.css b/examples/breakout-rooms/src/components/WaitingRoom/WaitingRoom.css index 371444a8c..8b0c369a2 100644 --- a/examples/breakout-rooms/src/components/WaitingRoom/WaitingRoom.css +++ b/examples/breakout-rooms/src/components/WaitingRoom/WaitingRoom.css @@ -8,8 +8,8 @@ } .waiting-room-message { - background: #f5f5f3; - padding: 1em; + background: var(--indigo50); + padding: var(--space-small); border-radius: 0.5em; } From 7db90a6627b5cdd2e8f982da2542399ca60d2536 Mon Sep 17 00:00:00 2001 From: Daniel Fosco Date: Wed, 13 Dec 2023 12:48:41 +0100 Subject: [PATCH 20/27] 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( - `${currentUser?.name} is waiting to start the session`, + `${currentUser?.name} is waiting for you to start the session`, ); } }; @@ -259,10 +259,10 @@ export const BreakoutManager: React.FC = () => { {breakout?.state === "started" ? ( 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; From e43099f9be613497b969d898e1817785771e4d96 Mon Sep 17 00:00:00 2001 From: Daniel Fosco Date: Wed, 13 Dec 2023 12:59:20 +0100 Subject: [PATCH 21/27] Improve styles and dropdown separator --- .../breakout-rooms/src/components/RoomConfig/RoomConfig.css | 6 +++++- .../breakout-rooms/src/components/RoomConfig/RoomConfig.tsx | 4 ++-- .../src/components/WaitingList/WaitingList.css | 4 ++-- 3 files changed, 9 insertions(+), 5 deletions(-) diff --git a/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.css b/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.css index 75a1dc780..00267a5db 100644 --- a/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.css +++ b/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.css @@ -42,7 +42,11 @@ .users .list { /** Overrides DS specific tokens for dropdown **/ --space-inset-100: 16px; - font-size: 12px; +} + + +.users .list .separator { + margin: var(--space-xsmall) var(--space-xxsmall); } .users .list .item { diff --git a/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx b/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx index 957a30ac2..63ca49add 100644 --- a/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx +++ b/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx @@ -48,7 +48,7 @@ export const RoomConfig: React.FunctionComponent = ({ }, [room.targetId]); const renderedTitle = title ? `to ${title}` : 'frame'; - + const dropdownSeparator =
return (
@@ -121,7 +121,7 @@ export const RoomConfig: React.FunctionComponent = ({ {room.participants.length ? (
- {unassignedUsers.length ? : null} + {unassignedUsers.length ? dropdownSeparator : null} {room.participants.map((user) => ( Date: Wed, 13 Dec 2023 13:06:27 +0100 Subject: [PATCH 22/27] One more style fix --- examples/breakout-rooms/src/components/RoomConfig/RoomConfig.css | 1 + 1 file changed, 1 insertion(+) diff --git a/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.css b/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.css index 00267a5db..1e31f3828 100644 --- a/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.css +++ b/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.css @@ -6,6 +6,7 @@ border-radius: var(--border-radius-medium); gap: 0.5em; padding: var(--space-small); + padding-top: var(--space-xsmall); width: 100%; } From d53d63a10c2c681f9d32ea11b5f6feab04b0776c Mon Sep 17 00:00:00 2001 From: Daniel Fosco Date: Wed, 13 Dec 2023 13:10:21 +0100 Subject: [PATCH 23/27] One more more style fix --- .../breakout-rooms/src/components/RoomsManager/RoomsManager.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/breakout-rooms/src/components/RoomsManager/RoomsManager.css b/examples/breakout-rooms/src/components/RoomsManager/RoomsManager.css index df6aada83..88e56c1ea 100644 --- a/examples/breakout-rooms/src/components/RoomsManager/RoomsManager.css +++ b/examples/breakout-rooms/src/components/RoomsManager/RoomsManager.css @@ -18,7 +18,7 @@ width: 100%; display: flex; justify-content: flex-start; - gap: var(--space-small); + gap: var(--space-xsmall); align-items: center; } From e70808a3bbc210f03a439ff4e2cfff1ab3a67af4 Mon Sep 17 00:00:00 2001 From: Daniel Fosco Date: Wed, 13 Dec 2023 13:12:13 +0100 Subject: [PATCH 24/27] Update examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx Co-authored-by: Mettin Parzinski --- .../src/components/BreakoutManager/BreakoutManager.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx b/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx index 283585556..00e8e7c2f 100644 --- a/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx +++ b/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx @@ -184,7 +184,7 @@ export const BreakoutManager: React.FC = () => { }; const valRooms = "Add rooms to your session"; - const valUsers: string = "Add users to each room"; + const valUsers = "Add users to each room"; const valFrames = "Set a frame to each room"; const validations: string[] = []; From 0ad5509c5febaa7ddac944e0b28347c24ec982bb Mon Sep 17 00:00:00 2001 From: Daniel Fosco Date: Wed, 13 Dec 2023 16:08:08 +0100 Subject: [PATCH 25/27] Fix broken copy --- .../breakout-rooms/src/components/RoomConfig/RoomConfig.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx b/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx index 63ca49add..f995d9f0c 100644 --- a/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx +++ b/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx @@ -47,7 +47,7 @@ export const RoomConfig: React.FunctionComponent = ({ FetchFrame(); }, [room.targetId]); - const renderedTitle = title ? `to ${title}` : 'frame'; + const renderedTitle = title ? `${title}` : 'frame'; const dropdownSeparator =
return (
From 6f6bb6d135dff6586656932d093ecbacd259cee2 Mon Sep 17 00:00:00 2001 From: Daniel Fosco Date: Wed, 13 Dec 2023 16:12:28 +0100 Subject: [PATCH 26/27] Add CSS class to avoid li+li --- .../src/components/BreakoutManager/BreakoutManager.css | 6 +++--- .../src/components/BreakoutManager/BreakoutManager.tsx | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.css b/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.css index a4776e21f..b590b0c02 100644 --- a/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.css +++ b/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.css @@ -19,17 +19,17 @@ color: var(--indigo600); } -.validation-messages .validation-messages-items { +.validation-messages .validation-messages-list { font-size: 0.9em; padding-left: var(--space-small); margin-bottom: 0; } -.validation-messages-items li + li { +.validation-messages-item + .validation-messages-item { margin-top: var(--space-xsmall); } -.validation-messages-items li::marker { +.validation-messages-item::marker { color: var(--indigo500); padding-left: var(--space-small); } diff --git a/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx b/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx index 00e8e7c2f..0d176a82d 100644 --- a/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx +++ b/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx @@ -248,9 +248,9 @@ export const BreakoutManager: React.FC = () => {
Before starting the session:
-
    +
      {validations.map((message) => ( -
    • {message}
      • +
    • {message}
      • ))}
From b38cf88e971f4dd7ec2363936d923f52f8041eb7 Mon Sep 17 00:00:00 2001 From: Daniel Fosco Date: Tue, 19 Dec 2023 14:00:43 +0100 Subject: [PATCH 27/27] Run prettier --- .../BreakoutManager/BreakoutManager.tsx | 4 +++- .../BreakoutStarter/BreakoutStarter.css | 2 +- .../src/components/RoomConfig/RoomConfig.css | 1 - .../src/components/RoomConfig/RoomConfig.tsx | 18 +++++++++++++----- .../src/components/Timer/Timer.tsx | 7 +++---- .../src/components/WaitingList/WaitingList.tsx | 3 ++- examples/breakout-rooms/src/styles.css | 2 +- examples/breakout-rooms/src/types.ts | 5 +---- 8 files changed, 24 insertions(+), 18 deletions(-) diff --git a/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx b/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx index 0d176a82d..b255c0661 100644 --- a/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx +++ b/examples/breakout-rooms/src/components/BreakoutManager/BreakoutManager.tsx @@ -250,7 +250,9 @@ export const BreakoutManager: React.FC = () => {
    {validations.map((message) => ( -
  • {message}
    • +
  • + {message} +
    • ))}
diff --git a/examples/breakout-rooms/src/components/BreakoutStarter/BreakoutStarter.css b/examples/breakout-rooms/src/components/BreakoutStarter/BreakoutStarter.css index f036a781c..c672b87f7 100644 --- a/examples/breakout-rooms/src/components/BreakoutStarter/BreakoutStarter.css +++ b/examples/breakout-rooms/src/components/BreakoutStarter/BreakoutStarter.css @@ -53,4 +53,4 @@ .rounded-plus svg { color: var(--white); -} \ No newline at end of file +} diff --git a/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.css b/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.css index 1e31f3828..40b902aff 100644 --- a/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.css +++ b/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.css @@ -45,7 +45,6 @@ --space-inset-100: 16px; } - .users .list .separator { margin: var(--space-xsmall) var(--space-xxsmall); } diff --git a/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx b/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx index f995d9f0c..ca7ccb960 100644 --- a/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx +++ b/examples/breakout-rooms/src/components/RoomConfig/RoomConfig.tsx @@ -41,14 +41,18 @@ export const RoomConfig: React.FunctionComponent = ({ if (!room.targetId) { return; } - const frame = await miro.board.getById(room.targetId) as Frame; + const frame = (await miro.board.getById(room.targetId)) as Frame; setName(frame?.title); } FetchFrame(); }, [room.targetId]); - - const renderedTitle = title ? `${title}` : 'frame'; - const dropdownSeparator =
+ + const renderedTitle = title ? `${title}` : "frame"; + const dropdownSeparator = ( +
+ +
+ ); return (
@@ -56,7 +60,11 @@ export const RoomConfig: React.FunctionComponent = ({ {room.name} onSelectTarget(room)} diff --git a/examples/breakout-rooms/src/components/Timer/Timer.tsx b/examples/breakout-rooms/src/components/Timer/Timer.tsx index 51f56b6b5..64dee9a11 100644 --- a/examples/breakout-rooms/src/components/Timer/Timer.tsx +++ b/examples/breakout-rooms/src/components/Timer/Timer.tsx @@ -37,7 +37,6 @@ export const BIG_STEP = convertTime(5, "milliseconds", "minutes"); */ export const BIG_STEP_MAX_TIME = convertTime(86, "milliseconds", "minutes"); - type Props = { /** * Default time in milliseconds @@ -58,11 +57,11 @@ type Props = { /** * Inc/Dec step in milliseconds */ - bigStep?: number; + bigStep?: number; /** * Inc/Dec step in milliseconds */ - bigStepMaxTime?: number; + bigStepMaxTime?: number; /** * Set chosen time in milliseconds */ @@ -145,7 +144,7 @@ export const Timer: React.FunctionComponent = ({ onClick={() => handleBigAdd()} > +5m - +
diff --git a/examples/breakout-rooms/src/components/WaitingList/WaitingList.tsx b/examples/breakout-rooms/src/components/WaitingList/WaitingList.tsx index 7402e678f..dfcdddfe2 100644 --- a/examples/breakout-rooms/src/components/WaitingList/WaitingList.tsx +++ b/examples/breakout-rooms/src/components/WaitingList/WaitingList.tsx @@ -18,7 +18,8 @@ export const WaitingList: React.FC = ({ return (
- {unassignedUsers.length} {unassignedUsers.length > 1 ? 'users' : 'user'} not in rooms + {unassignedUsers.length} {unassignedUsers.length > 1 ? "users" : "user"}{" "} + not in rooms