mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2025-03-05 20:50:17 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse source 
Co-authored-by: Giulio Andreini <andreini@netseven.it>
This commit is contained in:
Tomi Turtiainen 2024-04-09 13:57:14 +03:00 committed by GitHub
parent 9f87cc25a0
commit 4ac02dd5f4
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
3 changed files with 22 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/design-system/src/css/_tokens.dark.scss
View file

@ -194,6 +194,11 @@
// Node error // Node error
--color-node-error-output-text-color: var(--prim-color-alt-c-tint-150); --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 // Various
--color-info-tint-1: var(--prim-gray-420); --color-info-tint-1: var(--prim-gray-420);
--color-info-tint-2: var(--prim-gray-740); --color-info-tint-2: var(--prim-gray-740);

5
packages/design-system/src/css/_tokens.scss
View file

@ -270,6 +270,11 @@
// Node error // Node error
--color-node-error-output-text-color: var(--color-danger); --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 // Various
--color-avatar-accent-1: var(--prim-gray-120); --color-avatar-accent-1: var(--prim-gray-120);
--color-avatar-accent-2: var(--prim-color-alt-e-shade-100); --color-avatar-accent-2: var(--prim-color-alt-e-shade-100);

21
packages/editor-ui/src/components/MfaSetupModal.vue
View file

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