⚡ Use color for icons in node creator and update colors

packages/editor-ui/src/components/NodeCreateItem.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="node-item clickable" :class="{active: active}" @click="nodeTypeSelected(nodeType)">
-		<NodeIcon class="node-icon" :nodeType="nodeType"/>
+		<NodeIcon class="node-icon" :nodeType="nodeType" :style="nodeIconStyle" />
 		<div class="name">
 			{{nodeType.displayName}}
 		</div>
@@ -27,10 +27,13 @@ export default Vue.extend({
 		'filter',
 		'nodeType',
 	],
-	data () {
+	computed: {
+		nodeIconStyle (): object {
 			return {
+				color: this.nodeType.defaults.color,
 			};
 		},
+	},
 	methods: {
 		nodeTypeSelected (nodeType: INodeTypeDescription) {
 			this.$emit('nodeTypeSelected', nodeType.name);

packages/nodes-base/nodes/EmailSend.node.ts

@@ -21,7 +21,7 @@ export class EmailSend implements INodeType {
 		description: 'Sends an Email',
 		defaults: {
 			name: 'Send Email',
-			color: '#44DD22',
+			color: '#00bb88',
 		},
 		inputs: ['main'],
 		outputs: ['main'],

packages/nodes-base/nodes/FunctionItem.node.ts

@@ -19,7 +19,7 @@ export class FunctionItem implements INodeType {
 		description: 'Run custom function code which gets executed once per item.',
 		defaults: {
 			name: 'FunctionItem',
-			color: '#FF9922',
+			color: '#ddbb33',
 		},
 		inputs: ['main'],
 		outputs: ['main'],

packages/nodes-base/nodes/Mailgun.node.ts

@@ -20,7 +20,7 @@ export class Mailgun implements INodeType {
 		description: 'Sends an Email via Mailgun',
 		defaults: {
 			name: 'Mailgun',
-			color: '#44DD22',
+			color: '#c02428',
 		},
 		inputs: ['main'],
 		outputs: ['main'],

packages/nodes-base/nodes/Merge.node.ts

@@ -17,7 +17,7 @@ export class Merge implements INodeType {
 		description: 'Merges data of multiple streams once data of both is available',
 		defaults: {
 			name: 'Merge',
-			color: '#00cc22',
+			color: '#00bbcc',
 		},
 		inputs: ['main', 'main'],
 		outputs: ['main'],

packages/nodes-base/nodes/ReadBinaryFile.node.ts

@@ -23,7 +23,7 @@ export class ReadBinaryFile implements INodeType {
 		description: 'Reads a binary file from disk',
 		defaults: {
 			name: 'Read Binary File',
-			color: '#22CC33',
+			color: '#449922',
 		},
 		inputs: ['main'],
 		outputs: ['main'],

packages/nodes-base/nodes/ReadBinaryFiles.node.ts

@@ -25,7 +25,7 @@ export class ReadBinaryFiles implements INodeType {
 		description: 'Reads binary files from disk',
 		defaults: {
 			name: 'Read Binary Files',
-			color: '#22CC33',
+			color: '#44AA44',
 		},
 		inputs: ['main'],
 		outputs: ['main'],

packages/nodes-base/nodes/ReadFileFromUrl.node.ts

@@ -17,7 +17,7 @@ export class ReadFileFromUrl implements INodeType {
 		description: 'Reads a file from an URL',
 		defaults: {
 			name: 'Read File URL',
-			color: '#995533',
+			color: '#119955',
 		},
 		inputs: ['main'],
 		outputs: ['main'],

packages/nodes-base/nodes/Start.node.ts

@@ -17,7 +17,7 @@ export class Start implements INodeType {
 		maxNodes: 1,
 		defaults: {
 			name: 'Start',
-			color: '#553399',
+			color: '#00e000',
 		},
 		inputs: [],
 		outputs: ['main'],