Add ability to clear color to their default values

Improve link hover legibility

frontend/src/elements/svg.jsx

@@ -9,6 +9,13 @@ import { svgList } from '../svg-list'
 export function CheckSVGOptions({options, updateOptions}) {
 	const svgOptions = svgList.map(svgName => <option value={svgName}>{svgName}</option>)
 
+	const clearField = (e, field) => {
+		e.preventDefault();
+		let opts = {};
+		opts[field] = null;
+		updateOptions(opts);
+	}
+
 	return <div class="card-options">
 		<label>Icinga Host or Service</label>
 		<IcingaCheckList checkId={options.checkId}
@@ -19,7 +26,7 @@ export function CheckSVGOptions({options, updateOptions}) {
 				onInput={e => updateOptions({okSvg: e.currentTarget.value})}>
 			{svgOptions}
 		</select>
-		<label for="ok-stroke-color">OK Stroke color</label>
+		<label for="ok-stroke-color">OK Stroke color <a onClick={e => clearField(e, 'okStrokeColor')}>clear</a></label>
 		<div class="left spacer">
 			<input type="color" name="ok-stroke-color" id="ok-stroke-color" value={options.okStrokeColor}
 				onInput={e => updateOptions({okStrokeColor: e.currentTarget.value})}/>
@@ -32,7 +39,7 @@ export function CheckSVGOptions({options, updateOptions}) {
 				onInput={e => updateOptions({warningSvg: e.currentTarget.value})}>
 			{svgOptions}
 		</select>
-		<label for="warning-stroke-color">Warning Stroke color</label>
+		<label for="warning-stroke-color">Warning Stroke color <a onClick={e => clearField(e, 'warningStrokeColor')}>clear</a></label>
 		<div class="left spacer">
 			<input type="color" name="warning-stroke-color" id="warning-stroke-color" value={options.warningStrokeColor}
 				onInput={e => updateOptions({warningStrokeColor: e.currentTarget.value})}/>
@@ -45,7 +52,7 @@ export function CheckSVGOptions({options, updateOptions}) {
 				onInput={e => updateOptions({unknownSvg: e.currentTarget.value})}>
 			{svgOptions}
 		</select>
-		<label for="unknown-stroke-color">Unknown Stroke color</label>
+		<label for="unknown-stroke-color">Unknown Stroke color <a onClick={e => clearField(e, 'unknownStrokeColor')}>clear</a></label>
 		<div class="left spacer">
 			<input type="color" name="unknown-stroke-color" id="unknown-stroke-color" value={options.unknownStrokeColor}
 				onInput={e => updateOptions({unknownStrokeColor: e.currentTarget.value})}/>
@@ -58,7 +65,7 @@ export function CheckSVGOptions({options, updateOptions}) {
 				onInput={e => updateOptions({criticalSvg: e.currentTarget.value})}>
 			{svgOptions}
 		</select>
-		<label for="critical-stroke-color">Critical Stroke color</label>
+		<label for="critical-stroke-color">Critical Stroke color <a onClick={e => clearField(e, 'criticalStrokeColor')}>clear</a></label>
 		<div class="left spacer">
 			<input type="color" name="critical-stroke-color" id="critical-stroke-color" value={options.criticalStrokeColor}
 				onInput={e => updateOptions({criticalStrokeColor: e.currentTarget.value})}/>

frontend/src/statics/svg.jsx

@@ -6,6 +6,13 @@ import { svgList } from '../svg-list';
 export function StaticSVGOptions({options, updateOptions}) {
 	const svgOptions = svgList.map(svgName => <option value={svgName}>{svgName}</option>)
 
+	const clearField = (e, field) => {
+		e.preventDefault();
+		let opts = {};
+		opts[field] = null;
+		updateOptions(opts);
+	}
+
 	return <Fragment>
 		<label for="svg">SVG</label>
 		<select id="svg" name="svg" value={options.svg}
@@ -13,7 +20,7 @@ export function StaticSVGOptions({options, updateOptions}) {
 			{svgOptions}
 		</select>
 
-		<label for="stroke-color">Stroke color</label>
+		<label for="stroke-color">Stroke color <a onClick={e => clearField(e, 'strokeColor')}>clear</a></label>
 		<div class="left spacer">
 			<input type="color" name="stroke-color" id="stroke-color" value={options.strokeColor}
 				onInput={e => updateOptions({strokeColor: e.currentTarget.value})}/>

frontend/src/statics/text.jsx

@@ -2,6 +2,13 @@ import { h, Fragment } from 'preact';
 import { useState, useEffect } from 'preact/hooks';
 
 export function StaticTextOptions({options, updateOptions}) {
+	const clearField = (e, field) => {
+		e.preventDefault();
+		let opts = {};
+		opts[field] = null;
+		updateOptions(opts);
+	}
+
 	return <Fragment>
 		<label for="text">Text</label>
 		<textarea id="text" name="text" value={options.text}
@@ -32,14 +39,14 @@ export function StaticTextOptions({options, updateOptions}) {
 		</div>
 
 
-		<label for="font-color">Font Color</label>
+		<label for="font-color">Font Color <a onClick={e => clearField(e, 'fontColor')}>clear</a></label>
 		<div class="lefty-righty spacer">
 			<input id="font-color" name="font-color" type="color" value={options.fontColor}
 				onInput={e => updateOptions({fontColor: e.currentTarget.value})}/>
 			<input type="text" value={options.fontColor} disabled/>
 		</div>
 
-		<label for="background-color">Background Color</label>
+		<label for="background-color">Background Color <a onClick={e => clearField(e, 'backgroundColor')}>clear</a></label>
 		<div class="lefty-righty spacer">
 			<input id="background-color" name="background-color" type="color" value={options.backgroundColor}
 				onInput={e => updateOptions({backgroundColor: e.currentTarget.value})}/>

frontend/style.css

@@ -2,8 +2,9 @@
 	--color-dark-orange: #f0570d;
 	--color-orange: #ec6c30;
 	--color-light-orange: #ff854c;
-	--color-light-blue: #cce5eb;
+	--color-dark-blue: #213b5c;
 	--color-blue: #476C9B;
+	--color-light-blue: #cce5eb;
 	--color-teal: #468C98;
 	--color-black: #101419;
 	--color-gray: #797979;
@@ -99,10 +100,11 @@ hr {
 a {
 	color: var(--color-blue);
 	cursor: pointer;
+	font-weight: normal;
 }
 
 a:hover, a:focus {
-	color: var(--color-light-blue);
+	color: var(--color-dark-blue);
 }
 
 .lefty-righty {