Merge pull request #5185 from element-hq/feature/bma/invitePoepleUi

Iterate on invite people UI
2025-08-19 11:12:45 +02:00 · 2025-08-19 11:12:45 +02:00 · cc10ba41fd
commit cc10ba41fd
parent 2b3a579009 a39dafe0a2
84 changed files with 494 additions and 302 deletions
--- a/features/invitepeople/impl/src/main/kotlin/io/element/android/features/invitepeople/impl/InvitePeopleView.kt
+++ b/features/invitepeople/impl/src/main/kotlin/io/element/android/features/invitepeople/impl/InvitePeopleView.kt
@ -30,7 +30,6 @@ import io.element.android.libraries.designsystem.components.async.AsyncLoading
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
-import io.element.android.libraries.designsystem.theme.components.HorizontalDivider
 import io.element.android.libraries.designsystem.theme.components.SearchBar
 import io.element.android.libraries.designsystem.theme.components.SearchBarResultState
 import io.element.android.libraries.designsystem.theme.components.Text
@ -192,10 +191,6 @@ private fun InvitePeopleSearchBar(
                        onCheckedChange = { onToggleUser(invitableUser.matrixUser) },
                        modifier = Modifier.fillMaxWidth()
                    )
-
-                    if (index < results.lastIndex) {
-                        HorizontalDivider()
-                    }
                }
            }
        },
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/SelectedIndicatorAtom.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/atoms/SelectedIndicatorAtom.kt
@ -0,0 +1,81 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+package io.element.android.libraries.designsystem.atomic.atoms
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.selection.toggleable
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.semantics.Role
+import androidx.compose.ui.unit.dp
+import io.element.android.compound.theme.ElementTheme
+import io.element.android.compound.tokens.generated.CompoundIcons
+import io.element.android.libraries.designsystem.preview.ElementPreview
+import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.theme.components.Icon
+
+@Composable
+fun SelectedIndicatorAtom(
+    checked: Boolean,
+    enabled: Boolean,
+    modifier: Modifier = Modifier,
+) {
+    if (checked) {
+        Icon(
+            modifier = modifier.toggleable(
+                value = true,
+                role = Role.Companion.Checkbox,
+                enabled = enabled,
+                onValueChange = {},
+            ),
+            imageVector = CompoundIcons.CheckCircleSolid(),
+            contentDescription = null,
+            tint = if (enabled) {
+                ElementTheme.colors.iconAccentPrimary
+            } else {
+                ElementTheme.colors.iconDisabled
+            },
+        )
+    } else {
+        Box(modifier)
+    }
+}
+
+@Composable
+@PreviewsDayNight
+internal fun SelectedIndicatorAtomPreview() = ElementPreview {
+    Column(
+        modifier = Modifier.padding(8.dp),
+        verticalArrangement = Arrangement.spacedBy(8.dp),
+    ) {
+        SelectedIndicatorAtom(
+            modifier = Modifier.size(24.dp),
+            checked = false,
+            enabled = false,
+        )
+        SelectedIndicatorAtom(
+            modifier = Modifier.size(24.dp),
+            checked = true,
+            enabled = false,
+        )
+        SelectedIndicatorAtom(
+            modifier = Modifier.size(24.dp),
+            checked = false,
+            enabled = true,
+        )
+        SelectedIndicatorAtom(
+            modifier = Modifier.size(24.dp),
+            checked = true,
+            enabled = true,
+        )
+    }
+}
--- a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarSize.kt
+++ b/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/avatar/AvatarSize.kt
@ -24,7 +24,7 @@ enum class AvatarSize(val dp: Dp) {
    UserHeader(96.dp),
    UserListItem(36.dp),

-    SelectedUser(56.dp),
+    SelectedUser(52.dp),
    SelectedRoom(56.dp),

    DmCluster(75.dp),
--- a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/CheckableUserRow.kt
+++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/CheckableUserRow.kt
@ -19,10 +19,10 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.atomic.atoms.SelectedIndicatorAtom
 import io.element.android.libraries.designsystem.components.avatar.AvatarData
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.preview.ElementThemedPreview
-import io.element.android.libraries.designsystem.theme.components.Checkbox
 import io.element.android.libraries.designsystem.theme.components.HorizontalDivider
 import io.element.android.libraries.matrix.ui.model.getAvatarData

@ -50,6 +50,7 @@ fun CheckableUserRow(
                    avatarData = data.avatarData,
                    name = data.name,
                    subtext = data.subtext,
+                    enabled = enabled,
                )
            }
            is CheckableUserRowData.Unresolved -> {
@ -57,14 +58,13 @@ fun CheckableUserRow(
                    modifier = rowModifier,
                    avatarData = data.avatarData,
                    id = data.id,
+                    enabled = enabled,
                )
            }
        }
-
-        Checkbox(
-            modifier = Modifier.padding(end = 4.dp),
+        SelectedIndicatorAtom(
+            modifier = Modifier.padding(end = 24.dp),
            checked = checked,
-            onCheckedChange = null,
            enabled = enabled,
        )
    }
--- a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/MatrixUserProvider.kt
+++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/MatrixUserProvider.kt
@ -15,7 +15,24 @@ open class MatrixUserProvider : PreviewParameterProvider<MatrixUser> {
    override val values: Sequence<MatrixUser>
        get() = sequenceOf(
            aMatrixUser(),
-            aMatrixUser().copy(displayName = null),
+            aMatrixUser(displayName = null),
+        )
+}
+
+open class MatrixUserWithNullProvider : PreviewParameterProvider<MatrixUser?> {
+    override val values: Sequence<MatrixUser?>
+        get() = sequenceOf(
+            aMatrixUser(),
+            aMatrixUser(displayName = null),
+            null,
+        )
+}
+
+open class MatrixUserWithAvatarProvider : PreviewParameterProvider<MatrixUser?> {
+    override val values: Sequence<MatrixUser?>
+        get() = sequenceOf(
+            aMatrixUser(displayName = "John Doe"),
+            aMatrixUser(displayName = "John Doe", avatarUrl = "anUrl"),
        )
 }

@ -41,12 +58,3 @@ fun aMatrixUserList() = listOf(
    aMatrixUser("@victor:server.org", "Victor"),
    aMatrixUser("@walter:server.org", "Walter"),
 )
-
-open class MatrixUserWithNullProvider : PreviewParameterProvider<MatrixUser?> {
-    override val values: Sequence<MatrixUser?>
-        get() = sequenceOf(
-            aMatrixUser(),
-            aMatrixUser().copy(displayName = null),
-            null,
-        )
-}
--- a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/MatrixUserRow.kt
+++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/MatrixUserRow.kt
@ -28,7 +28,7 @@ fun MatrixUserRow(
    name = matrixUser.getBestName(),
    subtext = if (matrixUser.displayName.isNullOrEmpty()) null else matrixUser.userId.value,
    modifier = modifier,
-    trailingContent,
+    trailingContent = trailingContent,
 )

@PreviewsDayNight
--- a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectRoomInfoProvider.kt
+++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectRoomInfoProvider.kt
@ -20,7 +20,7 @@ class SelectRoomInfoProvider : PreviewParameterProvider<SelectRoomInfo> {
        get() = sequenceOf(
            aSelectRoomInfo(roomId = RoomId("!room1:domain")),
            aSelectRoomInfo(roomId = RoomId("!room2:domain"), name = "Room with a name"),
-            aSelectRoomInfo(roomId = RoomId("!room3:domain"), name = "Room with a name and alias", canonicalAlias = RoomAlias("#alias:domain")),
+            aSelectRoomInfo(roomId = RoomId("!room3:domain"), name = "Room with a name and avatar", avatarUrl = "anUrl"),
        )
 }

--- a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectedItem.kt
+++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectedItem.kt
@ -0,0 +1,148 @@
+/*
+ * Copyright 2025 New Vector Ltd.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
+ * Please see LICENSE files in the repository root for full details.
+ */
+
+package io.element.android.libraries.matrix.ui.components
+
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ripple
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.clipToBounds
+import androidx.compose.ui.draw.drawWithContent
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.BlendMode
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.CompositingStrategy
+import androidx.compose.ui.graphics.graphicsLayer
+import androidx.compose.ui.platform.LocalLayoutDirection
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.clearAndSetSemantics
+import androidx.compose.ui.semantics.contentDescription
+import androidx.compose.ui.semantics.onClick
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.unit.LayoutDirection
+import androidx.compose.ui.unit.dp
+import io.element.android.compound.theme.ElementTheme
+import io.element.android.compound.tokens.generated.CompoundIcons
+import io.element.android.libraries.designsystem.components.avatar.Avatar
+import io.element.android.libraries.designsystem.components.avatar.AvatarData
+import io.element.android.libraries.designsystem.components.avatar.AvatarType
+import io.element.android.libraries.designsystem.text.toPx
+import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.designsystem.theme.components.Surface
+import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.ui.strings.CommonStrings
+
+@Composable
+fun SelectedItem(
+    avatarData: AvatarData,
+    avatarType: AvatarType,
+    text: String,
+    maxLines: Int,
+    a11yContentDescription: String,
+    canRemove: Boolean,
+    onRemoveClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val actionRemove = stringResource(id = CommonStrings.action_remove)
+    Box(
+        modifier = modifier
+            .width(avatarData.size.dp)
+            .clearAndSetSemantics {
+                contentDescription = a11yContentDescription
+                if (canRemove) {
+                    // Note: this does not set the click effect to the whole Box
+                    // when talkback is not enabled
+                    onClick(
+                        label = actionRemove,
+                        action = {
+                            onRemoveClick()
+                            true
+                        }
+                    )
+                }
+            }
+    ) {
+        Column(
+            horizontalAlignment = Alignment.CenterHorizontally,
+        ) {
+            val isRtl = LocalLayoutDirection.current == LayoutDirection.Rtl
+            val closeIconRadius = 12.dp.toPx()
+            val closeIconOffset = 10.dp.toPx()
+            Avatar(
+                avatarData = avatarData,
+                avatarType = avatarType,
+                modifier = Modifier
+                    .graphicsLayer {
+                        compositingStrategy = CompositingStrategy.Offscreen
+                    }
+                    .drawWithContent {
+                        drawContent()
+                        if (canRemove) {
+                            val xOffset = if (isRtl) {
+                                closeIconOffset
+                            } else {
+                                size.width - closeIconOffset
+                            }
+                            drawCircle(
+                                color = Color.Black,
+                                center = Offset(
+                                    x = xOffset,
+                                    y = closeIconOffset,
+                                ),
+                                radius = closeIconRadius,
+                                blendMode = BlendMode.Clear,
+                            )
+                        }
+                    },
+            )
+            Text(
+                modifier = Modifier.clipToBounds(),
+                text = text,
+                overflow = TextOverflow.Ellipsis,
+                maxLines = maxLines,
+                style = MaterialTheme.typography.bodyMedium,
+                color = ElementTheme.colors.textSecondary,
+                textAlign = TextAlign.Center,
+            )
+        }
+        if (canRemove) {
+            Surface(
+                color = ElementTheme.colors.bgActionPrimaryRest,
+                modifier = Modifier
+                    .clip(CircleShape)
+                    .size(20.dp)
+                    .align(Alignment.TopEnd)
+                    .clickable(
+                        indication = ripple(),
+                        interactionSource = remember { MutableInteractionSource() },
+                        onClick = onRemoveClick,
+                    ),
+            ) {
+                Icon(
+                    imageVector = CompoundIcons.Close(),
+                    // Note: keep the context description for the test
+                    contentDescription = stringResource(id = CommonStrings.action_remove),
+                    tint = ElementTheme.colors.iconOnSolidPrimary,
+                    modifier = Modifier.padding(2.dp)
+                )
+            }
+        }
+    }
+}
--- a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectedRoom.kt
+++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectedRoom.kt
@ -7,35 +7,17 @@

 package io.element.android.libraries.matrix.ui.components

-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Alignment
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
+import androidx.compose.ui.platform.LocalLayoutDirection
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.PreviewParameter
-import androidx.compose.ui.unit.dp
-import io.element.android.compound.theme.ElementTheme
-import io.element.android.compound.tokens.generated.CompoundIcons
-import io.element.android.libraries.designsystem.components.avatar.Avatar
+import androidx.compose.ui.unit.LayoutDirection
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.components.avatar.AvatarType
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
-import io.element.android.libraries.designsystem.theme.components.Icon
-import io.element.android.libraries.designsystem.theme.components.Surface
-import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.matrix.ui.model.SelectRoomInfo
 import io.element.android.libraries.matrix.ui.model.getAvatarData
 import io.element.android.libraries.ui.strings.CommonStrings
@ -47,48 +29,22 @@ fun SelectedRoom(
    onRemoveRoom: (SelectRoomInfo) -> Unit,
    modifier: Modifier = Modifier,
 ) {
-    Box(
-        modifier = modifier
-            .width(56.dp)
-    ) {
-        Column(
-            horizontalAlignment = Alignment.CenterHorizontally,
-        ) {
-            Avatar(
-                avatarData = roomInfo.getAvatarData(AvatarSize.SelectedRoom),
-                avatarType = AvatarType.Room(
-                    heroes = roomInfo.heroes.map { it.getAvatarData(AvatarSize.SelectedRoom) }.toImmutableList(),
-                    isTombstoned = roomInfo.isTombstoned,
-                ),
-            )
-            Text(
-                // If name is null, we do not have space to render "No room name", so just use `#` here.
-                text = roomInfo.name ?: "#",
-                overflow = TextOverflow.Ellipsis,
-                maxLines = 1,
-                style = MaterialTheme.typography.bodyLarge,
-            )
-        }
-        Surface(
-            color = ElementTheme.colors.iconPrimary,
-            modifier = Modifier
-                .clip(CircleShape)
-                .size(20.dp)
-                .align(Alignment.TopEnd)
-                .clickable(
-                    indication = ripple(),
-                    interactionSource = remember { MutableInteractionSource() },
-                    onClick = { onRemoveRoom(roomInfo) }
-                ),
-        ) {
-            Icon(
-                imageVector = CompoundIcons.Close(),
-                contentDescription = stringResource(id = CommonStrings.action_remove),
-                tint = ElementTheme.colors.iconOnSolidPrimary,
-                modifier = Modifier.padding(2.dp)
-            )
-        }
-    }
+    SelectedItem(
+        avatarData = roomInfo.getAvatarData(AvatarSize.SelectedRoom),
+        avatarType = AvatarType.Room(
+            heroes = roomInfo.heroes.map { it.getAvatarData(AvatarSize.SelectedRoom) }.toImmutableList(),
+            isTombstoned = roomInfo.isTombstoned,
+        ),
+        // If name is null, we do not have space to render "No room name", so just use `#` here.
+        text = roomInfo.name ?: "#",
+        maxLines = 1,
+        a11yContentDescription = roomInfo.name
+            ?: roomInfo.canonicalAlias?.value
+            ?: stringResource(id = CommonStrings.common_room_name),
+        canRemove = true,
+        onRemoveClick = { onRemoveRoom(roomInfo) },
+        modifier = modifier,
+    )
 }

@PreviewsDayNight
@ -101,3 +57,18 @@ internal fun SelectedRoomPreview(
        onRemoveRoom = {},
    )
 }
+
+@PreviewsDayNight
+@Composable
+internal fun SelectedRoomRtlPreview(
+    @PreviewParameter(SelectRoomInfoProvider::class) roomInfo: SelectRoomInfo
+) = CompositionLocalProvider(
+    LocalLayoutDirection provides LayoutDirection.Rtl,
+) {
+    ElementPreview {
+        SelectedRoom(
+            roomInfo = roomInfo,
+            onRemoveRoom = {},
+        )
+    }
+}
--- a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectedUser.kt
+++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectedUser.kt
@ -7,42 +7,19 @@

 package io.element.android.libraries.matrix.ui.components

-import androidx.compose.foundation.clickable
-import androidx.compose.foundation.interaction.MutableInteractionSource
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.remember
-import androidx.compose.ui.Alignment
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
-import androidx.compose.ui.draw.clipToBounds
-import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.semantics.clearAndSetSemantics
-import androidx.compose.ui.semantics.contentDescription
-import androidx.compose.ui.semantics.onClick
-import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.text.style.TextOverflow
-import androidx.compose.ui.unit.dp
-import io.element.android.compound.theme.ElementTheme
-import io.element.android.compound.tokens.generated.CompoundIcons
-import io.element.android.libraries.designsystem.components.avatar.Avatar
+import androidx.compose.ui.platform.LocalLayoutDirection
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.unit.LayoutDirection
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.components.avatar.AvatarType
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
-import io.element.android.libraries.designsystem.theme.components.Icon
-import io.element.android.libraries.designsystem.theme.components.Surface
-import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.matrix.api.user.MatrixUser
 import io.element.android.libraries.matrix.ui.model.getAvatarData
 import io.element.android.libraries.matrix.ui.model.getBestName
-import io.element.android.libraries.ui.strings.CommonStrings

@Composable
 fun SelectedUser(
@ -51,81 +28,47 @@ fun SelectedUser(
    onUserRemove: (MatrixUser) -> Unit,
    modifier: Modifier = Modifier,
 ) {
-    val actionRemove = stringResource(id = CommonStrings.action_remove)
-    Box(
-        modifier = modifier
-            .width(AvatarSize.SelectedUser.dp)
-            .clearAndSetSemantics {
-                contentDescription = matrixUser.getBestName()
-                if (canRemove) {
-                    // Note: this does not set the click effect to the whole Box
-                    // when talkback is not enabled
-                    onClick(
-                        label = actionRemove,
-                        action = {
-                            onUserRemove(matrixUser)
-                            true
-                        }
-                    )
-                }
-            }
-    ) {
-        Column(
-            horizontalAlignment = Alignment.CenterHorizontally,
-        ) {
-            Avatar(
-                avatarData = matrixUser.getAvatarData(size = AvatarSize.SelectedUser),
-                avatarType = AvatarType.User,
-            )
-            Text(
-                modifier = Modifier.clipToBounds(),
-                text = matrixUser.getBestName(),
-                overflow = TextOverflow.Ellipsis,
-                maxLines = 2,
-                style = ElementTheme.typography.fontBodyMdRegular,
-                textAlign = TextAlign.Center,
-            )
-        }
-        if (canRemove) {
-            Surface(
-                color = ElementTheme.colors.textPrimary,
-                modifier = Modifier
-                    .clip(CircleShape)
-                    .size(20.dp)
-                    .align(Alignment.TopEnd)
-                    .clickable(
-                        indication = ripple(),
-                        interactionSource = remember { MutableInteractionSource() },
-                        onClick = { onUserRemove(matrixUser) }
-                    ),
-            ) {
-                Icon(
-                    imageVector = CompoundIcons.Close(),
-                    // Note: keep the context description for the test
-                    contentDescription = stringResource(id = CommonStrings.action_remove),
-                    tint = ElementTheme.colors.iconOnSolidPrimary,
-                    modifier = Modifier.padding(2.dp)
-                )
-            }
-        }
-    }
+    SelectedItem(
+        avatarData = matrixUser.getAvatarData(size = AvatarSize.SelectedUser),
+        avatarType = AvatarType.User,
+        text = matrixUser.getBestName(),
+        maxLines = 2,
+        a11yContentDescription = matrixUser.getBestName(),
+        canRemove = canRemove,
+        onRemoveClick = { onUserRemove(matrixUser) },
+        modifier = modifier,
+    )
 }

@PreviewsDayNight
@Composable
-internal fun SelectedUserPreview() = ElementPreview {
+internal fun SelectedUserPreview(@PreviewParameter(MatrixUserWithAvatarProvider::class) user: MatrixUser) = ElementPreview {
    SelectedUser(
-        aMatrixUser(displayName = "John Doe"),
+        matrixUser = user,
        canRemove = true,
        onUserRemove = {},
    )
 }

+@PreviewsDayNight
+@Composable
+internal fun SelectedUserRtlPreview() = CompositionLocalProvider(
+    LocalLayoutDirection provides LayoutDirection.Rtl,
+) {
+    ElementPreview {
+        SelectedUser(
+            matrixUser = aMatrixUser(displayName = "John Doe"),
+            canRemove = true,
+            onUserRemove = {},
+        )
+    }
+}
+
@PreviewsDayNight
@Composable
 internal fun SelectedUserCannotRemovePreview() = ElementPreview {
    SelectedUser(
-        aMatrixUser(),
+        matrixUser = aMatrixUser(),
        canRemove = false,
        onUserRemove = {},
    )
--- a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/UnresolvedUserRow.kt
+++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/UnresolvedUserRow.kt
@ -39,6 +39,7 @@ fun UnresolvedUserRow(
    avatarData: AvatarData,
    id: String,
    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
 ) {
    Row(
        modifier = modifier
@ -61,7 +62,7 @@ fun UnresolvedUserRow(
                text = id,
                maxLines = 1,
                overflow = TextOverflow.Ellipsis,
-                color = ElementTheme.colors.textPrimary,
+                color = if (enabled) ElementTheme.colors.textPrimary else ElementTheme.colors.textDisabled,
                style = ElementTheme.typography.fontBodyLgMedium,
            )

@ -78,11 +79,11 @@ fun UnresolvedUserRow(
                        .size(18.dp)
                        .align(Alignment.Top)
                        .padding(2.dp),
-                    tint = ElementTheme.colors.iconCriticalPrimary,
+                    tint = if (enabled) ElementTheme.colors.iconCriticalPrimary else ElementTheme.colors.iconDisabled,
                )
                Text(
                    text = stringResource(CommonStrings.common_invite_unknown_profile),
-                    color = ElementTheme.colors.textSecondary,
+                    color = if (enabled) ElementTheme.colors.textSecondary else ElementTheme.colors.textDisabled,
                    style = ElementTheme.typography.fontBodySmRegular.copy(lineHeight = 16.sp),
                )
            }
@ -94,5 +95,8 @@ fun UnresolvedUserRow(
@Composable
 internal fun UnresolvedUserRowPreview() = ElementThemedPreview {
    val matrixUser = aMatrixUser()
-    UnresolvedUserRow(matrixUser.getAvatarData(size = AvatarSize.UserListItem), matrixUser.userId.value)
+    Column {
+        UnresolvedUserRow(matrixUser.getAvatarData(size = AvatarSize.UserListItem), matrixUser.userId.value)
+        UnresolvedUserRow(matrixUser.getAvatarData(size = AvatarSize.UserListItem), matrixUser.userId.value, enabled = false)
+    }
 }
--- a/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/UserRow.kt
+++ b/libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/UserRow.kt
@ -30,6 +30,7 @@ internal fun UserRow(
    name: String,
    subtext: String?,
    modifier: Modifier = Modifier,
+    enabled: Boolean = true,
    trailingContent: @Composable (() -> Unit)? = null,
 ) {
    Row(
@ -54,14 +55,14 @@ internal fun UserRow(
                text = name,
                maxLines = 1,
                overflow = TextOverflow.Ellipsis,
-                color = ElementTheme.colors.textPrimary,
+                color = if (enabled) ElementTheme.colors.textPrimary else ElementTheme.colors.textDisabled,
                style = ElementTheme.typography.fontBodyLgRegular,
            )
            // Id
            subtext?.let {
                Text(
                    text = subtext,
-                    color = ElementTheme.colors.textSecondary,
+                    color = if (enabled) ElementTheme.colors.textSecondary else ElementTheme.colors.textDisabled,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                    style = ElementTheme.typography.fontBodySmRegular,
--- a/tests/konsist/src/test/kotlin/io/element/android/tests/konsist/KonsistPreviewTest.kt
+++ b/tests/konsist/src/test/kotlin/io/element/android/tests/konsist/KonsistPreviewTest.kt
@ -166,10 +166,15 @@ class KonsistPreviewTest {
                additionalMessage = "Functions for Preview should be named like this: <ViewUnderPreview>Preview. " +
                    "Exception can be added to the test, for multiple Previews of the same view",
            ) {
-                val testedView = it.name.removeSuffix("Preview")
-                it.text.contains("$testedView(") ||
-                    it.text.contains("$testedView {") ||
-                    it.text.contains("ContentToPreview(")
+                val testedView = if (it.name.endsWith("RtlPreview")) {
+                    it.name.removeSuffix("RtlPreview")
+                } else {
+                    it.name.removeSuffix("Preview")
+                }
+                it.name.endsWith("Preview") &&
+                    (it.text.contains("$testedView(") ||
+                        it.text.contains("$testedView {") ||
+                        it.text.contains("ContentToPreview("))
            }
    }

--- a/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Day_10_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Day_10_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cd1d3333aa5af41506214d6a0cb952816cc3a8ebcf6a9d2da2c4dcc5af1ce89f
-size 50409
+oid sha256:68fcdde40d2f2f1fa66186b0850b4ac70066314f9ebb6e515d4a0af528ac25cb
+size 50316
--- a/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Day_11_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Day_11_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ddeb1d8cd8f5588a3022c95a62c304a0097507a94e455d1f93d850e6c8f61e54
-size 53363
+oid sha256:0a0bf177f0f5fd5a939bbc51c922487614e3a8902f6d19327ee34f3654794053
+size 52657
--- a/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Day_12_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Day_12_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bca3f97223622e762bb8564c966c986aedf98a2f029f46d311fd3d1bef346cc1
-size 54963
+oid sha256:997f0b0adc3e503cae7420dfbcfe7358b0597dc3f2d9325228a5f5f4feda76b1
+size 54407
--- a/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Day_1_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Day_1_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6f997e20a2c9183038ef667cc54ec70e1c8e7a7a86f4effd33fb8d5c7b6354de
-size 65630
+oid sha256:f3776c6e147cf70af109a8de76dc19575788f98afd55321601eaaf179f76b48c
+size 67448
--- a/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Day_2_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Day_2_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f9b68d8336e67ea157619a6997f1c87904ade129e68ce65c5d1139d35e0ef896
-size 60324
+oid sha256:76630125c828f4b7d34632e21ec5615a425f3eb5f17b15c963495e0247dcf820
+size 61249
--- a/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Day_3_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Day_3_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f2c783b0fc7fbda178becdbc751ffd9cd05731f04824a0a004d7eddabe74d3ac
-size 60277
+oid sha256:63ab147dd015d8dc1f3473749c0c1be34876610ca699e54c6f207624e14cf32c
+size 61201
--- a/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Day_4_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Day_4_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b99e8f4003b56d3eb17e7a2b5dfc5bcb58ac8425b3be65c7494635fe3e5287ca
-size 55156
+oid sha256:b62c47c4ae5f1d6a25fc5cdaa5e48c4815ae0de089f5e7b4770317281dc77258
+size 55033
--- a/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Day_6_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Day_6_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:944c964738fff2be6aebb9d0c33212ad4db48ebbc7c3c8475e35e9d71064337b
-size 58167
+oid sha256:623941550c734147c294ec2294840d9353ac756b054b402b365060602ff614b0
+size 58961
--- a/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Day_7_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Day_7_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:651f2c2d6b3277ee324b7cc18f0627806cdd6f780a73ad3be6a3a83f74634474
-size 60405
+oid sha256:de42de69f32f5b1657cb703028d7cce38e8d427360e92c1786d317013f17323d
+size 61473
--- a/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Day_8_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Day_8_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1ab201f2172c82c87cee0406d64f583bab080ef4783394a9d87a72c6232697bb
-size 51884
+oid sha256:12a5a89c57cf315b9a2a753cdd43e6721d8565ff794b4fc31a9ef7b1b643ad1c
+size 52704
--- a/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Day_9_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Day_9_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:489006448e5ea62a219c1bd3c416560d4bf84b20706fe906a8deb6eef541d92f
-size 64161
+oid sha256:9ad3480ab59df477aef94e2a1b57d247f09ae4a3beedf917ea445df0fb1dbd8d
+size 65037
--- a/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Night_10_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Night_10_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7c929834f32069a8f21af87386f2e0b80c3ee481cfdc4c30c934338544e1482e
-size 48742
+oid sha256:8ad0df06cade954de31bc7e6e5d5e14c1ed9590e70f425da6b82104839fe54eb
+size 48592
--- a/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Night_11_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Night_11_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:90b1ab05a90e105c083a066d8ada1cd73ddc8b9c8b28872c2710eee5f890bdb8
-size 54022
+oid sha256:800600290cbb91a528273e2c88f6d73bc5c71b9d395315aa280277861b74c035
+size 53461
--- a/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Night_12_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Night_12_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d56ca66db0d8c0db7b295cf766e7c3bff4c2228951a46835f532b6b7e5f304a9
-size 55544
+oid sha256:ae2f05609d543bb6bb99df4f371d81b5d7c5040c66003afb30e6217395c51d0b
+size 55040
--- a/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Night_1_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Night_1_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0f472e63a0df3c28613bb48c364e912ef0b434c92418d4121f6b36e421fbc55e
-size 66087
+oid sha256:be065a6d9b0b6f24ae9f773b70f7c36d96939978ddaeee5da889e3d00388cc0e
+size 68006
--- a/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Night_2_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Night_2_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:22c3785d8968dd8c69b03e676c783d705f149510a251a691cb2c8b8504e26f45
-size 61160
+oid sha256:82438000e7b5369d1cb45ca3f1b67599c77bcfac54fe50335509c144c7df33b4
+size 61968
--- a/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Night_3_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Night_3_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a048ec5adbc1f5b2ac2a5cfc80e9d895ffdade4fa5057a5c3a0a890e50176411
-size 61077
+oid sha256:99628f108a0c165316d77b1189a70ebb8b4754ae3f96960b616d1305879324fd
+size 61907
--- a/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Night_4_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Night_4_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4fa241f62c49fb6b26a3fed898d9904ef89f8bb2be83f3df75083cd8d4f2a6a9
-size 55679
+oid sha256:63639bf715af2a18f888a9fe54ea18403a13babdbd45fd86242253333cf1c5e8
+size 55372
--- a/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Night_6_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Night_6_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:831d92f14e40f12214d629da752edba0a776da5536bfac9a956bd94d7c2e93ee
-size 56194
+oid sha256:17ca777cfd4e056078519282f928799dcb2e9aac1ab2757b7cb4cbb1fe93c573
+size 56855
--- a/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Night_7_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Night_7_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6896524fa538385a57fbf209ca5af041bf9dfb87778994453dbb931530c15771
-size 58451
+oid sha256:76cb14f12f0d8304d3f3125026d79ac8b2012d00067578bee261dcba864e627e
+size 59439
--- a/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Night_8_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Night_8_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2060bff28d43d739f6ba5b17205a00d64b8b0f63afc6241fecd5a4541a9564be
-size 51062
+oid sha256:52f1de6e6bc921fd5b1862eb4804bd9a84474aa6e02bd34e2dfd8492a8f85fe7
+size 51790
--- a/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Night_9_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.changeroommemberroles.impl_ChangeRolesView_Night_9_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:baee296829dfb127c8db2142041d905b342aab13d93408548b7fc9329dd8de26
-size 63894
+oid sha256:2973248a09cc824af7545f1209720e235e5dcdbde3b4f863d50c96c67e19dd7f
+size 64709
--- a/tests/uitests/src/test/snapshots/images/features.invitepeople.impl_InvitePeopleView_Day_1_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.invitepeople.impl_InvitePeopleView_Day_1_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1fcdfe7d1492b536b3604747ede049e24f48b75977eb3858e27a837b5b4ec6da
-size 20550
+oid sha256:94341fe8aa52b4551ef8a73cf298aaa1c4352ae0d4c83990c04c4c6e491b64e8
+size 21444
--- a/tests/uitests/src/test/snapshots/images/features.invitepeople.impl_InvitePeopleView_Day_3_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.invitepeople.impl_InvitePeopleView_Day_3_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:84b3f9bbf73e600f1e860a42c26cc4a9f5be45acae551a90a2e19084dcf5d157
-size 18031
+oid sha256:7c4f3ad870d9d86b96a3cadcf574a48469e72a2270c66eaf5040f7bce2c9fda7
+size 18936
--- a/tests/uitests/src/test/snapshots/images/features.invitepeople.impl_InvitePeopleView_Day_5_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.invitepeople.impl_InvitePeopleView_Day_5_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f050b90caaf47a772c72d805955b657de1f7fe544e8a45952b4f9592e54ee5d6
-size 38336
+oid sha256:8e26d6a17523b87c2cb8b2078e0f4a1cfd8b1aa19fff022f97dff76dda9faab7
+size 38279
--- a/tests/uitests/src/test/snapshots/images/features.invitepeople.impl_InvitePeopleView_Day_6_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.invitepeople.impl_InvitePeopleView_Day_6_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5996283d500a3b9eb525584865ba868dda5d688c8f757399e5b907c6aa1ea70e
-size 33128
+oid sha256:61e5b4a31c2ab2620324655c5968799bd758d7256eb89f544b9800d7a81bb91c
+size 32521
--- a/tests/uitests/src/test/snapshots/images/features.invitepeople.impl_InvitePeopleView_Day_7_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.invitepeople.impl_InvitePeopleView_Day_7_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f301d1266f98ec60c8abdb508884d44d3eb5b607654e0158b693779e5a8b6ca6
-size 25626
+oid sha256:1cf9c53daca4b53a2615a4980c2d606292f3fa1aca30bcdd13827d89898aa3b6
+size 25449
--- a/tests/uitests/src/test/snapshots/images/features.invitepeople.impl_InvitePeopleView_Night_1_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.invitepeople.impl_InvitePeopleView_Night_1_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:50474e918e38f3f14e57ac6c069bf414f99050083d3796e100ac683309db74c0
-size 20917
+oid sha256:00a961c76598dc98a0d9c7a45781865984c51bb440bb1605c381e9496ca1789f
+size 21971
--- a/tests/uitests/src/test/snapshots/images/features.invitepeople.impl_InvitePeopleView_Night_3_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.invitepeople.impl_InvitePeopleView_Night_3_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ee5daee317f00723321e2b4aa0f8be015cacb9ab22e36ba74238a8063766aab5
-size 18713
+oid sha256:cbdebc079f54dbac4ce540a87f3ffdd37c4631b4704fb0783313735515e6e820
+size 19853
--- a/tests/uitests/src/test/snapshots/images/features.invitepeople.impl_InvitePeopleView_Night_5_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.invitepeople.impl_InvitePeopleView_Night_5_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1bfd83f8bcf688f73edeeed7d085f706dc81fe7c5b608a46c55f320a0772cc14
-size 39183
+oid sha256:f6fc23abdd913a0538776d0d0e96ce02ba119302c939ae3517f3eb5bb74b1de5
+size 38995
--- a/tests/uitests/src/test/snapshots/images/features.invitepeople.impl_InvitePeopleView_Night_6_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.invitepeople.impl_InvitePeopleView_Night_6_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1318a5b1a3f17f6e4e867eea5615909c9c54c13f55caeff5beb97f8251c62138
-size 33225
+oid sha256:9591e809b411cc5192d35e08d79c6bc0e98bab6b01193207e5af94e778503eed
+size 32679
--- a/tests/uitests/src/test/snapshots/images/features.invitepeople.impl_InvitePeopleView_Night_7_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.invitepeople.impl_InvitePeopleView_Night_7_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0ea5406893f8d4eb3ba729233fee5271c5de3d10b57cae9dd6d8cb973da04378
-size 25211
+oid sha256:ce62e536fd2413c1f15b00aeb9389591035196c74e45d27efab61a5d7add9b66
+size 25047
--- a/tests/uitests/src/test/snapshots/images/features.startchat.impl.components_SearchMultipleUsersResultItem_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.startchat.impl.components_SearchMultipleUsersResultItem_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bb24343c24a1e8a8ef57a15ecead6be27b3ab78c4e0a71301bf9c4d7a5219e78
-size 82320
+oid sha256:10da292ee61043de44cfc3edfdc671ce923df0788765d9a63e846912a876cc6d
+size 82806
--- a/tests/uitests/src/test/snapshots/images/features.startchat.impl.components_UserListView_Day_1_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.startchat.impl.components_UserListView_Day_1_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:de7dc937f73412f7144a396dc2453434a102615c62740188d9d3597c252d27f6
-size 20615
+oid sha256:721f7effa69fa976958537cf651afb3e5b5023bd31adf2d27004f98cce7949d4
+size 21525
--- a/tests/uitests/src/test/snapshots/images/features.startchat.impl.components_UserListView_Day_6_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.startchat.impl.components_UserListView_Day_6_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d6bf660eaead16964fa91a2968e99b58304939b4e5c2a7301c4b2b70ce39eb6b
-size 52095
+oid sha256:2f894f9818cd057c6ccef33948cff0d3d55b2478e30275af9a6406a31fecdb59
+size 54748
--- a/tests/uitests/src/test/snapshots/images/features.startchat.impl.components_UserListView_Day_9_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.startchat.impl.components_UserListView_Day_9_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5ec147e3c6c93e637cbccf59ddfc5e4bafb754f2d49049a53cde0daacf88aa04
-size 38046
+oid sha256:a137133ce6c61e0dd6d4e7bfcac4cb8b93a607114fbc9c0183a2d97b6cd25520
+size 37207
--- a/tests/uitests/src/test/snapshots/images/features.startchat.impl.components_UserListView_Night_1_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.startchat.impl.components_UserListView_Night_1_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f94b632536ba458de480dbeb170b053774fa468a9afa996194af63f3d229a016
-size 20926
+oid sha256:ce7350e400a50ce7fd359a17240c816ab527e5296563f87eeb6a2aad50640e47
+size 21982
--- a/tests/uitests/src/test/snapshots/images/features.startchat.impl.components_UserListView_Night_6_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.startchat.impl.components_UserListView_Night_6_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6221215e63ca968ea430c69ce7edd4c67f82daba86e07b56fffe89c9f7cf08ef
-size 53177
+oid sha256:86c7495d6b7ffb86f64ec3f5231eacf1532e4104c529de3569eb0d155d45fc34
+size 55722
--- a/tests/uitests/src/test/snapshots/images/features.startchat.impl.components_UserListView_Night_9_en.png
+++ b/tests/uitests/src/test/snapshots/images/features.startchat.impl.components_UserListView_Night_9_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:aae661dfd462f19efa127a8c7242ff05e6bd9619f4827e494e9cc9557650f562
-size 37893
+oid sha256:8b0cff302bbc1d6fc45d7615737e750eabee54d7881e5e7aba7ea6a1a8045762
+size 37135
--- a/tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.atoms_SelectedIndicatorAtom_Day_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.atoms_SelectedIndicatorAtom_Day_0_en.png
@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:eda6f086863c3d3f7bc76448777768785cd69b1ac685ee1db8f95cacb3389a30
+size 5564
--- a/tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.atoms_SelectedIndicatorAtom_Night_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.designsystem.atomic.atoms_SelectedIndicatorAtom_Night_0_en.png
@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:19db99b73c148ad3ffc6b5e522510b8b64a3ed1de3614510c58ba7f35a4a610c
+size 5338
--- a/tests/uitests/src/test/snapshots/images/libraries.designsystem.components.avatar_Avatar_Avatars_24_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.designsystem.components.avatar_Avatar_Avatars_24_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1e6b4ed2799c9ef83eae30e4f99896f6a78808be7d897c53de1a35c8828b477c
-size 17135
+oid sha256:f05acb090eb967a126bb1c4741f763bc7ba254e2d32641d7f6b7d0c3888f5f44
+size 16522
--- a/tests/uitests/src/test/snapshots/images/libraries.designsystem.components.avatar_Avatar_Avatars_25_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.designsystem.components.avatar_Avatar_Avatars_25_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:964d9951c9b8ff644c0961268a4299634b70e5915ac23c37369198ddd0568845
-size 15822
+oid sha256:408498059aa91ae83ec3617172dd1af1ace78c99b172c3da1895d125965a4bd6
+size 15272
--- a/tests/uitests/src/test/snapshots/images/libraries.designsystem.components.avatar_Avatar_Avatars_26_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.designsystem.components.avatar_Avatar_Avatars_26_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3961ff50b6a6604c4da84be949d25a66ac9a511c9abe4af64cff239e8febb1e6
-size 20742
+oid sha256:884eb2d69af3e1d91fddcbcd7173ac547530e5f3439ad2edc3df6cdbbc5ac312
+size 19914
--- a/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_CheckableResolvedUserRow_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_CheckableResolvedUserRow_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:fa11bdf391701b6d4087506cc9b46545199185f3df661d6edfd19020ca5af7ab
-size 51356
+oid sha256:10796b9478b53030d106b092242b2fb29432306c975cba899a4a803468a102b2
+size 50455
--- a/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_CheckableUnresolvedUserRow_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_CheckableUnresolvedUserRow_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:dd65f1e18c78ea369ffa811236db1aafc35acd83a34e2d7858e888d8097edad4
-size 112005
+oid sha256:68571ead8897090de9308062686d608333d9145640214d0f5661d87460007b90
+size 108334
--- a/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedRoomRtl_Day_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedRoomRtl_Day_0_en.png
@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:096dea8789c339ce57121433a5ab07e4a8a387a00c2a1a7e2cae22864e194884
+size 7123
--- a/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedRoomRtl_Day_1_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedRoomRtl_Day_1_en.png
@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4b7c8c2bb6fd65dc8309c5ce38620068064cf2b905f55024d45b730713664b39
+size 7930
--- a/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedRoomRtl_Day_2_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedRoomRtl_Day_2_en.png
@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:5537f922d2c5ed7b9a0984c8fc59d0a8714a8fd8c59f8f3ccfa4d86c0c031858
+size 24427
--- a/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedRoomRtl_Night_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedRoomRtl_Night_0_en.png
@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:dc6bee8dae3dad28e9c4c84f83c0cbb869ebdab62e1a423eddbc1acf5622fbeb
+size 7372
--- a/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedRoomRtl_Night_1_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedRoomRtl_Night_1_en.png
@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:7fdbaa1c4aecc9c5b8373d9ff22d88f8552ff40569961e246eced7b0cfcb98a7
+size 7831
--- a/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedRoomRtl_Night_2_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedRoomRtl_Night_2_en.png
@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:6c661596938da606edbf9bab7951eb7b15f438c8af52bc5b8f915db640ebe6bc
+size 24098
--- a/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedRoom_Day_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedRoom_Day_0_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:abb717c09558d42d3721c17d363d3ca67d3c9270b63aac6dcd7bd4663c7a427f
-size 7025
+oid sha256:ddf94690a70ce16c5956acc02e799a9cf0e9a25a9e39e232ad29f62b7f42b10d
+size 7146
--- a/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedRoom_Day_1_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedRoom_Day_1_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7a1d3baf704ab9e59f7d209339634fdf3f9f531dfb8074403badce8249ef27a8
-size 8004
+oid sha256:50728380e53730d17d11f354f0922ef7d3918d91952a48ccbd80d150b7f9a561
+size 8019
--- a/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedRoom_Day_2_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedRoom_Day_2_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:45f64462f82b00c81cc9e7ba0a264f7b678dd1ac46dcab2c31d1382467dddf26
-size 7876
+oid sha256:cdb4e762013d17daea7a3f5694131b59e503cbe5a37f47512b6a7e4029815eee
+size 24169
--- a/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedRoom_Night_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedRoom_Night_0_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3f555b8c5471938171fe161cbd48b0f3b1447a132432d4e9168594d6d0f01a82
-size 7228
+oid sha256:ad290caf59b3b03eb0c67e228bc8e24da846e1650d7442f147a2e973caa44b92
+size 7430
--- a/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedRoom_Night_1_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedRoom_Night_1_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f25f643f1b578dbf88bbb9c0e4c95c49fb74d629733540fd25bba3bdb0ec536d
-size 7881
+oid sha256:b7f2bb6aaa4385cb230884fcd41df28ac38a88e12cc30fb215812fca82324deb
+size 7922
--- a/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedRoom_Night_2_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedRoom_Night_2_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6e30bf215242fb5ffbbbcea02884c553af162f804405d6b795c9f68bbf125df4
-size 8013
+oid sha256:c8a72f53dc0c94e364d094f2bf911e9d39777d51c81e02e384c868e03a3df198
+size 23860
--- a/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedUserCannotRemove_Day_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedUserCannotRemove_Day_0_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:04aa402d8d9d9c72217360411325b31e0abf21a0fc0a911014427aad7997c88a
-size 6583
+oid sha256:f06ddb8fcf8c74676103b0af9df6e9a8ef38b1c3627abe55c9e7edc28ccdcb13
+size 6305
--- a/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedUserCannotRemove_Night_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedUserCannotRemove_Night_0_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cfda3f200fba0a6cf49cf4f37b4c1cf4f04dd9b8fc3e129e2e72c94b3631256b
-size 7083
+oid sha256:d15c2a561e06890c7959f9000f73037cdd957c91f8a26066ac7620fecf635b82
+size 6762
--- a/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedUserRtl_Day_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedUserRtl_Day_0_en.png
@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:08493cd3243d38eeac09a13e4fb5db97361bf5677db251cd4b5887b595379ec5
+size 7700
--- a/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedUserRtl_Night_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedUserRtl_Night_0_en.png
@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:ec043b99fa7a6a622784a17914369f499feef1818501e582c345c0ecd8a9f398
+size 8132
--- a/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedUser_Day_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedUser_Day_0_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2a067fd04c656418bc184355a1a756f09b2648bc1bb33b2f32a4c0c4a701c7b6
-size 7811
+oid sha256:eca67b4cb2a2fd6526bf9fa6fd89b643fcd2c227c5abed2c4f32db81617130c8
+size 7723
--- a/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedUser_Day_1_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedUser_Day_1_en.png
@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:d8ae13a72c3bd657db2a1d927856d74103e5e046cdf22b7dd6b887f77cd19f5c
+size 21442
--- a/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedUser_Night_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedUser_Night_0_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8d6ba66c26f575c6e7e36bd71cc20c99b31f65472e6b4f39fb1de8300b6ff2d8
-size 8238
+oid sha256:71f623b4b4ffdd5b1be1e94e12ba908f323b809559f62b6c9948e2d76ddf127a
+size 8142
--- a/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedUser_Night_1_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedUser_Night_1_en.png
@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4e40a4a4a8db9c2b60b91bd1478c7555534d3a3473e06489d547925f8a9771b1
+size 21203
--- a/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedUsersRowList_Day_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedUsersRowList_Day_0_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:fbf5b5e97c523c2e60619143bef719166b03344461e03cd9e7dff66f2e175e86
-size 63066
+oid sha256:c68ddf678e534f385f03565cc764c276a10b3af2a3292de775740157d1ca88c2
+size 66549
--- a/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedUsersRowList_Night_0_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_SelectedUsersRowList_Night_0_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9bdc7f7d67648ba8cce2479c78707aad05244e9b2b20ef44547f0c989629a10b
-size 67126
+oid sha256:fdec02458ef526f62be74baf71f6539d266592267e93c61e20f035b7528fc65b
+size 71172
--- a/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_UnresolvedUserRow_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.matrix.ui.components_UnresolvedUserRow_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a79cb47ea2bfcbf7c8ef7101ce73c45c744c88f91d3aea9768586dcd591f89bd
-size 30395
+oid sha256:cb1d078da743c900a512987314d72aac77fa6565fd28cc970d52443298c77605
+size 55164
--- a/tests/uitests/src/test/snapshots/images/libraries.roomselect.impl_RoomSelectView_Day_4_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.roomselect.impl_RoomSelectView_Day_4_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3d5ca9e04e1501927fdc64a59ba18f65c24665645685c503964320531c3e96a0
-size 33716
+oid sha256:bc6c0bcba6d1f694473cf7bd9279a004acce376a84959d63c5a5d52b1322f3ef
+size 33756
--- a/tests/uitests/src/test/snapshots/images/libraries.roomselect.impl_RoomSelectView_Night_4_en.png
+++ b/tests/uitests/src/test/snapshots/images/libraries.roomselect.impl_RoomSelectView_Night_4_en.png
@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bb7eababcebb71de5cb61e515da4ec59be2937ca20090b49b94377a84c9e4f2c
-size 33378
+oid sha256:e1d16b4735f630c40ea1ed23daf71f6914fda48fc8c70d35d50037c50e93c25a
+size 33350