feat: improve message styling

src/components/ChatTranscript/ChatTranscript.tsx

@@ -4,9 +4,10 @@ import { UnsentMessage, ReceivedMessage } from 'models/chat'
 
 export interface ChatTranscriptProps {
   messageLog: Array<UnsentMessage | ReceivedMessage>
+  userId: string
 }
 
-export const ChatTranscript = ({ messageLog }: ChatTranscriptProps) => {
+export const ChatTranscript = ({ messageLog, userId }: ChatTranscriptProps) => {
   return (
     <div className="ChatTranscript flex flex-col">
       {messageLog.map((message, idx) => (
@@ -15,11 +16,12 @@ export const ChatTranscript = ({ messageLog }: ChatTranscriptProps) => {
             key={`${idx}_${message}`}
             variant="body1"
             sx={{
-              backgroundColor: 'primary.dark',
+              backgroundColor:
+                message.authorId === userId ? 'primary.dark' : 'grey.700',
               margin: 0.5,
               padding: 1,
               borderRadius: 4,
-              float: 'left',
+              float: message.authorId === userId ? 'right' : 'left',
             }}
           >
             {message.text}

src/components/Room/Room.tsx

@@ -93,7 +93,7 @@ export function Room({
           Send
         </Button>
       </form>
-      <ChatTranscript messageLog={messageLog} />
+      <ChatTranscript messageLog={messageLog} userId={userId} />
     </div>
   )
 }

src/index.tsx

@@ -2,6 +2,7 @@ import ReactDOM from 'react-dom/client'
 import { BrowserRouter as Router } from 'react-router-dom'
 import { ThemeProvider, createTheme } from '@mui/material/styles'
 import CssBaseline from '@mui/material/CssBaseline'
+import 'typeface-roboto'
 
 import * as serviceWorkerRegistration from 'serviceWorkerRegistration'
 import 'index.sass'