Style own messages

1 files changed, 16 insertions, 2 deletions

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>