From 8b7071af9d81e0437c0dae9e05c0a23f9552cf9f Mon Sep 17 00:00:00 2001
From: Scott McKendry <39483124+scottmckendry@users.noreply.github.com>
Date: Sun, 25 Aug 2024 14:07:37 +1200
Subject: [PATCH] feat(ui): update settings modal style

---
 public/css/styles.css   | 48 ++++++++++++++++++++++++++++++++++++++++
 views/settings.templ    | 49 +++++++++++++++++++++++------------------
 views/settings_templ.go | 24 ++++++++++++++------
 3 files changed, 92 insertions(+), 29 deletions(-)

diff --git a/public/css/styles.css b/public/css/styles.css
index 5394dc4..beabf5d 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -192,6 +192,43 @@ nav:hover .caret-rotate {
     transform: rotate(-90deg);
 }
 
+.settings-container {
+    display: flex;
+    flex-direction: column;
+}
+
+.setting {
+    margin-bottom: 10px;
+}
+
+.tooltip-container {
+    position: relative;
+    display: inline-block;
+}
+
+.tooltip-text {
+    visibility: hidden;
+    width: 250px;
+    background-color: #555;
+    color: #fff;
+    text-align: center;
+    border-radius: 6px;
+    padding: 10px;
+    position: absolute;
+    z-index: 1;
+    bottom: 125%;
+    left: 50%;
+    margin-left: -60px;
+    opacity: 0;
+    transition: opacity 0.3s;
+    font-size: 0.75rem;
+}
+
+.tooltip-container:hover .tooltip-text {
+    visibility: visible;
+    opacity: 1;
+}
+
 /*modal styles*/
 #modal {
     /* Underlay covers entire screen. */
@@ -313,6 +350,17 @@ nav:hover .caret-rotate {
     color: #fff;
 }
 
+#modal select {
+    padding: 8px !important;
+    font-size: inherit;
+    width: 100%;
+    border-radius: 5px;
+    background-color: #444;
+    outline: none;
+    border: none;
+    color: #fff;
+}
+
 .table-actions {
     white-space: nowrap;
     padding: 3px 0;
diff --git a/views/settings.templ b/views/settings.templ
index 60ef762..c5ede4b 100644
--- a/views/settings.templ
+++ b/views/settings.templ
@@ -7,28 +7,33 @@ import (
 
 templ Settings(user goth.User, settings *data.UserSettings) {
 	@Modal("Settings") {
-		<div class="setting">
-			<label for="leaderKey">Leader Key</label>
-			<input type="text" name="leaderKey" value={ settings.LeaderKey } placeholder="Leader Key" data-include-edit=""/>
-		</div>
-		<div class="setting">
-			<label for="searchEngine">Search Engine</label>
-			<select name="searchEngine" data-include-edit="">
-				// See search.templ for the full list of search engines
-				for name := range searchEngines {
-					<option value={ name } selected?={ settings.SearchEngine == name }>{ name }</option>
-				}
-			</select>
-		</div>
-		<div class="setting">
-			<label for="suggestions" class="tooltip-container">
-				Show Google-Powered Suggestions <icon class="bx bx-help-circle"></icon>
-				<p class="tooltip-text">This feature will send your search queries to Google to provide suggestions - regardless of your search engine choice.</p>
-			</label>
-			<input type="checkbox" name="suggestions" checked?={ settings.ShowSuggestions } data-include-edit=""/>
-		</div>
-		<div class="action-buttons">
-			<button class="button" _="on click trigger closeModal" hx-put="/update-settings" hx-include="input[data-include-edit],select[data-include-edit]">Save</button>
+		<div class="settings-container">
+			<div class="setting">
+				<label for="leaderKey">Leader Key</label>
+				<input type="text" name="leaderKey" value={ settings.LeaderKey } placeholder="Leader Key" data-include-edit=""/>
+			</div>
+			<div class="setting">
+				<label for="searchEngine">Search Engine</label>
+				<select name="searchEngine" data-include-edit="">
+					// See search.templ for the full list of search engines
+					for name := range searchEngines {
+						<option value={ name } selected?={ settings.SearchEngine == name }>{ name }</option>
+					}
+				</select>
+			</div>
+			<div class="setting">
+				<label for="suggestions" class="tooltip-container">
+					Show Google-Powered Suggestions <icon class="bx bx-help-circle"></icon>
+					<p class="tooltip-text">This feature will send your search queries to Google to provide suggestions - regardless of your search engine choice.</p>
+				</label>
+				<select name="suggestions" data-include-edit="">
+					<option value="true" selected?={ settings.ShowSuggestions }>Yes</option>
+					<option value="false" selected?={ !settings.ShowSuggestions }>No</option>
+				</select>
+			</div>
+			<div class="action-buttons">
+				<button class="button" _="on click trigger closeModal" hx-put="/update-settings" hx-include="input[data-include-edit],select[data-include-edit]">Save</button>
+			</div>
 		</div>
 	}
 }
diff --git a/views/settings_templ.go b/views/settings_templ.go
index 3d6b843..acdc657 100644
--- a/views/settings_templ.go
+++ b/views/settings_templ.go
@@ -43,14 +43,14 @@ func Settings(user goth.User, settings *data.UserSettings) templ.Component {
 				}()
 			}
 			ctx = templ.InitializeContext(ctx)
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"setting\"><label for=\"leaderKey\">Leader Key</label> <input type=\"text\" name=\"leaderKey\" value=\"")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<div class=\"settings-container\"><div class=\"setting\"><label for=\"leaderKey\">Leader Key</label> <input type=\"text\" name=\"leaderKey\" value=\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			var templ_7745c5c3_Var3 string
 			templ_7745c5c3_Var3, templ_7745c5c3_Err = templ.JoinStringErrs(settings.LeaderKey)
 			if templ_7745c5c3_Err != nil {
-				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 12, Col: 65}
+				return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 13, Col: 66}
 			}
 			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var3))
 			if templ_7745c5c3_Err != nil {
@@ -68,7 +68,7 @@ func Settings(user goth.User, settings *data.UserSettings) templ.Component {
 				var templ_7745c5c3_Var4 string
 				templ_7745c5c3_Var4, templ_7745c5c3_Err = templ.JoinStringErrs(name)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 19, Col: 25}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 20, Col: 26}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var4))
 				if templ_7745c5c3_Err != nil {
@@ -91,7 +91,7 @@ func Settings(user goth.User, settings *data.UserSettings) templ.Component {
 				var templ_7745c5c3_Var5 string
 				templ_7745c5c3_Var5, templ_7745c5c3_Err = templ.JoinStringErrs(name)
 				if templ_7745c5c3_Err != nil {
-					return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 19, Col: 78}
+					return templ.Error{Err: templ_7745c5c3_Err, FileName: `views/settings.templ`, Line: 20, Col: 79}
 				}
 				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(templ.EscapeString(templ_7745c5c3_Var5))
 				if templ_7745c5c3_Err != nil {
@@ -102,17 +102,27 @@ func Settings(user goth.User, settings *data.UserSettings) templ.Component {
 					return templ_7745c5c3_Err
 				}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></div><div class=\"setting\"><label for=\"suggestions\" class=\"tooltip-container\">Show Google-Powered Suggestions <icon class=\"bx bx-help-circle\"></icon><p class=\"tooltip-text\">This feature will send your search queries to Google to provide suggestions - regardless of your search engine choice.</p></label> <input type=\"checkbox\" name=\"suggestions\"")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("</select></div><div class=\"setting\"><label for=\"suggestions\" class=\"tooltip-container\">Show Google-Powered Suggestions <icon class=\"bx bx-help-circle\"></icon><p class=\"tooltip-text\">This feature will send your search queries to Google to provide suggestions - regardless of your search engine choice.</p></label> <select name=\"suggestions\" data-include-edit=\"\"><option value=\"true\"")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}
 			if settings.ShowSuggestions {
-				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" checked")
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" selected")
 				if templ_7745c5c3_Err != nil {
 					return templ_7745c5c3_Err
 				}
 			}
-			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" data-include-edit=\"\"></div><div class=\"action-buttons\"><button class=\"button\" _=\"on click trigger closeModal\" hx-put=\"/update-settings\" hx-include=\"input[data-include-edit],select[data-include-edit]\">Save</button></div>")
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(">Yes</option> <option value=\"false\"")
+			if templ_7745c5c3_Err != nil {
+				return templ_7745c5c3_Err
+			}
+			if !settings.ShowSuggestions {
+				_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(" selected")
+				if templ_7745c5c3_Err != nil {
+					return templ_7745c5c3_Err
+				}
+			}
+			_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString(">No</option></select></div><div class=\"action-buttons\"><button class=\"button\" _=\"on click trigger closeModal\" hx-put=\"/update-settings\" hx-include=\"input[data-include-edit],select[data-include-edit]\">Save</button></div></div>")
 			if templ_7745c5c3_Err != nil {
 				return templ_7745c5c3_Err
 			}