Style changes

app/stylus/components/Chat.styl

@@ -53,17 +53,18 @@
 
 [data-component='Sender'] {
 	display: flex;
-	background-color: rgba(0, 0, 0, 0.1);
+	background-color: #fff;
 	padding: 1rem;
 	flex-shrink: 0;
 	border-radius: 5px;
 	margin-top: 0.5rem;
 	height: 3rem;
+	box-shadow: 0vmin 0.3vmin 1vmin 0.2vmin rgba(17,17,17,0.5);
 
 	> .new-message {
 		width: 100%;
 		border: 0;
-		color: #FFF;
+		color: #000;
 		font-size: 1rem;
 
 		&.focus {

app/stylus/components/FileSharing.styl

@@ -7,11 +7,10 @@
 		> .share-file {
 			cursor: pointer;
 			width: 100%;
-			background: #252525;
-			border: 1px solid #151515;
+			background: #aef;
 			padding: 1rem;
-			border-bottom: 5px solid #151515;
-			border-radius: 3px 3px 0 0;
+			border-radius: 1vmin;
+			box-shadow: 0vmin 0.3vmin 1vmin 0.2vmin rgba(17,17,17,0.5);
 
 			&.disabled {
 				cursor: not-allowed;

app/stylus/components/ParticipantList.styl

@@ -4,6 +4,7 @@
 	> .list {
 		box-shadow: 0 4px 10px 0 rgba(0,0,0,0.2), \
 					0 4px 20px 0 rgba(0,0,0,0.19);
+		background-color: #fff;
 
 		> .list-item {
 			padding: 0.5rem;

app/stylus/components/ToolArea.styl

@@ -153,13 +153,13 @@
 [data-component='ToolArea'] {
 	width: 100%;
 	height: 100%;
-	color: #fff;
+	color: #000;
 	position: fixed;
 	width: 0;
 	top: 0;
 	right: 0;
 	height: 100%;
-	background: rgba(50, 50, 50, 0.9);
+	background: #fff;
 	transition: width 0.3s;
 	z-index: 1010;
 	display: flex;
@@ -168,7 +168,7 @@
 
 	> .tab-headers {
 		display: flex;
-		background: rgba(0, 0, 0, 0.1);
+		background: #ddd;
 		flex-shrink: 0;
 
 		> .tab-header {
@@ -179,7 +179,9 @@
 			text-align: center;
 
 			&.checked {
-				background: rgba(0, 0, 0, 0.3);
+				background: #fff;
+				border-radius: 1vmin 1vmin 0vmin 0vmin;
+				box-shadow: 0.5vmin 0vmin 1vmin -0.5vmin #aaa;
 			}
 
 			> .badge {