5 files changed, 64 insertions, 14 deletions
diff --git a/apps/workflowengine/src/components/Check.vue b/apps/workflowengine/src/components/Check.vue
index 5f8140f2222..8583288016f 100644
--- a/apps/workflowengine/src/components/Check.vue
+++ b/apps/workflowengine/src/components/Check.vue
@@ -89,11 +89,12 @@ export default {
 		width: 100%;
 		padding-right: 20px;
 		& > *:not(.icon-delete) {
-			width: 200px;
+			width: 180px;
 		}
 		& > .multiselect,
 		& > input[type=text] {
 			margin-right: 5px;
+			margin-bottom: 5px;
 		}
 	}
 	input[type=text] {
diff --git a/apps/workflowengine/src/components/Event.vue b/apps/workflowengine/src/components/Event.vue
index 2621b8ca3ba..5ff59882b9a 100644
--- a/apps/workflowengine/src/components/Event.vue
+++ b/apps/workflowengine/src/components/Event.vue
@@ -1,6 +1,6 @@
 <template>
 	<div>
-		<div v-if="operation.isComplex && operation.fixedEntity !== ''">
+		<div v-if="operation.isComplex && operation.fixedEntity !== ''" class="isComplex">
 			<img class="option__icon" :src="entity.icon">
 			<span class="option__title option__title_single">{{ operation.triggerHint }}</span>
 		</div>
@@ -60,7 +60,19 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+	.isComplex {
+		img {
+			vertical-align: top;
+			padding-top: 4px;
+			padding-bottom: 4px;
+			padding-left: 4px;
+		}
+		span {
+			padding-top: 2px;
+			display: inline-block;
+		}
+	}
 	.multiselect::v-deep .multiselect__single {
 		display: flex;
 	}
diff --git a/apps/workflowengine/src/components/Operation.vue b/apps/workflowengine/src/components/Operation.vue
index 1ee7a2e4c9d..346b28e6b9d 100644
--- a/apps/workflowengine/src/components/Operation.vue
+++ b/apps/workflowengine/src/components/Operation.vue
@@ -59,6 +59,7 @@ export default {
 	}
 
 	.colored {
+		background-color: var(--color-primary-element);
 		* {
 			color: var(--color-primary-text)
 		}
diff --git a/apps/workflowengine/src/components/Rule.vue b/apps/workflowengine/src/components/Rule.vue
index 6a8757c5b3f..f1551d985ca 100644
--- a/apps/workflowengine/src/components/Rule.vue
+++ b/apps/workflowengine/src/components/Rule.vue
@@ -1,7 +1,7 @@
 <template>
 	<div class="section rule" :style="{ borderLeftColor: operation.color }">
 		<!-- TODO: icon-confirm -->
-		<div class="trigger icon-confirm">
+		<div class="trigger">
 			<p>
 				<span>{{ t('workflowengine', 'When') }}</span>
 				<Event :rule="rule" @update="updateRule" />
@@ -12,10 +12,11 @@
 			</p>
 			<p>
 				<span />
-				<di<input v-if="lastCheckComplete" type="button" class="check--add"
+				<input v-if="lastCheckComplete" type="button" class="check--add"
 					value="Add a new filter" @click="rule.checks.push({class: null, operator: null, value: null})">
 			</p>
 		</div>
+		<div class="flow-icon icon-confirm"></div>
 		<div class="action">
 			<div class="buttons">
 				<Actions>
@@ -26,15 +27,15 @@
 						Remove rule
 					</ActionButton>
 				</Actions>
-				<button v-tooltip="ruleStatus.tooltip" class="status-button icon" :class="ruleStatus.class"
-					@click="saveRule">
-					{{ ruleStatus.title }}
-				</button>
 			</div>
 			<Operation :operation="operation" :colored="false">
 				<component :is="operation.options" v-if="operation.options" v-model="rule.operation"
 					@input="updateOperation" />
 			</Operation>
+			<button v-tooltip="ruleStatus.tooltip" class="status-button icon" :class="ruleStatus.class"
+					@click="saveRule">
+				{{ ruleStatus.title }}
+			</button>
 		</div>
 	</div>
 </template>
@@ -152,6 +153,8 @@ export default {
 
 	.status-button {
 		transition: 0.5s ease all;
+		display: block;
+		margin: auto;
 	}
 	.status-button.primary {
 		padding-left: 32px;
@@ -166,15 +169,19 @@ export default {
 		border: none;
 	}
 
+	.flow-icon {
+		width: 44px;
+	}
+
 	.rule {
 		display: flex;
 		flex-wrap: wrap;
-		border-left: 5px solid #fff;
+		border-left: 5px solid var(--color-primary-element);
 
 		.trigger, .action {
 			flex-grow: 1;
 			min-height: 100px;
-			max-width: 900px;
+			max-width: 700px;
 		}
 		.action {
 			max-width: 400px;
@@ -214,10 +221,24 @@ export default {
 		background-color: transparent;
 		padding-left: 6px;
 		margin: 0;
-		width: 200px;
+		width: 180px;
 		border-radius: var(--border-radius);
 		font-weight: normal;
 		text-align: left;
 		font-size: 1em;
 	}
+
+	@media (max-width:1400px) {
+		.rule {
+			&, .trigger, .action {
+				width: 100%;
+				max-width: 100%;
+			}
+			.flow-icon {
+				display: none;
+			}
+		}
+	}
+
+
 </style>
diff --git a/apps/workflowengine/src/components/Values/SizeValue.vue b/apps/workflowengine/src/components/Values/SizeValue.vue
index 03b28f18947..3e59b70453f 100644
--- a/apps/workflowengine/src/components/Values/SizeValue.vue
+++ b/apps/workflowengine/src/components/Values/SizeValue.vue
@@ -1,6 +1,6 @@
 <template>
 	<input v-model="newValue" type="text" placeholder="1 MB"
-		@input="$emit('input', newValue)">
+		@input="update">
 </template>
 
 <script>
@@ -8,11 +8,13 @@ export default {
 	name: 'SizeValue',
 	props: {
 		value: {
-			type: String
+			type: String,
+			default: '1 MB'
 		}
 	},
 	data() {
 		return {
+			valid: false,
 			newValue: this.value
 		}
 	},
@@ -20,6 +22,19 @@ export default {
 		value() {
 			this.newValue = this.value
 		}
+	},
+	methods: {
+		validate() {
+			return this.newValue.match(/^[0-9]+[ ]?[kmgt]?b$/i) !== null
+		},
+		update() {
+			if (this.validate()) {
+				this.$emit('input', this.newValue)
+				this.valid = false
+			} else {
+				this.valid = false
+			}
+		}
 	}
 }
 </script>