Update collab panel empty state to match project panel

Nate Butler and Max Brunsfeld created 2 years ago

Co-Authored-By: Max Brunsfeld <[e-mail]>

Change summary

crates/collab_ui/src/collab_panel.rs  |  2 +
styles/src/style_tree/collab_panel.ts | 32 ++++++++++++++++++++++++++++
2 files changed, 33 insertions(+), 1 deletion(-)

Detailed changes

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)
                     })

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,