Improved the look

web-chat/src/App.tsx

@@ -1,3 +1,4 @@
+import { Paper } from '@material-ui/core';
 import React from 'react';
 import './App.css';
 import Room from './Room';
@@ -39,7 +40,9 @@ class App extends React.Component<Props, State> {
       <div className='App'>
         <div className='chat-room'>
           <WakuContext.Provider value={{ waku: this.state.waku }}>
-            <Room lines={this.state.messages} />
+            <Paper >
+              <Room lines={this.state.messages} />
+            </Paper>
           </WakuContext.Provider>
         </div>
       </div>

web-chat/src/MessageInput.tsx

@@ -25,8 +25,14 @@ export default class MessageInput extends React.Component<Props, State> {
   render() {
     return (
       <TextField variant='outlined'
-                 label='Send a message...'
-                 onChange={this.messageHandler}
+                 label='Send a message'
+                 fullWidth
+                 style={{ margin: 8 }}
+                 margin="normal"
+                 InputLabelProps={{
+                   shrink: true,
+                 }}
+                 onChange={this.messageHandler.bind(this)}
       />
     );
   }

web-chat/src/Room.tsx

@@ -1,9 +1,9 @@
 import {
-  Container,
+  Box,
   Grid,
   List,
   ListItem,
-  ListItemText
+  ListItemText, Paper
 } from '@material-ui/core';
 import React from 'react';
 import MessageInput from './MessageInput';
@@ -32,27 +32,34 @@ export default class Room extends React.Component<Props, State> {
 
   render() {
     return (
-      <div>
-        <Grid container spacing={2}>
-          <Grid item xs={12}>
-            <Container maxWidth='xl'>
-              {this.renderLines()}
-            </Container>
-          </Grid>
-          <Grid item xs={10}>
-            <MessageInput messageHandler={this.messageHandler} />
-          </Grid>
-          <Grid item xs={2}>
-            <Send message={this.state.messageToSend} />
+      <Grid container spacing={2}>
+
+        <Grid item xs={12}>
+          <Box height={1080} maxHeight={1080}
+               style={{ flex: 1, maxHeight: '100%', overflow: 'scroll' }}>
+            {this.renderLines()}
+          </Box>
+        </Grid>
+
+        <Grid item xs={12}>
+          <Grid container spacing={2} direction="row" alignItems="center">
+            <Grid item xs={11}>
+              <MessageInput messageHandler={this.messageHandler.bind(this)} />
+            </Grid>
+            <Grid item xs={1}>
+              <Send message={this.state.messageToSend} />
+            </Grid>
           </Grid>
         </Grid>
-      </div>
+
+      </Grid>
     );
   }
 
   // TODO: Make it own component
   renderLines() {
     const renderedLines = [];
+
     for (const line of this.props.lines) {
       renderedLines.push(<ListItem>
         <ListItemText

web-chat/src/Send.tsx

@@ -14,7 +14,7 @@ const Send = (props: Props) => {
   };
 
   return (
-    <Button variant="contained" color="primary" onClick={handleClick}>
+    <Button variant="contained" color="primary" size="large" onClick={handleClick}>
       Send
     </Button>
   );

web-chat/src/index.css

@@ -22,3 +22,7 @@ code {
   content: "";
   display: table;
 }
+
+.chat-room{
+  margin: 2px;
+}