substantially improved styling

src/app.rs

@@ -4,7 +4,7 @@ use std::collections::{BTreeMap, BTreeSet, HashMap};
 
 use dioxus::prelude::*;
 use ordermap::OrderSet;
-use sir::css;
+use sir::{css, global_css};
 
 pub type ChannelId = u32;
 pub type UserId = u32;
@@ -82,13 +82,13 @@ pub fn UserPill(name: String) -> Element {
         "
         border: solid 1px black;
         border-radius: 8px;
-        margin: 4px;
         padding: 4px;
+        width: fit-content;
     "
     );
 
     rsx!(
-        span {
+        div {
             class: "{pill}",
             "{name}"
         }
@@ -120,8 +120,10 @@ pub fn Channel(id: ChannelId) -> Element {
         display: flex;
         flex-direction: row;
         flex-wrap: wrap;
+        gap: 8px;
         margin-left: 5px;
-        padding-left: 11px;  "
+        padding-left: 11px;
+    "
     );
 
     rsx!(
@@ -147,34 +149,75 @@ pub fn ChatView() -> Element {
     let net: Coroutine<Command> = use_coroutine_handle();
     let server = STATE.server.read();
     let mut draft = use_signal(|| "".to_string());
+
+    let chat_history_box = css!(
+        "
+        margin: 16px;
+        border: solid black 1px;
+    "
+    );
+    let chat_message = css!(
+        "
+        display: flex;
+        flex-direction: row;
+        margin: 16px;
+        gap: 8px;
+        align-items: center;
+    "
+    );
+    let chat_box = css!(
+        "
+        display: flex;
+        flex-direction: row;
+        margin: 16px;
+        gap: 8px;
+
+        input {
+            flex-grow: 1;
+            padding: 8px;
+        }
+    "
+    );
+
+    let mut do_send = move || {
+        if let Some(user) = STATE.server.read().this_user() {
+            net.send(SendChat {
+                markdown: draft.write().split_off(0),
+                channels: vec![user.channel],
+            });
+        }
+    };
+
     rsx!(
         div {
-            style: "margin: 16px; padding: 16px; border: solid black 1px;",
+            class: "{chat_history_box}",
             for chat in server.chat.iter() {
-                if let Some(sender) = chat.sender.and_then(|u| server.users.get(&u)) {
-                    UserPill { name: sender.name.clone() }
-                    "\u{8194}"
-                }
-                span {
-                    dangerous_inner_html: "{chat.dangerous_html}",
-                }
-                hr {}
-            }
-            input {
-                placeholder: "say something",
-                value: "{draft.read()}",
-                oninput: move |evt| draft.set(evt.value().clone()),
-            }
-            button {
-                onclick: move |_| {
-                    if let Some(user) = STATE.server.read().this_user() {
-                        net.send(SendChat {
-                            markdown: draft.write().split_off(0),
-                            channels: vec![user.channel],
-                        });
+                div {
+                    class: "{chat_message}",
+                    if let Some(sender) = chat.sender.and_then(|u| server.users.get(&u)) {
+                        UserPill { name: sender.name.clone() }
                     }
-                },
-                "Send"
+                    span {
+                        dangerous_inner_html: "{chat.dangerous_html}",
+                    }
+                }
+            }
+            div {
+                class: "{chat_box}",
+                input {
+                    placeholder: "say something",
+                    value: "{draft.read()}",
+                    oninput: move |evt| draft.set(evt.value().clone()),
+                    onkeypress: move |evt: Event<KeyboardData>| {
+                        if evt.code() == Code::Enter && evt.modifiers().is_empty() {
+                            do_send();
+                        }
+                    }
+                }
+                button {
+                    onclick: move |_| do_send(),
+                    "Send"
+                }
             }
         }
     )
@@ -183,9 +226,18 @@ pub fn ChatView() -> Element {
 #[component]
 pub fn ServerView() -> Element {
     let server = STATE.server.read();
+
+    let channel_box = css!(
+        "
+        padding: 16px;
+        margin: 16px;
+        border: solid black 1px;
+    "
+    );
+
     rsx!(
         div {
-            style: "margin: 16px; padding: 16px; border: solid black 1px;",
+            class: "framed_box {channel_box}",
             for (id, state) in server.channels.iter() {
                 if state.parent.is_none() {
                     Channel { id: *id }