fix(editor): UX improvements to mfa setup modal (#9059)

Co-authored-by: Giulio Andreini <andreini@netseven.it>
n8n-io · Apr 11, 2024 · f8d825e · f8d825e
1 parent c3a5ed1
commit f8d825e
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 9 deletions.
diff --git a/packages/design-system/src/css/_tokens.dark.scss b/packages/design-system/src/css/_tokens.dark.scss
@@ -194,6 +194,11 @@
 	// Node error
 	--color-node-error-output-text-color: var(--prim-color-alt-c-tint-150);
 
+	// MFA Recovery codes
+	--color-mfa-recovery-code-background: var(--color-background-xlight);
+	--color-mfa-recovery-code-color: var(--color-text-dark);
+	--color-mfa-lose-access-text-color: var(--prim-color-alt-c-tint-150);
+
 	// Various
 	--color-info-tint-1: var(--prim-gray-420);
 	--color-info-tint-2: var(--prim-gray-740);

diff --git a/packages/design-system/src/css/_tokens.scss b/packages/design-system/src/css/_tokens.scss
@@ -270,6 +270,11 @@
 	// Node error
 	--color-node-error-output-text-color: var(--color-danger);
 
+	// MFA Recovery codes
+	--color-mfa-recovery-code-background: var(--color-background-base);
+	--color-mfa-recovery-code-color: var(--prim-gray-490);
+	--color-mfa-lose-access-text-color: var(--color-danger);
+
 	// Various
 	--color-avatar-accent-1: var(--prim-gray-120);
 	--color-avatar-accent-2: var(--prim-color-alt-e-shade-100);

diff --git a/packages/editor-ui/src/components/MfaSetupModal.vue b/packages/editor-ui/src/components/MfaSetupModal.vue
@@ -1,6 +1,8 @@
 <template>
 	<Modal
 		width="460px"
+		height="80%"
+		max-height="640px"
 		:title="
 			!showRecoveryCodes
 				? $locale.baseText('mfa.setup.step1.title')
@@ -274,6 +276,12 @@ export default defineComponent({
 </script>
 
 <style module lang="scss">
+.container {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
 .container > * {
 	overflow: visible;
 	margin-bottom: var(--spacing-s);
@@ -303,10 +311,9 @@ export default defineComponent({
 	text-align: center;
 }
 .recoveryCodesContainer {
-	height: 140px;
 	display: flex;
 	flex-direction: column;
-	background-color: var(--color-background-base);
+	background-color: var(--color-mfa-recovery-code-background);
 	text-align: center;
 	flex-wrap: nowrap;
 	justify-content: space-between;
@@ -316,14 +323,14 @@ export default defineComponent({
 	padding-bottom: var(--spacing-xs);
 	gap: var(--spacing-xs);
 	margin-bottom: var(--spacing-2xs);
-	overflow-y: scroll;
+	overflow-y: auto;
 }
 
 .recoveryCodesContainer span {
 	font-size: var(--font-size-s);
 	font-weight: var(--font-weight-regular);
 	line-height: var(--spacing-m);
-	color: #7d7d87;
+	color: var(--color-mfa-recovery-code-color);
 }
 
 .form:first-child span {
@@ -341,7 +348,7 @@ export default defineComponent({
 }
 
 .loseAccessText {
-	color: var(--color-danger);
+	color: var(--color-mfa-lose-access-text-color);
 }
 
 .error input {
@@ -362,8 +369,4 @@ export default defineComponent({
 .notice {
 	margin: 0;
 }
-
-.modalContent {
-	overflow: hidden;
-}
 </style>