nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

EW: Modernize the recovery key input modal (#29819)

Browse Source 
* initial application of recovery key input redesign

* update styling to agree more with design, and fix jest tests

* look for the right element for entering the key

* fix more playwright tests

* use return value of validation function instead of state
This commit is contained in:
Hubert Chathi
2025-05-23 17:06:00 -04:00
committed by GitHub
parent 8513eaa898
commit 45182172b8
7 changed files with 150 additions and 504 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
res/css/_common.pcss
View File

@@ -601,6 +601,7 @@ legend {
.mx_Dialog_nonDialogButton,
.mx_AccessibleButton,
.mx_IdentityServerPicker button,
.mx_AccessSecretStorageDialog button,
[class|="maplibregl"]
),
.mx_Dialog_buttons button:not(.mx_Dialog_nonDialogButton, .mx_AccessibleButton),

110
res/css/views/dialogs/security/_AccessSecretStorageDialog.pcss
View File

@@ -7,62 +7,14 @@ Please see LICENSE files in the repository root for full details.
*/
.mx_AccessSecretStorageDialog {
.mx_AccessSecretStorageDialog_titleWithIcon {
&::before {
content: "";
display: inline-block;
width: 24px;
height: 24px;
margin-inline-end: $spacing-8;
position: relative;
top: 5px;
background-color: $primary-content;
}
&.mx_AccessSecretStorageDialog_resetBadge::before {
/* The image isn't capable of masking, so we use a background instead. */
background-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
background-size: 24px;
background-color: transparent;
}
&.mx_AccessSecretStorageDialog_secureBackupTitle::before {
mask-image: url("$(res)/img/feather-customised/secure-backup.svg");
}
&.mx_AccessSecretStorageDialog_securePhraseTitle::before {
mask-image: url("$(res)/img/feather-customised/secure-phrase.svg");
}
&.mx_EncryptionCard {
/* override some styles that we don't need */
border: 0px none;
box-shadow: none;
padding: 0px;
}
.mx_AccessSecretStorageDialog_primaryContainer {
.mx_AccessSecretStorageDialog_passPhraseInput {
width: 300px;
border: 1px solid $accent;
border-radius: 5px;
}
.mx_AccessSecretStorageDialog_keyStatus {
height: 30px;
}
.mx_AccessSecretStorageDialog_recoveryKeyEntry {
display: flex;
align-items: center;
.mx_AccessSecretStorageDialog_recoveryKeyEntry_textInput {
flex-grow: 1;
}
.mx_AccessSecretStorageDialog_recoveryKeyEntry_entryControlSeparatorText {
margin: $spacing-16;
}
.mx_AccessSecretStorageDialog_recoveryKeyEntry_fileInput {
display: none;
}
}
.mx_AccessSecretStorageDialog_recoveryKeyFeedback {
&::before {
content: "";
@@ -76,15 +28,6 @@ Please see LICENSE files in the repository root for full details.
margin-inline-end: 5px;
}
&.mx_AccessSecretStorageDialog_recoveryKeyFeedback--valid {
color: $accent;
&::before {
mask-image: url("@vector-im/compound-design-tokens/icons/check.svg");
background-color: $accent;
}
}
&.mx_AccessSecretStorageDialog_recoveryKeyFeedback--invalid {
color: $alert;
@@ -94,46 +37,9 @@ Please see LICENSE files in the repository root for full details.
}
}
}
}
.mx_Dialog_buttons {
$spacingStart: $spacing-24; /* 16px icon + 8px padding */
text-align: initial;
display: flex;
flex-flow: column;
gap: 14px;
.mx_Dialog_buttons_additive {
float: none;
.mx_AccessSecretStorageDialog_reset {
position: relative;
padding-inline-start: $spacingStart;
/* To avoid bold styling inherent with <strong> elements */
font-weight: inherit;
&::before {
content: "";
display: inline-block;
position: absolute;
height: 16px;
width: 16px;
left: 0;
top: 2px; /* alignment */
background-image: url("@vector-im/compound-design-tokens/icons/error-solid.svg");
background-size: contain;
}
.mx_AccessSecretStorageDialog_reset_link {
color: $alert;
}
}
}
.mx_Dialog_buttons_row {
gap: $spacing-16; /* TODO: needs normalization */
padding-inline-start: $spacingStart;
}
}
.mx_EncryptionCard_buttons {
margin-top: var(--cpd-space-20x);
}
}