making chat component and fix style issues relate to issue #7

frontend/src/AppRoutes.css

@@ -1,13 +1,16 @@
 .AppRoutes {
   text-align: center;
+    position: relative;
+    min-height: 667px;
+
 }
 
 #root {
   font-family: arial;
-  margin: 0 auto;
+  /* margin: 0 auto; */
   max-width: 375px;
   min-height: 600px;
     background-color:#EEEEEE;
 
-    padding-bottom: 0px;
+    /* padding-bottom: 0px; */
 }

frontend/src/AppRoutes.js

@@ -5,6 +5,8 @@ import './AppRoutes.css';
 import './style/style.css';
 
 import Login from './components/Login/Login';
+import Header from './components/Header';
+import Chats from './components/Chats/Chats';
 import Carers from './components/Carers/Carers';
 import Profile from './components/Profile/Profile';
 import Diaries from './components/MyDiary/MyDiary';
@@ -21,6 +23,7 @@ const AppRoutes = () => (
   <div className="AppRoutes">
   <BrowserRouter>
           <div>
+          <Header connectReq={['adsfa','sdfg']}/>
             <Switch>
               <Route path="/" component={Carers} exact />
               <Route path="/login" component={Login} />
@@ -30,6 +33,7 @@ const AppRoutes = () => (
               <Route path="/discussion" component={Discussion} />
               <Route path="/connection" component={Connection} />
               <Route path="/mybook" component={MyBook} />
+              <Route path="/chats" component={Chats} />
               <Route component={Error} />
             </Switch>
             <NavElements />

frontend/src/components/Chats/Chats.js

@@ -0,0 +1,74 @@
+import React, { Component } from 'react';
+import FontAwesome from 'react-fontawesome';
+
+import './styles.css';
+
+class Chats extends React.PureComponent {
+
+  state = {
+    chat: ['hello', 'hi!', 'do you want to chat?']
+  }
+
+  saveMsg = (msg) => this.setState({
+    chat: [
+      ...this.state.chat,
+      msg
+    ]
+  })
+
+  render() {
+    return (
+    <section className="chat">
+        <div>
+          <header className="is-link is-bold">
+            <h1> Chat Page </h1>
+          </header>
+        </div>
+      <section className="chat section">
+        <div className="chats-body">
+          <Messages chat={this.state.chat} />
+        </div>
+      </section>
+        <div>
+          <footer className="is-small">
+            <Chat saveMsg={this.saveMsg} />
+          </footer>
+        </div>
+    </section>
+    )
+  }
+}
+
+const Chat = ({ saveMsg }) => (
+  <form className="messageFiled" onSubmit={(e) => {
+    e.preventDefault();
+    saveMsg(e.target.elements.userInput.value);
+    e.target.reset();
+  }}>
+    <div className="field has-addons">
+      <div className="control is-expanded">
+        <input className="input" name="userInput" type="text" placeholder="Type your message" />
+      </div>
+      <div className="control">
+        <button className="button is-info">
+          <FontAwesome  name='send' /> Send
+        </button>
+      </div>
+    </div>
+  </form>
+);
+
+const Messages = ({ chat }) => (
+  <div style={{ heigth: '100%', width: '100%' }}>
+    {chat.map((m, i) => {
+      const msgClass = i === 0 || i % 2 === 0 // for demo purposes, format every other msg
+      return (
+        <p style={{ padding: '.25em', textAlign: msgClass ? 'left' : 'right', overflowWrap: 'normal' }}>
+          <span key={i} className={`tag is-medium ${msgClass ? 'is-success' : 'is-info'}`}>{m}</span>
+        </p>
+      )}
+    )}
+  </div>
+);
+
+export default Chats;

frontend/src/components/Chats/styles.css

@@ -0,0 +1,195 @@
+.chat{
+  padding: 3rem 1.5rem;
+  box-sizing: inherit;
+  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen",
+  "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica",
+  "Arial", sans-serif;
+  width: 302px;
+  text-align: center;
+  padding-left: 10px;
+}
+
+.chat h1{
+  color: #48a1af;
+  margin-left: 60px;
+}
+
+.chat p{
+  padding: 0.25em;
+  text-align: left;
+  overflow-wrap: normal;
+}
+
+.tag:not(body).is-medium {
+    font-size: 16px;
+}
+
+.tag:not(body).is-success {
+    background-color: #23d160;
+    color: #fff;
+  }
+
+  .tag:not(body) {
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    background-color: whitesmoke;
+    border-radius: 3px;
+    color: #4a4a4a;
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    font-size: 0.75rem;
+    height: 2em;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    line-height: 1.5;
+    padding-left: 0.75em;
+    padding-right: 0.75em;
+    white-space: nowrap;
+}
+
+.chat span {
+    font-style: inherit;
+    font-weight: inherit;
+}
+
+.tag:not(body).is-info {
+    background-color: #209cee;
+    color: #fff;
+}
+
+.field.has-addons .control:first-child .input, .field.has-addons .control:first-child .select select {
+    border-bottom-right-radius: 0;
+    border-top-right-radius: 0;
+}
+
+.input, .textarea {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    border: 1px solid transparent;
+    border-radius: 3px;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    font-size: 1rem;
+    height: 2.25em;
+    -webkit-box-pack: start;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+    line-height: 1.5;
+    padding-bottom: calc(0.375em - 1px);
+    padding-left: calc(0.625em - 1px);
+    padding-right: calc(0.625em - 1px);
+    padding-top: calc(0.375em - 1px);
+    position: relative;
+    vertical-align: top;
+    background-color: white;
+    border-color: #dbdbdb;
+    color: #363636;
+    -webkit-box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
+    box-shadow: inset 0 1px 2px rgba(10, 10, 10, 0.1);
+    max-width: 100%;
+    width: 100%;
+}
+
+.chat input, select, textarea {
+    font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+    margin: 0;
+    margin-left: 23px;
+}
+
+.button.is-info {
+    background-color: #209cee;
+    border-color: transparent;
+    color: #fff;
+    height: 45px;
+    width: 72px;
+    font-size: 17px;
+}
+
+.button {
+    -moz-appearance: none;
+    -webkit-appearance: none;
+    -webkit-box-align: center;
+    -ms-flex-align: center;
+    align-items: center;
+    border: 1px solid transparent;
+    border-radius: 3px;
+    -webkit-box-shadow: none;
+    box-shadow: none;
+    display: -webkit-inline-box;
+    display: -ms-inline-flexbox;
+    display: inline-flex;
+    font-size: 1rem;
+    height: 2.25em;
+    -webkit-box-pack: start;
+    -ms-flex-pack: start;
+    justify-content: flex-start;
+    line-height: 1.5;
+    padding-bottom: calc(0.375em - 1px);
+    padding-left: calc(0.625em - 1px);
+    padding-right: calc(0.625em - 1px);
+    padding-top: calc(0.375em - 1px);
+    position: relative;
+    vertical-align: top;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    background-color: white;
+    border-color: #dbdbdb;
+    color: #363636;
+    cursor: pointer;
+    -webkit-box-pack: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    padding-left: 0.75em;
+    padding-right: 0.75em;
+    text-align: center;
+    white-space: nowrap;
+}
+
+.chat button{
+  font-family: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+}
+
+.chat footer{
+  display: block;
+}
+
+.chat input{
+  height: 45px;
+  font-size: 17px;
+}
+
+.field {
+  width: 328px;
+  display: flex;
+  flex-direction: row;
+  justify-content:center;
+}
+
+.messageFiled{
+  position: absolute;
+  bottom: 70px;
+}
+
+.is-expanded{
+  width: 100%;
+}
+
+.section{
+ overflow-y: scroll;
+ height: 340px;
+ margin-top: 20px;
+ margin-left: 25px;
+ background-color: #FAFAFA;
+}

frontend/src/components/Navbar/NavElement/style.css

@@ -1,7 +1,10 @@
 .navStyle{
-  padding-top: 545px;
+  /* padding-top: 545px; */
+  position: absolute;
+  bottom: 0;
   width: 375px;
   height: 55px;
+
 }
 
 .navStyle button{
@@ -10,6 +13,7 @@
   height: 55px;
   border: none;
   background-color: #48A1AF;
+    padding: 5px;
 }
 
 .navStyle button img{