From f51d07285de22aa2aa94d18cf318c493630a22f5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= <havar@fosstveit.net>
Date: Wed, 16 Oct 2019 21:41:55 +0200
Subject: [PATCH] Added pulsing effect to badge.

---
 .../ParticipantList/ParticipantList.js        |  5 ---
 app/src/components/Room.js                    | 36 +++++++++++++++++--
 2 files changed, 34 insertions(+), 7 deletions(-)

diff --git a/app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js b/app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js
index 38f2aea..85a71cb 100644
--- a/app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js
+++ b/app/src/components/MeetingDrawer/ParticipantList/ParticipantList.js
@@ -90,8 +90,6 @@ class ParticipantList extends React.PureComponent
 					<li className={classes.listheader}>Me:</li>
 					<ListMe />
 				</ul>
-				<br />
-
 				{ lobbyPeers.length > 0 ?
 					<ul className={classes.list}>
 						<li className={classes.listheader}>Participants in Lobby:</li>
@@ -106,8 +104,6 @@ class ParticipantList extends React.PureComponent
 					</ul>
 					:null
 				}
-
-				<br />
 				<ul className={classes.list}>
 					<li className={classes.listheader}>Participants in Spotlight:</li>
 					{ spotlightPeers.map((peer) => (
@@ -124,7 +120,6 @@ class ParticipantList extends React.PureComponent
 						</li>
 					))}
 				</ul>
-				<br />
 				<ul className={classes.list}>
 					<li className={classes.listheader}>Passive Participants:</li>
 					{ passivePeers.map((peerId) => (
diff --git a/app/src/components/Room.js b/app/src/components/Room.js
index 040511e..3ebebeb 100644
--- a/app/src/components/Room.js
+++ b/app/src/components/Room.js
@@ -150,6 +150,38 @@ const styles = (theme) =>
 		}
 	});
 
+const PulsingBadge = withStyles((theme) =>
+	({
+		badge :
+		{
+			backgroundColor : theme.palette.secondary.main,
+			// boxShadow       : `0 0 0 2px ${theme.palette.secondary.main}`,
+			'&::after'      :
+			{
+				position     : 'absolute',
+				width        : '100%',
+				height       : '100%',
+				borderRadius : '50%',
+				animation    : '$ripple 1.2s infinite ease-in-out',
+				border       : `3px solid ${theme.palette.secondary.main}`,
+				content      : '""'
+			}
+		},
+		'@keyframes ripple' :
+		{
+			'0%' :
+			{
+				transform : 'scale(.8)',
+				opacity   : 1
+			},
+			'100%' :
+			{
+				transform : 'scale(2.4)',
+				opacity   : 0
+			}
+		}
+	}))(Badge);
+
 class Room extends React.PureComponent
 {
 	constructor(props)
@@ -286,7 +318,7 @@ class Room extends React.PureComponent
 						className={room.toolbarsVisible ? classes.show : classes.hide}
 					>
 						<Toolbar>
-							<Badge
+							<PulsingBadge
 								color='secondary'
 								badgeContent={unread}
 							>
@@ -298,7 +330,7 @@ class Room extends React.PureComponent
 								>
 									<MenuIcon />
 								</IconButton>
-							</Badge>
+							</PulsingBadge>
 							{ window.config.logo ?
 								<img alt='Logo' className={classes.logo} src={window.config.logo} />
 								:null