feat: Style update for buttons, reduce style duplication (#621)

webui.dev/index.html

@@ -207,8 +207,8 @@
 						<div class = "arguments"></div>
 
 						<div class = "buttons">
-							<input name = "start" type = "submit" value = "Start">
-							<button name = "cancel" title = "Cancel">Cancel</button>
+							<button name = "start" type = "submit">Start</button>
+							<button name = "cancel" title = "Cancel" type = "button">Cancel</button>
 						</div>
 					</div>
 				</form>

webui.dev/js/ArgumentForm.js

@@ -38,9 +38,9 @@ class ArgumentForm extends window.HTMLElement {
     for (const arg of this.argInputs) {
       if (arg.type === 'checkbox') {
         if (arg.checked) {
-          arg.value = "1"
+          arg.value = '1'
         } else {
-          arg.value = "0"
+          arg.value = '0'
         }
       }
 
@@ -122,7 +122,7 @@ class ArgumentForm extends window.HTMLElement {
   createDomInput (arg) {
     let domEl = null
 
-    if (arg.choices.length > 0 && (arg.type == "select" || arg.type == "")) {
+    if (arg.choices.length > 0 && (arg.type === 'select' || arg.type === '')) {
       domEl = document.createElement('select')
 
       // select/choice elements don't get an onchange/validation because theoretically
@@ -164,8 +164,8 @@ class ArgumentForm extends window.HTMLElement {
           domEl = document.createElement('input')
           domEl.setAttribute('type', 'checkbox')
           domEl.setAttribute('name', arg.name)
-          domEl.setAttribute('value', "1")
-          
+          domEl.setAttribute('value', '1')
+
           break
         case 'password':
         case 'email':

webui.dev/js/NavigationBar.js

@@ -6,7 +6,7 @@ export class NavigationBar {
   }
 
   createLink (title, url, isSupplemental) {
-    let parent = (isSupplemental) ? this.supplementalLinks : this.mainLinks
+    const parent = (isSupplemental) ? this.supplementalLinks : this.mainLinks
 
     const existsAlready = Array.from(parent.querySelectorAll('li')).some(el => el.title === title)
 

webui.dev/js/marshaller.js

@@ -128,9 +128,9 @@ export function marshalDashboardComponentsJsonToHtml (json) {
     marshalActionsJsonToHtml(json)
     marshalDashboardStructureToHtml(json)
 
-	window.navbar.refreshSectionPolicyLinks(json.effectivePolicy)
+    window.navbar.refreshSectionPolicyLinks(json.effectivePolicy)
 
-	refreshDiagnostics(json)
+    refreshDiagnostics(json)
   }
 
   document.body.setAttribute('initial-marshal-complete', 'true')

webui.dev/main.js

@@ -5,7 +5,7 @@ import {
   setupSectionNavigation,
   marshalDashboardComponentsJsonToHtml,
   marshalLogsJsonToHtml,
-  refreshServerConnectionLabel,
+  refreshServerConnectionLabel
 } from './js/marshaller.js'
 import { checkWebsocketConnection } from './js/websocket.js'
 

webui.dev/package-lock.json

@@ -2507,10 +2507,11 @@
 			"dev": true
 		},
 		"node_modules/brace-expansion": {
-			"version": "1.1.11",
-			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
-			"integrity": "sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==",
+			"version": "1.1.12",
+			"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+			"integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
 			"dev": true,
+			"license": "MIT",
 			"dependencies": {
 				"balanced-match": "^1.0.0",
 				"concat-map": "0.0.1"
@@ -5311,9 +5312,9 @@
 			}
 		},
 		"node_modules/nanoid": {
-			"version": "3.3.7",
-			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
-			"integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+			"version": "3.3.11",
+			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+			"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
 			"dev": true,
 			"funding": [
 				{
@@ -5321,6 +5322,7 @@
 					"url": "https://github.com/sponsors/ai"
 				}
 			],
+			"license": "MIT",
 			"bin": {
 				"nanoid": "bin/nanoid.cjs"
 			},

webui.dev/style.css

@@ -264,38 +264,71 @@ details {
 
 /* General Buttons */
 
-button,
-input[type="submit"]
-{
+button {
+  transition: none;
+  font-weight: bold;
+  border-radius: .7em;
+  box-shadow: none;
+  font-size: 1em;
+  padding: 0.6em 1em;
+  border: 1px solid #ccc;
   font-family: sans-serif;
-  padding: 1em;
   color: black;
   text-align: center;
-  border: 1px solid #999;
   background-color: white;
-  box-shadow: 0 0 6px 0 #aaa;
   user-select: none;
-  transition: background-color 1s ease, color .3s ease;
-}
-
-input[type="checkbox"] {
-  justify-self: baseline;
-}
-
-fieldset button {
-  border-radius: .7em;
 }
 
-/* Action Buttons */
 action-button {
   display: flex;
   flex-direction: column;
 }
 
 action-button button {
+  font-size: .85em;
+  font-weight: normal;
   flex-grow: 1;
   width: 100%;
   z-index: 1;
+  padding: 1em;
+  box-shadow: 0 0 6px 0 #aaa;
+  transition: background-color 1s ease, color .3s ease;
+}
+
+execution-button button {
+  margin-top: 0.2em;
+  margin-bottom: 0.2em;
+}
+
+button:focus {
+  outline: 1px solid black;
+}
+
+button:hover {
+  background-color: #ececec;
+  color: black;
+  cursor: pointer;
+}
+
+button:disabled {
+  color: #3c3c3c;
+  background-color: #cecece;
+  cursor: not-allowed;
+  text-decoration: line-through;
+}
+
+button[name="cancel"]:hover {
+  background-color: salmon;
+  color: black;
+}
+
+button[name="start"]:hover {
+  background-color: #aceaac;
+  color: black;
+}
+
+action-button button:hover {
+  box-shadow: 0 0 10px 0 #666;
 }
 
 span.title {
@@ -331,31 +364,6 @@ execution-button {
   margin-top: .2em;
 }
 
-execution-button button {
-  margin-top: 0.2em;
-  margin-bottom: 0.2em;
-}
-
-/* Button states */
-
-button:hover,
-input[type="submit"]:hover {
-  box-shadow: 0 0 10px 0 #666;
-  cursor: pointer;
-}
-
-button:focus,
-input[type="submit"]:focus {
-  outline: 1px solid black;
-}
-
-button:disabled,
-input[type="submit"]:disabled {
-  color: #3c3c3c;
-  background-color: #cecece;
-  cursor: not-allowed;
-}
-
 .action-status {
   padding: .4em;
   border-radius: .4em;
@@ -427,27 +435,23 @@ header {
 input {
   font-family: sans-serif;
   padding: 0.6em;
+  border: 1px solid #ccc;
+  border-radius: .4em;
 }
 
 input:invalid {
   outline: 2px solid red;
 }
 
+input[type="checkbox"] {
+  justify-self: baseline;
+}
+
 form .wrapper span.icon {
   display: inline-block;
   vertical-align: middle;
 }
 
-button[name="cancel"]:hover {
-  background-color: salmon;
-  color: black;
-}
-
-input[name="start"]:hover {
-  background-color: #aceaac;
-  color: black;
-}
-
 div.arguments {
   display: grid;
   grid-template-columns: max-content auto auto; /* We don't want the label or the description to wrap, and the input to take up the rest of the space */
@@ -605,12 +609,9 @@ label.input-with-icons button:disabled {
 }
 
 #content-login button {
-  display: block;
   width: 100%;
   grid-column: 1 / span 3;
   margin-bottom: 1em;
-  font-weight: bold;
-  background-color: #ced3d7;
 }
 
 #content-login button:last-child {
@@ -695,21 +696,33 @@ label.input-with-icons button:disabled {
   input {
     background-color: #383838;
     color: white;
+	border: 1px solid #666;
   }
 
-  button,
-  input[type="submit"] {
+  button {
     border: 1px solid #666;
     background-color: #222;
-    box-shadow: 0 0 6px 0 #444;
     color: white;
   }
 
-  button:focus,
-  input[type="submit"]:focus {
+  action-button button {
+    box-shadow: 0 0 6px 0 #444;
+  }
+
+  button:focus {
     outline: 2px solid #72B7F4;
   }
 
+  button:disabled {
+    background-color: black;
+  }
+
+  button:hover {
+	background-color: #444;
+	color: white;
+  }
+
+
   footer {
     color: #bbb;
   }
@@ -743,10 +756,6 @@ label.input-with-icons button:disabled {
     color: white;
   }
 
-  button:disabled {
-    background-color: black;
-  }
-
   table,
   td,
   th {
@@ -770,10 +779,4 @@ label.input-with-icons button:disabled {
   div.display {
     box-shadow: 0 0 6px 0 #444;
   }
-
-  #content-login button {
-    background-color: #000;
-    border: 1px solid #666;
-    color: white;
-  }
 }