diff --git a/assets/icons/chevron-down.svg b/assets/icons/chevron-down.svg deleted file mode 100644 index d8788af..0000000 --- a/assets/icons/chevron-down.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/assets/icons/invite.svg b/assets/icons/invite.svg new file mode 100644 index 0000000..228373b --- /dev/null +++ b/assets/icons/invite.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/profile.svg b/assets/icons/profile.svg new file mode 100644 index 0000000..0ed1300 --- /dev/null +++ b/assets/icons/profile.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/ship.svg b/assets/icons/ship.svg new file mode 100644 index 0000000..137c977 --- /dev/null +++ b/assets/icons/ship.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/icons/usb.svg b/assets/icons/usb.svg new file mode 100644 index 0000000..1d89050 --- /dev/null +++ b/assets/icons/usb.svg @@ -0,0 +1,3 @@ + + + diff --git a/crates/coop/src/panels/greeter.rs b/crates/coop/src/panels/greeter.rs index 529689a..58a80f8 100644 --- a/crates/coop/src/panels/greeter.rs +++ b/crates/coop/src/panels/greeter.rs @@ -7,7 +7,7 @@ use gpui::{ use state::NostrRegistry; use theme::ActiveTheme; use ui::button::{Button, ButtonVariants}; -use ui::{h_flex, v_flex, Icon, IconName, StyledExt}; +use ui::{h_flex, v_flex, Icon, IconName, Sizable, StyledExt}; pub fn init(window: &mut Window, cx: &mut App) -> Entity { cx.new(|cx| Greeter::new(window, cx)) @@ -62,7 +62,7 @@ impl Focusable for Greeter { impl Render for Greeter { fn render(&mut self, _window: &mut Window, cx: &mut Context) -> impl IntoElement { const TITLE: &str = "Welcome to Coop!"; - const DESCRIPTION: &str = "You can bring your own keys to use your identity"; + const DESCRIPTION: &str = "Chat Freely, Stay Private on Nostr."; let nostr = NostrRegistry::global(cx); let identity = nostr.read(cx).identity(); @@ -78,47 +78,87 @@ impl Render for Greeter { .items_center() .justify_center() .child( - svg() - .path("brand/coop.svg") - .size_16() - .text_color(cx.theme().elevated_surface_background), + h_flex() + .gap_2() + .child( + svg() + .path("brand/coop.svg") + .size_12() + .text_color(cx.theme().icon_muted), + ) + .child( + v_flex() + .child( + div() + .font_semibold() + .line_height(relative(1.25)) + .child(SharedString::from(TITLE)), + ) + .child( + div() + .text_sm() + .text_color(cx.theme().text_muted) + .line_height(relative(1.25)) + .child(SharedString::from(DESCRIPTION)), + ), + ), ) - .when(!identity.read(cx).owned, |this| { - this.child( - v_flex() - .text_center() - .child( - div() - .font_semibold() - .line_height(relative(1.25)) - .child(SharedString::from(TITLE)), - ) - .child( - div() - .text_sm() - .text_color(cx.theme().text_muted) - .child(SharedString::from(DESCRIPTION)), - ), - ) - .child( - v_flex() - .gap_2() - .child( - Button::new("connect") - .icon(Icon::new(IconName::ArrowRight)) - .label(SharedString::from( - "Connect account via Nostr Connect", - )) - .primary() - .reverse(), - ) - .child( - Button::new("key") - .label("Import a secret key or bunker") - .ghost_alt(), - ), - ) - }), + .child( + v_flex() + .gap_2() + .child( + h_flex() + .gap_1() + .text_sm() + .font_semibold() + .text_color(cx.theme().text_muted) + .child(SharedString::from("Get Started")) + .child(div().flex_1().h_px().bg(cx.theme().border)), + ) + .child( + v_flex() + .items_start() + .justify_start() + .gap_2() + .when(!identity.read(cx).owned, |this| { + this.child( + Button::new("connect") + .icon(Icon::new(IconName::Door)) + .label("Connect account via Nostr Connect") + .ghost() + .small(), + ) + .child( + Button::new("import") + .icon(Icon::new(IconName::Usb)) + .label("Import a secret key or bunker") + .ghost() + .small(), + ) + }) + .child( + Button::new("profile") + .icon(Icon::new(IconName::Profile)) + .label("Update profile") + .ghost() + .small(), + ) + .child( + Button::new("changelog") + .icon(Icon::new(IconName::Ship)) + .label("Keep up to date") + .ghost() + .small(), + ) + .child( + Button::new("invite") + .icon(Icon::new(IconName::Invite)) + .label("Invite people") + .ghost() + .small(), + ), + ), + ), ) } } diff --git a/crates/coop/src/sidebar/mod.rs b/crates/coop/src/sidebar/mod.rs index 0ec54fa..d5d6f14 100644 --- a/crates/coop/src/sidebar/mod.rs +++ b/crates/coop/src/sidebar/mod.rs @@ -670,23 +670,32 @@ impl Render for Sidebar { ), ) .when(!loading && total_rooms == 0, |this| { - this.child(deferred( - v_flex() - .py_2() - .px_3() - .items_center() - .justify_center() - .text_center() - .child( - div() - .text_sm() - .font_semibold() - .child(SharedString::from("No conversations")), - ) - .child(div().text_xs().text_color(cx.theme().text_muted).child( - SharedString::from("Start a conversation with someone to get started."), - )), - )) + this.child( + div().px_2p5().child(deferred( + v_flex() + .p_3() + .h_24() + .w_full() + .border_2() + .border_dashed() + .border_color(cx.theme().border_variant) + .rounded(cx.theme().radius_lg) + .items_center() + .justify_center() + .text_center() + .child( + div() + .text_sm() + .font_semibold() + .child(SharedString::from("No conversations")), + ) + .child(div().text_xs().text_color(cx.theme().text_muted).child( + SharedString::from( + "Start a conversation with someone to get started.", + ), + )), + )), + ) }) // Chat Rooms .child( diff --git a/crates/ui/src/icon.rs b/crates/ui/src/icon.rs index 384df72..4954ab3 100644 --- a/crates/ui/src/icon.rs +++ b/crates/ui/src/icon.rs @@ -12,7 +12,6 @@ pub enum IconName { ArrowLeft, ArrowRight, Boom, - ChevronDown, CaretDown, CaretRight, CaretUp, @@ -27,17 +26,21 @@ pub enum IconName { Emoji, Eye, Info, + Invite, Link, Loader, Moon, Plus, PlusCircle, + Profile, Relay, Reply, Search, Settings, Sun, + Ship, Upload, + Usb, PanelLeft, PanelLeftOpen, PanelRight, @@ -58,7 +61,6 @@ impl IconName { Self::ArrowLeft => "icons/arrow-left.svg", Self::ArrowRight => "icons/arrow-right.svg", Self::Boom => "icons/boom.svg", - Self::ChevronDown => "icons/chevron-down.svg", Self::CaretDown => "icons/caret-down.svg", Self::CaretRight => "icons/caret-right.svg", Self::CaretUp => "icons/caret-up.svg", @@ -73,17 +75,21 @@ impl IconName { Self::Emoji => "icons/emoji.svg", Self::Eye => "icons/eye.svg", Self::Info => "icons/info.svg", + Self::Invite => "icons/invite.svg", Self::Link => "icons/link.svg", Self::Loader => "icons/loader.svg", Self::Moon => "icons/moon.svg", Self::Plus => "icons/plus.svg", Self::PlusCircle => "icons/plus-circle.svg", + Self::Profile => "icons/profile.svg", Self::Relay => "icons/relay.svg", Self::Reply => "icons/reply.svg", Self::Search => "icons/search.svg", Self::Settings => "icons/settings.svg", Self::Sun => "icons/sun.svg", + Self::Ship => "icons/ship.svg", Self::Upload => "icons/upload.svg", + Self::Usb => "icons/usb.svg", Self::PanelLeft => "icons/panel-left.svg", Self::PanelLeftOpen => "icons/panel-left-open.svg", Self::PanelRight => "icons/panel-right.svg",