From d8d1d3aee0868b318206bb8585e8d1202243a377 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Mon, 18 Feb 2019 01:13:32 -0500
Subject: [PATCH 1/4] Improve scroll-down button UI

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

diff --git a/client/css/style.css b/client/css/style.css
index 20f2216d..fb6b73c4 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -1097,7 +1097,7 @@ background on hover (unless active) */
 	pointer-events: none;
 	opacity: 0;
 	transform: translateY(16px);
-	transition: all 0.2s ease-in-out;
+	transition: transform 0.2s, opacity 0.2s;
 	cursor: pointer;
 }
 
@@ -1108,18 +1108,23 @@ background on hover (unless active) */
 }
 
 .scroll-down-arrow {
-	width: 48px;
-	height: 48px;
-	line-height: 48px;
+	width: 36px;
+	height: 36px;
+	line-height: 34px;
 	border-radius: 50%;
-	background: #fff;
-	color: #333;
-	border: 1px solid #84ce88;
+	background: var(--window-bg-color);
+	color: #84ce88;
+	border: 2px solid #84ce88;
 	text-align: center;
+	transition: background 0.2s, color 0.2s;
+	box-shadow:
+		0 3px 5px -1px rgba(0, 0, 0, 0.2),
+		0 6px 10px 0 rgba(0, 0, 0, 0.14);
 }
 
 .scroll-down:hover .scroll-down-arrow {
 	background: #84ce88;
+	color: var(--window-bg-color);
 }
 
 .scroll-down-arrow::after {

From 8b98c2c93cc4fa18469c7e162cd599ea607b77c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Mon, 18 Feb 2019 01:27:35 -0500
Subject: [PATCH 2/4] Add a tooltip on scroll-down button hover

---
 client/components/Chat.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/client/components/Chat.vue b/client/components/Chat.vue
index e8fddd40..07d9915a 100644
--- a/client/components/Chat.vue
+++ b/client/components/Chat.vue
@@ -58,7 +58,8 @@
 					v-else
 					class="chat-content">
 					<div
-						:class="['scroll-down', {'scroll-down-shown': !channel.scrolledToBottom}]"
+						:class="['scroll-down tooltipped tooltipped-w', {'scroll-down-shown': !channel.scrolledToBottom}]"
+						aria-label="Jump to recent messages"
 						@click="$refs.messageList.jumpToBottom()">
 						<div class="scroll-down-arrow" />
 					</div>

From 404de0ff5bc4cf8e276e325cee495186572965aa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Mon, 18 Feb 2019 13:32:41 -0500
Subject: [PATCH 3/4] Use CSS variable for button color

---
 client/css/style.css | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index fb6b73c4..918c811d 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -11,6 +11,10 @@
 	/* Background color of the whole page */
 	--body-bg-color: #415364;
 
+	/* Main button color. Applies to border, text, and background on hover */
+	--button-color: #84ce88;
+	--button-text-color-hover: #fff;
+
 	/* Links and link-looking buttons */
 	--link-color: #50a656;
 
@@ -155,9 +159,9 @@ kbd {
 }
 
 .btn {
-	border: 2px solid #84ce88;
+	border: 2px solid var(--button-color);
 	border-radius: 3px;
-	color: #84ce88;
+	color: var(--button-color);
 	display: inline-block;
 	font-size: 12px;
 	font-weight: bold;
@@ -177,8 +181,8 @@ kbd {
 .btn:disabled,
 .btn:hover,
 .btn:focus {
-	background: #84ce88;
-	color: #fff;
+	background: var(--button-color);
+	color: var(--button-text-color-hover);
 	opacity: 1;
 }
 
@@ -1113,8 +1117,8 @@ background on hover (unless active) */
 	line-height: 34px;
 	border-radius: 50%;
 	background: var(--window-bg-color);
-	color: #84ce88;
-	border: 2px solid #84ce88;
+	color: var(--button-color);
+	border: 2px solid var(--button-color);
 	text-align: center;
 	transition: background 0.2s, color 0.2s;
 	box-shadow:
@@ -1123,8 +1127,8 @@ background on hover (unless active) */
 }
 
 .scroll-down:hover .scroll-down-arrow {
-	background: #84ce88;
-	color: var(--window-bg-color);
+	background: var(--button-color);
+	color: var(--button-text-color-hover);
 }
 
 .scroll-down-arrow::after {

From 8dee92bd049e4db181e63f08bd43d1d34e6b3f5e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Mon, 18 Feb 2019 13:54:25 -0500
Subject: [PATCH 4/4] Reduce shadow on scroll-down button

---
 client/css/style.css | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index 918c811d..60c480f0 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -1121,9 +1121,7 @@ background on hover (unless active) */
 	border: 2px solid var(--button-color);
 	text-align: center;
 	transition: background 0.2s, color 0.2s;
-	box-shadow:
-		0 3px 5px -1px rgba(0, 0, 0, 0.2),
-		0 6px 10px 0 rgba(0, 0, 0, 0.14);
+	box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.15);
 }
 
 .scroll-down:hover .scroll-down-arrow {