feature: Log search box that is less visually offensive

webui.dev/index.html

@@ -55,8 +55,13 @@
 		<main title = "main content">
 			<section id = "contentLogs" title = "Logs" class = "box-shadow" hidden>
 				<div class = "toolbar">
-					<input placeholder = "Search for action name" id = "logSearchBox" />
-					<button id = "searchLogsClear" title = "Clear search filter" disabled>X</button>
+					<label class = "input-with-icons">
+						<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="m19.6 21l-6.3-6.3q-.75.6-1.725.95T9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l6.3 6.3zM9.5 14q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"/></svg>
+						<input placeholder = "Search for action name" id = "logSearchBox" />
+						<button id = "searchLogsClear" title = "Clear search filter" disabled>
+							<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24"><path fill="currentColor" d="M19 6.41L17.59 5L12 10.59L6.41 5L5 6.41L10.59 12L5 17.59L6.41 19L12 13.41L17.59 19L19 17.59L13.41 12z"/></svg>
+						</button>
+					</label>
 				</div>
 				<table title = "Logs">
 					<thead>

webui.dev/style.css

@@ -524,10 +524,6 @@ div.toolbar {
   flex-direction: row;
 }
 
-div.toolbar * {
-  margin-right: 1em;
-}
-
 div.display {
   border: 1px solid #666;
   box-shadow: 0 0 6px 0 #aaa;
@@ -598,6 +594,36 @@ div.display {
   vertical-align: middle;
 }
 
+label.input-with-icons {
+  border: 1px solid #ccc;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+label.input-with-icons input {
+  border: 0;
+  padding: .6em;
+  flex-grow: 1;
+}
+
+label.input-with-icons svg {
+  font-size: 1.5em;
+}
+
+label.input-with-icons button {
+  border: 0;
+  background-color: transparent;
+  padding-top: 0;
+  padding-bottom: 0;
+  box-shadow: none;
+  transition: color .3s ease;
+}
+
+label.input-with-icons button:disabled {
+  display: none;
+}
+
 @media screen and (width <= 600px) {
   fieldset {
     grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
@@ -653,6 +679,16 @@ div.display {
     background-color: #222;
   }
 
+  label.input-with-icons {
+    border: 1px solid #666;
+    background-color: #383838;
+  }
+
+  input {
+    background-color: #383838;
+    color: white;
+  }
+
   button,
   input[type="submit"] {
     border: 1px solid #666;