Added blink effect on new message

src/client/components/App.js

@@ -43,7 +43,7 @@ export default class App extends React.PureComponent {
 
     return (
       <div className="app">
-        <Toolbar stream={streams[constants.ME]} />
+        <Toolbar messages={messages} stream={streams[constants.ME]} />
         <Alerts alerts={alerts} dismiss={dismissAlert} />
         <Notifications notifications={notifications} />
         <div id="chat">

src/client/components/Chat.js

@@ -23,7 +23,7 @@ export default class Chat extends React.PureComponent {
         <div className="chat-header">
           <div className="chat-close" onClick={this.handleCloseChat}>
             <div className="button button-icon">
-              <span className="material-icons">arrow_back</span>
+              <span className="material-icons">arrow_forward</span>
             </div>
           </div>
           <div className="chat-title">Chat</div>

src/client/components/Toolbar.js

@@ -1,13 +1,28 @@
+import PropTypes from 'prop-types'
 import React from 'react'
+import { MessagePropTypes } from './Chat.js'
 import { StreamPropType } from './Video.js'
 
 export default class Toolbar extends React.PureComponent {
   static propTypes = {
+    messages: PropTypes.arrayOf(MessagePropTypes).isRequired,
     stream: StreamPropType
   }
+  constructor () {
+    super()
+    this.state = {
+      isChatOpen: false,
+      totalMessages: 0
+    }
+  }
   handleChatClick = e => {
+    const { messages } = this.props
     document.getElementById('chat').classList.toggle('show')
     e.currentTarget.classList.toggle('on')
+    this.setState({
+      isChatOpen: document.getElementById('chat').classList.contains('show'),
+      totalMessages: messages.length
+    })
   }
   handleMicClick = e => {
     const { stream } = this.props
@@ -58,12 +73,14 @@ export default class Toolbar extends React.PureComponent {
     window.location.href = '/'
   }
   render () {
-    const { stream } = this.props
+    const { messages, stream } = this.props
+    const { isChatOpen, totalMessages } = this.state
 
     return (
       <div className="toolbar active">
         <div onClick={this.handleChatClick}
           className="button chat"
+          data-blink={messages.length !== totalMessages && !isChatOpen}
           title="Chat"
         >
           <span className="material-icons">chat</span>

src/scss/_toolbar.scss

@@ -54,6 +54,11 @@
   }
 
   .chat {
+    &[data-blink="true"] {
+      -webkit-animation: bg-blink 1s infinite;
+      -moz-animation: bg-blink 1s infinite;
+      animation: bg-blink 1s infinite;
+    }
     &:hover, &.on {
       background: #407cf7;
     }
@@ -83,3 +88,33 @@
     }
   }
 }
+
+@-webkit-keyframes bg_blink {
+  50% {
+    background-color: #407cf7;
+  }
+
+  99% {
+    background-color: #407cf7;
+  }
+}
+
+@-moz-keyframes bg-blink {
+  50% {
+    background-color: #407cf7;
+  }
+
+  99% {
+    background-color: #407cf7;
+  }
+}
+
+@keyframes bg-blink {
+  50% {
+    background-color: #407cf7;
+  }
+
+  99% {
+    background-color: #407cf7;
+  }
+}