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
--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);

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

@ -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);

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

@ -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>