From 2041c936b2806cc6d389a6612475f926dc254dfc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Wed, 3 Aug 2016 01:10:22 -0400
Subject: [PATCH 1/3] Add tooltips to user list and submit buttons

---
 client/css/style.css  | 5 ++++-
 client/index.html     | 4 +++-
 client/views/chat.tpl | 4 +++-
 3 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index a9449a68..876f065f 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -346,9 +346,12 @@ button {
 	opacity: 1;
 }
 
+#viewport .rt-tooltip {
+	float: right;
+}
+
 #viewport .rt {
 	display: block;
-	float: right;
 	margin: 6px -12px 0 0;
 }
 
diff --git a/client/index.html b/client/index.html
index edf9ee33..75e57613 100644
--- a/client/index.html
+++ b/client/index.html
@@ -61,7 +61,9 @@
 						<div class="input">
 							<label for="input" id="nick"></label>
 							<textarea id="input" class="mousetrap"></textarea>
-							<button id="submit" type="submit" title="Send" aria-label="Send message"></button>
+							<span class="tooltipped tooltipped-w" aria-label="Send message">
+								<button id="submit" type="submit" aria-label="Send message"></button>
+							</span>
 						</div>
 					</form>
 				</div>
diff --git a/client/views/chat.tpl b/client/views/chat.tpl
index 94ace5e1..9ccb6391 100644
--- a/client/views/chat.tpl
+++ b/client/views/chat.tpl
@@ -3,7 +3,9 @@
 	<div class="header">
 		<button class="lt" aria-label="Toggle channel list"></button>
 		{{#equal type "channel"}}
-			<button class="rt" aria-label="Toggle user list"></button>
+			<span class="rt-tooltip tooltipped tooltipped-w" aria-label="Toggle user list">
+				<button class="rt" aria-label="Toggle user list"></button>
+			</span>
 		{{/equal}}
 		<button class="menu" aria-label="Open the context menu"></button>
 		<span class="title">{{name}}</span>

From e99bf9ac0a16735189e477e8b9d476c07f27e4fa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Wed, 3 Aug 2016 01:11:10 -0400
Subject: [PATCH 2/3] Make sure body fonts are used for tooltips

---
 client/css/style.css     | 2 +-
 client/themes/crypto.css | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/client/css/style.css b/client/css/style.css
index 876f065f..0a36f62e 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -1371,7 +1371,7 @@ button {
 	visibility: hidden;
 	opacity: 0;
 	padding: 5px 8px;
-	font-size: 12px;
+	font: 12px Lato;
 	line-height: 1.2;
 	color: #262c36;
 	text-align: center;
diff --git a/client/themes/crypto.css b/client/themes/crypto.css
index 51046c54..f561d7b2 100644
--- a/client/themes/crypto.css
+++ b/client/themes/crypto.css
@@ -129,6 +129,10 @@ a:hover,
 	color: #666;
 }
 
+.tooltipped:after {
+	font-family: Inconsolata-g, monospace;
+}
+
 @media (max-width: 768px) {
 	#main {
 		left: 0;

From 83d1a99608bacdab7bb1bbbd8b700a5a7a64fe3e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Wed, 3 Aug 2016 01:11:50 -0400
Subject: [PATCH 3/3] Set tooltip colors to be readable on both light and dark
 backgrounds

---
 client/css/style.css | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index 0a36f62e..7663d889 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -1373,7 +1373,7 @@ button {
 	padding: 5px 8px;
 	font: 12px Lato;
 	line-height: 1.2;
-	color: #262c36;
+	color: #fff;
 	text-align: center;
 	text-decoration: none;
 	text-shadow: none;
@@ -1383,7 +1383,7 @@ button {
 	white-space: pre;
 	pointer-events: none;
 	content: attr(aria-label);
-	background: #fff;
+	background: #222;
 	border-radius: 3px;
 	-webkit-font-smoothing: subpixel-antialiased;
 	transition: .2s;
@@ -1397,7 +1397,7 @@ button {
 	opacity: 0;
 	width: 0;
 	height: 0;
-	color: #262c36;
+	color: #fff;
 	pointer-events: none;
 	content: "";
 	border: 5px solid transparent;
@@ -1430,7 +1430,7 @@ button {
 	right: 50%;
 	bottom: -5px;
 	margin-right: -5px;
-	border-bottom-color: #fff;
+	border-bottom-color: #222;
 }
 
 .tooltipped-se:after {
@@ -1458,7 +1458,7 @@ button {
 	right: 50%;
 	bottom: auto;
 	margin-right: -5px;
-	border-top-color: #fff;
+	border-top-color: #222;
 }
 
 .tooltipped-ne:after {
@@ -1492,7 +1492,7 @@ button {
 	bottom: 50%;
 	left: -5px;
 	margin-top: -5px;
-	border-left-color: #fff;
+	border-left-color: #222;
 }
 
 .tooltipped-e:after {
@@ -1509,9 +1509,11 @@ button {
 	right: -5px;
 	bottom: 50%;
 	margin-top: -5px;
-	border-right-color: #fff;
+	border-right-color: #222;
 }
 
+/* End tooltips */
+
 /**
   * IRC Message Styling
   * https://github.com/megawac/irc-style-parser