Update collab panel signed out state (#3697)

[[PR Description]]

Before: 

![CleanShot 2023-12-18 at 13 10
14@2x](https://github.com/zed-industries/zed/assets/1714999/a0e536c3-b5bf-45e2-893b-89b1ae7b4c47)

After:

![CleanShot 2023-12-18 at 13 10
36@2x](https://github.com/zed-industries/zed/assets/1714999/5d66a4a9-cc19-420d-82c7-58ec5cd264e4)

One known issue:

The "Sign in to enable collaboration" text below the button should be
centered, but it looks like label is reserving the full width. Need to
look in to that.

Release Notes:

- N/A

assets/icons/github.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg>

crates/collab_ui2/src/collab_panel.rs

@@ -2027,20 +2027,40 @@ impl CollabPanel {
     }
 
     fn render_signed_out(&mut self, cx: &mut ViewContext<Self>) -> Div {
-        v_stack().border_1().border_color(gpui::red()).child(
-            Button::new("sign_in", "Sign in to collaborate").on_click(cx.listener(
-                |this, _, cx| {
-                    let client = this.client.clone();
-                    cx.spawn(|_, mut cx| async move {
-                        client
-                            .authenticate_and_connect(true, &cx)
-                            .await
-                            .notify_async_err(&mut cx);
-                    })
-                    .detach()
-                },
-            )),
-        )
+        v_stack()
+            .items_center()
+            .child(v_stack().gap_6().p_4()
+                .child(
+                    Label::new("Work with your team in realtime with collaborative editing, voice, shared notes and more.")
+                )
+                .child(v_stack().gap_2()
+
+                .child(
+                Button::new("sign_in", "Sign in")
+                    .icon_color(Color::Muted)
+                    .icon(Icon::Github)
+                    .icon_position(IconPosition::Start)
+                    .style(ButtonStyle::Filled)
+                    .full_width()
+                    .on_click(cx.listener(
+                    |this, _, cx| {
+                        let client = this.client.clone();
+                        cx.spawn(|_, mut cx| async move {
+                            client
+                                .authenticate_and_connect(true, &cx)
+                                .await
+                                .notify_async_err(&mut cx);
+                        })
+                        .detach()
+                    },
+                )))
+                .child(
+                div().flex().w_full().items_center().child(
+                    Label::new("Sign in to enable collaboration.")
+                        .color(Color::Muted)
+                        .size(LabelSize::Small)
+                )),
+            ))
     }
 
     fn render_list_entry(&mut self, ix: usize, cx: &mut ViewContext<Self>) -> AnyElement {

crates/ui2/src/components/button/button.rs

@@ -151,26 +151,31 @@ impl RenderOnce for Button {
         self.base.child(
             h_stack()
                 .gap_1()
-                .map(|this| {
-                    if self.icon_position == Some(IconPosition::End) {
-                        this.flex_row_reverse()
-                    } else {
-                        this
-                    }
+                .when(self.icon_position.is_some(), |this| {
+                    this.children(self.icon.map(|icon| {
+                        ButtonIcon::new(icon)
+                            .disabled(is_disabled)
+                            .selected(is_selected)
+                            .selected_icon(self.selected_icon)
+                            .size(self.icon_size)
+                            .color(self.icon_color)
+                    }))
                 })
                 .child(
                     Label::new(label)
                         .color(label_color)
                         .line_height_style(LineHeightStyle::UILabel),
                 )
-                .children(self.icon.map(|icon| {
-                    ButtonIcon::new(icon)
-                        .disabled(is_disabled)
-                        .selected(is_selected)
-                        .selected_icon(self.selected_icon)
-                        .size(self.icon_size)
-                        .color(self.icon_color)
-                })),
+                .when(!self.icon_position.is_some(), |this| {
+                    this.children(self.icon.map(|icon| {
+                        ButtonIcon::new(icon)
+                            .disabled(is_disabled)
+                            .selected(is_selected)
+                            .selected_icon(self.selected_icon)
+                            .size(self.icon_size)
+                            .color(self.icon_color)
+                    }))
+                }),
         )
     }
 }

crates/ui2/src/components/button/button_like.rs

@@ -355,7 +355,7 @@ impl RenderOnce for ButtonLike {
             .group("")
             .flex_none()
             .h(self.size.height())
-            .when_some(self.width, |this, width| this.w(width))
+            .when_some(self.width, |this, width| this.w(width).justify_center())
             .rounded_md()
             .gap_1()
             .map(|this| match self.size {

crates/ui2/src/components/icon.rs

@@ -67,6 +67,7 @@ pub enum Icon {
     Folder,
     FolderOpen,
     FolderX,
+    Github,
     Hash,
     InlayHint,
     Link,
@@ -147,6 +148,7 @@ impl Icon {
             Icon::Folder => "icons/file_icons/folder.svg",
             Icon::FolderOpen => "icons/file_icons/folder_open.svg",
             Icon::FolderX => "icons/stop_sharing.svg",
+            Icon::Github => "icons/github.svg",
             Icon::Hash => "icons/hash.svg",
             Icon::InlayHint => "icons/inlay_hint.svg",
             Icon::Link => "icons/link.svg",