Add icon before the empty contacts text

Max Brunsfeld and Mikayla created 2 years ago

Co-authored-by: Mikayla <[e-mail]>

Change summary

crates/collab_ui/src/collab_panel.rs  | 16 +++++++++++++++-
crates/theme/src/theme.rs             |  2 ++
styles/src/style_tree/collab_panel.ts |  9 +++++++++
3 files changed, 26 insertions(+), 1 deletion(-)

Detailed changes

crates/collab_ui/src/collab_panel.rs

@@ -1413,7 +1413,21 @@ impl CollabPanel {
         enum AddContacts {}
         MouseEventHandler::<AddContacts, Self>::new(0, cx, |state, _| {
             let style = theme.list_empty_state.style_for(is_selected, state);
-            Label::new("Add contacts to begin collaborating", style.text.clone())
+            Flex::row()
+                .with_child(
+                    Svg::new("icons/plus_16.svg")
+                        .with_color(theme.list_empty_icon.color)
+                        .constrained()
+                        .with_width(theme.list_empty_icon.width)
+                        .aligned()
+                        .left(),
+                )
+                .with_child(
+                    Label::new("Add a contact", style.text.clone())
+                        .contained()
+                        .with_style(theme.list_empty_label_container),
+                )
+                .align_children_center()
                 .contained()
                 .with_style(style.container)
                 .into_any()

crates/theme/src/theme.rs

@@ -220,6 +220,8 @@ pub struct CollabPanel {
     #[serde(flatten)]
     pub container: ContainerStyle,
     pub list_empty_state: Toggleable<Interactive<ContainedText>>,
+    pub list_empty_icon: Icon,
+    pub list_empty_label_container: ContainerStyle,
     pub log_in_button: Interactive<ContainedText>,
     pub channel_editor: ContainerStyle,
     pub channel_hash: Icon,

styles/src/style_tree/collab_panel.ts

@@ -267,6 +267,15 @@ export default function contacts_panel(): any {
                 },
             },
         }),
+        list_empty_label_container: {
+            margin: {
+                left: 5,
+            }
+        },
+        list_empty_icon: {
+            color: foreground(layer, "on"),
+            width: 16,
+        },
         list_empty_state: toggleable({
             base: interactive({
                 base: {