From 50a2c3777b07f77b6f391deab4bf95f77fe71ae5 Mon Sep 17 00:00:00 2001
From: Franck Royer <franck@royer.one>
Date: Mon, 19 Apr 2021 14:54:39 +1000
Subject: [PATCH] Improved the look

---
 web-chat/src/App.tsx          |  5 ++++-
 web-chat/src/MessageInput.tsx | 10 ++++++++--
 web-chat/src/Room.tsx         | 37 +++++++++++++++++++++--------------
 web-chat/src/Send.tsx         |  2 +-
 web-chat/src/index.css        |  4 ++++
 5 files changed, 39 insertions(+), 19 deletions(-)

diff --git a/web-chat/src/App.tsx b/web-chat/src/App.tsx
index 2a2d8fad91..430729d6b1 100644
--- a/web-chat/src/App.tsx
+++ b/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>
diff --git a/web-chat/src/MessageInput.tsx b/web-chat/src/MessageInput.tsx
index 39f50b89b9..3858e1ce9e 100644
--- a/web-chat/src/MessageInput.tsx
+++ b/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)}
       />
     );
   }
diff --git a/web-chat/src/Room.tsx b/web-chat/src/Room.tsx
index f46b36deef..51fc17127f 100644
--- a/web-chat/src/Room.tsx
+++ b/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
diff --git a/web-chat/src/Send.tsx b/web-chat/src/Send.tsx
index b628196bc9..1f393ed1d9 100644
--- a/web-chat/src/Send.tsx
+++ b/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>
   );
diff --git a/web-chat/src/index.css b/web-chat/src/index.css
index a6cbaec0da..16a2e803f3 100644
--- a/web-chat/src/index.css
+++ b/web-chat/src/index.css
@@ -22,3 +22,7 @@ code {
   content: "";
   display: table;
 }
+
+.chat-room{
+  margin: 2px;
+}