feat: tidy up modal styling

public/css/modal.css

@@ -39,9 +39,8 @@
     max-width: 600px;
 
     /* Display properties for visible dialog*/
-    border: solid 1px #999;
     border-radius: 8px;
-    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.3);
+    box-shadow: 0px 0px 20px 0px rgba(33, 33, 33, 0.5);
     background-color: #323130;
     padding: 20px;
 
@@ -51,6 +50,11 @@
     animation-timing-function: ease;
 }
 
+#modal h2 {
+    margin-bottom: 20px;
+    font-size: 1.5rem;
+}
+
 #modal.closing {
     /* Animate when closing */
     animation-name: fadeOut;
@@ -65,13 +69,48 @@
     animation-timing-function: ease;
 }
 
-#modal input[type="text"] {
-    width: 95%;
+#modal table {
+    width: 100%;
+    table-layout: fixed;
+    margin-bottom: 20px;
+}
+
+#modal table th {
+    border-bottom: 1px solid #fff;
+    text-align: left;
+}
+
+#modal table td {
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+#modal button {
+    padding: 5px 10px;
+    background-color: #555;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+#modal input {
     padding: 5px;
-    font-size: 16px;
-    margin-bottom: 10px;
-    border: 1px solid #fff;
+    width: 100%;
     border-radius: 5px;
+    background-color: #444;
+    outline: none;
+    border: none;
+    color: #fff;
+}
+
+.table-actions {
+    white-space: nowrap;
+}
+
+#modal .action-buttons {
+    margin-top: 20px;
 }
 
 @keyframes fadeIn {

views/mappings.templ

@@ -10,7 +10,7 @@ templ Mappings(user goth.User, mappings []data.Mapping) {
 	<div id="modal" _="on closeModal add .closing then wait for animationend then remove me then go to location.reload()">
 		<div class="modal-underlay" _="on click trigger closeModal"></div>
 		<div class="modal-content">
-			<h2>Mappings</h2>
+			<h2>Edit key mappings</h2>
 			<table id="mappings-table">
 				<thead>
 					<tr>
@@ -39,7 +39,7 @@ templ MappingRow(mapping *data.Mapping) {
 	<tr>
 		<td>{ mapping.Keymap }</td>
 		<td>{ mapping.MapsTo }</td>
-		<td>
+		<td class="table-actions">
 			<button
 				class="button"
 				hx-get={ "/mappings/edit/" + strconv.Itoa(mapping.ID) }
@@ -66,8 +66,9 @@ templ NewMapping() {
 		<td>
 			<input type="text" id="mapsto" name="mapsto" data-include-add="" required/>
 		</td>
-		<td>
+		<td class="table-actions">
 			<button class="button" hx-post="/mappings/add" hx-target="#mappings-table" hx-include="input[data-include-add]" hx-swap="outerHTML">Save</button>
+			<button class="button" hx-get="/mappings" hx-swap="outerHTML">Cancel</button>
 		</td>
 	</tr>
 }
@@ -80,7 +81,7 @@ templ EditMapping(user goth.User, mapping *data.Mapping) {
 		<td>
 			<input type="text" id="mapsto" name="mapsto" data-include-edit="" value={ mapping.MapsTo } required/>
 		</td>
-		<td>
+		<td class="table-actions">
 			<button class="button" hx-put={ "/mappings/update/" + strconv.Itoa(mapping.ID) } hx-target="#mappings-table" hx-include="input[data-include-edit]">Save</button>
 			<button class="button" hx-get={ "/mappings/" + strconv.Itoa(mapping.ID) }>Cancel</button>
 		</td>