Added mode display to popup

popup.css

 	flex-flow: column;
 	border-top: 1px solid #ddd;
 }
+
+/*==================*/
+/*= OPTIONS BUTTON =*/
+/*==================*/
+
 button.options-button {
 	font-size: 1.125rem;
 	padding: 10px;
 .misc {
 	height: 4rem;
 	position: relative;
+	display: flex;
+}
+.misc > * {
+	flex: 1 1 auto;
+}
+
+/*================*/
+/*= 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";
 }
+.mode-display.whitelist::after {
+	content: "Whitelist";
+}
+
+/*=================*/
+/*= RELOAD BUTTON =*/
+/*=================*/
+
 button.reload-button {
 	background-color: #ffd;
 	margin: 4px;

popup.html

 		<button type='button' class='main-button'></button>
 	</div>
 	<div class='misc'>
+		<span class='mode-display'></span>
 		<button type='button' class='reload-button'></button>
 	</div>
 	<div class='aux-button-container'>

popup.js

 
 function updateUIState() {
 	let button = document.querySelector("button.main-button");
+	let modeDisplay = document.querySelector(".mode-display");
 	if (ASK.mode == "blacklist") {
 		if (ASK.pageMatched && !ASK.pageExcluded) {
 			button.classList.toggle("active", true);
 			button.classList.toggle("active", false);
 		}
 		button.classList.toggle("whitelist", false);
+		modeDisplay.classList.toggle("whitelist", false);
 	} else {
 		if (!ASK.pageExcluded) {
 			button.classList.toggle("active", false);
 			button.classList.toggle("active", true);
 		}
 		button.classList.toggle("whitelist", true);
+		modeDisplay.classList.toggle("whitelist", true);
 	}
 }