tweak user pills

gui/src/app.rs

@@ -125,7 +125,7 @@ impl UserIcon {
 }
 
 #[component]
-pub fn UserPill(name: String, icon: UserIcon) -> Element {
+pub fn UserPill(name: String, icon: UserIcon, isself: bool) -> Element {
     let pill = css!(
         "
         border-radius: 100px;
@@ -139,16 +139,22 @@ pub fn UserPill(name: String, icon: UserIcon) -> Element {
     "
     );
 
+    let pill_self = css!(
+        "
+        font-weight: bolder;
+        "
+    );
+
     let color = match icon {
-        UserIcon::Normal => "var(--accent-a)",
-        UserIcon::Muted => "var(--accent-b)",
-        UserIcon::Deafened => "var(--accent-c)",
-        UserIcon::None => "var(--accent-a)",
+        UserIcon::Normal => "var(--accent-normal)",
+        UserIcon::Muted => "var(--accent-muted)",
+        UserIcon::Deafened => "var(--accent-deafened)",
+        UserIcon::None => "var(--accent-normal)",
     };
 
     rsx!(
         div {
-            class: "{pill}",
+            class: match isself { true => format!("{pill} {pill_self}"), false => format!("{pill}") },
             style: "background-color: {color}",
             { icon.url().map(|url| rsx!(img { src: url })) }
             "\u{00A0}{name}\u{00A0}"
@@ -163,10 +169,12 @@ pub fn User(id: UserId) -> Element {
         Some(state) => rsx!(UserPill {
             name: state.name.clone(),
             icon: state.icon(),
+            isself: server.session.unwrap() == id,
         }),
         None => rsx!(UserPill {
             name: format!("unknown user ({id})"),
             icon: UserIcon::None,
+            isself: false,
         }),
     }
 }
@@ -292,6 +300,7 @@ pub fn ChatView() -> Element {
                         UserPill {
                             name: sender.name.clone(),
                             icon: UserIcon::None,
+                            isself: false,
                         }
                     }
                     span {
@@ -574,9 +583,9 @@ pub fn app() -> Element {
         --bg-color: #372f3a;
         --login-bg-color: #5d7680;
         --primary-btn-color: #7bad9f;
-        --accent-a: #8eb29a;
-        --accent-b: #6a9395;
-        --accent-c: #464459;
+        --accent-normal: #7bad9f;
+        --accent-muted: #ff746c;
+        --accent-deafened: #464459;
         --line-width: 2px;
         --line-color: white;
     }
@@ -617,16 +626,16 @@ pub fn app() -> Element {
 
     input:focus,input:focus-visible {
         border: none;
-        outline: solid var(--line-width) var(--accent-a);
+        outline: solid var(--line-width) var(--accent-normal);
         outline-offset: -3px;
     }
 
     a:link {
-        color: var(--accent-a);
+        color: var(--accent-normal);
     }
 
     a:visited {
-        color: var(--accent-b);
+        color: var(--accent-muted);
     }
     "
     );