From 52d68df2d7992adcc51974e7e983be7721726609 Mon Sep 17 00:00:00 2001
From: achmizs <said@saidachmiz.net>
Date: Fri, 1 Feb 2019 00:16:04 -0500
Subject: [PATCH] Added (currently inoperative) help button to popup

---
 popup.css  | 55 ++++++++++++++++++++++++++++++++++++++----------------
 popup.html |  1 +
 popup.js   |  5 +++++
 3 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/popup.css b/popup.css
index 8479146..6d3c1e0 100644
--- a/popup.css
+++ b/popup.css
@@ -103,35 +103,58 @@ button.main-button.whitelist.active::after {
 
 .aux-button-container {
 	display: flex;
-	flex-flow: column;
 	border-top: 1px solid #ddd;
 	flex: 1 1 auto;
+	padding: 0 8px;
+}
+
+.aux-button-container button {
+	font-size: 1.25rem;
+	padding: 0;
+	flex: 1 1 auto;
+	font-family: Font Awesome, Inconsolata, sans-serif;
+	display: flex;
+	flex-flow: column;
+	align-items: center;
+	justify-content: center;
+	min-width: 0;
+}
+.aux-button-container button::before {
+	padding: 4px 0 0 0;
+}
+.aux-button-container button:hover::before {
+	color: #000;
+}
+.aux-button-container button::after {
+	text-transform: uppercase;
+	color: #777;
+	font-size: 0.75rem;
+	padding: 4px 0 0 0;
 }
 
 /*==================*/
 /*= OPTIONS BUTTON =*/
 /*==================*/
 
-button.options-button {
-	font-size: 1.125rem;
-	padding: 10px;
-	color: #777;
-	width: 100%;
-	flex: 1 1 auto;
-	font-family: Font Awesome, Inconsolata, sans-serif;
-}
-button.options-button:hover {
-	color: #000;
-}
 button.options-button::before {
 	content: "\F1DE";
-	font-family: Font Awesome;
-	font-size: 0.875em;
-	margin: 0 6px 0 0;
+	color: #777;
 }
 button.options-button::after {
 	content: "Options";
-	margin: 0 3px 0 0;
+}
+
+/*===============*/
+/*= HELP BUTTON =*/
+/*===============*/
+
+button.help-button::before {
+	content: "\F128";
+	font-weight: 900;
+	color: #999;
+}
+button.help-button::after {
+	content: "Help";
 }
 
 /********/
diff --git a/popup.html b/popup.html
index aa5a09d..f4eb5f1 100644
--- a/popup.html
+++ b/popup.html
@@ -17,6 +17,7 @@
 		<button type='button' class='reload-button'></button>
 	</div>
 	<div class='aux-button-container'>
+		<button type='button' class='help-button'></button>
 		<button type='button' class='options-button'></button>
 	</div>
 </body>
diff --git a/popup.js b/popup.js
index fe1030d..46d4b65 100644
--- a/popup.js
+++ b/popup.js
@@ -198,6 +198,11 @@ function initialize() {
 	document.querySelector("button.options-button").addActivateEvent(() => {
 		chrome.runtime.openOptionsPage(null);
 	});
+	
+	// Listener for the Help button.
+	document.querySelector("button.help-button").addActivateEvent(() => {
+		// TODO: code!
+	});
 
 	// Listener for reload button (appears when sticky-killing is toggled OFF).
 	document.querySelector("button.reload-button").addActivateEvent(() => {