refactor: use Box instead of div

src/Bootstrap.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from 'react'
 import { Routes, Route } from 'react-router-dom'
 import { v4 as uuid } from 'uuid'
 import localforage from 'localforage'
+import Box from '@mui/material/Box'
 
 import { Home } from 'pages/Home/'
 import { PublicRoom } from 'pages/PublicRoom/'
@@ -47,7 +48,7 @@ function Bootstrap({
   }, [hasLoadedSettings, persistedStorage, settings, userId])
 
   return (
-    <div className="Chitchatter">
+    <Box className="Chitchatter">
       {hasLoadedSettings ? (
         <Routes>
           {['/', '/index.html'].map(path => (
@@ -59,7 +60,7 @@ function Bootstrap({
           />
         </Routes>
       ) : null}
-    </div>
+    </Box>
   )
 }
 

src/components/ChatTranscript/ChatTranscript.tsx

@@ -1,5 +1,6 @@
 import { HTMLAttributes } from 'react'
 import cx from 'classnames'
+import Box from '@mui/material/Box'
 
 import { Message as IMessage } from 'models/chat'
 import { Message } from 'components/Message'
@@ -15,10 +16,10 @@ export const ChatTranscript = ({
   userId,
 }: ChatTranscriptProps) => {
   return (
-    <div className={cx('ChatTranscript flex flex-col', className)}>
+    <Box className={cx('ChatTranscript flex flex-col', className)}>
       {messageLog.map(message => {
         return <Message key={message.id} message={message} userId={userId} />
       })}
-    </div>
+    </Box>
   )
 }

src/components/Room/Room.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react'
 import { v4 as uuid } from 'uuid'
+import Box from '@mui/material/Box'
 import FormControl from '@mui/material/FormControl'
 import Typography from '@mui/material/Typography'
 import Stack from '@mui/material/Stack'
@@ -97,7 +98,7 @@ export function Room({
   })
 
   return (
-    <div className="h-full p-4 flex flex-col">
+    <Box className="h-full p-4 flex flex-col">
       <Typography>Room ID: {roomId}</Typography>
       <ChatTranscript
         messageLog={messageLog}
@@ -132,6 +133,6 @@ export function Room({
           </Fab>
         </Stack>
       </form>
-    </div>
+    </Box>
   )
 }

src/pages/Home/Home.tsx

@@ -1,6 +1,7 @@
 import React, { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import Button from '@mui/material/Button'
+import Box from '@mui/material/Box'
 import FormControl from '@mui/material/FormControl'
 import Typography from '@mui/material/Typography'
 import TextField from '@mui/material/TextField'
@@ -21,7 +22,7 @@ export function Home() {
   }
 
   return (
-    <div className="Home">
+    <Box className="Home">
       <header className="max-w-3xl text-center mx-auto">
         <Typography variant="h1">chitchatter</Typography>
         <Typography variant="body1">
@@ -55,6 +56,6 @@ export function Home() {
           </Button>
         </form>
       </main>
-    </div>
+    </Box>
   )
 }