raiseHandState now visible for new participants, deleted raiseHand notification

app/stylus/components/ParticipantList.styl

@@ -16,7 +16,55 @@
 
 [data-component='ListPeer'] {
 	display: flex;
+	> .indicators {
+		left: 0;
+		top: 0;
+		display: flex;
+		flex-direction:; row;
+		justify-content: flex-start;
+		align-items: center;
+		padding: 0.4vmin;
+		transition: opacity 0.3s;
 
+		> .icon {
+			flex: 0 0 auto;
+			margin: 0.2vmin;
+			border-radius: 2px;
+			background-position: center;
+			background-size: 75%;
+			background-repeat: no-repeat;
+			background-color: rgba(#000, 0.5);
+			transition-property: opacity, background-color;
+			transition-duration: 0.15s;
+
+			+desktop() {
+				width: 24px;
+				height: 24px;
+				opacity: 0.85;
+
+				&:hover {
+					opacity: 1;
+				}
+			}
+
+			+mobile() {
+				width: 22px;
+				height: 22px;
+			}
+
+			&.on {
+				opacity: 1;
+			}
+
+			&.off {
+				opacity: 0.2;
+			}
+
+			&.raise-hand {
+				background-image: url('/resources/images/icon-hand-white.svg');
+			}
+		}
+	}
 	> .controls {
 		float: right;
 		display: flex;
@@ -124,4 +172,4 @@
     flex-grow: 1;
     align-items: center;
 	}
-}
+}

app/stylus/components/Peer.styl

@@ -34,7 +34,6 @@
 		}
 		> .indicators {
 			position: absolute;
-			z-index: 200;
 			left: 0;
 			top: 0;
 			display: flex;
@@ -43,6 +42,7 @@
 			align-items: center;
 			padding: 0.4vmin;
 			transition: opacity 0.3s;
+			z-index: 10;
 
 			> .icon {
 				flex: 0 0 auto;
@@ -52,7 +52,6 @@
 				background-size: 75%;
 				background-repeat: no-repeat;
 				background-color: rgba(#000, 0.5);
-				cursor: pointer;
 				transition-property: opacity, background-color;
 				transition-duration: 0.15s;