Merge branch 'ui' of tsr/chatz into master

public/css/custom.css

@@ -0,0 +1,9 @@
+.avatar .username {
+  display: none;
+}
+.avatar:hover .username {
+  display: block;
+  position: absolute;
+  z-index: 1;
+  float: left;
+}

public/index.html

@@ -7,6 +7,7 @@
     <meta name="theme-color" content="#000000" />
 
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <link rel="stylesheet" type="text/css" href="css/custom.css" />
 
     <title>app</title>
   </head>

src/components/Chat.js

@@ -52,6 +52,9 @@ class Chat extends React.Component {
 
   handleSubmit(e) {
     e.preventDefault()
+    if (this.state.text === '') {
+      return
+    }
     const message = { socketId: socket.id, id: uuid(), text: this.state.text }
     const messages = this.state.messages.concat(message)
     this.setState({ messages, text: '' })

src/components/SingleMessage.js

@@ -5,18 +5,29 @@ const SingleMessage = props => {
 
   if (user.socketId === socketId)
     return (
-      <ListGroup.Item className="my-2 bg-dark text-white">
-        <div className="float-right">{text}</div>
+      <ListGroup.Item className="my-2">
+        <div className="p-2 bg-dark text-white float-right">
+          {text}
+          <div className="time_date">00:00 AM | July 14</div>
+        </div>
       </ListGroup.Item>
     )
   return (
     <ListGroup.Item className="my-2">
+      <div className="avatar float-left">
         <Image
-        className={`mx-2`}
+          className="m-3"
           style={{ height: '24px' }}
           src={user.userImage}
         />
-      {user.socketId}: {text}
+        <span className="username p-2 bg-white border border-secondary">
+          {user.socketId}
+        </span>
+      </div>
+      <div className="p-2 bg-light text-dark float-left">
+        {text}
+        <div className="time_date">00:00 AM | July 14</div>
+      </div>
     </ListGroup.Item>
   )
 }