chore: style fixes

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

@@ -6,14 +6,14 @@
 		title="Workflow activated"
 	>
 		<template v-slot:content>
-			<p>{{triggerContent}}</p>
+			<p :class="$style.p">{{triggerContent}}</p>
-			<p class="spaced-p"><span class="emphasised">These executions will not show up immediately in the editor</span>, but you can see them in the <a @click="showExecutionsList">execution list</a>.</p>
+			<p :class="[$style.p, $style.spaced]"><span :class="$style.emphasised">These executions will not show up immediately in the editor</span>, but you can see them in the <a @click="showExecutionsList">execution list</a>.</p>
 		</template>
 
 
 		<template v-slot:footer="{ close }">
-			<div class="right-aligned-footer">
+			<div :class="$style.footer">
-				<el-checkbox v-model="checked" @change="handleCheckboxChange">Don't show again</el-checkbox>
+				<el-checkbox :value="checked" @change="handleCheckboxChange">Don't show again</el-checkbox>
 				<n8n-button @click="close" label="Got it"/>
 			</div>
 		</template>
@@ -24,7 +24,7 @@
 import Vue from 'vue';
 
 import Modal from '@/components/Modal.vue';
-import { WORKFLOW_ACTIVE_MODAL_KEY, EXECUTIONS_MODAL_KEY } from '../constants';
+import { WORKFLOW_ACTIVE_MODAL_KEY, EXECUTIONS_MODAL_KEY, LOCAL_STORAGE_ACTIVATION_FLAG } from '../constants';
 import { INodeUi } from '../Interface';
 import { INodeTypeDescription } from 'n8n-workflow';
 
@@ -47,7 +47,8 @@ export default Vue.extend({
 			this.$store.dispatch('ui/openModal', EXECUTIONS_MODAL_KEY);
 		},
 		handleCheckboxChange (checkboxValue: boolean) {
-			window.localStorage.setItem('hideActivationAlert', checkboxValue.toString());
+			this.checked = checkboxValue;
+			window.localStorage.setItem(LOCAL_STORAGE_ACTIVATION_FLAG, checkboxValue.toString());
 		},
 	},
 	computed: {
@@ -80,28 +81,29 @@ export default Vue.extend({
 });
 </script>
 
-<style scoped lang="scss">
+
+<style lang="scss" module>
 
 .emphasised {
-	font-weight: 600;
+	font-weight: var(--font-weight-bold);
 }
 
-p {
+.p {
-	font-size: 14px;
+	font-size: var(--font-size-s);
 	line-height: 19px;
 }
 
-.spaced-p {
+.spaced {
-	margin-top: 10px;
+	margin-top: var(--spacing-2xs);
 }
 
-.right-aligned-footer {
+.footer {
 	text-align: right;
-}
 
-button {
+	button {
-	margin-left: 10px;
+		margin-left: var(--spacing-s);
-	line-height: 14px;
+		line-height: 14px;
+	}
 }
 
 </style>

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

@@ -1,25 +1,14 @@
 <template>
 	<div class="workflow-activator">
-		<el-switch
+		<n8n-tooltip :disabled="!disabled" placement="bottom">
-			v-if="!disabled"
-			v-loading="loading"
-			element-loading-spinner="el-icon-loading"
-			:value="workflowActive"
-			@change="activeChanged"
-			:title="workflowActive ? $locale.baseText('workflowActivator.deactivateWorkflow') : $locale.baseText('workflowActivator.activateWorkflow')"
-			:disabled="disabled || loading"
-			:active-color="getActiveColor"
-			inactive-color="#8899AA">
-		</el-switch>
-		<n8n-tooltip v-else placement="bottom">
 			<div slot="content">This workflow has no trigger nodes that require activation</div>
 			<el-switch
 				v-loading="loading"
 				element-loading-spinner="el-icon-loading"
 				:value="workflowActive"
 				@change="activeChanged"
-				:title="workflowActive?'Deactivate Workflow':'Activate Workflow'"
+			  :title="workflowActive ? $locale.baseText('workflowActivator.deactivateWorkflow') : $locale.baseText('workflowActivator.activateWorkflow')"
-				:disabled="true"
+				:disabled="disabled"
 				:active-color="getActiveColor"
 				inactive-color="#8899AA">
 			</el-switch>
@@ -55,6 +44,7 @@ import {
 import {
 	EXECUTIONS_MODAL_KEY,
 	WORKFLOW_ACTIVE_MODAL_KEY,
+	LOCAL_STORAGE_ACTIVATION_FLAG,
 } from '@/constants';
 
 
@@ -75,7 +65,6 @@ export default mixins(
 			data () {
 				return {
 					loading: false,
-					alertTriggerContent: '',
 					nodes: [] as INodeUi[],
 				};
 			},
@@ -108,7 +97,7 @@ export default mixins(
 					return '#13ce66';
 				},
 				disabled(): boolean {
-					return this.workflowActive && this.isWorkflowActive ? false : !this.containsTrigger;
+					return this.workflowActive ? !this.containsTrigger : false;
 				},
 				containsTrigger(): boolean {
 					let nodes: INodeUi[];
@@ -197,7 +186,7 @@ export default mixins(
 						this.$store.commit('setWorkflowActive', this.workflowId);
 
 						// Show activation dialog only for current workflow and if user hasn't deactivated it
-						if (this.nodes.length === 0 && !window.localStorage.getItem('hideActivationAlert')) {
+						if (this.nodes.length === 0 && !window.localStorage.getItem(LOCAL_STORAGE_ACTIVATION_FLAG)) {
 							this.$store.dispatch('ui/openModal', WORKFLOW_ACTIVE_MODAL_KEY);
 						}
 					} else {
@@ -235,15 +224,13 @@ export default mixins(
 						duration: 0,
 					});
 				},
-				async showExecutionsList () {
-					this.$store.dispatch('ui/openModal', EXECUTIONS_MODAL_KEY);
-				},
 			},
 		},
 	);
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+
 .workflow-activator {
 	display: inline-block;
 }

packages/editor-ui/src/constants.ts

@@ -137,4 +137,5 @@ export const OTHER_WORK_AREA_KEY = 'otherWorkArea';
 export const OTHER_COMPANY_INDUSTRY_KEY = 'otherCompanyIndustry';
 
 export const VALID_EMAIL_REGEX = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
+export const LOCAL_STORAGE_ACTIVATION_FLAG = 'N8N_HIDE_ACTIVATION_ALERT';