wip: design

crates/app/src/views/sidebar/contact_list.rs

@@ -1,6 +1,6 @@
 use crate::{constants::IMAGE_SERVICE, get_client, utils::show_npub};
 use gpui::{
-    div, img, impl_actions, list, px, Context, ElementId, FocusHandle, InteractiveElement,
+    div, img, impl_internal_actions, list, px, Context, ElementId, FocusHandle, InteractiveElement,
     IntoElement, ListAlignment, ListState, Model, ParentElement, Pixels, Render, RenderOnce,
     SharedString, StatefulInteractiveElement, Styled, ViewContext, WindowContext,
 };
@@ -16,7 +16,7 @@ use ui::{
 #[derive(Clone, PartialEq, Eq, Deserialize)]
 struct SelectContact(PublicKey);
 
-impl_actions!(contacts, [SelectContact]);
+impl_internal_actions!(contacts, [SelectContact]);
 
 #[derive(Clone, IntoElement)]
 struct ContactListItem {
@@ -95,7 +95,7 @@ impl RenderOnce for ContactListItem {
                 this.child(
                     Icon::new(IconName::CircleCheck)
                         .size_4()
-                        .text_color(cx.theme().primary),
+                        .text_color(cx.theme().colors.primary),
                 )
             })
             .hover(|this| {

crates/app/src/views/sidebar/inbox.rs

@@ -4,10 +4,14 @@ use crate::{
     views::app::{AddPanel, PanelKind},
 };
 use gpui::{
-    div, img, percentage, prelude::FluentBuilder, InteractiveElement, IntoElement, ParentElement,
-    Render, SharedString, StatefulInteractiveElement, Styled, ViewContext,
+    div, img, percentage, prelude::FluentBuilder, px, InteractiveElement, IntoElement,
+    ParentElement, Render, SharedString, StatefulInteractiveElement, Styled, ViewContext,
+};
+use ui::{
+    skeleton::Skeleton,
+    theme::{scale::ColorScaleStep, ActiveTheme},
+    v_flex, Collapsible, Icon, IconName, StyledExt,
 };
-use ui::{skeleton::Skeleton, theme::ActiveTheme, v_flex, Collapsible, Icon, IconName, StyledExt};
 
 pub struct Inbox {
     label: SharedString,
@@ -59,8 +63,8 @@ impl Inbox {
                             .items_center()
                             .justify_between()
                             .text_xs()
-                            .rounded_md()
-                            .hover(|this| this.bg(cx.theme().list_hover))
+                            .rounded(px(cx.theme().radius))
+                            .hover(|this| this.bg(cx.theme().base.step(cx, ColorScaleStep::FOUR)))
                             .child(div().font_medium().map(|this| {
                                 if room.is_group {
                                     this.flex()
@@ -83,7 +87,11 @@ impl Inbox {
                                     })
                                 }
                             }))
-                            .child(div().child(ago))
+                            .child(
+                                div()
+                                    .text_color(cx.theme().base.step(cx, ColorScaleStep::ELEVEN))
+                                    .child(ago),
+                            )
                             .on_click(cx.listener(move |this, _, cx| {
                                 this.action(id, cx);
                             }))
@@ -126,10 +134,10 @@ impl Render for Inbox {
                     .px_1()
                     .flex()
                     .items_center()
-                    .rounded_md()
+                    .rounded(px(cx.theme().radius))
                     .text_xs()
                     .font_semibold()
-                    .hover(|this| this.bg(cx.theme().list_hover))
+                    .hover(|this| this.bg(cx.theme().base.step(cx, ColorScaleStep::THREE)))
                     .on_click(cx.listener(move |view, _event, cx| {
                         view.is_collapsed = !view.is_collapsed;
                         cx.notify();

crates/app/src/views/sidebar/mod.rs

@@ -115,7 +115,7 @@ impl Render for Sidebar {
             .child(
                 v_flex()
                     .px_2()
-                    .gap_1()
+                    .gap_0p5()
                     .child(
                         Button::new("compose")
                             .small()