Show contact status

styles/src/styleTree/contactsPopover.ts

@@ -116,6 +116,18 @@ export default function contactsPopover(theme: Theme) {
       cornerRadius: 10,
       width: 18,
     },
+    contactStatusFree: {
+      cornerRadius: 4,
+      padding: 4,
+      margin: { top: 12, left: 12 },
+      background: iconColor(theme, "success"),
+    },
+    contactStatusBusy: {
+      cornerRadius: 3,
+      padding: 2,
+      margin: { top: 3, left: 3 },
+      background: iconColor(theme, "feature"),
+    },
     contactUsername: {
       ...text(theme, "mono", "primary", { size: "sm" }),
       margin: {

styles/src/styleTree/workspace.ts

@@ -5,7 +5,6 @@ import {
   border,
   iconColor,
   modalShadow,
-  popoverShadow,
   text,
 } from "./components";
 import statusBar from "./statusBar";

styles/src/themes/common/base16.ts

@@ -137,6 +137,7 @@ export function createTheme(
     ok: sample(ramps.green, 0.5),
     error: sample(ramps.red, 0.5),
     warning: sample(ramps.yellow, 0.5),
+    success: sample(ramps.green, 0.5),
     info: sample(ramps.blue, 0.5),
     onMedia: darkest,
   };

styles/src/themes/common/theme.ts

@@ -123,6 +123,7 @@ export default interface Theme {
     error: string;
     warning: string;
     info: string;
+    success: string;
   };
   editor: {
     background: string;