Small UI changes

frontend/src/OnlineClassroom/ConnectionStatus.tsx

@@ -38,7 +38,10 @@ export function ClassroomConection() {
                     </span>
                 </Match>
                 <Match when={status() === "connecting"}>
-                    <span class="font-mono" style={{color: "orange"}}>
+                    <span
+                        class="px-2 rounded select-none font-mono
+                        bg-[var(--c-orange-primary)] text-[var(--c-orange-on-primary)]"
+                    >
                         Conectando...
                     </span>
                 </Match>

frontend/src/colors.css

@@ -34,6 +34,9 @@
         --c-green-outline: #73796e;
         --c-green-surface-variant: #dfe4d8;
         --c-green-on-surface-variant: #43483f;
+
+        --c-green-success: #315da8;
+        --c-green-on-success: #ffffff;
     }
 }
 
@@ -52,6 +55,9 @@
     --c-blue-outline: #8e9099;
     --c-blue-surface-variant: #44474f;
     --c-blue-on-surface-variant: #c4c6d0;
+
+    --c-blue-success: #7cdc6d;
+    --c-blue-on-success: #003a02;
 }
 @media (prefers-color-scheme: light) {
     :root {
@@ -66,6 +72,9 @@
         --c-blue-outline: #74777f;
         --c-blue-surface-variant: #e1e2ec;
         --c-blue-on-surface-variant: #44474f;
+
+        --c-blue-success: #006e08;
+        --c-blue-on-success: #ffffff;
     }
 }
 
@@ -84,6 +93,9 @@
     --c-yellow-outline: #999080;
     --c-yellow-surface-variant: #4d4639;
     --c-yellow-on-surface-variant: #d0c5b4;
+
+    --c-yellow-success: #7cdc6d;
+    --c-yellow-on-success: #003a02;
 }
 @media (prefers-color-scheme: light) {
     :root {
@@ -98,6 +110,9 @@
         --c-yellow-outline: #7f7667;
         --c-yellow-surface-variant: #ede1cf;
         --c-yellow-on-surface-variant: #4d4639;
+
+        --c-yellow-success: #006e08;
+        --c-yellow-on-success: #ffffff;
     }
 }
 
@@ -117,6 +132,9 @@
     --c-pink-outline: #9b8d94;
     --c-pink-surface-variant: #4f444a;
     --c-pink-on-surface-variant: #d2c2ca;
+
+    --c-pink-success: #7cdc6d;
+    --c-pink-on-success: #003a02;
 }
 @media (prefers-color-scheme: light) {
     :root {
@@ -131,6 +149,9 @@
         --c-pink-outline: #81737a;
         --c-pink-surface-variant: #efdee6;
         --c-pink-on-surface-variant: #4f444a;
+
+        --c-pink-success: #006e08;
+        --c-pink-on-success: #ffffff;
     }
 }
 
@@ -149,6 +170,9 @@
     --c-orange-outline: #9d8e81;
     --c-orange-surface-variant: #50453a;
     --c-orange-on-surface-variant: #d5c3b5;
+    
+    --c-orange-success: #7cdc6d;
+    --c-orange-on-success: #003a02;
 }
 @media (prefers-color-scheme: light) {
     :root {
@@ -163,6 +187,9 @@
         --c-orange-outline: #85736c;
         --c-orange-surface-variant: #f4ded4;
         --c-orange-on-surface-variant: #52443d;
+
+        --c-orange-success: #006e08;
+        --c-orange-on-success: #ffffff;
     }
 }
 
@@ -181,6 +208,9 @@
     --c-red-outline: #a08c89;
     --c-red-surface-variant: #534341;
     --c-red-on-surface-variant: #d8c2be;
+
+    --c-red-success: #7cdc6d;
+    --c-red-on-success: #003a02;
 }
 @media (prefers-color-scheme: light) {
     :root {
@@ -195,5 +225,8 @@
         --c-red-outline: #857370;
         --c-red-surface-variant: #f5ddda;
         --c-red-on-surface-variant: #534341;
+
+        --c-red-success: #006e08;
+        --c-red-on-success: #ffffff;
     }
 }