Adjust typography in `SelectedUser` component (#2768)

* Adjust typography in `SelectedUser` component

* Set 2 max lines for `SelectedUser` component.

Also update the theme token references.

* Update screenshots

---------

Co-authored-by: ElementBot <benoitm+elementbot@element.io>

changelog.d/2760.bugfix

@@ -0,0 +1 @@
+Adjust the typography used in the selected user component so a user's display name fits better.

libraries/matrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectedUser.kt

@@ -25,7 +25,6 @@ import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.ripple.rememberRipple
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
@@ -33,8 +32,10 @@ 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.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 io.element.android.libraries.designsystem.components.avatar.AvatarSize
@@ -67,13 +68,14 @@ fun SelectedUser(
                 modifier = Modifier.clipToBounds(),
                 text = matrixUser.getBestName(),
                 overflow = TextOverflow.Ellipsis,
-                maxLines = 1,
-                style = MaterialTheme.typography.bodyLarge,
+                maxLines = 2,
+                style = ElementTheme.typography.fontBodyMdRegular,
+                textAlign = TextAlign.Center,
             )
         }
         if (canRemove) {
             Surface(
-                color = MaterialTheme.colorScheme.primary,
+                color = ElementTheme.colors.textPrimary,
                 modifier = Modifier
                     .clip(CircleShape)
                     .size(20.dp)
@@ -87,7 +89,7 @@ fun SelectedUser(
                 Icon(
                     imageVector = CompoundIcons.Close(),
                     contentDescription = stringResource(id = CommonStrings.action_remove),
-                    tint = MaterialTheme.colorScheme.onPrimary,
+                    tint = ElementTheme.colors.iconOnSolidPrimary,
                     modifier = Modifier.padding(2.dp)
                 )
             }
@@ -99,7 +101,7 @@ fun SelectedUser(
 @Composable
 internal fun SelectedUserPreview() = ElementPreview {
     SelectedUser(
-        aMatrixUser(),
+        aMatrixUser(displayName = "John Doe"),
         canRemove = true,
         onUserRemoved = {},
     )

tests/uitests/src/test/snapshots/images/ui_S_t[f.roomdetails.impl.rolesandpermissions.changeroles_ChangeRolesView_null_ChangeRolesView-Day-9_10_null_1,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:56873f51dd8de6630f5423f796687049a920bddafb5af17a47e4f901a5d9f360
-size 71767
+oid sha256:9554fbc2927f9f0e99c47df476ad219f4664f0351635e4183a47b969a54fd9bd
+size 71943

tests/uitests/src/test/snapshots/images/ui_S_t[f.roomdetails.impl.rolesandpermissions.changeroles_ChangeRolesView_null_ChangeRolesView-Day-9_10_null_10,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:34efa87358c4529d0f67729fd417a3d52dc5a0031192dbf123bcc667d6e78391
-size 56803
+oid sha256:279658180c4402f0c85aa9c79f4ff21f31c5c3004ba6da8dca9464b95a29288e
+size 55747

tests/uitests/src/test/snapshots/images/ui_S_t[f.roomdetails.impl.rolesandpermissions.changeroles_ChangeRolesView_null_ChangeRolesView-Day-9_10_null_2,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4818ed45a985359112ee92c38148f1030647ead270727525fed1cf1f5c493180
-size 66293
+oid sha256:1ad92e642b5f93f9f80336ba89bf3f5c343ed814e48f59800747a61886b4b549
+size 65951

tests/uitests/src/test/snapshots/images/ui_S_t[f.roomdetails.impl.rolesandpermissions.changeroles_ChangeRolesView_null_ChangeRolesView-Day-9_10_null_3,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:57b0cd541704cd82962e03d2173bb37350d2f91bf1f3d6121314bdccad50c8e6
-size 66255
+oid sha256:6051bfc6f14353c3591acd6d8964f973880c05d923649ec0f6941a27dd1ae008
+size 65917

tests/uitests/src/test/snapshots/images/ui_S_t[f.roomdetails.impl.rolesandpermissions.changeroles_ChangeRolesView_null_ChangeRolesView-Day-9_10_null_4,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ebd6484e81803758298b4ff0e19a042918d85c29e3828a561c83328a9b3e4d73
-size 60644
+oid sha256:aa991225b68802dea704202bc9bcfa01eeb28a49660d888f6a5c4a33026bffd2
+size 60445

tests/uitests/src/test/snapshots/images/ui_S_t[f.roomdetails.impl.rolesandpermissions.changeroles_ChangeRolesView_null_ChangeRolesView-Day-9_10_null_6,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:77bca4e3380c63dba4e7def0937770c6d5b1ae5bde61e4743ecde035431fb8be
-size 64625
+oid sha256:8bb41968ae644485c0e3dd51f23ffee1cfabf62d2c72df9efc577545913c87fb
+size 64304

tests/uitests/src/test/snapshots/images/ui_S_t[f.roomdetails.impl.rolesandpermissions.changeroles_ChangeRolesView_null_ChangeRolesView-Day-9_10_null_7,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b265ee7f4eb6c56e531004af6daae9ad89167b027d089fa960fc17553ec80131
-size 66783
+oid sha256:fd67125b3738e7d5fa88cbdcb45b08521e9cd1b2d66fcfefc2c209390dc051e4
+size 66790

tests/uitests/src/test/snapshots/images/ui_S_t[f.roomdetails.impl.rolesandpermissions.changeroles_ChangeRolesView_null_ChangeRolesView-Day-9_10_null_8,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:eb629e088198030a3a9a09c8cfc815a87e831dc6f5e26b225d17c61883585e50
-size 58902
+oid sha256:da8a5be1f5631f24966baa8d430e2a992ce5228a821c6fbf6395deb2cfcf075a
+size 58490

tests/uitests/src/test/snapshots/images/ui_S_t[f.roomdetails.impl.rolesandpermissions.changeroles_ChangeRolesView_null_ChangeRolesView-Day-9_10_null_9,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f4dd6cbcd17c5c97c240a1244f3233f0f228612b317cc8f6b3f39a0d0d2b05fd
-size 70120
+oid sha256:7ff20b46baf79c6e648870f9004afcc8f2fb613b9e3ab2cc4f5dd7af63a0dbb9
+size 69763

tests/uitests/src/test/snapshots/images/ui_S_t[f.roomdetails.impl.rolesandpermissions.changeroles_ChangeRolesView_null_ChangeRolesView-Night-9_11_null_1,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9d1cf36a65fc7e916a15a0a6eab4e5eaba47f8df5d39d5cb9fe75b137138a96d
-size 69609
+oid sha256:34399cf5697534a6766af2fc9cb6af1602e308548c5b6c7c20b7ad89e8c0e62d
+size 69718

tests/uitests/src/test/snapshots/images/ui_S_t[f.roomdetails.impl.rolesandpermissions.changeroles_ChangeRolesView_null_ChangeRolesView-Night-9_11_null_10,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:fa0b65d6cd2eac2746a2ba1598f075a6d5d144cfc62fbde8e7e17c5b69d85f1c
-size 53497
+oid sha256:214c985100177029d3dad2a0a141ba4a964ea82353cb06744236108ce8ac309f
+size 52409

tests/uitests/src/test/snapshots/images/ui_S_t[f.roomdetails.impl.rolesandpermissions.changeroles_ChangeRolesView_null_ChangeRolesView-Night-9_11_null_2,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:417ca17376f6e296a8955390c800191ebdccf8b358dbc738f438b70c2568606e
-size 64439
+oid sha256:28c9020725779cf02b05e7581ac91ff2cc22cc94b086d9ce825b392d8517d0d9
+size 64159

tests/uitests/src/test/snapshots/images/ui_S_t[f.roomdetails.impl.rolesandpermissions.changeroles_ChangeRolesView_null_ChangeRolesView-Night-9_11_null_3,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a73ae445a25011b1c376f93b7e7203b023e23a027aa2a44d109008a1cca98406
-size 64193
+oid sha256:021f2ecc61aac6f7e856f088a7000b89ab7f757eb417b2d716f88df4f820d329
+size 63910

tests/uitests/src/test/snapshots/images/ui_S_t[f.roomdetails.impl.rolesandpermissions.changeroles_ChangeRolesView_null_ChangeRolesView-Night-9_11_null_4,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a98762c06334da0cc53d04826623850b15d3fc5fdf7cdf8f50f896574a048d0d
-size 58356
+oid sha256:f97240954027f0fd342c7da80e45a96d9adcfb97d5d0e13dda784fc3b0c95f87
+size 58217

tests/uitests/src/test/snapshots/images/ui_S_t[f.roomdetails.impl.rolesandpermissions.changeroles_ChangeRolesView_null_ChangeRolesView-Night-9_11_null_6,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:b6a02199d5c7b5bf4ff0251d437f071e2ce54440b1e0b4519305e0080f7ed6ec
-size 60375
+oid sha256:29027fe574ca4681e532b127d609e0e71a9f6095a56ee81db33dd258cbb4701b
+size 60085

tests/uitests/src/test/snapshots/images/ui_S_t[f.roomdetails.impl.rolesandpermissions.changeroles_ChangeRolesView_null_ChangeRolesView-Night-9_11_null_7,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5898156b9c4ce053ab24728b0679bf6d2d0873459a7b1e4951f8f9ce646e4074
-size 62587
+oid sha256:ee463af6686a4b06cdc53fd7895f987012128c8ebeadfb72b02a217c23214ea0
+size 62651

tests/uitests/src/test/snapshots/images/ui_S_t[f.roomdetails.impl.rolesandpermissions.changeroles_ChangeRolesView_null_ChangeRolesView-Night-9_11_null_8,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6648e7dc5c97e27efbf347380fc3ae3c67866595b086e1adefe36a274bf3afc2
-size 56314
+oid sha256:a716ef67b9c6b3873013aaa53988b1094f55c944cb82f86d508e2c6b063fc4d8
+size 55828

tests/uitests/src/test/snapshots/images/ui_S_t[f.roomdetails.impl.rolesandpermissions.changeroles_ChangeRolesView_null_ChangeRolesView-Night-9_11_null_9,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5d984c253b4990220acebfe91d33fb7f4201fb7a976bea48b2bc04e4788ddee2
-size 67263
+oid sha256:4d3cce385286394c91dc2faea3ee0033b829d2a2fa67203c50c42c96ce19a13b
+size 66971