From 925e09e0129617ff05c3bbda7c350ba90e9b6c7b Mon Sep 17 00:00:00 2001
From: Nate Butler <iamnbutler@gmail.com>
Date: Wed, 16 Aug 2023 13:56:11 -0400
Subject: [PATCH] Update collab panel empty state to match project panel

Co-Authored-By: Max Brunsfeld <maxbrunsfeld@gmail.com>
---
 crates/collab_ui/src/collab_panel.rs  |  2 ++
 styles/src/style_tree/collab_panel.ts | 32 ++++++++++++++++++++++++++-
 2 files changed, 33 insertions(+), 1 deletion(-)

diff --git a/crates/collab_ui/src/collab_panel.rs b/crates/collab_ui/src/collab_panel.rs
index f113f12f9db754195ae640f8af8342d7f10eded6..4f0a61bf6a375d20808e3a87e73c41262f60580f 100644
--- a/crates/collab_ui/src/collab_panel.rs
+++ b/crates/collab_ui/src/collab_panel.rs
@@ -2299,6 +2299,8 @@ impl View for CollabPanel {
                     MouseEventHandler::new::<LogInButton, _>(0, cx, |state, _| {
                         let button = theme.log_in_button.style_for(state);
                         Label::new("Sign in to collaborate", button.text.clone())
+                            .aligned()
+                            .left()
                             .contained()
                             .with_style(button.container)
                     })
diff --git a/styles/src/style_tree/collab_panel.ts b/styles/src/style_tree/collab_panel.ts
index 61c96ad75a1d374eb01410adce0e29e738fe95a0..2d8c0508381407104b42526bb4659ac678769b2c 100644
--- a/styles/src/style_tree/collab_panel.ts
+++ b/styles/src/style_tree/collab_panel.ts
@@ -153,7 +153,37 @@ export default function contacts_panel(): any {
 
     return {
         ...collab_modals(),
-        log_in_button: text_button(),
+        log_in_button: interactive({
+            base: {
+                background: background(theme.middle),
+                border: border(theme.middle, "active"),
+                corner_radius: 4,
+                margin: {
+                    top: 4,
+                    left: 16,
+                    right: 16,
+                },
+                padding: {
+                    top: 3,
+                    bottom: 3,
+                    left: 7,
+                    right: 7,
+                },
+                ...text(theme.middle, "sans", "default", { size: "sm" }),
+            },
+            state: {
+                hovered: {
+                    ...text(theme.middle, "sans", "default", { size: "sm" }),
+                    background: background(theme.middle, "hovered"),
+                    border: border(theme.middle, "active"),
+                },
+                clicked: {
+                    ...text(theme.middle, "sans", "default", { size: "sm" }),
+                    background: background(theme.middle, "pressed"),
+                    border: border(theme.middle, "active"),
+                },
+            },
+        }),
         background: background(layer),
         padding: {
             top: SPACING,