Added pulse animation to new peer joining

app/lib/components/HiddenPeers.jsx

@@ -1,27 +1,38 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import * as stateActions from '../redux/stateActions';
 
 class HiddenPeers extends Component
 {
-	state = {
+	constructor(props)
-		controlsVisible : false
-	};
-
-	handleMouseOver = () =>
 	{
-		this.setState({
+		super(props);
-			controlsVisible : true
+		this.state = { className: '' };
-		});
+	}
-	};
 
-	handleMouseOut = () =>
+	componentDidUpdate(prevProps)
 	{
-		this.setState({
+		const { hiddenPeersCount } = this.props;
-			controlsVisible : false
+
-		});
+		if (hiddenPeersCount !== prevProps.hiddenPeersCount)
-	};
+		{
+			// eslint-disable-next-line react/no-did-update-set-state
+			this.setState({ className: 'pulse' }, () =>
+			{
+				if (this.timeout)
+				{
+					clearTimeout(this.timeout);
+				}
+
+				this.timeout = setTimeout(() =>
+				{
+					this.setState({ className: '' });
+				}, 1000);
+			});
+		}
+	}
 
 	render()
 	{
@@ -33,11 +44,12 @@ class HiddenPeers extends Component
 		return (
 			<div
 				data-component='HiddenPeers'
+				className={this.state.className}
 				onMouseOver={this.handleMouseOver}
 				onMouseOut={this.handleMouseOut}
 			>
 				<div data-component='HiddenPeersView'>
-					<div className='view-container' onClick={() => openUsersTab()}>
+					<div className={classnames('view-container', this.state.className)} onClick={() => openUsersTab()}>
 						<p>+{hiddenPeersCount} <br /> participant
 							{(hiddenPeersCount === 1) ? null : 's'}
 						</p>

app/stylus/components/HiddenPeersView.styl

@@ -4,6 +4,7 @@
 	display: flex;
 	flex-direction: column;
 	overflow: hidden;
+
 	> .info {
 		$backgroundTint = #000;
 		position: absolute;
@@ -16,13 +17,15 @@
 		flex-direction: column;
 		justify-content: space-between;
 	}
+
 	> .view-container {
 		width: 12vmin;
-    height: 9vmin;
+		height: 9vmin;
-    position: absolute;
+		position: absolute;
-    bottom: 3%;
+		bottom: 3%;
-    right: 3%;
+		right: 3%;
 		color: #aaa;
+		cursor: pointer;
 		background-image: url('/resources/images/buddy.svg');
 		background-color: rgba(#2a4b58, 1);
 		background-position: bottom;
@@ -32,34 +35,59 @@
 		vertical-align: middle;
 		line-height: 1.8vmin;
 		font-size: 1.7vmin;
+		font-weight: bolder;
+		animation: none;
+
+		&.pulse {
+			animation: pulse 1s;
+		}
 	}
+
 	.view-container>p{
 		transform: translate(0%,50%);
 	}
+
 	.view-container,
 	.view-container::before,
 	.view-container::after {
-	  /* Add shadow to distinguish sheets from one another */
+		/* Add shadow to distinguish sheets from one another */
-	  box-shadow: 2px 1px 1px rgba(0,0,0,0.15);
+		box-shadow: 2px 1px 1px rgba(0,0,0,0.15);
 	}
+
 	.view-container::before,
-  .view-container::after {
+	.view-container::after {
-	  content: "";
+		content: "";
-	  position: absolute;
+		position: absolute;
-	  width: 100%;
+		width: 100%;
-	  height: 100%;
+		height: 100%;
-	  background-color: #2a4b58;
+		background-color: #2a4b58;
 	}
+
 	/* Second sheet of paper */
 	.view-container::before {
-	  left: .7vmin;
+		left: .7vmin;
-	  top: .7vmin;
+		top: .7vmin;
-	  z-index: -1;
+		z-index: -1;
 	}
+
 	/* Third sheet of paper */
 	.view-container::after {
-	  left: 1.4vmin;
+		left: 1.4vmin;
-	  top: 1.4vmin;
+		top: 1.4vmin;
-	  z-index: -2;
+		z-index: -2;
+	}
+}
+
+@keyframes pulse {
+	0% {
+		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.9);
+	}
+
+	70% {
+		box-shadow: 0 0 0 10px rgba(255, 255, 255, 0);
+	}
+
+	100% {
+		box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
 	}
 }