From 636768da4bcddd8f6e1101237f116f8986c605f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?H=C3=A5var=20Aamb=C3=B8=20Fosstveit?= <havar@fosstveit.net>
Date: Tue, 30 Oct 2018 10:52:06 +0100
Subject: [PATCH] Added border for seleted peer

---
 app/lib/components/Peers.jsx     | 15 ++++++++++-----
 app/stylus/components/Peers.styl |  6 ++++++
 2 files changed, 16 insertions(+), 5 deletions(-)

diff --git a/app/lib/components/Peers.jsx b/app/lib/components/Peers.jsx
index f0ea8d3..6a40fe8 100644
--- a/app/lib/components/Peers.jsx
+++ b/app/lib/components/Peers.jsx
@@ -114,14 +114,17 @@ class Peers extends React.Component
 								<Appear key={peer.name} duration={1000}>
 									<div
 										className={classnames('peer-container', {
+											'selected'       : this.props.selectedPeerName === peer.name,
 											'active-speaker' : peer.name === activeSpeakerName
 										})}
 									>
-										<Peer
-											advancedMode={advancedMode}
-											name={peer.name}
-											style={style}
-										/>
+										<div className='peer-content'>
+											<Peer
+												advancedMode={advancedMode}
+												name={peer.name}
+												style={style}
+											/>
+										</div>
 									</div>
 								</Appear>
 								:null
@@ -146,6 +149,7 @@ Peers.propTypes =
 		peers             : PropTypes.arrayOf(appPropTypes.Peer).isRequired,
 		boxes             : PropTypes.number,
 		activeSpeakerName : PropTypes.string,
+		selectedPeerName  : PropTypes.string,
 		spotlightsLength  : PropTypes.number,
 		spotlights        : PropTypes.array.isRequired
 	};
@@ -162,6 +166,7 @@ const mapStateToProps = (state) =>
 		peers,
 		boxes,
 		activeSpeakerName : state.room.activeSpeakerName,
+		selectedPeerName  : state.room.selectedPeerName,
 		spotlights,
 		spotlightsLength
 	};
diff --git a/app/stylus/components/Peers.styl b/app/stylus/components/Peers.styl
index 0cd52e5..f9283f0 100644
--- a/app/stylus/components/Peers.styl
+++ b/app/stylus/components/Peers.styl
@@ -39,6 +39,12 @@
 			&.active-speaker {
 				border-color: #fff;
 			}
+
+			&.selected {
+				> .peer-content {
+					border: 1px solid #377eff;
+				}
+			}
 		}
 
 		+mobile() {