chore(webui): redesign the settings page and fix a few display elements

pkg/webui/html/base.html

@@ -15,21 +15,21 @@
     <div id="main">
       <aside>
         {{ if eq .Page.Section "login" }}
-        <a href="/login" class="active">
+        <a href="/login" class="primary">
           <i class="material-symbols-outlined">login</i>
           <span>Login</span>
         </a>
         {{ else }}
-        <a href="/states"{{ if eq .Page.Section "states" }} class="active"{{ end}}>
+        <a href="/states"{{ if eq .Page.Section "states" }} class="primary"{{ end}}>
           <i class="material-symbols-outlined">home_storage</i>
           <span>States</span>
         </a>
-        <a href="/settings"{{ if eq .Page.Section "settings" }} class="active"{{ end}}>
+        <a href="/settings"{{ if eq .Page.Section "settings" }} class="primary"{{ end}}>
           <i class="material-symbols-outlined">settings</i>
           <span>Settings</span>
         </a>
         {{ if .Page.IsAdmin }}
-        <a href="/accounts"{{ if eq .Page.Section "accounts" }} class="active"{{ end}}>
+        <a href="/accounts"{{ if eq .Page.Section "accounts" }} class="primary"{{ end}}>
           <i class="material-symbols-outlined">person</i>
           <span>User Accounts</span>
         </a>

pkg/webui/html/settings.html

@@ -1,23 +1,20 @@
 {{ define "main" }}
+<h1>Settings</h1>
 <form action="/settings" method="post">
   <fieldset>
-    <div class="field middle-align">
-      <nav>
-        <div class="max">
-          <h6>Dark Mode</h6>
-        </div>
-        <label class="switch icon">
-          <input {{ if not .Settings.LightMode }} checked{{ end }}
-                 name="dark-mode"
-                 type="checkbox"
-                 value="1" />
-          <span>
-            <i>dark_mode</i>
-          </span>
-        </label>
-      </nav>
+    <legend>Account Settings</legend>
+    <div style="align-items:center; display:grid; grid-template-columns:1fr 1fr;">
+      <label for="dark-mode">Dark mode</label>
+      <input autofocus
+             {{ if not .Settings.LightMode }}checked{{ end }}
+             id="dark-mode"
+             name="dark-mode"
+             type="checkbox"
+             value="1">
+    </div>
+    <div style="align-self:stretch; display:flex; justify-content:flex-end;">
+      <button class="primary" type="submit" value="submit">Save</button>
     </div>
-    <button class="small-round" type="submit" value="login">Save</button>
   </fieldset>
 </form>
 {{ end }}

pkg/webui/index.go

@@ -10,7 +10,6 @@ import (
 type Page struct {
 	IsAdmin   bool
 	LightMode bool
-	Precedent string
 	Section   string
 	Title     string
 }

pkg/webui/settings.go

@@ -41,12 +41,10 @@ func handleSettingsPOST(db *database.DB) http.Handler {
 			errorResponse(w, r, http.StatusInternalServerError, err)
 			return
 		}
+		page := makePage(r, &Page{Title: "Settings", Section: "settings"})
+		page.LightMode = settings.LightMode
 		render(w, settingsTemplates, http.StatusOK, SettingsPage{
-			Page: &Page{
-				LightMode: settings.LightMode,
-				Title:     "Settings",
-				Section:   "settings",
-			},
+			Page:     page,
 			Settings: &settings,
 		})
 	})

pkg/webui/states.go

@@ -126,9 +126,8 @@ func handleStatesIdGET(db *database.DB) http.Handler {
 		}
 		render(w, statesIdTemplate, http.StatusOK, StatesData{
 			Page: makePage(r, &Page{
-				Precedent: "/states",
-				Section:   "states",
-				Title:     state.Path,
+				Section: "states",
+				Title:   state.Path,
 			}),
 			State:     state,
 			Usernames: usernames,

pkg/webui/versions.go

@@ -48,9 +48,8 @@ func handleVersionsGET(db *database.DB) http.Handler {
 		versionData := string(version.Data[:])
 		render(w, versionsTemplate, http.StatusOK, VersionsData{
 			Page: makePage(r, &Page{
-				Precedent: path.Join("/states/", state.Id.String()),
-				Section:   "states",
-				Title:     state.Path,
+				Section: "states",
+				Title:   state.Path,
 			}),
 			Account:     account,
 			State:       state,