From e0d73842d2c7aeece689f96f9ad6973e0b87b104 Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Mon, 14 Aug 2023 16:12:39 -0400
Subject: [PATCH] Continue panel styles

---
 styles/src/component/indicator.ts     |  9 +++++++
 styles/src/style_tree/collab_panel.ts | 35 ++++++++++++---------------
 2 files changed, 24 insertions(+), 20 deletions(-)
 create mode 100644 styles/src/component/indicator.ts

diff --git a/styles/src/component/indicator.ts b/styles/src/component/indicator.ts
new file mode 100644
index 0000000000000000000000000000000000000000..3a078fb53fea1fc4186d94119b4a344e55e8280f
--- /dev/null
+++ b/styles/src/component/indicator.ts
@@ -0,0 +1,9 @@
+import { background } from "../style_tree/components"
+import { Layer, StyleSets } from "../theme"
+
+export const indicator = ({ layer, color }: { layer: Layer, color: StyleSets }) => ({
+    corner_radius: 4,
+    padding: 4,
+    margin: { top: 12, left: 12 },
+    background: background(layer, color),
+})
diff --git a/styles/src/style_tree/collab_panel.ts b/styles/src/style_tree/collab_panel.ts
index 648fa141a5f9df2e58ef40b9fe0281fd94828c09..6cf6f9b09525a84a29aba778aaddf8ec75309e85 100644
--- a/styles/src/style_tree/collab_panel.ts
+++ b/styles/src/style_tree/collab_panel.ts
@@ -10,6 +10,7 @@ import { useTheme } from "../theme"
 import collab_modals from "./collab_modals"
 import { text_button } from "../component/text_button"
 import { toggleable_icon_button } from "../component/icon_button"
+import { indicator } from "../component/indicator"
 
 export default function contacts_panel(): any {
     const theme = useTheme()
@@ -24,7 +25,7 @@ export default function contacts_panel(): any {
     const contact_button = {
         background: background(layer, "on"),
         color: foreground(layer, "on"),
-        icon_width: 8,
+        icon_width: 14,
         button_width: 16,
         corner_radius: 8,
     }
@@ -199,19 +200,23 @@ export default function contacts_panel(): any {
         }),
         list_empty_label_container: {
             margin: {
-                left: 5,
+                left: NAME_MARGIN,
             }
         },
         list_empty_icon: {
-            color: foreground(layer, "on"),
-            width: 16,
+            color: foreground(layer, "variant"),
+            width: 14,
         },
         list_empty_state: toggleable({
             base: interactive({
                 base: {
                     ...text(layer, "ui_sans", "variant", { size: "sm" }),
-                    padding: SPACING
-
+                    padding: {
+                        top: SPACING / 2,
+                        bottom: SPACING / 2,
+                        left: SPACING,
+                        right: SPACING
+                    },
                 },
                 state: {
                     clicked: {
@@ -238,20 +243,10 @@ export default function contacts_panel(): any {
         }),
         contact_avatar: {
             corner_radius: 10,
-            width: 18,
-        },
-        contact_status_free: {
-            corner_radius: 4,
-            padding: 4,
-            margin: { top: 12, left: 12 },
-            background: foreground(layer, "positive"),
-        },
-        contact_status_busy: {
-            corner_radius: 4,
-            padding: 4,
-            margin: { top: 12, left: 12 },
-            background: foreground(layer, "negative"),
+            width: 20,
         },
+        contact_status_free: indicator({ layer, color: "positive" }),
+        contact_status_busy: indicator({ layer, color: "negative" }),
         contact_username: {
             ...text(layer, "ui_sans", { size: "sm" }),
             margin: {
@@ -302,7 +297,7 @@ export default function contacts_panel(): any {
                     icon: {
                         margin: { left: NAME_MARGIN },
                         color: foreground(layer, "variant"),
-                        width: 12,
+                        width: 14,
                     },
                     name: {
                         ...project_row.name,