From f17f6b54c1d33f004215bd48119a191cf9ecce67 Mon Sep 17 00:00:00 2001
From: Stefan Otto <stefan.otto@uninett.no>
Date: Wed, 18 Jul 2018 11:20:32 +0200
Subject: [PATCH] Just to make toolarea a little bit less ugly

---
 app/stylus/components/Chat.styl            | 19 ++++++++-----------
 app/stylus/components/ParticipantList.styl |  3 +--
 app/stylus/components/Room.styl            |  2 +-
 app/stylus/components/ToolArea.styl        |  8 +++++---
 4 files changed, 15 insertions(+), 17 deletions(-)

diff --git a/app/stylus/components/Chat.styl b/app/stylus/components/Chat.styl
index 6cfe785..e7adc4e 100644
--- a/app/stylus/components/Chat.styl
+++ b/app/stylus/components/Chat.styl
@@ -61,7 +61,7 @@
 }
 
 [data-component='MessageList'] {
-	background-color: rgba(#fff, 0.9);
+	background-color: rgba(#000, 0.1);
 	height: 91vmin;
 	overflow-y: scroll;
 	padding-top: 5px;
@@ -71,10 +71,9 @@
 		margin: 5px;
 		display: flex;
 		word-wrap: break-word;
-		color: rgba(#000, 1.0)
 
 		> .client {
-			background-color: rgba(#fff, 0.9);
+			background-color: rgba(#000, 0.1);
 			border-radius: 5px;
 			padding: 6px;
 			max-width: 215px;
@@ -83,17 +82,16 @@
 
 			> .message-text {
 				font-size: 1.3vmin;
-				color: rgba(#000, 1.0);
 			}
 
 			> .message-time {
 				font-size: 1vmin;
-				color: rgba(#777, 1.0)
+				opacity:0.8;
 			}
 		}
 
 		> .response {
-			background-color: rgba(#fff, 0.9);
+			background-color: rgba(#000, 0.1);
 			border-radius: 5px;
 			padding: 6px;
 			max-width: 215px;
@@ -102,12 +100,11 @@
 
 			> .message-text {
 				font-size: 1.3vmin;
-				color: rgba(#000, 1.0);
 			}
 
 			> .message-time {
 				font-size: 1vmin;
-				color: rgba(#777, 1.0);
+				opacity: 0.8;
 			}
 		}
 	}
@@ -116,7 +113,7 @@
 [data-component='Sender'] {
 	align-items: center;
 	display: flex;
-	background-color: rgba(#fff, 0.9);
+	background-color: rgba(#000, 0.1);
 	height: 6vmin;
 	padding: 0.5vmin;
 	border-radius: 0 0 5px 5px;
@@ -125,8 +122,8 @@
 		width: 100%;
 		border: 0;
 		border-radius: 5px;
-		background-color: rgba(#fff, 0.9);
-		color: #000;
+		background-color: rgba(#000, 0.1);
+		color: #fff;
 		height: 30px;
 		padding-left: 10px;
 		font-size: 1.4vmin;
diff --git a/app/stylus/components/ParticipantList.styl b/app/stylus/components/ParticipantList.styl
index 1f0bd98..9481fad 100644
--- a/app/stylus/components/ParticipantList.styl
+++ b/app/stylus/components/ParticipantList.styl
@@ -125,8 +125,7 @@
 		float: left;
 		width: auto;
 		border: none;
-		display: block;
 		outline: 0;
-		padding: 0.6vmin;
+		padding: 1vmin;
 	}
 }
diff --git a/app/stylus/components/Room.styl b/app/stylus/components/Room.styl
index 16a5f5d..932406c 100644
--- a/app/stylus/components/Room.styl
+++ b/app/stylus/components/Room.styl
@@ -271,7 +271,7 @@
 		right: 0;
 		width: 20%;
 		height: 100%;
-		background-color: #FFF;
+		background-color: rgba(0,0,0,0.1);
 		transition: width 0.3s;
 	}
 }
diff --git a/app/stylus/components/ToolArea.styl b/app/stylus/components/ToolArea.styl
index b6f3a7f..e424e8b 100644
--- a/app/stylus/components/ToolArea.styl
+++ b/app/stylus/components/ToolArea.styl
@@ -73,6 +73,7 @@
 [data-component='ToolArea'] {
 	width: 100%;
 	height: 100%;
+	color: #fff;
 
 	> .tabs {
 		display: flex;
@@ -84,7 +85,7 @@
 			display: block;
 			padding: 1vmin 0 0.8vmin 0;
 			cursor: pointer;
-			background: rgba(#000, 0.3);
+			background: rgba(0,0,0,0.3);
 			font-weight: bold;
 			transition: background ease 0.2s;
 			text-align: center;
@@ -111,7 +112,7 @@
 			height: 100%;
 			display: none;
 			padding: 1vmin;
-			background: #fff;
+			background: rgba(0,0,0,0.1);
 		}
 
 		> input[type="radio"] {
@@ -119,11 +120,12 @@
 		}
 
 		> input[type="radio"]:checked + label {
-			background: #fff;
+			background: rgba(0,0,0,0.1);
 		}
 
 		> input[type="radio"]:checked + label + .tab {
 			display: block;
+			background: rgba(0,0,0,0.1);
 		}
 	}
 }