Started work on settings dialog. Possible to switch camera.

app/stylus/components/Room.styl

@@ -232,6 +232,16 @@
 				}
 			}
 
+			&.settings {
+				&.off {
+					background-image: url('/resources/images/icon_settings_white.svg');
+				}
+
+				&.on {
+					background-image: url('/resources/images/icon_settings_black.svg');
+				}
+			}
+
 			&.screen {
 				&.on {
 					background-image: url('/resources/images/no-share-screen-black.svg');

app/stylus/components/Settings.styl

@@ -0,0 +1,149 @@
+[data-component='Settings'] {
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	z-index: 19999;
+	background-color: rgba(000, 000, 000, 0.5);
+
+	> .dialog {
+		position: absolute;
+		height: 50vmin;
+		width: 60vmin;
+		left: 50%;
+		top: 50%;
+		transform: translate(-50%, -50%);
+		background-color: #fff;
+		border-radius: 4px;
+		box-shadow: 0px 3px 12px 2px rgba(#111, 0.4);
+		padding: 1vmin;
+
+		> .header {
+			> span {
+				font-size: 2vmin;
+				font-weight: 400;
+			}
+		}
+
+		> .settings {
+			height: 100%;
+			width: 100%;
+
+			.Dropdown-root {
+				position: relative;
+			}
+
+			.Dropdown-control {
+				position: relative;
+				overflow: hidden;
+				background-color: white;
+				border: 1px solid #ccc;
+				border-radius: 2px;
+				box-sizing: border-box;
+				color: #333;
+				cursor: default;
+				outline: none;
+				padding: 8px 52px 8px 10px;
+				transition: all 200ms ease;
+			}
+
+			.Dropdown-control:hover {
+				box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+			}
+
+			.Dropdown-arrow {
+				border-color: #999 transparent transparent;
+				border-style: solid;
+				border-width: 5px 5px 0;
+				content: ' ';
+				display: block;
+				height: 0;
+				margin-top: -ceil(2.5);
+				position: absolute;
+				right: 10px;
+				top: 14px;
+				width: 0
+			}
+
+			.is-open .Dropdown-arrow {
+				border-color: transparent transparent #999;
+				border-width: 0 5px 5px;
+			}
+
+			.Dropdown-menu {
+				background-color: white;
+				border: 1px solid #ccc;
+				box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
+				box-sizing: border-box;
+				margin-top: -1px;
+				max-height: 200px;
+				overflow-y: auto;
+				position: absolute;
+				top: 100%;
+				width: 100%;
+				z-index: 1000;
+				-webkit-overflow-scrolling: touch;
+			}
+
+			.Dropdown-menu .Dropdown-group > .Dropdown-title {
+				padding: 8px 10px;
+				color: rgba(51, 51, 51, 1.2);
+				font-weight: bold;
+				text-transform: capitalize;
+			}
+
+			.Dropdown-option {
+				box-sizing: border-box;
+				color: rgba(51, 51, 51, 0.8);
+				cursor: pointer;
+				display: block;
+				padding: 8px 10px;
+			}
+
+			.Dropdown-option:last-child {
+				border-bottom-right-radius: 2px;
+				 border-bottom-left-radius: 2px;
+			}
+
+			.Dropdown-option:hover {
+				background-color: #f2f9fc;
+				color: #333;
+			}
+
+			.Dropdown-option.is-selected {
+				background-color: #f2f9fc;
+				color: #333;
+			}
+
+			.Dropdown-noresults {
+				box-sizing: border-box;
+				color: #ccc;
+				cursor: default;
+				display: block;
+				padding: 8px 10px;
+			}
+		}
+
+		> .footer {
+			position: absolute;
+			bottom: 0;
+			right: 0;
+			left: 0;
+			display: flex;
+			flex-direction: column;
+			justify-content: flex-end;
+			align-items: flex-end;
+
+			> .button {
+				flex: 0 0 auto;
+				margin: 1vmin;
+				background-color: rgba(#000, 0.8);
+				color: #fff;
+				cursor: pointer;
+				border-radius: 4px;
+				padding: 0.5vmin;
+			}
+		}
+	}
+}

app/stylus/index.styl

@@ -42,6 +42,7 @@ body {
 	@import './components/PeerView';
 	@import './components/Notifications';
 	@import './components/Chat';
+	@import './components/Settings';
 }
 
 // Hack to detect in JS the current media query