Iterate design on Settings screen (#1763)

* Iterate design on Settings screen:

- Set new icons provided by design.
- Replace `PreferenceText` usages with `ListItem`.
- Add missing icons, and a new way to group them for previews.

---------

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

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

@@ -34,7 +34,7 @@ fun TimelineItemUnknownView(
     TimelineItemInformativeView(
         text = stringResource(id = CommonStrings.common_unsupported_event),
         iconDescription = stringResource(id = CommonStrings.dialog_title_warning),
-        iconResourceId = CommonDrawables.ic_compound_info,
+        iconResourceId = CommonDrawables.ic_compound_info_solid,
         extraPadding = extraPadding,
         modifier = modifier
     )

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

@@ -56,7 +56,7 @@ fun TimelineEncryptedHistoryBannerView(
     ) {
         Icon(
             modifier = Modifier.size(20.dp),
-            resourceId = CommonDrawables.ic_compound_info,
+            resourceId = CommonDrawables.ic_compound_info_solid,
             contentDescription = "Info",
             tint = ElementTheme.colors.iconInfoPrimary
         )

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

@@ -22,7 +22,6 @@ 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.material.icons.outlined.VerifiedUser
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
@@ -30,12 +29,15 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.unit.dp
 import io.element.android.features.preferences.impl.user.UserPreferences
+import io.element.android.libraries.designsystem.components.list.ListItemContent
 import io.element.android.libraries.designsystem.components.preferences.PreferencePage
-import io.element.android.libraries.designsystem.components.preferences.PreferenceText
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 import io.element.android.libraries.designsystem.preview.PreviewWithLargeHeight
 import io.element.android.libraries.designsystem.theme.components.HorizontalDivider
+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.designsystem.utils.snackbar.SnackbarHost
@@ -79,17 +81,17 @@ fun PreferencesRootView(
             user = state.myUser,
         )
         if (state.showCompleteVerification) {
-            PreferenceText(
-                title = stringResource(id = CommonStrings.action_complete_verification),
-                icon = Icons.Outlined.VerifiedUser,
-                onClick = onVerifyClicked,
+            ListItem(
+                headlineContent = { Text(text = stringResource(CommonStrings.common_verify_device)) },
+                leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_compound_check_circle)),
+                onClick = onVerifyClicked
             )
         }
         if (state.showSecureBackup) {
-            PreferenceText(
-                title = stringResource(id = CommonStrings.common_chat_backup),
-                iconResourceId = CommonDrawables.ic_key_filled,
-                showEndBadge = state.showSecureBackupBadge,
+            ListItem(
+                headlineContent = { Text(stringResource(id = CommonStrings.common_chat_backup)) },
+                leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_key_filled),),
+                trailingContent = ListItemContent.Badge.takeIf { state.showSecureBackupBadge },
                 onClick = onSecureBackupClicked,
             )
         }
@@ -97,65 +99,68 @@ fun PreferencesRootView(
             HorizontalDivider()
         }
         if (state.accountManagementUrl != null) {
-            PreferenceText(
-                title = stringResource(id = CommonStrings.action_manage_account),
-                iconResourceId = CommonDrawables.ic_compound_pop_out,
+            ListItem(
+                headlineContent = { Text(stringResource(id = CommonStrings.action_manage_account)) },
+                leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_compound_user)),
+                trailingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_compound_pop_out)),
                 onClick = { onManageAccountClicked(state.accountManagementUrl) },
             )
             HorizontalDivider()
         }
         if (state.showAnalyticsSettings) {
-            PreferenceText(
-                title = stringResource(id = CommonStrings.common_analytics),
-                icon = Icons.Outlined.InsertChart,
+            ListItem(
+                headlineContent = { Text(stringResource(id = CommonStrings.common_analytics)) },
+                leadingContent = ListItemContent.Icon(IconSource.Vector(Icons.Outlined.InsertChart)),
                 onClick = onOpenAnalytics,
             )
         }
         if (state.showNotificationSettings) {
-            PreferenceText(
-                title = stringResource(id = CommonStrings.screen_notification_settings_title),
-                iconResourceId = CommonDrawables.ic_compound_notifications,
+            ListItem(
+                headlineContent = { Text(stringResource(id = CommonStrings.screen_notification_settings_title)) },
+                leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_compound_notifications)),
                 onClick = onOpenNotificationSettings,
             )
         }
-        PreferenceText(
-            title = stringResource(id = CommonStrings.action_report_bug),
-            iconResourceId = CommonDrawables.ic_compound_chat_problem,
+        ListItem(
+            headlineContent = { Text(stringResource(id = CommonStrings.common_report_a_problem)) },
+            leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_compound_chat_problem)),
             onClick = onOpenRageShake
         )
-        PreferenceText(
-            title = stringResource(id = CommonStrings.common_about),
-            iconResourceId = CommonDrawables.ic_compound_info,
+        ListItem(
+            headlineContent = { Text(stringResource(id = CommonStrings.common_about)) },
+            leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_compound_info)),
             onClick = onOpenAbout,
         )
         if (state.showLockScreenSettings) {
-            PreferenceText(
-                title = stringResource(id = CommonStrings.common_screen_lock),
-                icon = Icons.Default.Lock,
+            ListItem(
+                headlineContent = { Text(stringResource(id = CommonStrings.common_screen_lock)) },
+                leadingContent = ListItemContent.Icon(IconSource.Vector(Icons.Default.Lock)),
                 onClick = onOpenLockScreenSettings,
             )
         }
         HorizontalDivider()
         if (state.devicesManagementUrl != null) {
-            PreferenceText(
-                title = stringResource(id = CommonStrings.action_manage_devices),
-                iconResourceId = CommonDrawables.ic_compound_pop_out,
+            ListItem(
+                headlineContent = { Text(stringResource(id = CommonStrings.action_manage_devices)) },
+                leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_devices)),
+                trailingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_compound_pop_out)),
                 onClick = { onManageAccountClicked(state.devicesManagementUrl) },
             )
             HorizontalDivider()
         }
-        PreferenceText(
-            title = stringResource(id = CommonStrings.common_advanced_settings),
-            iconResourceId = CommonDrawables.ic_compound_settings,
+        ListItem(
+            headlineContent = { Text(stringResource(id = CommonStrings.common_advanced_settings)) },
+            leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_compound_settings)),
             onClick = onOpenAdvancedSettings,
         )
         if (state.showDeveloperSettings) {
             DeveloperPreferencesView(onOpenDeveloperSettings)
         }
         HorizontalDivider()
-        PreferenceText(
-            title = stringResource(id = CommonStrings.action_signout),
-            iconResourceId = CommonDrawables.ic_compound_leave,
+        ListItem(
+            headlineContent = { Text(stringResource(id = CommonStrings.action_signout)) },
+            leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_sign_out)),
+            style = ListItemStyle.Destructive,
             onClick = onSignOutClicked,
         )
         Text(
@@ -172,9 +177,9 @@ fun PreferencesRootView(
 
 @Composable
 private fun DeveloperPreferencesView(onOpenDeveloperSettings: () -> Unit) {
-    PreferenceText(
-        title = stringResource(id = CommonStrings.common_developer_options),
-        iconResourceId = CommonDrawables.ic_developer_mode,
+    ListItem(
+        headlineContent = { Text(stringResource(id = CommonStrings.common_developer_options)) },
+        leadingContent = ListItemContent.Icon(IconSource.Resource(CommonDrawables.ic_developer_options)),
         onClick = onOpenDeveloperSettings
     )
 }

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

@@ -185,7 +185,7 @@ private fun RecoveryKeyFooter(state: RecoveryKeyViewState) {
                     verticalAlignment = Alignment.CenterVertically,
                 ) {
                     Icon(
-                        resourceId = CommonDrawables.ic_compound_info,
+                        resourceId = CommonDrawables.ic_compound_info_solid,
                         contentDescription = null,
                         tint = ElementTheme.colors.iconSecondary,
                         modifier = Modifier