From 38378f0dfbdcb97b20dc36aa20d49a35e38c7195 Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <jeremyckahn@gmail.com>
Date: Mon, 5 Sep 2022 12:12:54 -0500
Subject: [PATCH] feat: simplify and improve UI layout

---
 src/components/ChatTranscript/ChatTranscript.tsx | 1 +
 src/components/Room/Room.tsx                     | 6 ++++--
 src/components/Shell/Shell.tsx                   | 9 +--------
 src/pages/Home/Home.tsx                          | 2 +-
 4 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/components/ChatTranscript/ChatTranscript.tsx b/src/components/ChatTranscript/ChatTranscript.tsx
index 188b52f..8856fa3 100644
--- a/src/components/ChatTranscript/ChatTranscript.tsx
+++ b/src/components/ChatTranscript/ChatTranscript.tsx
@@ -46,6 +46,7 @@ export const ChatTranscript = ({
       sx={theme => ({
         display: 'flex',
         flexDirection: 'column',
+        paddingY: theme.spacing(1),
       })}
     >
       {messageLog.map(message => {
diff --git a/src/components/Room/Room.tsx b/src/components/Room/Room.tsx
index 5089ad4..8a547ce 100644
--- a/src/components/Room/Room.tsx
+++ b/src/components/Room/Room.tsx
@@ -5,6 +5,7 @@ import FormControl from '@mui/material/FormControl'
 import Stack from '@mui/material/Stack'
 import TextField from '@mui/material/TextField'
 import Fab from '@mui/material/Fab'
+import Divider from '@mui/material/Divider'
 import ArrowUpward from '@mui/icons-material/ArrowUpward'
 
 import { ShellContext } from 'ShellContext'
@@ -164,9 +165,10 @@ export function Room({
       <ChatTranscript
         messageLog={messageLog}
         userId={userId}
-        className="grow overflow-auto"
+        className="grow overflow-auto px-4"
       />
-      <form onSubmit={handleMessageSubmit} className="mt-2">
+      <Divider />
+      <form onSubmit={handleMessageSubmit} className="p-4">
         <Stack direction="row" spacing={2}>
           <FormControl fullWidth>
             <TextField
diff --git a/src/components/Shell/Shell.tsx b/src/components/Shell/Shell.tsx
index c94a6b8..529a03e 100644
--- a/src/components/Shell/Shell.tsx
+++ b/src/components/Shell/Shell.tsx
@@ -53,9 +53,6 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
 const Main = styled('main', { shouldForwardProp: prop => prop !== 'open' })<{
   open?: boolean
 }>(({ theme, open }) => ({
-  flexGrow: 1,
-  padding: theme.spacing(3),
-  paddingTop: 0,
   transition: theme.transitions.create('margin', {
     easing: theme.transitions.easing.sharp,
     duration: theme.transitions.duration.leavingScreen,
@@ -296,14 +293,10 @@ export const Shell = ({ children, userPeerId }: ShellProps) => {
             sx={{
               display: 'flex',
               flexDirection: 'column',
-              flexGrow: 'unset',
-              height: '100%',
               width: '100%',
-              maxHeight: '100%',
-              overflow: 'auto',
             }}
           >
-            <DrawerHeader sx={{ flexGrow: 1 }}></DrawerHeader>
+            <DrawerHeader />
             <Box sx={{ overflow: 'auto', flexGrow: 1 }}>{children}</Box>
           </Main>
         </Box>
diff --git a/src/pages/Home/Home.tsx b/src/pages/Home/Home.tsx
index d2e93ec..414b1a0 100644
--- a/src/pages/Home/Home.tsx
+++ b/src/pages/Home/Home.tsx
@@ -29,7 +29,7 @@ export function Home() {
   }
 
   return (
-    <Box className="Home">
+    <Box className="Home px-4">
       <header className="max-w-3xl text-center mx-auto mt-8">
         <Typography variant="body1">
           This is a communication tool that is free, open source, and designed