Move Sidebar CSS into separate file

app/lib/components/Sidebar.jsx

@@ -74,9 +74,11 @@ class Sidebar extends Component
 		}
 	
 		return (
-			<div className={classnames('sidebar room-controls', {
+			<div
+				className={classnames('sidebar room-controls', {
 					'visible' : toolbarsVisible
 				})}
+				data-component='Sidebar'
 			>
 				{fscreen.fullscreenEnabled && (
 					<div

app/stylus/components/Room.styl

@@ -164,114 +164,6 @@
 				border: 1px solid rgba(#fff, 0.25);
 			}
 		}
-
-		> .sidebar {
-			position: fixed;
-			z-index: 101;
-			top: calc(50% - 60px);
-			height: 120px;
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-			align-items: center;
-
-			+desktop() {
-				left: 20px;
-				width: 36px;
-			}
-
-			+mobile() {
-				left: 10px;
-				width: 32px;
-			}
-
-			> .button {
-				flex: 0 0 auto;
-				margin: 4px 0;
-				background-position: center;
-				background-size: 75%;
-				background-repeat: no-repeat;
-				background-color: rgba(#fff, 0.3);
-				cursor: pointer;
-				transition-property: opacity, background-color;
-				transition-duration: 0.15s;
-				border-radius: 100%;
-
-				+desktop() {
-					height: 36px;
-					width: 36px;
-				}
-
-				+mobile() {
-					height: 32px;
-					width: 32px;
-				}
-
-				&.on {
-					background-color: rgba(#fff, 0.7);
-				}
-
-				&.disabled {
-					pointer-events: none;
-					opacity: 0.5;
-				}
-
-				&.login {
-					&.off {
-						background-image: url('/resources/images/icon_login_white.svg');
-					}
-				}
-
-				&.settings {
-					&.off {
-						background-image: url('/resources/images/icon_settings_white.svg');
-					}
-
-					&.on {
-						background-image: url('/resources/images/icon_settings_black.svg');
-					}
-				}
-
-				&.fullscreen {
-					background-image: url('/resources/images/icon_fullscreen_white.svg');
-
-					&.on {
-						background-image: url('/resources/images/icon_fullscreen_exit_white.svg');
-					}
-				}
-
-				&.screen {
-					&.on {
-						background-image: url('/resources/images/no-share-screen-black.svg');
-					}
-
-					&.off {
-						background-image: url('/resources/images/share-screen-white.svg');
-					}
-
-					&.unsupported {
-						background-image: url('/resources/images/no-share-screen-white.svg');
-						background-color: rgba(#d42241, 0.7);
-					}
-
-					&.need-extension {
-						background-image: url('/resources/images/share-screen-extension.svg');
-					}
-				}
-
-				&.raise-hand {
-					background-image: url('/resources/images/icon-hand-white.svg');
-
-					&.on {
-						background-image: url('/resources/images/icon-hand-black.svg');
-					}
-				}
-
-				&.leave-meeting {
-					background-image: url('/resources/images/leave-meeting.svg');
-				}
-			}
-		}
 	}
 
 	> .toolarea-wrapper {

app/stylus/components/Sidebar.styl

@@ -0,0 +1,107 @@
+[data-component='Sidebar'] {
+	position: fixed;
+	z-index: 101;
+	top: calc(50% - 60px);
+	height: 120px;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+
+	+desktop() {
+		left: 20px;
+		width: 36px;
+	}
+
+	+mobile() {
+		left: 10px;
+		width: 32px;
+	}
+
+	> .button {
+		flex: 0 0 auto;
+		margin: 4px 0;
+		background-position: center;
+		background-size: 75%;
+		background-repeat: no-repeat;
+		background-color: rgba(#fff, 0.3);
+		cursor: pointer;
+		transition-property: opacity, background-color;
+		transition-duration: 0.15s;
+		border-radius: 100%;
+
+		+desktop() {
+			height: 36px;
+			width: 36px;
+		}
+
+		+mobile() {
+			height: 32px;
+			width: 32px;
+		}
+
+		&.on {
+			background-color: rgba(#fff, 0.7);
+		}
+
+		&.disabled {
+			pointer-events: none;
+			opacity: 0.5;
+		}
+
+		&.login {
+			&.off {
+				background-image: url('/resources/images/icon_login_white.svg');
+			}
+		}
+
+		&.settings {
+			&.off {
+				background-image: url('/resources/images/icon_settings_white.svg');
+			}
+
+			&.on {
+				background-image: url('/resources/images/icon_settings_black.svg');
+			}
+		}
+
+		&.fullscreen {
+			background-image: url('/resources/images/icon_fullscreen_white.svg');
+
+			&.on {
+				background-image: url('/resources/images/icon_fullscreen_exit_white.svg');
+			}
+		}
+
+		&.screen {
+			&.on {
+				background-image: url('/resources/images/no-share-screen-black.svg');
+			}
+
+			&.off {
+				background-image: url('/resources/images/share-screen-white.svg');
+			}
+
+			&.unsupported {
+				background-image: url('/resources/images/no-share-screen-white.svg');
+				background-color: rgba(#d42241, 0.7);
+			}
+
+			&.need-extension {
+				background-image: url('/resources/images/share-screen-extension.svg');
+			}
+		}
+
+		&.raise-hand {
+			background-image: url('/resources/images/icon-hand-white.svg');
+
+			&.on {
+				background-image: url('/resources/images/icon-hand-black.svg');
+			}
+		}
+
+		&.leave-meeting {
+			background-image: url('/resources/images/leave-meeting.svg');
+		}
+	}
+}

app/stylus/index.styl

@@ -37,6 +37,7 @@ body {
 
 	// Components
 	@import './components/Room';
+	@import './components/Sidebar';
 	@import './components/Me';
 	@import './components/Peers';
 	@import './components/Peer';