diff --git a/assets/icons/circle-check.svg b/assets/icons/circle-check.svg new file mode 100644 index 0000000..6b1b8d0 --- /dev/null +++ b/assets/icons/circle-check.svg @@ -0,0 +1,3 @@ + + + diff --git a/crates/chat_ui/src/lib.rs b/crates/chat_ui/src/lib.rs index 1cb0268..7873905 100644 --- a/crates/chat_ui/src/lib.rs +++ b/crates/chat_ui/src/lib.rs @@ -869,6 +869,7 @@ impl ChatPanel { Avatar::new() .src(author.avatar()) .name(author.name()) + .size(px(32.)) .flex_shrink_0() .relative(), ) @@ -1380,7 +1381,6 @@ impl ChatPanel { .icon(CoopIcon::Settings2) .tooltip("Configuration") .ghost() - .large() .dropdown_menu(move |this, _window, _cx| { let auto = matches!(signer_kind, SignerKind::Auto); let encryption = matches!(signer_kind, SignerKind::Encryption); @@ -1415,7 +1415,6 @@ impl ChatPanel { Button::new("emoji") .icon(CoopIcon::Emoji) .ghost() - .large() .dropdown_menu_with_anchor(gpui::Anchor::BottomLeft, move |this, _window, _cx| { this.separator() .menu("👍", Box::new(Command::Insert("👍"))) @@ -1543,7 +1542,6 @@ impl Render for ChatPanel { .loading(self.uploading) .disabled(self.uploading) .ghost() - .large() .on_click(cx.listener(move |this, _ev, window, cx| { this.upload(window, cx); })), @@ -1560,7 +1558,6 @@ impl Render for ChatPanel { .icon(CoopIcon::PaperPlaneFill) .disabled(self.uploading) .ghost() - .large() .on_click(cx.listener(move |this, _ev, window, cx| { this.send_text_message(window, cx); })), diff --git a/desktop/src/dialogs/accounts.rs b/desktop/src/dialogs/accounts.rs index 2ffde6f..64fb7fa 100644 --- a/desktop/src/dialogs/accounts.rs +++ b/desktop/src/dialogs/accounts.rs @@ -4,13 +4,17 @@ use gpui::prelude::FluentBuilder; use gpui::{ App, AppContext, Context, Entity, InteractiveElement, IntoElement, ParentElement, Render, SharedString, StatefulInteractiveElement, Styled, Subscription, Task, Window, div, px, + relative, }; use gpui_component::avatar::Avatar; use gpui_component::button::{Button, ButtonVariants}; +use gpui_component::separator::Separator; use gpui_component::spinner::Spinner; -use gpui_component::{ActiveTheme, Disableable, Icon, Sizable, WindowExt, h_flex, v_flex}; +use gpui_component::{ + ActiveTheme, Disableable, Icon, Sizable, StyledExt, WindowExt, h_flex, v_flex, +}; use nostr_sdk::prelude::*; -use person::PersonRegistry; +use person::{PersonRegistry, shorten_pubkey}; use state::{NostrRegistry, StateEvent}; use crate::dialogs::connect::ConnectSigner; @@ -178,17 +182,37 @@ impl Render for AccountSelector { .id(ix) .group("") .px_2() - .h_10() + .h_11() .justify_between() .w_full() .rounded(cx.theme().radius) - .bg(cx.theme().secondary) + .bg(cx.theme().transparent) .hover(|this| this.bg(cx.theme().secondary_hover)) .child( h_flex() .gap_2() - .child(Avatar::new().src(profile.avatar()).small()) - .child(div().text_sm().child(profile.name())), + .child( + Avatar::new() + .src(profile.avatar()) + .name(profile.name()) + .size(px(32.)), + ) + .child( + v_flex() + .child( + div() + .text_sm() + .font_medium() + .line_height(relative(1.2)) + .child(profile.name()), + ) + .child( + div() + .text_color(cx.theme().muted_foreground) + .text_xs() + .child(shorten_pubkey(profile.public_key(), 4)), + ), + ), ) .when(logging_in, |this| this.child(Spinner::new().small())) .when(!logging_in, |this| { @@ -224,7 +248,7 @@ impl Render for AccountSelector { items }) - .child(div().w_full().h_px().bg(cx.theme().border)) + .child(Separator::horizontal()) .child( h_flex() .gap_1() diff --git a/desktop/src/panels/greeter.rs b/desktop/src/panels/greeter.rs index c864fd7..11c67cd 100644 --- a/desktop/src/panels/greeter.rs +++ b/desktop/src/panels/greeter.rs @@ -5,6 +5,7 @@ use gpui::{ }; use gpui_component::button::{Button, ButtonVariants}; use gpui_component::dock::{DockPlacement, Panel, PanelEvent}; +use gpui_component::separator::Separator; use gpui_component::{ActiveTheme, Icon, Sizable, StyledExt, h_flex, v_flex}; use state::NostrRegistry; @@ -52,7 +53,7 @@ impl Panel for GreeterPanel { "Greeter" } - fn title(&mut self, window: &mut Window, cx: &mut Context) -> impl IntoElement { + fn title(&mut self, _window: &mut Window, cx: &mut Context) -> impl IntoElement { div().child( svg() .path("brand/coop.svg") @@ -96,7 +97,7 @@ impl Render for GreeterPanel { svg() .path("brand/coop.svg") .size_12() - .text_color(cx.theme().muted), + .text_color(cx.theme().secondary), ) .child( v_flex() @@ -111,41 +112,32 @@ impl Render for GreeterPanel { ) .child( v_flex() - .gap_2() .w_full() + .gap_2() + .justify_start() .child( - h_flex() - .gap_2() - .w_full() - .text_xs() - .font_semibold() - .text_color(cx.theme().muted_foreground) - .child(SharedString::from("Get Started")) - .child(div().flex_1().h_px().bg(cx.theme().border)), + Separator::horizontal() + .label("Get Started") + .flex_row_reverse(), ) .child( - v_flex() - .gap_2() - .w_full() - .child( - Button::new("profile") - .icon(Icon::new(CoopIcon::Profile)) - .label("Update profile") - .ghost() - .small() - .justify_start() - .on_click(cx.listener(move |this, _ev, window, cx| { - this.add_profile_panel(window, cx) - })), - ) - .child( - Button::new("invite") - .icon(Icon::new(CoopIcon::Invite)) - .label("Invite friends") - .ghost() - .small() - .justify_start(), - ), + Button::new("profile") + .icon(Icon::new(CoopIcon::Profile)) + .label("Update profile") + .ghost() + .small() + .justify_start() + .on_click(cx.listener(move |this, _ev, window, cx| { + this.add_profile_panel(window, cx) + })), + ) + .child( + Button::new("invite") + .icon(Icon::new(CoopIcon::Invite)) + .label("Invite friends") + .ghost() + .small() + .justify_start(), ), ), ) diff --git a/desktop/src/panels/relay_list.rs b/desktop/src/panels/relay_list.rs index 58af4f1..f33d14f 100644 --- a/desktop/src/panels/relay_list.rs +++ b/desktop/src/panels/relay_list.rs @@ -36,7 +36,6 @@ enum SetMetadata { #[derive(Debug)] pub struct RelayListPanel { - name: SharedString, focus_handle: FocusHandle, /// Relay URL input @@ -83,7 +82,6 @@ impl RelayListPanel { }); Self { - name: "Update Relay List".into(), focus_handle: cx.focus_handle(), input, updating: false, @@ -318,11 +316,7 @@ impl RelayListPanel { impl Panel for RelayListPanel { fn panel_name(&self) -> &'static str { - "Relay List" - } - - fn title(&mut self, window: &mut Window, _cx: &mut Context) -> impl IntoElement { - self.name.clone() + "Update Relay List" } } diff --git a/desktop/src/panels/trash.rs b/desktop/src/panels/trash.rs index 6ddb1dd..7bb17c5 100644 --- a/desktop/src/panels/trash.rs +++ b/desktop/src/panels/trash.rs @@ -110,7 +110,7 @@ impl Panel for TrashPanel { "Trash" } - fn title(&mut self, window: &mut Window, _cx: &mut Context) -> impl IntoElement { + fn title(&mut self, _window: &mut Window, _cx: &mut Context) -> impl IntoElement { h_flex() .gap_1() .text_sm() diff --git a/desktop/src/sidebar/entry.rs b/desktop/src/sidebar/entry.rs index 15f807f..32e1d4e 100644 --- a/desktop/src/sidebar/entry.rs +++ b/desktop/src/sidebar/entry.rs @@ -124,12 +124,13 @@ impl RenderOnce for RoomEntry { .text_ellipsis() .truncate() .font_medium() + .text_color(cx.theme().sidebar_foreground) .child(name) .when(is_selected, |this| { this.child( Icon::new(CoopIcon::CheckCircle) .small() - .text_color(cx.theme().primary_active), + .text_color(cx.theme().sidebar_accent_foreground), ) }), ) diff --git a/desktop/src/sidebar/mod.rs b/desktop/src/sidebar/mod.rs index 9a725db..d3cdfbf 100644 --- a/desktop/src/sidebar/mod.rs +++ b/desktop/src/sidebar/mod.rs @@ -10,7 +10,7 @@ use gpui::prelude::FluentBuilder; use gpui::{ App, AppContext, Context, Entity, EventEmitter, FocusHandle, Focusable, IntoElement, ParentElement, Render, SharedString, Styled, Subscription, Task, UniformListScrollHandle, - Window, div, px, uniform_list, + Window, div, px, relative, uniform_list, }; use gpui_component::button::{Button, ButtonVariants}; use gpui_component::dock::{Panel, PanelEvent}; @@ -492,6 +492,7 @@ impl Render for Sidebar { // Whether the find panel should be shown let show_find_panel = self.has_search || self.find_focused; + let show_create_button = !self.selected_pkeys.read(cx).is_empty() && show_find_panel; // Set button label based on total selected users let button_label = if self.selected_pkeys.read(cx).len() > 1 { @@ -504,9 +505,10 @@ impl Render for Sidebar { .image_cache(coop_cache("sidebar", IMAGE_CACHE_SIZE)) .size_full() .gap_2() + .bg(cx.theme().sidebar) .child( h_flex() - .h(px(28.0)) + .h(px(32.0)) .border_b_1() .border_color(cx.theme().border) .bg(cx.theme().tab_bar) @@ -557,7 +559,7 @@ impl Render for Sidebar { .when(!show_find_panel, |this| this.label("Inbox")) .tooltip("All ongoing conversations") .small() - .ghost() + .secondary() .flex_1() .selected( !show_find_panel && self.current_filter(&RoomKind::Ongoing, cx), @@ -605,19 +607,13 @@ impl Render for Sidebar { .items_center() .justify_center() .text_center() - .child( - div() - .text_sm() - .font_semibold() - .child(SharedString::from("No conversations")), - ) + .child(div().text_sm().font_semibold().child("No conversations")) .child( div() .text_xs() .text_color(cx.theme().muted_foreground) - .child(SharedString::from( - "Start a conversation with someone to get started.", - )), + .line_height(relative(1.2)) + .child("Start a conversation with someone to get started."), ), ), ) @@ -665,12 +661,13 @@ impl Render for Sidebar { .flex_1() .child( h_flex() + .px_1() .gap_0p5() .text_xs() .font_semibold() .text_color(cx.theme().muted_foreground) .child(Icon::new(CoopIcon::ChevronDown).small()) - .child(SharedString::from("Suggestions")), + .child("Suggestions"), ) .child( uniform_list( @@ -703,25 +700,18 @@ impl Render for Sidebar { .child(Scrollbar::vertical(&self.scroll_handle)) }), ) - .when(!self.selected_pkeys.read(cx).is_empty(), |this| { + .when(show_create_button, |this| { this.child( - div() - .absolute() - .bottom_0() - .left_0() - .h_9() - .w_full() - .px_2() - .child( - Button::new("create") - .label(button_label) - .primary() - .small() - .shadow_lg() - .on_click(cx.listener(move |this, _ev, window, cx| { - this.create_room(window, cx); - })), - ), + div().absolute().bottom_2().left_0().w_full().px_2().child( + Button::new("create") + .label(button_label) + .primary() + .text_sm() + .shadow_md() + .on_click(cx.listener(move |this, _ev, window, cx| { + this.create_room(window, cx); + })), + ), ) }) .when(loading, |this| { diff --git a/desktop/src/workspace.rs b/desktop/src/workspace.rs index 06e8034..6ac1386 100644 --- a/desktop/src/workspace.rs +++ b/desktop/src/workspace.rs @@ -575,7 +575,7 @@ impl Workspace { this.child( Button::new("current-user") - .child(Avatar::new().src(avatar.clone()).xsmall()) + .child(Avatar::new().src(avatar.clone()).small()) .small() .compact() .ghost() @@ -590,7 +590,7 @@ impl Workspace { .gap_1p5() .text_xs() .text_color(cx.theme().muted_foreground) - .child(Avatar::new().src(avatar.clone()).xsmall()) + .child(Avatar::new().src(avatar.clone()).small()) .child(name.clone()) })) .separator()