From f9e3b7211910338ec485170f4d18325398bc1d7a Mon Sep 17 00:00:00 2001
From: Kit La Touche <kit@transneptune.net>
Date: Mon, 11 Nov 2024 22:20:35 -0500
Subject: Style own messages

---
 ui/lib/components/MessageRun.svelte | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

(limited to 'ui')

diff --git a/ui/lib/components/MessageRun.svelte b/ui/lib/components/MessageRun.svelte
index 2e8c613..2a88a82 100644
--- a/ui/lib/components/MessageRun.svelte
+++ b/ui/lib/components/MessageRun.svelte
@@ -16,7 +16,21 @@
   <span class="chip variant-soft sticky top-o left-0">
     @{name}:
   </span>
-  {#each messages as { at, body }}
-    <Message {at} {body} />
+  {#each messages as message}
+    <Message {...message} />
   {/each}
 </div>
+
+<style>
+  .own-message {
+    background-color: rgb(32, 42, 74);
+  }
+  /* Honestly, I don't love scoping styles per component, and this is a great
+   * example of why. MessageRuns know if they're own-message, but Messages in
+   * them need to get a style based on that fact. I don't wanna bucket-brigade
+   * that fact into the Message, when it's a pure CSS concern.
+   */
+  .own-message :global(*) {
+    color: rgb(198, 198, 198);
+  }
+</style>
-- 
cgit v1.2.3