imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix text link buttons on UserInfo panel (#8247)

Browse source 
* Fix text link buttons on UserInfo (right) panel

- Fix link button styling
  - Replace className="mx_linkButton" with kind="link"
  - Remove style rules required for mx_linkButton
- Align E2E icon and devices on the device list
  - Replace margin with gap

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Spacing variables

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Replace link_inline with link

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Remove a redundant rule

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>

* Wrap verifyButton

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-05-02 01:08:42 +00:00 • committed by GitHub
parent ad2d3a3683
commit cea75fde27
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 71 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

27
res/css/views/right_panel/_UserInfo.scss
View file

@ -52,6 +52,10 @@ limitations under the License.
.mx_UserInfo_container {
padding: 8px 16px;
.mx_UserInfo_container_verifyButton {
margin-top: $spacing-8;
}
}
.mx_UserInfo_separator {
@ -193,10 +197,7 @@ limitations under the License.
}
.mx_UserInfo_field {
cursor: pointer;
color: $accent;
line-height: $font-16px;
margin: 8px 0;
&.mx_UserInfo_destructive {
color: $alert;
@ -228,14 +229,18 @@ limitations under the License.
padding-bottom: 0;
> :not(h3) {
margin-left: 8px;
margin-inline-start: $spacing-8;
display: flex;
flex-flow: column;
align-items: flex-start;
row-gap: $spacing-8;
}
}
.mx_UserInfo_devices {
.mx_UserInfo_device {
display: flex;
margin: 8px 0;
margin: $spacing-8 0;
&.mx_UserInfo_device_verified {
.mx_UserInfo_device_trusted {
@ -250,7 +255,7 @@ limitations under the License.
.mx_UserInfo_device_name {
flex: 1;
margin-right: 5px;
margin: 0 5px;
word-break: break-word;
}
}
@ -259,20 +264,16 @@ limitations under the License.
.mx_E2EIcon {
// don't squeeze
flex: 0 0 auto;
margin: 2px 5px 0 0;
margin: 0;
width: 12px;
height: 12px;
}
.mx_UserInfo_expand {
display: flex;
margin-top: 11px;
column-gap: 5px; // cf: mx_UserInfo_device_name
margin-bottom: 11px;
}
}
.mx_AccessibleButton.mx_AccessibleButton_hasKind {
padding: 8px 18px;
}
}
.mx_UserInfo.mx_UserInfo_smallAvatar {