fix: Clyde user popout (#221)

src/components/_popouts.scss

@@ -267,9 +267,11 @@ section[class|="positionContainer"] {
   }
 
   > div[class|="focusLock"] > div[class|="root"] {
-    box-shadow: 0 0 0 1px $surface0,
+    box-shadow:
+      0 0 0 1px $surface0,
       0 2px 10px 0 hsla(0, calc(var(--saturation-factor, 1) * 0%), 0%, 0.1);
-    -webkit-box-shadow: 0 0 0 1px $surface0,
+    -webkit-box-shadow:
+      0 0 0 1px $surface0,
       0 2px 10px 0 hsla(0, calc(var(--saturation-factor, 1) * 0%), 0%, 0.1);
   }
 
@@ -625,3 +627,20 @@ div[class*="userProfileOuter-"] {
 [class|="layerContainer"] [class|="quickswitcher"] [class*="badge-"] {
   color: $crust;
 }
+
+// Clyde user popout
+div[class|="layerContainer"] div[aria-label="clyde"] {
+  div[class|="profileBadges"] div[class|="textBadge"] {
+    background-color: $brand !important;
+    color: $crust;
+  }
+
+  button[class|="messageClydeButton"] {
+    color: $text;
+    background-color: $surface1;
+
+    &:hover {
+      background-color: $surface2;
+    }
+  }
+}