From 4a4befa2c5f2906390b83b4c7ace0a6a329b7d64 Mon Sep 17 00:00:00 2001
From: Neil Brommer <neil@neilbrommer.com>
Date: Wed, 13 Dec 2017 19:50:55 -0800
Subject: [PATCH] Add a background color to the navbar toggler, better button
 colors

---
 index.html | 10 +++++-----
 js/main.js | 10 ++++++----
 main.css   |  8 ++++++++
 3 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/index.html b/index.html
index f3fc573..28959e4 100644
--- a/index.html
+++ b/index.html
@@ -24,16 +24,16 @@
 
 	<nav class="navbar navbar-dark bg-dark">
 		<span class="navbar-brand"></span>
-		<button class="btn btn-light navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse"
+		<button class="btn btn-light navbar-toggler toggler-bg-light" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse"
 		 aria-expanded="false" aria-label="Toggle navigation">
 			<span class="navbar-toggler-icon"></span>
 		</button>
 		<div class="collapse navbar-collapse" id="navbarCollapse">
 			<form class="form-inline">
-				<button class="btn btn-light mr-2 my-1 my-sm-0" type="button" data-Toggle="modal" data-target="#aboutModal"><span class="fas fa-question-circle"></span> About</button>
-				<button class="btn btn-light mr-2 my-1 my-sm-0" type="button" data-Toggle="modal" data-target="#importExportModal"><span class="fas fa-exchange-alt" data-fa-transform="rotate-90"></span> Import/Export</button>
-				<button id="btnEdit" class="btn btn-light mr-2 my-1 my-sm-0" type="button"><span class="fa fa-exclamation-circle"></span> Edit</button>
-				<button class="btn btn-light mr-2 my-1 my-sm-0" type="button" data-toggle="modal" data-target="#newBookmarkModal"><span class="fas fa-plus-circle"></span> Add</button>
+				<button id="btnAbout" class="btn btn-light mr-2 my-1 my-sm-0" type="button" data-Toggle="modal" data-target="#aboutModal"><span class="fas fa-question-circle"></span> About</button>
+				<button id="btnImport" class="btn btn-light mr-2 my-1 my-sm-0" type="button" data-Toggle="modal" data-target="#importExportModal"><span class="fas fa-exchange-alt" data-fa-transform="rotate-90"></span> Import/Export</button>
+				<button id="btnEdit" class="btn btn-light mr-2 my-1 my-sm-0" type="button"><span class="fa fa-pencil-alt"></span> Edit</button>
+				<button id="btnAdd" class="btn btn-light mr-2 my-1 my-sm-0" type="button" data-toggle="modal" data-target="#newBookmarkModal"><span class="fas fa-plus-circle"></span> Add</button>
 			</form>
 		</div>
 	</nav>
diff --git a/js/main.js b/js/main.js
index 9c04c84..8667594 100644
--- a/js/main.js
+++ b/js/main.js
@@ -35,12 +35,14 @@ function calcBackground() {
 
 function setBackground(num, dark) {
 	$("body").css("background-image", "url(img/" + num + ".png)");
+	// dark is a boolean that indicates the brightness of the background
+
 	if (dark) {
-		$(".btn-light").removeClass("btn-light").addClass("btn-dark");
-		$(".navbar").removeClass("navbar-light").addClass("navbar-dark");
-	} else {
-		$(".btn-dark").removeClass("btn-dark").addClass("btn-light");
 		$(".navbar").removeClass("navbar-dark").addClass("navbar-light");
+		$(".navbar-toggler").removeClass("toggler-bg-dark btn-dark").addClass("toggler-bg-light btn-light");
+	} else {
+		$(".navbar").removeClass("navbar-light").addClass("navbar-dark");
+		$(".navbar-toggler").removeClass("toggler-bg-light btn-light").addClass("toggler-bg-dark btn-dark");
 	}
 }
 
diff --git a/main.css b/main.css
index 169a3b5..b1b2469 100644
--- a/main.css
+++ b/main.css
@@ -50,6 +50,14 @@ pre {
 	margin-right: 50px;
 }
 
+.toggler-bg-dark {
+	background: rgba(0, 0, 0, 0.24);
+}
+
+.toggler-bg-light {
+	background: rgba(255, 255, 255, 0.24);
+}
+
 /* set the width of the main container based on element width */
 @media (max-width: 34em) {
 	#wrapper {