From eef36471813755adf1199feba7f8b81dbb4c00bb Mon Sep 17 00:00:00 2001 From: Daniel Fosco Date: Wed, 13 Dec 2023 12:28:18 +0100 Subject: [PATCH] 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; }