feat(ui): update settings modal style

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;

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>
 	}
 }