diff --git a/res/css/views/dialogs/_InviteDialog.scss b/res/css/views/dialogs/_InviteDialog.scss
index 6a1f93fdff..6c3edb896b 100644
--- a/res/css/views/dialogs/_InviteDialog.scss
+++ b/res/css/views/dialogs/_InviteDialog.scss
@@ -146,94 +146,6 @@ limitations under the License.
}
}
-.mx_InviteDialog_roomTile {
- cursor: pointer;
- padding: 5px 10px;
-
- &:hover {
- background-color: $header-panel-bg-color;
- border-radius: 4px;
- }
-
- * {
- vertical-align: middle;
- }
-
- .mx_InviteDialog_roomTile_avatarStack {
- display: inline-block;
- position: relative;
- width: 36px;
- height: 36px;
-
- & > * {
- position: absolute;
- top: 0;
- left: 0;
- }
- }
-
- .mx_InviteDialog_roomTile_selected {
- width: 36px;
- height: 36px;
- border-radius: 36px;
- background-color: $username-variant1-color;
- display: inline-block;
- position: relative;
-
- &::before {
- content: "";
- width: 24px;
- height: 24px;
- grid-column: 1;
- grid-row: 1;
- mask-image: url("$(res)/img/feather-customised/check.svg");
- mask-size: 100%;
- mask-repeat: no-repeat;
- position: absolute;
- top: 6px; // 50%
- left: 6px; // 50%
- background-color: #ffffff; // this is fine without a var because it's for both themes
- }
- }
-
- .mx_InviteDialog_roomTile_nameStack {
- display: inline-block;
- overflow: hidden;
- }
-
- .mx_InviteDialog_roomTile_name {
- font-weight: 600;
- font-size: $font-14px;
- color: $primary-content;
- margin-left: 7px;
- }
-
- .mx_InviteDialog_roomTile_userId {
- font-size: $font-12px;
- color: $muted-fg-color;
- margin-left: 7px;
- }
-
- .mx_InviteDialog_roomTile_name,
- .mx_InviteDialog_roomTile_userId {
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- }
-
- .mx_InviteDialog_roomTile_time {
- text-align: right;
- font-size: $font-12px;
- color: $muted-fg-color;
- float: right;
- line-height: $font-36px; // Height of the avatar to keep the time vertically aligned
- }
-
- .mx_InviteDialog_roomTile_highlight {
- font-weight: 900;
- }
-}
-
// Many of these styles are stolen from mx_UserPill, but adjusted for the invite dialog.
.mx_InviteDialog_userTile {
margin-right: 8px;
@@ -414,6 +326,125 @@ limitations under the License.
mask-image: url('$(res)/img/voip/tab-dialpad.svg');
}
+.mx_InviteDialog_tile {
+ cursor: pointer;
+ display: grid;
+ gap: $spacing-8 $spacing-12;
+ align-items: center;
+
+ &.mx_InviteDialog_tile--room {
+ grid-template-columns: min-content auto auto; // mx_InviteDialog_tile_avatarStack, mx_InviteDialog_tile_nameStack, time
+ padding: $spacing-4 $spacing-8;
+
+ &:hover {
+ background-color: $header-panel-bg-color;
+ border-radius: 4px;
+ }
+
+ .mx_InviteDialog_tile--room_selected {
+ border-radius: 36px;
+ background-color: $username-variant1-color;
+
+ &::before {
+ content: "";
+ width: 24px;
+ height: 24px;
+ grid-column: 1;
+ grid-row: 1;
+ mask-image: url("$(res)/img/feather-customised/check.svg");
+ mask-size: 100%;
+ mask-repeat: no-repeat;
+ position: absolute;
+ top: 6px; // 50%
+ left: 6px; // 50%
+ background-color: #ffffff; // this is fine without a var because it's for both themes
+ }
+ }
+
+ .mx_InviteDialog_tile--room_time {
+ margin-inline-start: auto;
+ width: max-content;
+ font-size: $font-12px;
+ color: $muted-fg-color;
+ }
+
+ .mx_InviteDialog_tile--room_highlight {
+ font-weight: 900;
+ }
+ }
+
+ &.mx_InviteDialog_tile--inviterError {
+ grid-template-columns: max-content auto; // max-content = avatar width
+ margin-bottom: $spacing-24;
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+
+ .mx_InviteDialog_tile--inviterError_errorText {
+ grid-row-start: 2;
+ grid-column-start: 2;
+
+ font-size: $font-15px;
+ color: $alert;
+ }
+ }
+
+ * {
+ vertical-align: middle;
+ }
+
+ .mx_InviteDialog_tile_avatarStack,
+ .mx_InviteDialog_tile--room_selected {
+ width: 36px;
+ height: 36px;
+ display: inline-block;
+ position: relative;
+ }
+
+ .mx_InviteDialog_tile_avatarStack {
+ grid-row-start: 1;
+ grid-column-start: 1;
+
+ & > * {
+ position: absolute;
+ top: 0;
+ left: 0;
+ }
+ }
+
+ .mx_InviteDialog_tile_nameStack {
+ grid-row-start: 1;
+ grid-column-start: 2;
+
+ display: flex;
+ flex-flow: column;
+ align-self: center;
+ align-items: baseline;
+ gap: 2px 0;
+ overflow: hidden;
+
+ .mx_InviteDialog_tile_nameStack_name,
+ .mx_InviteDialog_tile_nameStack_userId {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ max-width: 100%;
+ }
+
+ .mx_InviteDialog_tile_nameStack_name {
+ font-size: $font-15px;
+ font-weight: $font-semi-bold;
+ color: $primary-content;
+ }
+
+ .mx_InviteDialog_tile_nameStack_userId {
+ font-size: $font-12px;
+ color: $muted-fg-color;
+ }
+ }
+}
+
.mx_InviteDialog_multiInviterError {
> h4 {
font-size: $font-15px;
@@ -421,36 +452,6 @@ limitations under the License.
color: $secondary-content;
font-weight: normal;
}
-
- > div {
- .mx_InviteDialog_multiInviterError_entry {
- margin-bottom: 24px;
-
- .mx_InviteDialog_multiInviterError_entry_userProfile {
- .mx_InviteDialog_multiInviterError_entry_name {
- margin-left: 6px;
- font-size: $font-15px;
- line-height: $font-24px;
- font-weight: $font-semi-bold;
- color: $primary-content;
- }
-
- .mx_InviteDialog_multiInviterError_entry_userId {
- margin-left: 6px;
- font-size: $font-12px;
- line-height: $font-15px;
- color: $tertiary-content;
- }
- }
-
- .mx_InviteDialog_multiInviterError_entry_error {
- margin-left: 32px;
- font-size: $font-15px;
- line-height: $font-24px;
- color: $alert;
- }
- }
- }
}
.mx_InviteDialog_identityServer {
diff --git a/src/RoomInvite.tsx b/src/RoomInvite.tsx
index f7cad38254..ff34c66274 100644
--- a/src/RoomInvite.tsx
+++ b/src/RoomInvite.tsx
@@ -153,19 +153,21 @@ export function showAnyInviteErrors(
const user = userMap?.get(addr) || cli.getUser(addr);
const name = (user as Member).name || (user as User).rawDisplayName;
const avatarUrl = (user as Member).getMxcAvatarUrl?.() || (user as User).avatarUrl;
- return <div key={addr} className="mx_InviteDialog_multiInviterError_entry">
- <div className="mx_InviteDialog_multiInviterError_entry_userProfile">
+ return <div key={addr} className="mx_InviteDialog_tile mx_InviteDialog_tile--inviterError">
+ <div className="mx_InviteDialog_tile_avatarStack">
<BaseAvatar
url={avatarUrl ? mediaFromMxc(avatarUrl).getSquareThumbnailHttp(24) : null}
name={name}
idName={user.userId}
- width={24}
- height={24}
+ width={36}
+ height={36}
/>
- <span className="mx_InviteDialog_multiInviterError_entry_name">{ name }</span>
- <span className="mx_InviteDialog_multiInviterError_entry_userId">{ user.userId }</span>
</div>
- <div className="mx_InviteDialog_multiInviterError_entry_error">
+ <div className="mx_InviteDialog_tile_nameStack">
+ <span className="mx_InviteDialog_tile_nameStack_name">{ name }</span>
+ <span className="mx_InviteDialog_tile_nameStack_userId">{ user.userId }</span>
+ </div>
+ <div className="mx_InviteDialog_tile--inviterError_errorText">
{ inviter.getErrorText(addr) }
</div>
</div>;
diff --git a/src/components/views/dialogs/InviteDialog.tsx b/src/components/views/dialogs/InviteDialog.tsx
index 978c176ab0..d8a6b7df7a 100644
--- a/src/components/views/dialogs/InviteDialog.tsx
+++ b/src/components/views/dialogs/InviteDialog.tsx
@@ -178,7 +178,7 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
// Highlight the word the user entered
const substr = str.substring(i, filterStr.length + i);
- result.push(<span className='mx_InviteDialog_roomTile_highlight' key={i + 'bold'}>{ substr }</span>);
+ result.push(<span className='mx_InviteDialog_tile--room_highlight' key={i + 'bold'}>{ substr }</span>);
i += substr.length;
}
@@ -194,7 +194,7 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
let timestamp = null;
if (this.props.lastActiveTs) {
const humanTs = humanizeTime(this.props.lastActiveTs);
- timestamp = <span className='mx_InviteDialog_roomTile_time'>{ humanTs }</span>;
+ timestamp = <span className='mx_InviteDialog_tile--room_time'>{ humanTs }</span>;
}
const avatarSize = 36;
@@ -216,13 +216,13 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
let checkmark = null;
if (this.props.isSelected) {
// To reduce flickering we put the 'selected' room tile above the real avatar
- checkmark = <div className='mx_InviteDialog_roomTile_selected' />;
+ checkmark = <div className='mx_InviteDialog_tile--room_selected' />;
}
// To reduce flickering we put the checkmark on top of the actual avatar (prevents
// the browser from reloading the image source when the avatar remounts).
const stackedAvatar = (
- <span className='mx_InviteDialog_roomTile_avatarStack'>
+ <span className='mx_InviteDialog_tile_avatarStack'>
{ avatar }
{ checkmark }
</span>
@@ -237,11 +237,11 @@ class DMRoomTile extends React.PureComponent<IDMRoomTileProps> {
: this.highlightName(userIdentifier);
return (
- <div className='mx_InviteDialog_roomTile' onClick={this.onClick}>
+ <div className='mx_InviteDialog_tile mx_InviteDialog_tile--room' onClick={this.onClick}>
{ stackedAvatar }
- <span className="mx_InviteDialog_roomTile_nameStack">
- <div className='mx_InviteDialog_roomTile_name'>{ this.highlightName(this.props.member.name) }</div>
- <div className='mx_InviteDialog_roomTile_userId'>{ caption }</div>
+ <span className="mx_InviteDialog_tile_nameStack">
+ <div className='mx_InviteDialog_tile_nameStack_name'>{ this.highlightName(this.props.member.name) }</div>
+ <div className='mx_InviteDialog_tile_nameStack_userId'>{ caption }</div>
</span>
{ timestamp }
</div>
diff --git a/test/end-to-end-tests/src/usecases/create-room.ts b/test/end-to-end-tests/src/usecases/create-room.ts
index b0e7738fb4..d0a492f8c5 100644
--- a/test/end-to-end-tests/src/usecases/create-room.ts
+++ b/test/end-to-end-tests/src/usecases/create-room.ts
@@ -68,7 +68,7 @@ export async function createDm(session: ElementSession, invitees: string[]): Pro
await session.replaceInputText(inviteesEditor, target);
await session.delay(1000); // give it a moment to figure out a suggestion
// find the suggestion and accept it
- const suggestions = await session.queryAll('.mx_InviteDialog_roomTile_userId');
+ const suggestions = await session.queryAll('.mx_InviteDialog_tile_nameStack_userId');
const suggestionTexts = await Promise.all(suggestions.map(s => session.innerText(s)));
const suggestionIndex = suggestionTexts.indexOf(target);
if (suggestionIndex === -1) {
diff --git a/test/end-to-end-tests/src/usecases/invite.ts b/test/end-to-end-tests/src/usecases/invite.ts
index 8dc5d31f27..9df9f38669 100644
--- a/test/end-to-end-tests/src/usecases/invite.ts
+++ b/test/end-to-end-tests/src/usecases/invite.ts
@@ -35,7 +35,7 @@ export async function invite(session: ElementSession, userId: string): Promise<v
await inviteButton.click();
const inviteTextArea = await session.query(".mx_InviteDialog_editor input");
await inviteTextArea.type(userId);
- const selectUserItem = await session.query(".mx_InviteDialog_roomTile");
+ const selectUserItem = await session.query(".mx_InviteDialog_tile--room");
await selectUserItem.click();
const confirmButton = await session.query(".mx_InviteDialog_goButton");
await confirmButton.click();