From 6fb021e6c44f7186bd374ac754a60ec9091fe950 Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <jeremyckahn@gmail.com>
Date: Sun, 21 Aug 2022 10:32:54 -0500
Subject: [PATCH] feat: style messages

---
 .../ChatTranscript/ChatTranscript.tsx          | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/ChatTranscript/ChatTranscript.tsx b/src/components/ChatTranscript/ChatTranscript.tsx
index 5e4811c..9821bf5 100644
--- a/src/components/ChatTranscript/ChatTranscript.tsx
+++ b/src/components/ChatTranscript/ChatTranscript.tsx
@@ -8,9 +8,23 @@ export interface ChatTranscriptProps {
 
 export const ChatTranscript = ({ messageLog }: ChatTranscriptProps) => {
   return (
-    <div className="ChatTranscript">
+    <div className="ChatTranscript flex flex-col">
       {messageLog.map((message, idx) => (
-        <Typography key={`${idx}_${message}`}>{message.text}</Typography>
+        <div className="block">
+          <Typography
+            key={`${idx}_${message}`}
+            variant="body1"
+            sx={{
+              backgroundColor: 'primary.dark',
+              margin: 0.5,
+              padding: 1,
+              borderRadius: 4,
+              float: 'left',
+            }}
+          >
+            {message.text}
+          </Typography>
+        </div>
       ))}
     </div>
   )