From 7e107e829035e1f12c470f838ab23f8b561a23b7 Mon Sep 17 00:00:00 2001
From: Jeremy Kahn <jeremyckahn@gmail.com>
Date: Sat, 27 Aug 2022 19:06:54 -0500
Subject: [PATCH] feat: improve sending UI layout

---
 src/components/Room/Room.test.tsx |  8 +++---
 src/components/Room/Room.tsx      | 45 ++++++++++++++++---------------
 2 files changed, 28 insertions(+), 25 deletions(-)

diff --git a/src/components/Room/Room.test.tsx b/src/components/Room/Room.test.tsx
index a4ceba8..2bc8f9d 100644
--- a/src/components/Room/Room.test.tsx
+++ b/src/components/Room/Room.test.tsx
@@ -59,7 +59,7 @@ describe('Room', () => {
       </RouteStub>
     )
 
-    const sendButton = screen.getByText('Send')
+    const sendButton = screen.getByLabelText('Send')
     expect(sendButton).toBeDisabled()
   })
 
@@ -70,7 +70,7 @@ describe('Room', () => {
       </RouteStub>
     )
 
-    const sendButton = screen.getByText('Send')
+    const sendButton = screen.getByLabelText('Send')
     const textInput = screen.getByPlaceholderText('Your message')
     userEvent.type(textInput, 'hello')
     expect(sendButton).not.toBeDisabled()
@@ -83,7 +83,7 @@ describe('Room', () => {
       </RouteStub>
     )
 
-    const sendButton = screen.getByText('Send')
+    const sendButton = screen.getByLabelText('Send')
     const textInput = screen.getByPlaceholderText('Your message')
     userEvent.type(textInput, 'hello')
 
@@ -105,7 +105,7 @@ describe('Room', () => {
       </RouteStub>
     )
 
-    const sendButton = screen.getByText('Send')
+    const sendButton = screen.getByLabelText('Send')
     const textInput = screen.getByPlaceholderText('Your message')
     userEvent.type(textInput, 'hello')
 
diff --git a/src/components/Room/Room.tsx b/src/components/Room/Room.tsx
index fb1271e..7a6d3ad 100644
--- a/src/components/Room/Room.tsx
+++ b/src/components/Room/Room.tsx
@@ -1,9 +1,11 @@
 import { useState } from 'react'
 import { v4 as uuid } from 'uuid'
-import Button from '@mui/material/Button'
 import FormControl from '@mui/material/FormControl'
 import Typography from '@mui/material/Typography'
+import Stack from '@mui/material/Stack'
 import TextField from '@mui/material/TextField'
+import Fab from '@mui/material/Fab'
+import ArrowUpward from '@mui/icons-material/ArrowUpward'
 
 import { usePeerRoom, usePeerRoomAction } from 'hooks/usePeerRoom'
 import { PeerActions } from 'models/network'
@@ -82,26 +84,27 @@ export function Room({
         userId={userId}
         className="grow overflow-auto"
       />
-      <form onSubmit={handleMessageSubmit} className="max-w-xl mt-8">
-        <FormControl fullWidth>
-          <TextField
-            variant="outlined"
-            value={textMessage}
-            onChange={handleMessageChange}
-            size="medium"
-            placeholder="Your message"
-          />
-        </FormControl>
-        <Button
-          variant="contained"
-          type="submit"
-          disabled={textMessage.length === 0 || isMessageSending}
-          sx={{
-            marginTop: 2,
-          }}
-        >
-          Send
-        </Button>
+      <form onSubmit={handleMessageSubmit} className="mt-8">
+        <Stack direction="row" spacing={2}>
+          <FormControl fullWidth>
+            <TextField
+              variant="outlined"
+              value={textMessage}
+              onChange={handleMessageChange}
+              size="medium"
+              placeholder="Your message"
+            />
+          </FormControl>
+          <Fab
+            className="shrink-0"
+            aria-label="Send"
+            type="submit"
+            disabled={textMessage.length === 0 || isMessageSending}
+            color="primary"
+          >
+            <ArrowUpward />
+          </Fab>
+        </Stack>
       </form>
     </div>
   )