[add] styles scroll and message styl

Author: jgalianoz

src/client/Components/Discussions.js

@@ -50,22 +50,20 @@ export default class Discussions extends React.Component {
     this.state.messages.push( message );
     let MessageGlobal = this.state.messages;
     this.setState({ messages: MessageGlobal });
-    
+
     contMessage.scrollTop = contMessage.scrollHeight;
   }
 
   render(){
     return <section className="conversationBody">
-      <div className="header-user">
+      <header className="header-user">
+        <figure className="logo">
+          <img src="images/logo.png" width="130" height="100" />
+        </figure>
         <figure className="avatar">
-          <img src={this.props.avatar} width="30" height="30" />
+          <img src={this.props.avatar} width="40" height="40" />
         </figure>
-
-        <h2 className="header-user-username">
-          { `${this.props.username}` }
-        </h2>
-      </div>
-
+      </header>
 
       <MessageList
         messages={this.state.messages}/>

src/client/Components/MessageList.js

@@ -14,6 +14,7 @@ export default function MessageList (props){
           </figure>
           <div className="Message-Body">
             <div>
+              <h4>{item.username}</h4>
               <p>
                 { item.message }
               </p>

src/client/stylus/scroll.styl

@@ -0,0 +1,15 @@
+::-webkit-scrollbar
+
+  width 8px  /* for vertical scrollbars */
+  height 8px /* for horizontal scrollbars */
+
+
+::-webkit-scrollbar-track
+
+  background rgba(0, 0, 0, 0.1)
+  border-radius 10px
+
+
+::-webkit-scrollbar-thumb
+  background rgba(0, 0, 0, 0.2)
+  border-radius 10px

src/client/stylus/style.styl

@@ -3,13 +3,16 @@
 @import 'util'
 @import 'colours'
 @import 'formsUI'
+@import 'scroll'
 
 body
   font-size 16px
 
 h1
 h2
 h3
+h4
+p
 figure
   margin 0
   padding 0
@@ -34,14 +37,21 @@ figure
   width 100%
 
   .header-user
-    background purpe
+    align-items center
+    display flex
+    flex-direction row
+    justify-content space-between
     padding 1em
 
+    > .avatar
+        > img
+            border-radius 50%
+
   .ListMessage
     box-sizing border-box
     display flex
     flex-direction column
-    height calc(100vh - 186.59px)
+    height calc(100vh - 222.59px)
     overflow-y auto
     padding 20px
     width 100%
@@ -50,6 +60,12 @@ figure
       margin-bottom .5em
       &-avatar
         float left
+        > img
+            border-radius 50%
+      &-Body
+        margin-left 50px
+        > p
+            margin-top 2px
 
   .Message-form
     position fixed