OpenCloud
/
riot-web
mirror of https://github.com/vector-im/riot-web
1
0
Fork 0
Code Issues Releases Wiki Activity

Fix alignment and poor contrast on user pills in invite dialog (#11722) 

* improve invite tile color

* change checkmark color for consistency

* switch to cpd-color-text-info-primary

* fix misaligned "x"

* use --cpd-color-bg-success-subtle instead
t3chguy/dedup-icons-17oct
Gabriel Rodríguez 2023-10-11 12:00:15 -04:00 committed by GitHub
parent ac32d45bcd
commit a80cf58aa3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
res/css/views/dialogs/_InviteDialog.pcss
View File

@ -151,13 +151,14 @@ limitations under the License.
margin-inline-end: $spacing-8; margin-inline-end: $spacing-8;
.mx_InviteDialog_userTile_pill { .mx_InviteDialog_userTile_pill {
background-color: $username-variant1-color; background-color: var(--cpd-color-bg-success-subtle);
border-radius: 12px; border-radius: 12px;
display: inline-block; display: inline-block;
height: 24px; height: 24px;
line-height: $font-24px; line-height: $font-24px;
padding-inline: $spacing-8; padding-inline: $spacing-8;
color: #ffffff; /* this is fine without a var because it's for both themes */ vertical-align: middle;
color: $primary-content;
.mx_SearchResultAvatar { .mx_SearchResultAvatar {
border-radius: 20px; border-radius: 20px;
@ -182,6 +183,7 @@ limitations under the License.
.mx_InviteDialog_userTile_remove { .mx_InviteDialog_userTile_remove {
display: inline-block; display: inline-block;
margin-inline-start: $spacing-4; margin-inline-start: $spacing-4;
vertical-align: middle;
} }
} }
@ -338,7 +340,7 @@ limitations under the License.
.mx_InviteDialog_tile--room_selected { .mx_InviteDialog_tile--room_selected {
border-radius: 36px; border-radius: 36px;
background-color: $username-variant1-color; background-color: var(--cpd-color-bg-success-subtle);
&::before { &::before {
content: ""; content: "";
@ -352,7 +354,7 @@ limitations under the License.
position: absolute; position: absolute;
top: 6px; /* 50% */ top: 6px; /* 50% */
left: 6px; /* 50% */ left: 6px; /* 50% */
background-color: #ffffff; /* this is fine without a var because it's for both themes */ background-color: $primary-content;
} }
} }