Add new verification section to user profile (#29200)

* Create new verification section

* Remove old code and use new VerificationSection

* Add styling and translation

* Fix tests

* Remove dead code

* Fix broken test

* Remove imports

* Remove console.log

* Update snapshots

* Fix broken tests

* Fix lint

* Make badge expand with content

* Remove unused code
This commit is contained in:
R Midhun Suresh
2025-02-10 16:52:58 +05:30
committed by GitHub
parent bb8b4d7991
commit 52b42c0b1c
14 changed files with 489 additions and 1095 deletions

View File

@@ -37,10 +37,6 @@ Please see LICENSE files in the repository root for full details.
padding: var(--cpd-space-2x) 0 var(--cpd-space-4x);
margin: 0 var(--cpd-space-4x);
.mx_UserInfo_container_verifyButton {
margin-top: $spacing-8;
}
& + .mx_UserInfo_container {
border-top: 1px solid $separator;
}
@@ -180,6 +176,28 @@ Please see LICENSE files in the repository root for full details.
opacity: 1;
}
.mx_UserInfo_verification {
margin-top: var(--cpd-space-4x);
height: 36px;
.mx_UserInfo_verified_badge {
min-width: 68px;
height: 20px;
.mx_UserInfo_verified_icon {
flex-shrink: 0;
}
.mx_UserInfo_verified_label {
margin: 0;
}
}
.mx_UserInfo_verification_unavailable {
color: var(--cpd-color-text-secondary);
}
}
.mx_UserInfo_memberDetails {
.mx_UserInfo_profileField {
display: flex;
@@ -226,45 +244,6 @@ Please see LICENSE files in the repository root for full details.
flex: 1 1 0;
}
.mx_UserInfo_devices {
.mx_UserInfo_device {
display: flex;
margin: $spacing-8 0;
&.mx_UserInfo_device_verified {
.mx_UserInfo_device_trusted {
color: $accent;
}
}
&.mx_UserInfo_device_unverified {
.mx_UserInfo_device_trusted {
color: $alert;
}
}
.mx_UserInfo_device_name {
flex: 1;
margin: 0 5px;
word-break: break-word;
}
}
/* both for icon in expand button and device item */
.mx_E2EIcon {
/* don't squeeze */
flex: 0 0 auto;
margin: 0;
width: 12px;
height: 12px;
}
.mx_UserInfo_expand {
column-gap: 5px; /* cf: mx_UserInfo_device_name */
margin-bottom: 11px;
align-items: initial; /* Cancel the default property */
}
}
&.mx_UserInfo_smallAvatar {
.mx_UserInfo_avatar {
.mx_UserInfo_avatar_transition {