From d016f4742f7f21ca97856a8329bc93ee6c16c181 Mon Sep 17 00:00:00 2001
From: "Michael H. Arieli" <michaelharieli@gmail.com>
Date: Sun, 2 Dec 2018 16:30:13 -0800
Subject: [PATCH] Changed chat look and feel

---
 src/client/components/App.js   |   8 +-
 src/client/components/Chat.js  |  62 +++---
 src/client/components/Input.js |  21 +-
 src/res/fonts/icons.eot        | Bin 2364 -> 2524 bytes
 src/res/fonts/icons.svg        |   2 +-
 src/res/fonts/icons.ttf        | Bin 2208 -> 2368 bytes
 src/res/fonts/icons.woff       | Bin 2284 -> 2444 bytes
 src/scss/_chat.scss            | 341 +++++++++++++++------------------
 src/scss/_fonts.scss           |  18 +-
 9 files changed, 220 insertions(+), 232 deletions(-)

diff --git a/src/client/components/App.js b/src/client/components/App.js
index adc122f..e742d41 100644
--- a/src/client/components/App.js
+++ b/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 }}>
-          <Chat toolbarRef={this.toolbarRef} messages={messages} />
-          <Input
+        <div className="chat-container" ref={node => { this.chatRef = node }}>
+          <Chat
+            messages={messages}
             videos={videos}
             notify={notify}
             sendMessage={sendMessage}
+            toolbarRef={this.toolbarRef}
           />
         </div>
         <div className="videos">
diff --git a/src/client/components/Chat.js b/src/client/components/Chat.js
index 71ce23f..a6e14ed 100644
--- a/src/client/components/Chat.js
+++ b/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,29 +43,36 @@ 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 className="chat-item-label" />
-                <div className="chat-item-icon">
-                  <div className="profile-image-component
-                    profile-image-component-circle">
-                    {message.image ? (
-                      <div className="profile-image-component-image">
-                        <img src={message.image} />
-                      </div>
-                    ) : (
-                      <div className="profile-image-component-initials">
-                        {message.userId.substr(0, 2).toUpperCase()}
-                      </div>
-                    )}
+              <div key={i}>
+                {message.userId === socket.id ? (
+                  <div className="chat-item chat-item-me">
+                    <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>
+                    <img className="chat-item-img" src={message.image} />
                   </div>
-                </div>
-                <div className="chat-item-content">
-                  {message.message}
-                </div>
+                ) : (
+                  <div className="chat-item chat-item-other">
+                    <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>
             ))
           ) : (
@@ -71,6 +83,12 @@ export default class Chat extends React.PureComponent {
           )}
 
         </div>
+
+        <Input
+          videos={videos}
+          notify={notify}
+          sendMessage={sendMessage}
+        />
       </div>
     )
   }
diff --git a/src/client/components/Input.js b/src/client/components/Input.js
index 011c8e9..12506b0 100644
--- a/src/client/components/Input.js
+++ b/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..."
-          type="text"
+          placeholder="Type a message"
           value={message}
         />
-        <button type="submit" className="send">
-          <span className="icon icon-send" />
-        </button>
+        <div className="chat-controls-buttons">
+          <input type="submit" value="Send"
+            className="chat-controls-buttons-send" />
+          <div className="chat-controls-buttons-wrapper" />
+        </div>
       </form>
     )
   }
diff --git a/src/res/fonts/icons.eot b/src/res/fonts/icons.eot
index 332affcd17f140b9c86f29d383544ade1b26e7e4..5329ad7426b51e77aed786a50d402bd00fae0ef5 100755
GIT binary patch
delta 595
zcmdlZbVr!&4krVH1Ls6GGnVN$tNAB7<O}LBFfi-^;)LYf#DZ0w(K-_k$kgxbTjI#T
zz_^2ffmI<RH8DlFxZ^zo1KSOtI<pL*0DA^=IRgW`0FbYeky}z>0G4An0rG8f@{<$U
z(>T5W<qLp(h1|r70tOKV2Oxg}h@Y33n|iS+cP5a(0cb~FL4I)w12a&Dfl~n_&%n$w
zIhxUdaqHwcj6n`hPdvT&^va9%FSh>w`~N>k6@$V9%?H{KydP`?%3VN`WBmVE{<i!r
z`Q7s2QjStqQWoNI;*p#6n7%S?c4zHltY>Bj`@fob71MtPRt7}|TcF*d;_T{z!bawH
zjOJ#hChB^O>T1eL?0k&uY@#CKa*X0)!bV_9R0J%jtOQnKY68~4Bz8dIftH)SU92<^
z#M;@pBeNs?{EC$n6_twpd?O+3dN7Ac`$3Ue2P4DZD?mN=c5d!=Nc!#Ufo3r?C@PkK
zb@`SkDk&+J`1(ae`ude9DuO)E2*Lc-H>bz*+k9o<W&w#Z+|W{5f}sDeW?=w&lYxPQ
zfe9oE1dI%m`Pn^OR{@n@gJ4DwI}C)u3b=rAB*%~jObhoIxfs(J>ll|Xo?&8Q(qozc
Ywv?a2jsd6`2$&`-atd!=&)&-j05OS`bpQYW

delta 409
zcmca3yhn)5hLeF|0mno(GnS953ocA_$QM*&U|`q-#0kl{i3KYSLX9RKkg1Q_Hf<dP
z1LF<`29}15)Wj6w1haSs1~v<zI<pL*0DA^=Ignof<f~-lmQ)xpu-yRirvUjjIr+(n
z>;@b;K>h_FUm-WKqJTk!!4Am(0OIE*=B8e3%ALu;z%Br^Bd;L8xP*ZjD8s<f0Fq~5
zW|<t#=)kys@*Kt>hlj~ePdvT&^va9%|Ns8~4^qXT@Ido{_5<$+8^LlH;Bt)rAIsmC
zza_t0K3r~@l#`UTl%;t5W<92_Op0OuuQFd_y2`-Hz#uND%P7bg#?<h)fw@7OQ7bHr
zQR`pBW(C%XjLM8a(}DOx!Rn9k{5D@1xLLp!-cYEF0Wm=I<QeSou3<p&RX}_Vf*C>V
zFtAcCpiku((tsg)kCBTpjj@7p0^>HudrTrs4j_{m_!(>%fQo^DY4Sl%;m!UWy^H{=
CpLBKr

diff --git a/src/res/fonts/icons.svg b/src/res/fonts/icons.svg
index 207143c..d25d1c1 100755
--- a/src/res/fonts/icons.svg
+++ b/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>
\ No newline at end of file
diff --git a/src/res/fonts/icons.ttf b/src/res/fonts/icons.ttf
index f6e94e2fb3380c1b2fe22d8eece053572927ae03..2091dd624bb704c3e139b5ff6e0343bb86c16a35 100755
GIT binary patch
delta 557
zcmZ1=ctEJ0fsuiMft#U$ftkU;KUm+0KZ{idD6$8L6OwZi3s!YT1Nn?HK>n2U#Nq-V
zEdb<i0MZ=kIhAQU`<6HY`8yaGSQRo-6H|nXJKi%eu-yR4n`Hn6*fW^R85r1sdKgqP
za!V=<z;f&+K)y{*ezIjEdm6_VpaPJ=3b~0D1q>n#4nY0{5I-+5H}zsu?o1#bXdz=>
zL4I)w(4j!UsW5SeJLA?#j6n`hPdvT&^va9%FSh>w`~N>kl0o5t<^$~q-VZhc<t`w}
zG5&une_Q^R{BHShDMu+QDGTv9@yN}S7{4-YUd__SSkKH5_J1|=DyIJotPF|_wm>UI
z#o5&bg^kSZ7|qR0P1N-m)zy@h*!dXQ*+fOe<ru}qgpI(Is0dh4SqZGf)C8=7N$h~a
z11&duyI5%;h_$nGM`lO(`4uZEDk>HG`9?z68DI{R_Jbm`4n~H*SAcr#?cCh$ko4Qx
z1I=P)P*f}d>+&s8R8mqb@%4*{^z|!IR0Me*6rn)OUww0WJipCX25uIRD8mgcr6n+W
uatvF%;3}Z_H3((|vBM^xVUrZDV_d>`hKY$uk7)wfBz^|F%|F;yFaiLn_>rUl

delta 394
zcmX>gv_P<)fsuiMft#U$ftkU;KUm+0KZ{ijD6$8L6OwZi3sxG08Zj_1$^iLO(i4jd
zfV2RRzX3>dq~}zoMQxk54#?lZz`)Xwk(!tyoM0Buz`$k!lsC%&3b1D|mjn4AeJUBb
zB^3q?Y&U@XDL}qWPJXgwBD(=c4p86%P(UF!v7&%MguxET{{Z6WCFZ7HY|5R<z`!m5
zv?Q+}zqkbGP$1xFn7G58as4F5Acu#^Pft9(`1Hz)_5c6={|}O6P<WvEK>LCBgN<Oh
z3vfBc|BvNw%iogUEgvqoOv*{hTFO#9e)A;8uS|+z|F1G%W4g+~%D^BlsLLqG7{=7_
zw}H7qn^7w)j8W@f!{!#2iHypi&;sHM1*<>C^V@u7;AR0^ctfEw2E+i-lmD>A3x)y3
oR{`-g2xeS0Ifq?RxPoy4<2J^7Od?DUAX6Cl8EiJsU|+!q0Ha-T)&Kwi

diff --git a/src/res/fonts/icons.woff b/src/res/fonts/icons.woff
index 996841d4f1977939a1b2531dfe7cddbb3f6ef8b4..957f27e3d846805e8978b2299fb4dc95868b6b22 100755
GIT binary patch
delta 646
zcmaDO*dr`b?(gQtz{mguoIMQOVA^5w14fC7I>Plj$+?LI3=E7JK;bDMys9%=Cq1zk
zB=!f$=YV2?^qk5x1_mY;1_o9I5Z>9h#4#f^F@=GFT?MGd41|S?JKkpi1%YBQKt4!Z
zg*}70JR`TH0w~r1<lBI-0R!8Oocv^<Iy?3~Kmi31W>4ezlABlow3z)4OpHN<!67d(
zHx(%M2k4+Y5Wd)yJF_6axCH2%oQZ$@8MjXMVGMG3dgAHDr&nIAf3fxd-~a!C`hg}s
z(0ri%!27{Qpxgx{ImZ8w<!{U1lHV;KF6Ag?C1oKVCmy-^9^+T0&EHx280(oC!v3#j
zUd8mEft5j#!4_zzs5ra2ps<m-9izFKsfoHCqq>^15<4FwJDaG8xE!Onn6MF;5)}ap
zDl37Nn3{k!Fo_*dc%bEGZx<^K1hIB@?#S#2KfhunMMb4zKi^0QyB^G8(tc26*1^c|
z_X<#ty`7u89g==Kd!Sj&42p^+U|qf?ib_g~CBA+Uk-mN<ii#l5GeR(b_08$={5D@1
zxLH7=3^%ltmLTZ=t63O;-UP)m6G#*Y7#Sw-XY+7f1yp_wf*C>VFc1bS-~z^p977tz
s9)^32T#RXqb&N|G&oD7D=`l?JTguO1#{g6e1Wc1JatLpZXYXYM09lBf+W-In

delta 460
zcmeAXej_MS?(gQtz{mgu9B&x7!SsU34;UpT>Im1XCFdp<FfcG?0EMT3@JfSFqx8gL
zkk}uP4k#8#&#6pfU|?clU|?wg;izrX)@7t7rZ6zDwJ<O+n1Qfxf?0e9P!K4#2gp|e
zVfGB>@{HV)3ZU2nAm0Xr4H(#N<m4v<)!DJj00k64nB9OQCpWPIXfZoT5m<~tguyN^
zF*g+`76Wup9tdA-%AHw|Ut9uo+nI@f{2A9z_F)Wic$ob3#M6sUue@0Q|L_0*K>a`y
z9%w$$e&GFJBUtVNT#oVoWBJ?ix8!%rhs!OKa+0!^vJ{Wse2?)flVaHatIXG!t}?JP
zFo+B4G72(=F*W>cU~bT6)Cvn@)cV)3`2x#CMrB5z=|Fs;VD-m%ew(ih+`v!)f*T5z
zKvzQO$sX+Su3<p&RX}_Vf*C>VFpvrcE}+lk7}6N_Fx+G0VoYPKV4T3Xjqx6n2$KWI
XWCng<Kmip40n_9{PT|e}*?SoQ&<1*1

diff --git a/src/scss/_chat.scss b/src/scss/_chat.scss
index 9c14c58..d6ab437 100644
--- a/src/scss/_chat.scss
+++ b/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;
-    color: #fff;
-    height: 52px;
-    line-height: 52px;
-  }
+.chat-header {
+  background: #42a7a1;
+  color: #fff;
+  height: 52px;
+  line-height: 52px;
 
   .chat-close {
     font-size: 24px;
@@ -40,37 +41,38 @@
     float: left;
     width: 64px;
     cursor: pointer;
-  }
 
-  .chat-button {
-    float: right;
-    a {
-      font-size: 24px;
-      color: #fff;
+    .chat-button {
+      float: right;
+      a {
+        font-size: 24px;
+        color: #fff;
+      }
     }
   }
 
   .chat-title {
     font-size: 18px;
     font-weight: 500;
-    white-space: nowrap;
-    overflow: hidden;
+    color: #fff;
     text-overflow: ellipsis;
+    text-transform: uppercase;
   }
+}
 
-  .chat-content {
-    background-color: #f2f2f2;
-    bottom: 0;
-    left: 0;
-    overflow-y: auto;
-    position: absolute;
-    right: 0;
-    top: 52px;
-    bottom: 52px;
-  }
+.chat-history {
+  bottom: 0;
+  left: 0;
+  overflow-y: auto;
+  position: absolute;
+  right: 0;
+  top: 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;
-    box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, 0.12), 0 1px 6px rgba(0, 0, 0, 0.12);
-    line-height: 20px;
-    min-height: 80px;
-    padding: 15px 15px 15px 80px;
-    position: relative;
-    border-top: 1px solid #e9e9e9;
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 15px;
 
-    .chat-item-label {
-      display: none;
+    .chat-item-img {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      background: #75b1e8;
     }
 
-    .chat-item-icon {
-      height: 50px;
-      left: 15px;
-      position: absolute;
-      top: 15px;
-      width: 50px;
+    .message {
+      position: relative;
+      padding: 10px;
+      border-radius: 5px;
+      background: #f6f6f6;
+      width: calc(100% - 40px);
+
+      div {
+        font-size: 13px;
+        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;
+      }
     }
 
-    .chat-item-content {
-      color: #363636;
-      font-size: 13px;
-      font-weight: 400;
-      overflow: hidden;
-      white-space: pre-wrap;
-      word-wrap: break-word;
+    &.chat-item-me {
+      .message {
+        margin-right: 15px;
 
-      > {
-        a, span a {
-          color: #363636;
-          font-weight: 700;
-          text-decoration: none;
+        &::after {
+          left: 100%;
+          border: solid transparent;
+          border-left-color: #f6f6f6;
+          content: "";
+          height: 0;
+          width: 0;
+          position: absolute;
+          pointer-events: none;
+          border-width: 10px;
+          top: 10px;
         }
       }
     }
 
-    &.is-clickable {
+    &.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;
+  margin-top: 10px;
+  background-color: #fff;
+  border-top: 1px solid #f6f6f6;
+  padding: 20px;
+
+  .chat-controls-textarea {
+    width: 100%;
+    border: none;
+    border-radius: 5px;
+    resize: none;
+    outline: none;
+    max-height: 80px;
+    height: 50px;
+    overflow: auto;
+    color: #777;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+
+  .chat-controls-buttons {
+    margin-top: 15px;
+    display: flex;
+    justify-content: space-between;
+
+    .chat-controls-buttons-wrapper {
+      display: flex;
+    }
+
+    .chat-controls-buttons-send {
+      padding: 0 15px;
+      background: #407cf7;
+      line-height: 25px;
+      display: inline-block;
+      color: #fff;
+      text-decoration: none;
+      border-radius: 3px;
+      border: 0;
       cursor: pointer;
 
-      &:hover {
-        background-color: #ebf2fe;
-      }
-    }
-
-    &.is-labeled {
-      border-top: none;
-      margin-top: 40px;
-
-      .chat-item-label {
-        color: #888;
-        display: block;
-        font-size: 13px;
-        font-weight: 700;
-        left: 0;
-        line-height: 20px;
-        padding: 10px;
-        position: absolute;
-        top: -40px;
-      }
-    }
-  }
-
-  .chat-footer {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: 52px;
-    background: #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 #e9e9e9;
-
-    .input {
-      height: 52px;
-      background: #fff;
-      border: none;
-      width: calc(100% - 52px);
-      position: absolute;
-      left: 0;
-      top: 0;
-      padding: 10px;
-      resize: none;
-      overflow: scroll;
-      font-weight: 300;
-
       &:focus {
         outline: none;
       }
-
-      -ms-overflow-style: none;
-      overflow: -moz-scrollbars-none;
-      //gotta hide windows scrollbars
-
-      &::-webkit-scrollbar {
-        width: 0 !important
-      }
-    }
-
-    .send {
-      position: absolute;
-      height: 32px;
-      width: 32px;
-      border-radius: 50%;
-      border: 0;
-      background: #000;
-      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%;
     }
   }
 }
diff --git a/src/scss/_fonts.scss b/src/scss/_fonts.scss
index dd3746e..e745b11 100755
--- a/src/scss/_fonts.scss
+++ b/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?ij9tsv#iefix') format('embedded-opentype'),
-       url('../res/fonts/icons.woff?ij9tsv') format('woff'),
-       url('../res/fonts/icons.ttf?ij9tsv') format('truetype'),
-       url('../res/fonts/icons.svg?ij9tsv#icons') format('svg');
+  src: url('../res/fonts/icons.eot?sd4p99');
+  src: url('../res/fonts/icons.eot?sd4p99#iefix') format('embedded-opentype'),
+       url('../res/fonts/icons.woff?sd4p99') format('woff'),
+       url('../res/fonts/icons.ttf?sd4p99') format('truetype'),
+       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";
 }