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 = {
-		controlsVisible : false
-	};
-
-	handleMouseOver = () =>
+	constructor(props)
 	{
-		this.setState({
-			controlsVisible : true
-		});
-	};
+		super(props);
+		this.state = { className: '' };
+	}
 
-	handleMouseOut = () =>
+	componentDidUpdate(prevProps)
 	{
-		this.setState({
-			controlsVisible : false
+		const { hiddenPeersCount } = this.props;
+
+		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,6 +17,7 @@
 		flex-direction: column;
 		justify-content: space-between;
 	}
+
 	> .view-container {
 		width: 12vmin;
 		height: 9vmin;
@@ -23,6 +25,7 @@
 		bottom: 3%;
 		right: 3%;
 		color: #aaa;
+		cursor: pointer;
 		background-image: url('/resources/images/buddy.svg');
 		background-color: rgba(#2a4b58, 1);
 		background-position: bottom;
@@ -32,16 +35,25 @@
 		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 */
 		box-shadow: 2px 1px 1px rgba(0,0,0,0.15);
 	}
+
 	.view-container::before,
 	.view-container::after {
 		content: "";
@@ -50,12 +62,14 @@
 		height: 100%;
 		background-color: #2a4b58;
 	}
+
 	/* Second sheet of paper */
 	.view-container::before {
 		left: .7vmin;
 		top: .7vmin;
 		z-index: -1;
 	}
+
 	/* Third sheet of paper */
 	.view-container::after {
 		left: 1.4vmin;
@@ -63,3 +77,17 @@
 		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);
+	}
+}