Added pulsing effect to badge.

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) => (

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