resize theme toggle and add icon

navigator/navigator.css

@@ -36,6 +36,10 @@
 	margin-right: 1em;
 }
 
+.horizontal-spacer-sm {
+	margin-right: 0.25em;
+}
+
 .vertical-spacer {
 	margin-bottom: 1em;
 }
@@ -189,15 +193,15 @@
 .nav-toggle {
 	position: absolute;
 	right: 0;
-	bottom: 0.5em;
+	bottom: 1.5em;
 	margin-right: 1.9em;
 }
 
 .switch {
 	position: relative;
 	display: inline-block;
-	width: 60px;
-	height: 34px;
+	width: 30px;
+	height: 17px;
 }
 
 .switch input {
@@ -221,10 +225,10 @@
 .slider:before {
 	position: absolute;
 	content: "";
-	height: 26px;
-	width: 26px;
-	left: 4px;
-	bottom: 4px;
+	height: 13px;
+	width: 13px;
+	left: 2px;
+	bottom: 2px;
 	background-color: white;
 	-webkit-transition: 0.4s;
 	transition: 0.4s;
@@ -239,13 +243,13 @@ input:focus + .slider {
 }
 
 input:checked + .slider:before {
-	-webkit-transform: translateX(26px);
-	-ms-transform: translateX(26px);
-	transform: translateX(26px);
+	-webkit-transform: translateX(13px);
+	-ms-transform: translateX(13px);
+	transform: translateX(13px);
 }
 
 .slider.round {
-	border-radius: 34px;
+	border-radius: 17px;
 }
 
 .slider.round:before {

navigator/navigator.html

@@ -78,13 +78,6 @@
 						</div>
 					</div>
 					<div class="nav-info-column-properties" id="nav-info-column-properties"></div>
-					<div class="nav-toggle">
-						<label class="switch">
-							<input type="checkbox" id="toggle-theme">
-							<span class="slider round"></span>
-						</label>
-						<div class="vertical-spacer"></div>
-					</div>
 				</div>
 				<div class="nav-hidden" id="nav-edit-properties">
 					<div class="nav-info-column-filename"></div>
@@ -129,6 +122,16 @@
 						<button class="pf-c-button pf-m-primary" id="nav-apply-edit-btn">Apply</button>
 					</div>
 				</div>
+				<div class="nav-toggle">
+					<div class="nav-btn-group">
+						<i class="fas fa-sun" id="houston-theme-icon"></i>
+						<div class="horizontal-spacer-sm"></div>
+						<label class="switch">
+							<input type="checkbox" id="toggle-theme">
+							<span class="slider round"></span>
+						</label>
+					</div>
+				</div>
 			</div>
 		</div>
 	</div>

navigator/navigator.js

@@ -39,12 +39,17 @@ function format_permissions(/*int*/ mode) {
 function set_last_theme_state() {
 	var toggle_switch = document.getElementById("toggle-theme");
 	var state = localStorage.getItem("houston-theme-state");
+	var icon = document.getElementById("houston-theme-icon");
 	if (state === "light") {
 		toggle_switch.checked = false;
 		document.documentElement.setAttribute("data-theme", "light");
+		icon.classList.remove("fa-moon");
+		icon.classList.add("fa-sun");
 	} else if (state === "dark") {
 		toggle_switch.checked = true;
 		document.documentElement.setAttribute("data-theme", "dark");
+		icon.classList.remove("fa-sun");
+		icon.classList.add("fa-moon");
 	} else {
 		toggle_switch.checked = false;
 		state = "light";
@@ -53,11 +58,16 @@ function set_last_theme_state() {
 }
 
 function switch_theme(/*event*/ e) {
+	var icon = document.getElementById("houston-theme-icon");
 	var state = "";
 	if (e.target.checked) {
 		state = "dark";
+		icon.classList.remove("fa-sun");
+		icon.classList.add("fa-moon");
 	} else {
 		state = "light";
+		icon.classList.remove("fa-moon");
+		icon.classList.add("fa-sun");
 	}
 	document.documentElement.setAttribute("data-theme", state);
 	localStorage.setItem("houston-theme-state", state);