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>
element-hq · Apr 30, 2024 · c690b38 · c690b38
1 parent 47fd2e8
commit c690b38
Show file tree

Hide file tree

Showing 44 changed files with 93 additions and 90 deletions.
diff --git a/changelog.d/2760.bugfix b/changelog.d/2760.bugfix
@@ -0,0 +1 @@
+Adjust the typography used in the selected user component so a user's display name fits better.
diff --git a/...atrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectedUser.kt b/...atrixui/src/main/kotlin/io/element/android/libraries/matrix/ui/components/SelectedUser.kt
@@ -25,16 +25,17 @@ 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
 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 = {},
     )

diff --git a/...l.addpeople_AddPeopleView_null_AddPeopleView-Day-0_1_null_1,NEXUS_5,1.0,en].png b/...l.addpeople_AddPeopleView_null_AddPeopleView-Day-0_1_null_1,NEXUS_5,1.0,en].png
diff --git a/...l.addpeople_AddPeopleView_null_AddPeopleView-Day-0_1_null_2,NEXUS_5,1.0,en].png b/...l.addpeople_AddPeopleView_null_AddPeopleView-Day-0_1_null_2,NEXUS_5,1.0,en].png
diff --git a/...addpeople_AddPeopleView_null_AddPeopleView-Night-0_2_null_1,NEXUS_5,1.0,en].png b/...addpeople_AddPeopleView_null_AddPeopleView-Night-0_2_null_1,NEXUS_5,1.0,en].png
diff --git a/...addpeople_AddPeopleView_null_AddPeopleView-Night-0_2_null_2,NEXUS_5,1.0,en].png b/...addpeople_AddPeopleView_null_AddPeopleView-Night-0_2_null_2,NEXUS_5,1.0,en].png
diff --git a/...pl.components_UserListView_null_UserListView-Day-2_3_null_1,NEXUS_5,1.0,en].png b/...pl.components_UserListView_null_UserListView-Day-2_3_null_1,NEXUS_5,1.0,en].png
diff --git a/...pl.components_UserListView_null_UserListView-Day-2_3_null_6,NEXUS_5,1.0,en].png b/...pl.components_UserListView_null_UserListView-Day-2_3_null_6,NEXUS_5,1.0,en].png
diff --git a/....components_UserListView_null_UserListView-Night-2_4_null_1,NEXUS_5,1.0,en].png b/....components_UserListView_null_UserListView-Night-2_4_null_1,NEXUS_5,1.0,en].png
diff --git a/....components_UserListView_null_UserListView-Night-2_4_null_6,NEXUS_5,1.0,en].png b/....components_UserListView_null_UserListView-Night-2_4_null_6,NEXUS_5,1.0,en].png
diff --git a/...oom_ConfigureRoomView_null_ConfigureRoomView-Day-3_4_null_1,NEXUS_5,1.0,en].png b/...oom_ConfigureRoomView_null_ConfigureRoomView-Day-3_4_null_1,NEXUS_5,1.0,en].png
diff --git a/...m_ConfigureRoomView_null_ConfigureRoomView-Night-3_5_null_1,NEXUS_5,1.0,en].png b/...m_ConfigureRoomView_null_ConfigureRoomView-Night-3_5_null_1,NEXUS_5,1.0,en].png
diff --git a/...InviteMembersView_null_RoomInviteMembersView-Day-1_2_null_1,NEXUS_5,1.0,en].png b/...InviteMembersView_null_RoomInviteMembersView-Day-1_2_null_1,NEXUS_5,1.0,en].png
diff --git a/...InviteMembersView_null_RoomInviteMembersView-Day-1_2_null_3,NEXUS_5,1.0,en].png b/...InviteMembersView_null_RoomInviteMembersView-Day-1_2_null_3,NEXUS_5,1.0,en].png
diff --git a/...InviteMembersView_null_RoomInviteMembersView-Day-1_2_null_5,NEXUS_5,1.0,en].png b/...InviteMembersView_null_RoomInviteMembersView-Day-1_2_null_5,NEXUS_5,1.0,en].png
diff --git a/...InviteMembersView_null_RoomInviteMembersView-Day-1_2_null_6,NEXUS_5,1.0,en].png b/...InviteMembersView_null_RoomInviteMembersView-Day-1_2_null_6,NEXUS_5,1.0,en].png
diff --git a/...viteMembersView_null_RoomInviteMembersView-Night-1_3_null_1,NEXUS_5,1.0,en].png b/...viteMembersView_null_RoomInviteMembersView-Night-1_3_null_1,NEXUS_5,1.0,en].png
diff --git a/...viteMembersView_null_RoomInviteMembersView-Night-1_3_null_3,NEXUS_5,1.0,en].png b/...viteMembersView_null_RoomInviteMembersView-Night-1_3_null_3,NEXUS_5,1.0,en].png
diff --git a/...viteMembersView_null_RoomInviteMembersView-Night-1_3_null_5,NEXUS_5,1.0,en].png b/...viteMembersView_null_RoomInviteMembersView-Night-1_3_null_5,NEXUS_5,1.0,en].png
diff --git a/...viteMembersView_null_RoomInviteMembersView-Night-1_3_null_6,NEXUS_5,1.0,en].png b/...viteMembersView_null_RoomInviteMembersView-Night-1_3_null_6,NEXUS_5,1.0,en].png
diff --git a/...eroles_ChangeRolesView_null_ChangeRolesView-Day-9_10_null_1,NEXUS_5,1.0,en].png b/...eroles_ChangeRolesView_null_ChangeRolesView-Day-9_10_null_1,NEXUS_5,1.0,en].png
diff --git a/...roles_ChangeRolesView_null_ChangeRolesView-Day-9_10_null_10,NEXUS_5,1.0,en].png b/...roles_ChangeRolesView_null_ChangeRolesView-Day-9_10_null_10,NEXUS_5,1.0,en].png
diff --git a/...eroles_ChangeRolesView_null_ChangeRolesView-Day-9_10_null_2,NEXUS_5,1.0,en].png b/...eroles_ChangeRolesView_null_ChangeRolesView-Day-9_10_null_2,NEXUS_5,1.0,en].png
diff --git a/...eroles_ChangeRolesView_null_ChangeRolesView-Day-9_10_null_3,NEXUS_5,1.0,en].png b/...eroles_ChangeRolesView_null_ChangeRolesView-Day-9_10_null_3,NEXUS_5,1.0,en].png
diff --git a/...eroles_ChangeRolesView_null_ChangeRolesView-Day-9_10_null_4,NEXUS_5,1.0,en].png b/...eroles_ChangeRolesView_null_ChangeRolesView-Day-9_10_null_4,NEXUS_5,1.0,en].png
diff --git a/...eroles_ChangeRolesView_null_ChangeRolesView-Day-9_10_null_6,NEXUS_5,1.0,en].png b/...eroles_ChangeRolesView_null_ChangeRolesView-Day-9_10_null_6,NEXUS_5,1.0,en].png
diff --git a/...eroles_ChangeRolesView_null_ChangeRolesView-Day-9_10_null_7,NEXUS_5,1.0,en].png b/...eroles_ChangeRolesView_null_ChangeRolesView-Day-9_10_null_7,NEXUS_5,1.0,en].png
diff --git a/...eroles_ChangeRolesView_null_ChangeRolesView-Day-9_10_null_8,NEXUS_5,1.0,en].png b/...eroles_ChangeRolesView_null_ChangeRolesView-Day-9_10_null_8,NEXUS_5,1.0,en].png
diff --git a/...eroles_ChangeRolesView_null_ChangeRolesView-Day-9_10_null_9,NEXUS_5,1.0,en].png b/...eroles_ChangeRolesView_null_ChangeRolesView-Day-9_10_null_9,NEXUS_5,1.0,en].png
diff --git a/...oles_ChangeRolesView_null_ChangeRolesView-Night-9_11_null_1,NEXUS_5,1.0,en].png b/...oles_ChangeRolesView_null_ChangeRolesView-Night-9_11_null_1,NEXUS_5,1.0,en].png
diff --git a/...les_ChangeRolesView_null_ChangeRolesView-Night-9_11_null_10,NEXUS_5,1.0,en].png b/...les_ChangeRolesView_null_ChangeRolesView-Night-9_11_null_10,NEXUS_5,1.0,en].png
diff --git a/...oles_ChangeRolesView_null_ChangeRolesView-Night-9_11_null_2,NEXUS_5,1.0,en].png b/...oles_ChangeRolesView_null_ChangeRolesView-Night-9_11_null_2,NEXUS_5,1.0,en].png
diff --git a/...oles_ChangeRolesView_null_ChangeRolesView-Night-9_11_null_3,NEXUS_5,1.0,en].png b/...oles_ChangeRolesView_null_ChangeRolesView-Night-9_11_null_3,NEXUS_5,1.0,en].png
diff --git a/...oles_ChangeRolesView_null_ChangeRolesView-Night-9_11_null_4,NEXUS_5,1.0,en].png b/...oles_ChangeRolesView_null_ChangeRolesView-Night-9_11_null_4,NEXUS_5,1.0,en].png
diff --git a/...oles_ChangeRolesView_null_ChangeRolesView-Night-9_11_null_6,NEXUS_5,1.0,en].png b/...oles_ChangeRolesView_null_ChangeRolesView-Night-9_11_null_6,NEXUS_5,1.0,en].png
diff --git a/...oles_ChangeRolesView_null_ChangeRolesView-Night-9_11_null_7,NEXUS_5,1.0,en].png b/...oles_ChangeRolesView_null_ChangeRolesView-Night-9_11_null_7,NEXUS_5,1.0,en].png
diff --git a/...oles_ChangeRolesView_null_ChangeRolesView-Night-9_11_null_8,NEXUS_5,1.0,en].png b/...oles_ChangeRolesView_null_ChangeRolesView-Night-9_11_null_8,NEXUS_5,1.0,en].png
diff --git a/...oles_ChangeRolesView_null_ChangeRolesView-Night-9_11_null_9,NEXUS_5,1.0,en].png b/...oles_ChangeRolesView_null_ChangeRolesView-Night-9_11_null_9,NEXUS_5,1.0,en].png
diff --git a/...UserCannotRemove_null_SelectedUserCannotRemove-Day-8_9_null,NEXUS_5,1.0,en].png b/...UserCannotRemove_null_SelectedUserCannotRemove-Day-8_9_null,NEXUS_5,1.0,en].png
diff --git a/...rCannotRemove_null_SelectedUserCannotRemove-Night-8_10_null,NEXUS_5,1.0,en].png b/...rCannotRemove_null_SelectedUserCannotRemove-Night-8_10_null,NEXUS_5,1.0,en].png
diff --git a/...x.ui.components_SelectedUser_null_SelectedUser-Day-7_8_null,NEXUS_5,1.0,en].png b/...x.ui.components_SelectedUser_null_SelectedUser-Day-7_8_null,NEXUS_5,1.0,en].png
diff --git a/...ui.components_SelectedUser_null_SelectedUser-Night-7_9_null,NEXUS_5,1.0,en].png b/...ui.components_SelectedUser_null_SelectedUser-Night-7_9_null,NEXUS_5,1.0,en].png
diff --git a/...electedUsersRowList_null_SelectedUsersRowList-Day-9_10_null,NEXUS_5,1.0,en].png b/...electedUsersRowList_null_SelectedUsersRowList-Day-9_10_null,NEXUS_5,1.0,en].png
diff --git a/...ectedUsersRowList_null_SelectedUsersRowList-Night-9_11_null,NEXUS_5,1.0,en].png b/...ectedUsersRowList_null_SelectedUsersRowList-Night-9_11_null,NEXUS_5,1.0,en].png
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Adjust the typography used in the selected user component so a user's display name fits better.