Refactored and improved popup info box

popup.css

@@ -86,6 +86,9 @@ button.main-button::after {
 button.main-button.active::after {
 	opacity: 1.0;
 }
+button.main-button.active:hover::after {
+	opacity: 0.15;
+}
 
 button.main-button.whitelist::after {
 	opacity: 0.15;
@@ -132,48 +135,75 @@ button.options-button::after {
 }
 
 /********/
-/* MISC */
+/* INFO */
 /********/
 
-.misc {
+.info {
-	height: 4rem;
+	height: 6rem;
 	position: relative;
 	display: flex;
+	flex-flow: column;
+	font-family: Inconsolata, sans-serif;
+	font-size: 1rem;
+	padding: 10px 8px 6px 8px;
+	line-height: 1;
 }
-.misc > * {
+.info > * {
 	flex: 1 1 auto;
 }
+.info.whitelist {
+	background-color: #000;
+	color: #fff;
+}
+
+.mode-display,
+.status-display {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	cursor: default;
+}
+
+.mode-display::after,
+.status-display::after {
+	font-weight: bold;
+}
 
 /*================*/
 /*= MODE DISPLAY =*/
 /*================*/
 
-.mode-display {
-	font-family: Inconsolata, sans-serif;
-	padding: 10px;
-	display: block;
-	text-align: center;
-	font-weight: bold;
-	font-size: 1rem;
-	line-height: 1.35;
-	cursor: default;
-}
-.mode-display::before {
-	content: "Mode:";
-	display: block;
-	font-weight: normal;
-}
-.mode-display.whitelist {
-	background-color: #000;
-	color: #fff;
-}
 .mode-display::after {
 	content: "Blacklist";
+	margin: 0 0 0 8px;
 }
-.mode-display.whitelist::after {
+.info.whitelist .mode-display::after {
 	content: "Whitelist";
 }
 
+/*==================*/
+/*= STATUS DISPLAY =*/
+/*==================*/
+
+.status-display {
+	flex-flow: column;
+	line-height: 1.25;
+	font-size: 0.875rem;
+}
+.status-display::after {
+	font-size: 1.5rem;
+	line-height: 1;
+	margin: 2px 0 0 0;
+}
+.status-display::after,
+.info.whitelist .status-display.active::after {
+	content: "No";
+}
+.status-display.active::after,
+.info.whitelist .status-display::after {
+	content: "Yes";
+}
+
 /*=================*/
 /*= RELOAD BUTTON =*/
 /*=================*/
@@ -187,6 +217,7 @@ button.reload-button {
 	overflow: hidden;
 	position: absolute;
 	width: calc(100% - 10px);
+	height: calc(6rem - 10px);
 	top: -4rem;
 	left: 5px;
 }
@@ -194,7 +225,7 @@ button.reload-button.active {
 	max-height: 1000px;
 	padding: 8px;
 	border: 1px solid #ddd;
-	top: 6px;
+	top: 5px;
 }
 button.reload-button:hover {
 	color: #000;

popup.html

@@ -11,8 +11,9 @@
 	<div class='main-button-container'>
 		<button type='button' class='main-button'></button>
 	</div>
-	<div class='misc'>
+	<div class='info'>
-		<span class='mode-display'></span>
+		<span class='mode-display'>Mode: </span>
+		<span class='status-display'>Killing stickies? </span>
 		<button type='button' class='reload-button'></button>
 	</div>
 	<div class='aux-button-container'>

popup.js

@@ -128,25 +128,29 @@ function updateState(result) {
 }
 
 function updateUIState() {
-	let button = document.querySelector("button.main-button");
+	let mainButton = document.querySelector("button.main-button");
-	let modeDisplay = document.querySelector(".mode-display");
+	let info = document.querySelector(".info");
+	let statusLabel = document.querySelector(".info .status-display");
+	var active, whitelist;
 	if (ASK.mode == "blacklist") {
 		if (ASK.pageMatched && !ASK.pageExcluded) {
-			button.classList.toggle("active", true);
+			active = true;
 		} else {
-			button.classList.toggle("active", false);
+			active = false;
 		}
-		button.classList.toggle("whitelist", false);
-		modeDisplay.classList.toggle("whitelist", false);
 	} else {
 		if (!ASK.pageExcluded) {
-			button.classList.toggle("active", false);
+			active = false;
 		} else {
-			button.classList.toggle("active", true);
+			active = true;
 		}
-		button.classList.toggle("whitelist", true);
-		modeDisplay.classList.toggle("whitelist", true);
 	}
+
+	mainButton.classList.toggle("active", active);
+	statusLabel.classList.toggle("active", active);
+
+	mainButton.classList.toggle("whitelist", (ASK.mode == "whitelist"));
+	info.classList.toggle("whitelist", (ASK.mode == "whitelist"));
 }
 
 /******************/