Iterate design on several screens: update icons, replace PreferenceTexts (#1771)

- Batch import new icons from the design team.
- Rename _september icons since they're just extra icons that need to be integrated in Compound in the future, and it should be ok if we don't distinguish between ic_september_*, ic_november_* etc., so all icons are now simply ic_* in the designsystem module.
- Create a new CompoundIconListPreviewProvider to add chunked lists of icons for previews. Add an exception for it to Konsist.
- Move some icons to use Compound icons.
- Remove most PreferenceText usages, use ListItem instead.

---------

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

features/createroom/impl/src/main/kotlin/io/element/android/features/createroom/impl/root/CreateRoomRootView.kt

@@ -140,7 +140,7 @@ private fun CreateRoomActionButtonsList(
 ) {
     Column(modifier = modifier) {
         CreateRoomActionButton(
-            iconRes = CommonDrawables.ic_groups,
+            iconRes = CommonDrawables.ic_compound_plus,
             text = stringResource(id = R.string.screen_create_room_action_create_room),
             onClick = onNewRoomClicked,
         )

features/location/impl/src/main/kotlin/io/element/android/features/location/impl/send/SendLocationView.kt

@@ -18,7 +18,6 @@ package io.element.android.features.location.impl.send
 
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.asPaddingValues
@@ -27,9 +26,6 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.LocationSearching
-import androidx.compose.material.icons.filled.MyLocation
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.ListItem
 import androidx.compose.material3.SheetValue
@@ -68,7 +64,7 @@ import io.element.android.libraries.maplibre.compose.rememberCameraPositionState
 import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.ui.strings.CommonStrings
 
-@OptIn(ExperimentalMaterial3Api::class, ExperimentalLayoutApi::class)
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
 fun SendLocationView(
     state: SendLocationState,
@@ -215,8 +211,8 @@ fun SendLocationView(
                     .padding(end = 16.dp, bottom = 72.dp + navBarPadding),
             ) {
                 when (state.mode) {
-                    SendLocationState.Mode.PinLocation -> Icon(imageVector = Icons.Default.LocationSearching, contentDescription = null)
-                    SendLocationState.Mode.SenderLocation -> Icon(imageVector = Icons.Default.MyLocation, contentDescription = null)
+                    SendLocationState.Mode.PinLocation -> Icon(resourceId = CommonDrawables.ic_location_navigator, contentDescription = null)
+                    SendLocationState.Mode.SenderLocation -> Icon(resourceId = CommonDrawables.ic_location_navigator_centered, contentDescription = null)
                 }
             }
         }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/actionlist/ActionListView.kt

@@ -26,6 +26,8 @@ import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.imePadding
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
@@ -33,9 +35,6 @@ import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.ListItem
-import androidx.compose.material.Text
 import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
@@ -70,12 +69,17 @@ import io.element.android.features.messages.impl.timeline.model.event.TimelineIt
 import io.element.android.features.messages.impl.utils.messagesummary.MessageSummaryFormatterImpl
 import io.element.android.libraries.designsystem.components.avatar.Avatar
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
-import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.components.list.ListItemContent
 import io.element.android.libraries.designsystem.preview.ElementPreview
+import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.text.toSp
 import io.element.android.libraries.designsystem.theme.components.HorizontalDivider
 import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.designsystem.theme.components.IconSource
+import io.element.android.libraries.designsystem.theme.components.ListItem
+import io.element.android.libraries.designsystem.theme.components.ListItemStyle
 import io.element.android.libraries.designsystem.theme.components.ModalBottomSheet
+import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.theme.components.hide
 import io.element.android.libraries.designsystem.utils.CommonDrawables
 import io.element.android.libraries.matrix.ui.components.AttachmentThumbnail
@@ -140,15 +144,13 @@ fun ActionListView(
                 onEmojiReactionClicked = ::onEmojiReactionClicked,
                 onCustomReactionClicked = ::onCustomReactionClicked,
                 modifier = Modifier
-                    .padding(bottom = 32.dp)
-//                    .navigationBarsPadding() - FIXME after https://issuetracker.google.com/issues/275849044
-//                    .imePadding()
+                    .navigationBarsPadding()
+                    .imePadding()
             )
         }
     }
 }
 
-@OptIn(ExperimentalMaterialApi::class)
 @Composable
 private fun SheetContent(
     state: ActionListState,
@@ -198,18 +200,13 @@ private fun SheetContent(
                         modifier = Modifier.clickable {
                             onActionClicked(action)
                         },
-                        text = {
-                            Text(
-                                text = stringResource(id = action.titleRes),
-                                color = if (action.destructive) MaterialTheme.colorScheme.error else MaterialTheme.colorScheme.primary,
-                            )
+                        headlineContent = {
+                            Text(text = stringResource(id = action.titleRes))
                         },
-                        icon = {
-                            Icon(
-                                resourceId = action.icon,
-                                contentDescription = "",
-                                tint = if (action.destructive) MaterialTheme.colorScheme.error else MaterialTheme.colorScheme.primary,
-                            )
+                        leadingContent = ListItemContent.Icon(IconSource.Resource(action.icon)),
+                        style = when {
+                            action.destructive -> ListItemStyle.Destructive
+                            else -> ListItemStyle.Primary
                         }
                     )
                 }
@@ -373,7 +370,7 @@ private fun EmojiReactionsRow(
             contentAlignment = Alignment.Center
         ) {
             Icon(
-                resourceId = CommonDrawables.ic_september_add_reaction,
+                resourceId = CommonDrawables.ic_add_reaction,
                 contentDescription = "Emojis",
                 tint = MaterialTheme.colorScheme.secondary,
                 modifier = Modifier
@@ -410,8 +407,7 @@ private fun EmojiButton(
     ) {
         Text(
             emoji,
-            fontSize = 24.dp.toSp(),
-            color = Color.White,
+            style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = 24.dp.toSp(), color = Color.White),
             modifier = Modifier
                 .clickable(
                     enabled = true,

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/actionlist/model/TimelineItemAction.kt

@@ -28,13 +28,13 @@ sealed class TimelineItemAction(
     @DrawableRes val icon: Int,
     val destructive: Boolean = false
 ) {
-    data object Forward : TimelineItemAction(CommonStrings.action_forward, CommonDrawables.ic_september_forward)
-    data object Copy : TimelineItemAction(CommonStrings.action_copy, CommonDrawables.ic_september_copy)
+    data object Forward : TimelineItemAction(CommonStrings.action_forward, CommonDrawables.ic_forward)
+    data object Copy : TimelineItemAction(CommonStrings.action_copy, CommonDrawables.ic_copy)
     data object Redact : TimelineItemAction(CommonStrings.action_remove, CommonDrawables.ic_compound_delete, destructive = true)
-    data object Reply : TimelineItemAction(CommonStrings.action_reply, CommonDrawables.ic_september_reply)
-    data object ReplyInThread : TimelineItemAction(CommonStrings.action_reply_in_thread, CommonDrawables.ic_september_reply)
-    data object Edit : TimelineItemAction(CommonStrings.action_edit, CommonDrawables.ic_september_edit_outline)
-    data object ViewSource : TimelineItemAction(CommonStrings.action_view_source, CommonDrawables.ic_september_view_source)
+    data object Reply : TimelineItemAction(CommonStrings.action_reply, CommonDrawables.ic_reply)
+    data object ReplyInThread : TimelineItemAction(CommonStrings.action_reply_in_thread, CommonDrawables.ic_reply)
+    data object Edit : TimelineItemAction(CommonStrings.action_edit, CommonDrawables.ic_edit_outline)
+    data object ViewSource : TimelineItemAction(CommonStrings.action_view_source, CommonDrawables.ic_developer_options)
     data object ReportContent : TimelineItemAction(CommonStrings.action_report_content, CommonDrawables.ic_compound_chat_problem, destructive = true)
     data object EndPoll : TimelineItemAction(CommonStrings.action_end_poll, CommonDrawables.ic_poll_end)
 }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/media/local/LocalMediaView.kt

@@ -236,7 +236,7 @@ private fun MediaFileView(
             ) {
                 Icon(
                     imageVector = if (isAudio) Icons.Outlined.GraphicEq else null,
-                    resourceId = if (isAudio) null else CommonDrawables.ic_september_attachment,
+                    resourceId = if (isAudio) null else CommonDrawables.ic_attachment,
                     contentDescription = null,
                     tint = MaterialTheme.colorScheme.background,
                     modifier = Modifier

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/messagecomposer/AttachmentsBottomSheet.kt

@@ -19,9 +19,8 @@ package io.element.android.features.messages.impl.messagecomposer
 import androidx.activity.compose.BackHandler
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.padding
-import androidx.compose.material.ExperimentalMaterialApi
-import androidx.compose.material.ListItem
+import androidx.compose.foundation.layout.imePadding
+import androidx.compose.foundation.layout.navigationBarsPadding
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.Composable
@@ -33,12 +32,14 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalView
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.unit.dp
 import io.element.android.features.messages.impl.R
 import io.element.android.libraries.androidutils.ui.hideKeyboard
-import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.components.list.ListItemContent
 import io.element.android.libraries.designsystem.preview.ElementPreview
-import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.theme.components.IconSource
+import io.element.android.libraries.designsystem.theme.components.ListItem
+import io.element.android.libraries.designsystem.theme.components.ListItemStyle
 import io.element.android.libraries.designsystem.theme.components.ModalBottomSheet
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.utils.CommonDrawables
@@ -93,7 +94,6 @@ internal fun AttachmentsBottomSheet(
     }
 }
 
-@OptIn(ExperimentalMaterialApi::class)
 @Composable
 private fun AttachmentSourcePickerMenu(
     state: MessageComposerState,
@@ -103,28 +103,33 @@ private fun AttachmentSourcePickerMenu(
     modifier: Modifier = Modifier,
 ) {
     Column(
-        modifier.padding(bottom = 32.dp)
-//        .navigationBarsPadding() - FIXME after https://issuetracker.google.com/issues/275849044
+        modifier = modifier
+            .navigationBarsPadding()
+            .imePadding()
     ) {
         ListItem(
             modifier = Modifier.clickable { state.eventSink(MessageComposerEvents.PickAttachmentSource.FromGallery) },
-            icon = { Icon(CommonDrawables.ic_september_photo_video_library, null) },
-            text = { Text(stringResource(R.string.screen_room_attachment_source_gallery)) },
+            leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_image)),
+            headlineContent = { Text(stringResource(R.string.screen_room_attachment_source_gallery)) },
+            style = ListItemStyle.Primary,
         )
         ListItem(
             modifier = Modifier.clickable { state.eventSink(MessageComposerEvents.PickAttachmentSource.FromFiles) },
-            icon = { Icon(CommonDrawables.ic_september_attachment, null) },
-            text = { Text(stringResource(R.string.screen_room_attachment_source_files)) },
+            leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_attachment)),
+            headlineContent = { Text(stringResource(R.string.screen_room_attachment_source_files)) },
+            style = ListItemStyle.Primary,
         )
         ListItem(
             modifier = Modifier.clickable { state.eventSink(MessageComposerEvents.PickAttachmentSource.PhotoFromCamera) },
-            icon = { Icon(CommonDrawables.ic_september_take_photo_camera, null) },
-            text = { Text(stringResource(R.string.screen_room_attachment_source_camera_photo)) },
+            leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_take_photo_camera, )),
+            headlineContent = { Text(stringResource(R.string.screen_room_attachment_source_camera_photo)) },
+            style = ListItemStyle.Primary,
         )
         ListItem(
             modifier = Modifier.clickable { state.eventSink(MessageComposerEvents.PickAttachmentSource.VideoFromCamera) },
-            icon = { Icon(CommonDrawables.ic_september_video_call, null) },
-            text = { Text(stringResource(R.string.screen_room_attachment_source_camera_video)) },
+            leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_video_call)),
+            headlineContent = { Text(stringResource(R.string.screen_room_attachment_source_camera_video)) },
+            style = ListItemStyle.Primary,
         )
         if (state.canShareLocation) {
             ListItem(
@@ -132,8 +137,9 @@ private fun AttachmentSourcePickerMenu(
                     state.eventSink(MessageComposerEvents.PickAttachmentSource.Location)
                     onSendLocationClicked()
                 },
-                icon = { Icon(CommonDrawables.ic_september_location, null) },
-                text = { Text(stringResource(R.string.screen_room_attachment_source_location)) },
+                leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_location_pin) ),
+                headlineContent = { Text(stringResource(R.string.screen_room_attachment_source_location)) },
+                style = ListItemStyle.Primary,
             )
         }
         if (state.canCreatePoll) {
@@ -142,15 +148,17 @@ private fun AttachmentSourcePickerMenu(
                     state.eventSink(MessageComposerEvents.PickAttachmentSource.Poll)
                     onCreatePollClicked()
                 },
-                icon = { Icon(CommonDrawables.ic_compound_polls, null) },
-                text = { Text(stringResource(R.string.screen_room_attachment_source_poll)) },
+                leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_compound_polls)),
+                headlineContent = { Text(stringResource(R.string.screen_room_attachment_source_poll)) },
+                style = ListItemStyle.Primary,
             )
         }
         if (enableTextFormatting) {
             ListItem(
                 modifier = Modifier.clickable { state.eventSink(MessageComposerEvents.ToggleTextFormatting(enabled = true)) },
-                icon = { Icon(CommonDrawables.ic_september_text_formatting, null) },
-                text = { Text(stringResource(R.string.screen_room_attachment_text_formatting)) },
+                leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_text_formatting, null)),
+                headlineContent = { Text(stringResource(R.string.screen_room_attachment_text_formatting)) },
+                style = ListItemStyle.Primary,
             )
         }
     }

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/MessagesReactionButton.kt

@@ -181,7 +181,7 @@ internal fun MessagesReactionButtonPreview(@PreviewParameter(AggregatedReactionP
 @Composable
 internal fun MessagesAddReactionButtonPreview() = ElementPreview {
     MessagesReactionButton(
-        content = MessagesReactionsButtonContent.Icon(CommonDrawables.ic_september_add_reaction),
+        content = MessagesReactionsButtonContent.Icon(CommonDrawables.ic_add_reaction),
         onClick = {},
         onLongClick = {}
     )

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/ReplySwipeIndicator.kt

@@ -49,7 +49,7 @@ fun RowScope.ReplySwipeIndicator(
                 alpha = swipeProgress()
             },
         contentDescription = null,
-        resourceId = CommonDrawables.ic_september_reply,
+        resourceId = CommonDrawables.ic_reply,
     )
 }
 

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemReactionsLayout.kt

@@ -196,7 +196,7 @@ internal fun TimelineItemReactionsLayoutPreview() = ElementPreview {
         },
         addMoreButton = {
             MessagesReactionButton(
-                content = MessagesReactionsButtonContent.Icon(CommonDrawables.ic_september_add_reaction),
+                content = MessagesReactionsButtonContent.Icon(CommonDrawables.ic_add_reaction),
                 onClick = {},
                 onLongClick = {}
             )

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/TimelineItemReactionsView.kt

@@ -95,7 +95,7 @@ private fun TimelineItemReactionsView(
             },
             addMoreButton = {
                 MessagesReactionButton(
-                    content = MessagesReactionsButtonContent.Icon(CommonDrawables.ic_september_add_reaction),
+                    content = MessagesReactionsButtonContent.Icon(CommonDrawables.ic_add_reaction),
                     onClick = onMoreReactionsClick,
                     onLongClick = {}
                 )

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemEncryptedView.kt

@@ -35,7 +35,7 @@ fun TimelineItemEncryptedView(
     TimelineItemInformativeView(
         text = stringResource(id = CommonStrings.common_waiting_for_decryption_key),
         iconDescription = stringResource(id = CommonStrings.dialog_title_warning),
-        iconResourceId = CommonDrawables.ic_september_decryption_error,
+        iconResourceId = CommonDrawables.ic_waiting_to_decrypt,
         extraPadding = extraPadding,
         modifier = modifier
     )

features/messages/impl/src/main/kotlin/io/element/android/features/messages/impl/timeline/components/event/TimelineItemFileView.kt

@@ -59,7 +59,7 @@ fun TimelineItemFileView(
             contentAlignment = Alignment.Center,
         ) {
             Icon(
-                resourceId = CommonDrawables.ic_september_attachment,
+                resourceId = CommonDrawables.ic_attachment,
                 contentDescription = "OpenFile",
                 tint = ElementTheme.materialColors.primary,
                 modifier = Modifier

features/preferences/impl/src/main/kotlin/io/element/android/features/preferences/impl/root/PreferencesRootView.kt

@@ -20,7 +20,6 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Lock
 import androidx.compose.material.icons.outlined.InsertChart
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -135,7 +134,7 @@ fun PreferencesRootView(
         if (state.showLockScreenSettings) {
             ListItem(
                 headlineContent = { Text(stringResource(id = CommonStrings.common_screen_lock)) },
-                leadingContent = ListItemContent.Icon(IconSource.Vector(Icons.Default.Lock)),
+                leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_lock_outline)),
                 onClick = onOpenLockScreenSettings,
             )
         }

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/RoomDetailsView.kt

@@ -32,7 +32,6 @@ import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.MoreVert
 import androidx.compose.material.icons.outlined.Add
-import androidx.compose.material.icons.outlined.Person
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
@@ -57,6 +56,7 @@ import io.element.android.libraries.designsystem.components.avatar.AvatarData
 import io.element.android.libraries.designsystem.components.avatar.AvatarSize
 import io.element.android.libraries.designsystem.components.button.BackButton
 import io.element.android.libraries.designsystem.components.button.MainActionButton
+import io.element.android.libraries.designsystem.components.list.ListItemContent
 import io.element.android.libraries.designsystem.components.preferences.PreferenceCategory
 import io.element.android.libraries.designsystem.components.preferences.PreferenceText
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
@@ -66,6 +66,9 @@ import io.element.android.libraries.designsystem.theme.components.DropdownMenu
 import io.element.android.libraries.designsystem.theme.components.DropdownMenuItem
 import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.IconButton
+import io.element.android.libraries.designsystem.theme.components.IconSource
+import io.element.android.libraries.designsystem.theme.components.ListItem
+import io.element.android.libraries.designsystem.theme.components.ListItemStyle
 import io.element.android.libraries.designsystem.theme.components.Scaffold
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.theme.components.TopAppBar
@@ -324,10 +327,10 @@ private fun NotificationSection(
         stringResource(R.string.screen_room_details_notification_mode_custom)
     }
     PreferenceCategory(modifier = modifier) {
-        PreferenceText(
-            title = stringResource(R.string.screen_room_details_notification_title),
-            subtitle = subtitle,
-            iconResourceId = CommonDrawables.ic_compound_notifications,
+        ListItem(
+            headlineContent = { Text(text = stringResource(R.string.screen_room_details_notification_title)) },
+            supportingContent = { Text(text = subtitle) },
+            leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_compound_notifications)),
             onClick = openRoomNotificationSettings,
         )
     }
@@ -340,10 +343,10 @@ private fun MembersSection(
     modifier: Modifier = Modifier,
 ) {
     PreferenceCategory(modifier = modifier) {
-        PreferenceText(
-            title = stringResource(CommonStrings.common_people),
-            icon = Icons.Outlined.Person,
-            currentValue = memberCount.toString(),
+        ListItem(
+            headlineContent = { Text(stringResource(CommonStrings.common_people)) },
+            leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_user)),
+            trailingContent = ListItemContent.Text(memberCount.toString()),
             onClick = openRoomMemberList,
         )
     }
@@ -355,9 +358,9 @@ private fun InviteSection(
     modifier: Modifier = Modifier,
 ) {
     PreferenceCategory(modifier = modifier) {
-        PreferenceText(
-            title = stringResource(R.string.screen_room_details_invite_people_title),
-            iconResourceId = CommonDrawables.ic_compound_user_add,
+        ListItem(
+            headlineContent = { Text(stringResource(R.string.screen_room_details_invite_people_title)) },
+            leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_user_add)),
             onClick = invitePeople,
         )
     }
@@ -366,10 +369,10 @@ private fun InviteSection(
 @Composable
 private fun SecuritySection(modifier: Modifier = Modifier) {
     PreferenceCategory(title = stringResource(R.string.screen_room_details_security_title), modifier = modifier) {
-        PreferenceText(
-            title = stringResource(R.string.screen_room_details_encryption_enabled_title),
-            subtitle = stringResource(R.string.screen_room_details_encryption_enabled_subtitle),
-            iconResourceId = CommonDrawables.ic_compound_lock,
+        ListItem(
+            headlineContent = { Text(stringResource(R.string.screen_room_details_encryption_enabled_title)) },
+            supportingContent = { Text(stringResource(R.string.screen_room_details_encryption_enabled_subtitle)) },
+            leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_encryption_enabled)),
         )
     }
 }
@@ -377,10 +380,10 @@ private fun SecuritySection(modifier: Modifier = Modifier) {
 @Composable
 private fun OtherActionsSection(onLeaveRoom: () -> Unit, modifier: Modifier = Modifier) {
     PreferenceCategory(showDivider = false, modifier = modifier) {
-        PreferenceText(
-            title = stringResource(R.string.screen_room_details_leave_room_title),
-            iconResourceId = CommonDrawables.ic_compound_leave,
-            tintColor = MaterialTheme.colorScheme.error,
+        ListItem(
+            headlineContent = { Text(stringResource(R.string.screen_room_details_leave_room_title)) },
+            leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_compound_leave)),
+            style = ListItemStyle.Destructive,
             onClick = onLeaveRoom,
         )
     }

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/blockuser/BlockUserSection.kt

@@ -16,20 +16,26 @@
 
 package io.element.android.features.roomdetails.impl.blockuser
 
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.Block
-import androidx.compose.material3.MaterialTheme
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.progressSemantics
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
 import io.element.android.features.roomdetails.impl.R
 import io.element.android.features.roomdetails.impl.members.details.RoomMemberDetailsEvents
 import io.element.android.features.roomdetails.impl.members.details.RoomMemberDetailsState
 import io.element.android.libraries.architecture.Async
 import io.element.android.libraries.core.bool.orFalse
 import io.element.android.libraries.designsystem.components.dialogs.RetryDialog
+import io.element.android.libraries.designsystem.components.list.ListItemContent
 import io.element.android.libraries.designsystem.components.preferences.PreferenceCategory
-import io.element.android.libraries.designsystem.components.preferences.PreferenceText
+import io.element.android.libraries.designsystem.theme.components.CircularProgressIndicator
+import io.element.android.libraries.designsystem.theme.components.IconSource
+import io.element.android.libraries.designsystem.theme.components.ListItem
+import io.element.android.libraries.designsystem.theme.components.ListItemStyle
+import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.designsystem.utils.CommonDrawables
 import io.element.android.libraries.ui.strings.CommonStrings
 
 @Composable
@@ -65,21 +71,29 @@ private fun PreferenceBlockUser(
     eventSink: (RoomMemberDetailsEvents) -> Unit,
     modifier: Modifier = Modifier,
 ) {
+    val loadingCurrentValue = @Composable {
+        CircularProgressIndicator(
+            modifier = Modifier
+                .progressSemantics()
+                .size(20.dp),
+            strokeWidth = 2.dp
+        )
+    }
     if (isBlocked.orFalse()) {
-        PreferenceText(
-            title = stringResource(R.string.screen_dm_details_unblock_user),
-            icon = Icons.Outlined.Block,
+        ListItem(
+            headlineContent = { Text(stringResource(R.string.screen_dm_details_unblock_user)) },
+            leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_compound_block)),
             onClick = { if (!isLoading) eventSink(RoomMemberDetailsEvents.UnblockUser(needsConfirmation = true)) },
-            loadingCurrentValue = isLoading,
+            trailingContent = if (isLoading) ListItemContent.Custom(loadingCurrentValue) else null,
             modifier = modifier,
         )
     } else {
-        PreferenceText(
-            title = stringResource(R.string.screen_dm_details_block_user),
-            icon = Icons.Outlined.Block,
-            tintColor = MaterialTheme.colorScheme.error,
+        ListItem(
+            headlineContent = { Text(stringResource(R.string.screen_dm_details_block_user)) },
+            leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_compound_block)),
+            style = ListItemStyle.Destructive,
             onClick = { if (!isLoading) eventSink(RoomMemberDetailsEvents.BlockUser(needsConfirmation = true)) },
-            loadingCurrentValue = isLoading,
+            trailingContent = if (isLoading) ListItemContent.Custom(loadingCurrentValue) else null,
             modifier = modifier,
         )
     }

features/roomdetails/impl/src/main/kotlin/io/element/android/features/roomdetails/impl/notificationsettings/UserDefinedRoomNotificationSettingsView.kt

@@ -22,25 +22,22 @@ import androidx.compose.foundation.layout.consumeWindowInsets
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.res.vectorResource
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import io.element.android.features.roomdetails.impl.R
 import io.element.android.libraries.core.bool.orTrue
 import io.element.android.libraries.designsystem.components.async.AsyncView
 import io.element.android.libraries.designsystem.components.button.BackButton
-import io.element.android.libraries.designsystem.components.preferences.PreferenceText
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.theme.components.ListItem
+import io.element.android.libraries.designsystem.theme.components.ListItemStyle
 import io.element.android.libraries.designsystem.theme.components.Scaffold
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.theme.components.TopAppBar
-import io.element.android.libraries.designsystem.utils.CommonDrawables
 
 @Composable
 fun UserDefinedRoomNotificationSettingsView(
@@ -75,10 +72,9 @@ fun UserDefinedRoomNotificationSettingsView(
                 )
             }
 
-            PreferenceText(
-                title = stringResource(R.string.screen_room_notification_settings_edit_remove_setting),
-                icon = ImageVector.vectorResource(CommonDrawables.ic_compound_delete),
-                tintColor = MaterialTheme.colorScheme.error,
+            ListItem(
+                headlineContent = { Text(stringResource(R.string.screen_room_notification_settings_edit_remove_setting)) },
+                style = ListItemStyle.Destructive,
                 onClick = {
                     state.eventSink(RoomNotificationSettingsEvents.DeleteCustomNotification)
                 }

features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/RoomListContextMenu.kt

@@ -18,20 +18,18 @@ package io.element.android.features.roomlist.impl
 
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.size
 import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.ListItem
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.unit.dp
-import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.components.list.ListItemContent
 import io.element.android.libraries.designsystem.preview.ElementPreview
-import io.element.android.libraries.designsystem.theme.components.Icon
+import io.element.android.libraries.designsystem.preview.PreviewsDayNight
+import io.element.android.libraries.designsystem.theme.components.IconSource
+import io.element.android.libraries.designsystem.theme.components.ListItem
+import io.element.android.libraries.designsystem.theme.components.ListItemStyle
 import io.element.android.libraries.designsystem.theme.components.ModalBottomSheet
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.designsystem.utils.CommonDrawables
@@ -88,34 +86,25 @@ private fun RoomListModalBottomSheetContent(
                 )
             },
             modifier = Modifier.clickable { onRoomSettingsClicked(contextMenu.roomId) },
-            leadingContent = {
-                Icon(
-                    resourceId = CommonDrawables.ic_compound_settings,
-                    contentDescription = stringResource(id = CommonStrings.common_settings),
-                    modifier = Modifier.size(20.dp),
-                    tint = MaterialTheme.colorScheme.onSurface,
+            leadingContent = ListItemContent.Icon(
+                iconSource = IconSource.Resource(
+                    CommonDrawables.ic_compound_settings,
+                    contentDescription = stringResource(id = CommonStrings.common_settings)
                 )
-            }
+            ),
+            style = ListItemStyle.Primary,
         )
         ListItem(
-            headlineContent = {
-                Text(
-                    text = stringResource(id = CommonStrings.action_leave_room),
-                    color = MaterialTheme.colorScheme.error,
-                    style = MaterialTheme.typography.bodyLarge,
-                )
-            },
+            headlineContent = { Text(text = stringResource(id = CommonStrings.action_leave_room)) },
             modifier = Modifier.clickable { onLeaveRoomClicked(contextMenu.roomId) },
-            leadingContent = {
-                Icon(
-                    resourceId = CommonDrawables.ic_compound_leave,
-                    contentDescription = stringResource(id = CommonStrings.action_leave_room),
-                    modifier = Modifier.size(20.dp),
-                    tint = MaterialTheme.colorScheme.error,
+            leadingContent = ListItemContent.Icon(
+                iconSource = IconSource.Resource(
+                    CommonDrawables.ic_compound_leave,
+                    contentDescription = stringResource(id = CommonStrings.action_leave_room)
                 )
-            }
+            ),
+            style = ListItemStyle.Destructive,
         )
-        Spacer(modifier = Modifier.height(32.dp))
     }
 }
 

features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/RoomListView.kt

@@ -243,7 +243,7 @@ private fun RoomListContent(
             ) {
                 Icon(
                     // Note cannot use Icons.Outlined.EditSquare, it does not exist :/
-                    resourceId = CommonDrawables.ic_september_compose_button,
+                    resourceId = CommonDrawables.ic_new_message,
                     contentDescription = stringResource(id = R.string.screen_roomlist_a11y_create_message)
                 )
             }

features/roomlist/impl/src/main/kotlin/io/element/android/features/roomlist/impl/components/RoomListTopBar.kt

@@ -253,7 +253,7 @@ private fun DefaultRoomListTopBar(
                             showMenu = false
                             onMenuActionClicked(RoomListMenuAction.ReportBug)
                         },
-                        text = { Text(stringResource(id = CommonStrings.common_report_a_bug)) },
+                        text = { Text(stringResource(id = CommonStrings.common_report_a_problem)) },
                         leadingIcon = {
                             Icon(
                                 resourceId = CommonDrawables.ic_compound_chat_problem,

features/securebackup/impl/src/main/kotlin/io/element/android/features/securebackup/impl/setup/views/RecoveryKeyView.kt

@@ -114,7 +114,7 @@ private fun RecoveryKeyStaticContent(
                 modifier = Modifier.weight(1f),
             )
             Icon(
-                resourceId = CommonDrawables.ic_september_copy,
+                resourceId = CommonDrawables.ic_copy,
                 contentDescription = stringResource(id = CommonStrings.action_copy),
                 tint = ElementTheme.colors.iconSecondary,
             )