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

Make profile header section match the designs (#29163)

Browse Source 
* Update styling to match design

* Fix tests
This commit is contained in:
R Midhun Suresh
2025-02-04 14:35:48 +05:30
committed by GitHub
parent afa6f377ea
commit 1ea1d386ab
4 changed files with 63 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
res/css/views/right_panel/_UserInfo.pcss
View File

@@ -34,7 +34,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_UserInfo_container {
padding: var(--cpd-space-4x) 0;
padding: var(--cpd-space-2x) 0 var(--cpd-space-4x);
margin: 0 var(--cpd-space-4x);
.mx_UserInfo_container_verifyButton {
@@ -65,7 +65,7 @@ Please see LICENSE files in the repository root for full details.
}
.mx_UserInfo_avatar {
margin: $spacing-24 $spacing-32 0 $spacing-32;
margin: var(--cpd-space-12x) var(--cpd-space-4x) 0 var(--cpd-space-4x);
.mx_UserInfo_avatar_transition {
max-width: 120px;
@@ -98,8 +98,18 @@ Please see LICENSE files in the repository root for full details.
margin: 5px 0;
}
.mx_UserInfo_header {
margin-bottom: var(--cpd-space-8x);
padding-bottom: 0;
}
.mx_UserInfo_profile {
display: flex;
flex-direction: column;
gap: var(--cpd-space-1x);
h1 {
margin: 0;
font-size: $font-20px;
line-height: $font-25px;
@@ -119,8 +129,45 @@ Please see LICENSE files in the repository root for full details.
}
}
.mx_UserInfo_profile_name {
height: 30px;
}
.mx_UserInfo_profile_mxid {
color: var(--cpd-color-text-secondary);
height: 28px;
}
.mx_UserInfo_profileStatus {
margin: var(--cpd-space-1x) 0;
height: 20px;
}
.mx_UserInfo_timezone {
height: 20px;
margin: 0;
display: flex;
align-items: center;
}
/** Overrides for the copy to clipboard button **/
.mx_CopyableText {
align-items: center;
}
.mx_CopyableText_copyButton {
width: 28px;
height: 28px;
display: flex;
justify-content: center;
align-items: center;
position: unset;
padding-left: var(--cpd-space-2x);
}
.mx_CopyableText_copyButton::before {
width: 20px;
height: 20px;
background-color: var(--cpd-color-icon-secondary-alpha);
}
}