formatted chat input better, got rid of resize, added end adornment to send messages without the enter button

src/chat/ChatInput.tsx

@@ -1,45 +1,41 @@
 import {
   Box,
   Grid2 as Grid,
+  IconButton,
+  TextareaAutosize,
   Theme,
   Typography,
   useTheme
 } from "@mui/material";
-//import { pond } from "protobuf-ts/pond";
 import { useGlobalState, useNoteAPI, useSnackbar } from "providers";
 import React, { useState } from "react";
-// import { getThemeType } from "theme";
 import { Note } from "models";
 import { pond } from "protobuf-ts/pond";
 import { makeStyles } from "@mui/styles";
-//import { AttachFile } from "@material-ui/icons";
-//import ResponsiveDialog from "common/ResponsiveDialog";
-//import FileUploader from "common/FileUploads/FileUploader";
-//import { cloneDeep } from "lodash";
+import { ArrowUpward } from "@mui/icons-material";
 
 const useStyles = makeStyles((theme: Theme) => ({
-  iconBox: {
-    width: 36,
-    height: 36,
-    margin: 8,
-    marginRight: 12
-  },
   textAreaBox: {
     width: "100%",
     padding: theme.spacing(1),
     paddingTop: theme.spacing(0),
   },
   textAreaClass: {
-    padding: theme.spacing(1),
-    // backgroundColor: getThemeType() === "light" ? "rgb(245, 245, 245)" : "rgb(50, 50, 50)",
-    // borderColor: getThemeType() === "light" ? "rgb(255, 255, 255)" : "rgb(60, 60, 60)",
-    // color: getThemeType() === "light" ? "rgb(10, 10, 10)" : "rgb(245, 245, 245)",
+    resize: "none",
+    padding: theme.spacing(2),
+    paddingRight: theme.spacing(7),
     backgroundColor: theme.palette.background.paper,
     borderColor: theme.palette.background.default,
     color: theme.palette.text.primary,
     borderRadius: "5px",
     width: "100%",
-    
+    fontFamily: theme.typography.fontFamily,
+    fontSize: theme.typography.body2.fontSize,
+    '&:focus': {
+      outline: "none",
+      boxShadow: "none",
+      borderColor: "ActiveBorder",
+    }
   }
 }))
 
@@ -138,13 +134,27 @@ export default function ChatInput(props: Props) {
         style={{ marginTop: theme.spacing(1) }}>
         <Grid size={{ xs: 12 }} >
           <Box className={classes.textAreaBox}>
-            <textarea
-              value={message}
-              className={classes.textAreaClass}
-              onChange={e => setMessage(e.target.value)}
-              onKeyDown={onKeyDown}
-              onKeyUp={onKeyUp}
-            />
+            <Box style={{ position: "relative", display: "inline-block", width: "100%" }}>
+              <TextareaAutosize
+                value={message}
+                className={classes.textAreaClass}
+                onChange={e => setMessage(e.target.value)}
+                onKeyDown={onKeyDown}
+                onKeyUp={onKeyUp}
+              />
+              <Box
+                style={{
+                  position: "absolute",
+                  right: "10px",
+                  top: "50%",
+                  transform: "translateY(-50%)",
+                }}
+              >
+                <IconButton onClick={validateMessage}>
+                  <ArrowUpward/>
+                </IconButton>
+              </Box>
+            </Box>
           </Box>
         </Grid>
       </Grid>