Changed chat look and feel

src/client/components/App.js

@@ -3,7 +3,6 @@ import * as constants from '../constants.js'
 import Toolbar from './Toolbar.js'
 import Notifications, { NotificationPropTypes } from './Notifications.js'
 import Chat, { MessagePropTypes } from './Chat.js'
-import Input from './Input.js'
 import PropTypes from 'prop-types'
 import React from 'react'
 import Video, { StreamPropType } from './Video.js'
@@ -59,12 +58,13 @@ export default class App extends React.PureComponent {
         />
         <Alerts alerts={alerts} dismiss={dismissAlert} />
         <Notifications notifications={notifications} />
-        <div id="chat" ref={node => { this.chatRef = node }}>
+        <div className="chat-container" ref={node => { this.chatRef = node }}>
-          <Chat toolbarRef={this.toolbarRef} messages={messages} />
+          <Chat
-          <Input
+            messages={messages}
             videos={videos}
             notify={notify}
             sendMessage={sendMessage}
+            toolbarRef={this.toolbarRef}
           />
         </div>
         <div className="videos">

src/client/components/Chat.js

@@ -1,5 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
+import socket from '../socket.js'
+import Input from './Input.js'
 
 export const MessagePropTypes = PropTypes.shape({
   userId: PropTypes.string.isRequired,
@@ -10,8 +12,11 @@ export const MessagePropTypes = PropTypes.shape({
 
 export default class Chat extends React.PureComponent {
   static propTypes = {
-    toolbarRef: PropTypes.object.isRequired,
+    messages: PropTypes.arrayOf(MessagePropTypes).isRequired,
-    messages: PropTypes.arrayOf(MessagePropTypes).isRequired
+    videos: PropTypes.object.isRequired,
+    notify: PropTypes.func.isRequired,
+    sendMessage: PropTypes.func.isRequired,
+    toolbarRef: PropTypes.object.isRequired
   }
   handleCloseChat = e => {
     const { toolbarRef } = this.props
@@ -27,7 +32,7 @@ export default class Chat extends React.PureComponent {
     this.scrollToBottom()
   }
   render () {
-    const { messages } = this.props
+    const { messages, videos, notify, sendMessage } = this.props
     return (
       <div>
         <div className="chat-header">
@@ -38,30 +43,37 @@ export default class Chat extends React.PureComponent {
           </div>
           <div className="chat-title">Chat</div>
         </div>
-        <div className="chat-content" ref={div => { this.chatScroll = div }}>
+        <div className="chat-history" ref={div => { this.chatScroll = div }}>
 
           {messages.length ? (
             messages.map((message, i) => (
-              <div key={i} className="chat-item">
+              <div key={i}>
-                <div className="chat-item-label" />
+                {message.userId === socket.id ? (
-                <div className="chat-item-icon">
+                  <div className="chat-item chat-item-me">
-                  <div className="profile-image-component
+                    <div className="message">
-                    profile-image-component-circle">
+                      <span className="message-user-name">
-                    {message.image ? (
+                        {message.userId}
-                      <div className="profile-image-component-image">
+                      </span>
-                        <img src={message.image} />
+                      <span className="icon icon-schedule" />
+                      <time className="message-time">{message.timestamp}</time>
+                      <p className="message-text">{message.message}</p>
+                    </div>
+                    <img className="chat-item-img" src={message.image} />
                   </div>
                 ) : (
-                      <div className="profile-image-component-initials">
+                  <div className="chat-item chat-item-other">
-                        {message.userId.substr(0, 2).toUpperCase()}
+                    <img className="chat-item-img" src={message.image} />
+                    <div className="message">
+                      <span className="message-user-name">
+                        {message.userId}
+                      </span>
+                      <span className="icon icon-schedule" />
+                      <time className="message-time">{message.timestamp}</time>
+                      <p className="message-text">{message.message}</p>
+                    </div>
                   </div>
                 )}
               </div>
-                </div>
-                <div className="chat-item-content">
-                  {message.message}
-                </div>
-              </div>
             ))
           ) : (
             <div className="chat-empty">
@@ -71,6 +83,12 @@ export default class Chat extends React.PureComponent {
           )}
 
         </div>
+
+        <Input
+          videos={videos}
+          notify={notify}
+          sendMessage={sendMessage}
+        />
       </div>
     )
   }

src/client/components/Input.js

@@ -37,7 +37,11 @@ export default class Input extends React.PureComponent {
       sendMessage(message)
 
       const userId = socket.id
-      const timestamp = new Date()
+      const timestamp = new Date().toLocaleString('en-US', {
+        hour: 'numeric',
+        minute: 'numeric',
+        hour12: false
+      })
       let image = null
 
       // take snapshoot
@@ -61,18 +65,19 @@ export default class Input extends React.PureComponent {
   render () {
     const { message } = this.state
     return (
-      <form className="chat-footer" onSubmit={this.handleSubmit}>
+      <form className="chat-controls" onSubmit={this.handleSubmit}>
         <textarea
-          className="input"
+          className="chat-controls-textarea"
           onChange={this.handleChange}
           onKeyPress={this.handleKeyPress}
-          placeholder="Enter your message..."
+          placeholder="Type a message"
-          type="text"
           value={message}
         />
-        <button type="submit" className="send">
+        <div className="chat-controls-buttons">
-          <span className="icon icon-send" />
+          <input type="submit" value="Send"
-        </button>
+            className="chat-controls-buttons-send" />
+          <div className="chat-controls-buttons-wrapper" />
+        </div>
       </form>
     )
   }

src/res/fonts/icons.svg

@@ -12,10 +12,10 @@
 <glyph unicode="&#xe04b;" glyph-name="videocam" d="M726 405.333l170 170v-468l-170 170v-150c0-24-20-42-44-42h-512c-24 0-42 18-42 42v428c0 24 18 42 42 42h512c24 0 44-18 44-42v-150z" />
 <glyph unicode="&#xe04c;" glyph-name="videocam_off" d="M140 767.333l756-756-54-54-136 136c-6-4-16-8-24-8h-512c-24 0-42 18-42 42v428c0 24 18 42 42 42h32l-116 116zM896 575.333v-456l-478 478h264c24 0 44-18 44-42v-150z" />
 <glyph unicode="&#xe0b1;" glyph-name="call_end" d="M512 469.333c-68 0-134-10-196-30v-132c0-16-10-34-24-40-42-20-80-46-114-78-8-8-18-12-30-12s-22 4-30 12l-106 106c-8 8-12 18-12 30s4 22 12 30c130 124 306 200 500 200s370-76 500-200c8-8 12-18 12-30s-4-22-12-30l-106-106c-8-8-18-12-30-12s-22 4-30 12c-34 32-72 58-114 78-14 6-24 20-24 38v132c-62 20-128 32-196 32z" />
-<glyph unicode="&#xe163;" glyph-name="send" d="M86-42.667v298l640 86-640 86v298l896-384z" />
 <glyph unicode="&#xe5c8;" glyph-name="arrow_forward" d="M512 683.333l342-342-342-342-60 60 238 240h-520v84h520l-238 240z" />
 <glyph unicode="&#xe5d0;" glyph-name="fullscreen" d="M598 639.333h212v-212h-84v128h-128v84zM726 127.333v128h84v-212h-212v84h128zM214 427.333v212h212v-84h-128v-128h-84zM298 255.333v-128h128v-84h-212v212h84z" />
 <glyph unicode="&#xe5d1;" glyph-name="fullscreen_exit" d="M682 511.333h128v-84h-212v212h84v-128zM598 43.333v212h212v-84h-128v-128h-84zM342 511.333v128h84v-212h-212v84h128zM214 171.333v84h212v-212h-84v128h-128z" />
 <glyph unicode="&#xe5d4;" glyph-name="more_vert" d="M512 171.333c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86zM512 427.333c46 0 86-40 86-86s-40-86-86-86-86 40-86 86 40 86 86 86zM512 511.333c-46 0-86 40-86 86s40 86 86 86 86-40 86-86-40-86-86-86z" />
 <glyph unicode="&#xe8af;" glyph-name="question_answer" d="M726 341.333c0-24-20-42-44-42h-426l-170-172v598c0 24 18 42 42 42h554c24 0 44-18 44-42v-384zM896 597.333c24 0 42-18 42-42v-640l-170 170h-470c-24 0-42 18-42 42v86h554v384h86z" />
+<glyph unicode="&#xe8b5;" glyph-name="schedule" d="M534 555.333v-224l192-114-32-54-224 136v256h64zM512-0.667c188 0 342 154 342 342s-154 342-342 342-342-154-342-342 154-342 342-342zM512 767.333c236 0 426-190 426-426s-190-426-426-426-426 190-426 426 190 426 426 426z" />
 </font></defs></svg>

src/scss/_chat.scss

@@ -1,4 +1,4 @@
-#chat {
+.chat-container {
   position: fixed;
   top: 0;
   bottom: 0;
@@ -8,7 +8,8 @@
   transform: translateX(100%);
   -webkit-transition: -webkit-transform 0.5s cubic-bezier(0.55, 0, 0, 1), box-shadow 0.5s cubic-bezier(0.55, 0, 0, 1);
   transition: transform 0.5s cubic-bezier(0.55, 0, 0, 1), box-shadow 0.5s cubic-bezier(0.55, 0, 0, 1);
-  width: 360px;
+  width: 320px;
+  margin: 0 auto;
   z-index: 3;
 
   &.show {
@@ -18,18 +19,18 @@
     box-shadow: 0 5px 5px 5px rgba(0, 0, 0, 0.19), 0 1px 6px rgba(0, 0, 0, 0.12);
   }
 
-  @media (max-width: 575.98px) {
+  @media (max-width: 375.98px) {
     &.show {
       width: 100% !important;
     }
   }
+}
 
 .chat-header {
-    background-color: #333;
+  background: #42a7a1;
   color: #fff;
   height: 52px;
   line-height: 52px;
-  }
 
   .chat-close {
     font-size: 24px;
@@ -40,7 +41,6 @@
     float: left;
     width: 64px;
     cursor: pointer;
-  }
 
     .chat-button {
       float: right;
@@ -49,28 +49,30 @@
         color: #fff;
       }
     }
+  }
 
   .chat-title {
     font-size: 18px;
     font-weight: 500;
-    white-space: nowrap;
+    color: #fff;
-    overflow: hidden;
     text-overflow: ellipsis;
+    text-transform: uppercase;
+  }
 }
 
-  .chat-content {
+.chat-history {
-    background-color: #f2f2f2;
   bottom: 0;
   left: 0;
   overflow-y: auto;
   position: absolute;
   right: 0;
   top: 52px;
-    bottom: 52px;
+  bottom: 130px;
-  }
+  padding: 20px 20px 0;
+  background-color: #fff;
 
   .chat-empty {
-    color: #999;
+    color: #f6f6f6;
     left: 0;
     position: absolute;
     right: 0;
@@ -91,181 +93,144 @@
   }
 
   .chat-item {
-    background-color: #fff;
+    display: flex;
-    box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
+    align-items: flex-start;
-    line-height: 20px;
+    margin-bottom: 15px;
-    min-height: 80px;
+
-    padding: 15px 15px 15px 80px;
+    .chat-item-img {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      background: #75b1e8;
+    }
+
+    .message {
       position: relative;
-    border-top: 1px solid #e9e9e9;
+      padding: 10px;
+      border-radius: 5px;
+      background: #f6f6f6;
+      width: calc(100% - 40px);
 
-    .chat-item-label {
+      div {
-      display: none;
-    }
-
-    .chat-item-icon {
-      height: 50px;
-      left: 15px;
-      position: absolute;
-      top: 15px;
-      width: 50px;
-    }
-
-    .chat-item-content {
-      color: #363636;
         font-size: 13px;
-      font-weight: 400;
+        color: #777;
+        word-wrap: break-word;
+      }
+
+      .message-user-name {
+        font-size: 12px;
+        font-weight: bold;
+        color: #000;
+      }
+
+      .icon-schedule:before {
+        color: #999;
+        font-size: 11px;
+        margin: 0 2px;
+      }
+
+      .message-time {
+        font-size: 11px;
+        color: #999;
+      }
+
+      .message-text {
+        font-size: 13px;
+        color: #777;
         overflow: hidden;
         white-space: pre-wrap;
         word-wrap: break-word;
-
+        margin: 5px 0;
-      > {
-        a, span a {
-          color: #363636;
-          font-weight: 700;
-          text-decoration: none;
-        }
-      }
-    }
-
-    &.is-clickable {
-      cursor: pointer;
-
-      &:hover {
-        background-color: #ebf2fe;
       }
     }
 
-    &.is-labeled {
+    &.chat-item-me {
-      border-top: none;
+      .message {
-      margin-top: 40px;
+        margin-right: 15px;
 
-      .chat-item-label {
+        &::after {
-        color: #888;
+          left: 100%;
-        display: block;
+          border: solid transparent;
-        font-size: 13px;
+          border-left-color: #f6f6f6;
-        font-weight: 700;
+          content: "";
-        left: 0;
+          height: 0;
-        line-height: 20px;
+          width: 0;
-        padding: 10px;
           position: absolute;
-        top: -40px;
+          pointer-events: none;
+          border-width: 10px;
+          top: 10px;
         }
       }
     }
 
-  .chat-footer {
+    &.chat-item-other {
+      .message {
+        margin-left: 15px;
+
+        &::before {
+          right: 100%;
+          border: solid transparent;
+          border-right-color: #f6f6f6;
+          content: "";
+          height: 0;
+          width: 0;
+          position: absolute;
+          pointer-events: none;
+          border-width: 10px;
+          top: 10px;
+        }
+      }
+    }
+  }
+}
+
+.chat-controls {
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
-    height: 52px;
+  margin-top: 10px;
-    background: #fff;
+  background-color: #fff;
-    box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
+  border-top: 1px solid #f6f6f6;
-    border-top: 1px solid #e9e9e9;
+  padding: 20px;
 
-    .input {
+  .chat-controls-textarea {
-      height: 52px;
+    width: 100%;
-      background: #fff;
     border: none;
-      width: calc(100% - 52px);
+    border-radius: 5px;
-      position: absolute;
-      left: 0;
-      top: 0;
-      padding: 10px;
     resize: none;
-      overflow: scroll;
-      font-weight: 300;
-
-      &:focus {
     outline: none;
+    max-height: 80px;
+    height: 50px;
+    overflow: auto;
+    color: #777;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
   }
 
-      -ms-overflow-style: none;
+  .chat-controls-buttons {
-      overflow: -moz-scrollbars-none;
+    margin-top: 15px;
-      //gotta hide windows scrollbars
+    display: flex;
+    justify-content: space-between;
 
-      &::-webkit-scrollbar {
+    .chat-controls-buttons-wrapper {
-        width: 0 !important
+      display: flex;
-      }
     }
 
-    .send {
+    .chat-controls-buttons-send {
-      position: absolute;
+      padding: 0 15px;
-      height: 32px;
+      background: #407cf7;
-      width: 32px;
+      line-height: 25px;
-      border-radius: 50%;
+      display: inline-block;
+      color: #fff;
+      text-decoration: none;
+      border-radius: 3px;
       border: 0;
-      background: #000;
+      cursor: pointer;
-      color: #fff;
-      bottom: 8px;
-      right: 8px;
-      padding: 0 6px;
-
-      .icon {
-        font-size: 24px;
-      }
 
       &:focus {
         outline: none;
       }
-      &:hover {
-        cursor: pointer;
-      }
-    }
-  }
-}
-
-.profile-image-component {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  text-align: center;
-  background-color: #ccc;
-  color: #fff;
-  position: relative;
-  font-size: 0;
-  line-height: 0;
-
-  .profile-image-component-icon, .profile-image-component-initials {
-    left: 0;
-    position: absolute;
-    right: 0;
-    top: 50%;
-    -ms-transform: translateY(-50%);
-    -webkit-transform: translateY(-50%);
-    transform: translateY(-50%);
-  }
-
-  .profile-image-component-icon {
-    font-size: 22px;
-    font-weight: 400;
-  }
-
-  .profile-image-component-initials {
-    font-size: 16px;
-    font-weight: 500;
-    vertical-align: middle;
-  }
-
-  .profile-image-component-image {
-    height: 100%;
-    left: 0;
-    overflow: hidden;
-    position: absolute;
-    top: 0;
-    width: 100%;
-
-    > img {
-      height: 100%;
-    }
-  }
-
-  &.profile-image-component-circle {
-    border-radius: 50%;
-
-    .profile-image-component-image {
-      border-radius: 50%;
     }
   }
 }

src/scss/_fonts.scss

@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icons';
-  src: url('../res/fonts/icons.eot?ij9tsv');
+  src: url('../res/fonts/icons.eot?sd4p99');
-  src: url('../res/fonts/icons.eot?ij9tsv#iefix') format('embedded-opentype'),
+  src: url('../res/fonts/icons.eot?sd4p99#iefix') format('embedded-opentype'),
-       url('../res/fonts/icons.woff?ij9tsv') format('woff'),
+       url('../res/fonts/icons.woff?sd4p99') format('woff'),
-       url('../res/fonts/icons.ttf?ij9tsv') format('truetype'),
+       url('../res/fonts/icons.ttf?sd4p99') format('truetype'),
-       url('../res/fonts/icons.svg?ij9tsv#icons') format('svg');
+       url('../res/fonts/icons.svg?sd4p99#icons') format('svg');
   font-weight: normal;
   font-style: normal;
 }
@@ -14,7 +14,7 @@
 // @media screen and (-webkit-min-device-pixel-ratio:0) {
 //   @font-face {
 //     font-family: 'icons';
-//     src: url('./fonts/icons.svg?ij9tsv#icons') format('svg');
+//     src: url('./fonts/icons.svg?sd4p99#icons') format('svg');
 //   }
 // }
 
@@ -47,6 +47,9 @@
   /* text-shadow: 1px 1px 1px rgba(127, 127, 127, 0.3); */
 }
 
+.icon-schedule:before {
+  content: "\e8b5";
+}
 .icon-arrow_forward:before {
   content: "\e5c8";
 }
@@ -71,9 +74,6 @@
 .icon-more_vert:before {
   content: "\e5d4";
 }
-.icon-send:before {
-  content: "\e163";
-}
 .icon-videocam:before {
   content: "\e04b";
 }