Fix inverting on darkmode and spacing

Signed-off-by: Joas Schilling <coding@schilljs.com>

apps/workflowengine/src/components/Checks/FileMimeType.vue

@@ -32,12 +32,12 @@
 			@input="setValue">
 			<template slot="singleLabel" slot-scope="props">
 				<span v-if="props.option.icon" class="option__icon" :class="props.option.icon" />
-				<img v-else :src="props.option.iconUrl">
+				<img v-else class="option__icon-img" :src="props.option.iconUrl">
 				<span class="option__title option__title_single">{{ props.option.label }}</span>
 			</template>
 			<template slot="option" slot-scope="props">
 				<span v-if="props.option.icon" class="option__icon" :class="props.option.icon" />
-				<img v-else :src="props.option.iconUrl">
+				<img v-else class="option__icon-img" :src="props.option.iconUrl">
 				<span class="option__title">{{ props.option.label }}</span>
 			</template>
 		</Multiselect>
@@ -137,7 +137,7 @@ export default {
 	},
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
 	.multiselect, input[type='text'] {
 		width: 100%;
 	}
@@ -148,4 +148,14 @@ export default {
 		overflow: hidden;
 		text-overflow: ellipsis;
 	}
+
+	.option__icon {
+		display: inline-block;
+		min-width: 30px;
+		background-position: left;
+	}
+
+	.option__icon-img {
+		margin-right: 14px;
+	}
 </style>

apps/workflowengine/src/components/Checks/RequestURL.vue

@@ -136,8 +136,14 @@ export default {
 	},
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
 	.multiselect, input[type='text'] {
 		width: 100%;
 	}
+
+	.option__icon {
+		display: inline-block;
+		min-width: 30px;
+		background-position: left;
+	}
 </style>

apps/workflowengine/src/components/Event.vue

@@ -131,6 +131,7 @@ export default {
 	.option__icon {
 		width: 16px;
 		height: 16px;
+		filter: var(--background-invert-if-dark);
 	}
 
 	.eventlist img,

apps/workflowengine/src/styles/operation.scss

@@ -68,11 +68,11 @@ small {
 		margin: 0;
 		margin-right: 10px;
 		&:not(.icon-invert) {
-			filter: invert(1);
+			filter: var(--background-invert-if-bright);
 		}
 	}
 }
 
 .colored .icon-invert {
-	filter: invert(1);
+	filter: var(--background-invert-if-bright);
 }