wip: design

crates/app/src/views/chat/message.rs

@@ -3,7 +3,10 @@ use gpui::{
     div, img, InteractiveElement, IntoElement, ParentElement, RenderOnce, SharedString, Styled,
     WindowContext,
 };
-use ui::{theme::ActiveTheme, StyledExt};
+use ui::{
+    theme::{scale::ColorScaleStep, ActiveTheme},
+    StyledExt,
+};
 
 #[derive(Clone, Debug, IntoElement)]
 pub struct Message {
@@ -32,9 +35,8 @@ impl RenderOnce for Message {
             .border_l_2()
             .border_color(cx.theme().background)
             .hover(|this| {
-                this.bg(cx.theme().muted)
-                    .border_color(cx.theme().primary_active)
-                    .text_color(cx.theme().muted_foreground)
+                this.bg(cx.theme().base.step(cx, ColorScaleStep::TWO))
+                    .border_color(cx.theme().accent.step(cx, ColorScaleStep::NINE))
             })
             .child(
                 img(self.member.avatar())
@@ -58,15 +60,10 @@ impl RenderOnce for Message {
                             .child(
                                 div()
                                     .child(self.ago)
-                                    .text_color(cx.theme().muted_foreground),
+                                    .text_color(cx.theme().base.step(cx, ColorScaleStep::ELEVEN)),
                             ),
                     )
-                    .child(
-                        div()
-                            .text_sm()
-                            .text_color(cx.theme().foreground)
-                            .child(self.content),
-                    ),
+                    .child(div().text_sm().child(self.content)),
             )
     }
 }

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

@@ -15,10 +15,13 @@ use nostr_sdk::prelude::*;
 use std::sync::Arc;
 use ui::{
     button::{Button, ButtonVariants},
-    dock::{Panel, PanelEvent, PanelState},
+    dock_area::{
+        panel::{Panel, PanelEvent},
+        state::PanelState,
+    },
     input::{InputEvent, TextInput},
     popup_menu::PopupMenu,
-    theme::ActiveTheme,
+    theme::{scale::ColorScaleStep, ActiveTheme},
     v_flex, Icon, IconName,
 };
 
@@ -374,7 +377,7 @@ impl Render for ChatPanel {
                         div()
                             .flex_1()
                             .flex()
-                            .bg(cx.theme().muted)
+                            .bg(cx.theme().base.step(cx, ColorScaleStep::FOUR))
                             .rounded(px(cx.theme().radius))
                             .px_2()
                             .child(self.input.clone()),