client/src/components/SendMessageForm.js

import React from 'react'
import { makeStyles } from '@material-ui/core/styles';
import { IconButton, InputBase, Paper } from '@material-ui/core'
import SendIcon from '@material-ui/icons/Send';

const useStyles = makeStyles((theme) => ({
    root: {
      margin: 16,
      padding: '2px 4px',
      display: 'flex',
      alignItems: 'center',
      borderRadius: 8
    },
    input: {
      marginLeft: theme.spacing(1),
      flex: 1,
    },
    iconButton: {
      padding: 10,
    },
    divider: {
      height: 28,
      margin: 4,
    },
  }));

  export default function SendMessageForm(props) {
    const classes = useStyles();

    const handleSubmit = e => {
        e.preventDefault()
    }

    return (
        <div className="send-message-form">
        <Paper component="form"
            onSubmit={handleSubmit}
            className="send-message-card"
            className={classes.root}>
            <InputBase
                className={classes.input}
                placeholder="Write something nice"
                height="35"
            />
            <IconButton type="submit" className={classes.iconButton} aria-label="search">
                <SendIcon />
            </IconButton>
        </Paper>
        </div>
    )
}