Update styles

miroapp · Dec 13, 2023 · eef3647 · eef3647
1 parent 848f836
commit eef3647
Show file tree

Hide file tree

Showing 7 changed files with 31 additions and 30 deletions.
diff --git 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
@@ -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
@@ -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);
 }
diff --git 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,14 +48,15 @@
 .users .list .item {
   display: flex;
   align-items: center;
-  gap: 1em;
+  gap: var(--space-small);
 }
 .users .list .item + div {
   padding-left: 3.5em;
 }
 
 .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
@@ -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
@@ -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
@@ -8,8 +8,8 @@
 }
 
 .waiting-room-message {
-  background: #f5f5f3;
-  padding: 1em;
+  background: var(--indigo50);
+  padding: var(--space-small);
   border-radius: 0.5em;
 }