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

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/molecules/InfoListItemMolecule.kt

@@ -78,25 +78,25 @@ internal fun InfoListItemMoleculePreview() {
         ) {
             InfoListItemMolecule(
                 message = { Text("A single item") },
-                icon = { Icon(resourceId = CommonDrawables.ic_compound_info, contentDescription = null) },
+                icon = { Icon(resourceId = CommonDrawables.ic_compound_info_solid, contentDescription = null) },
                 position = InfoListItemPosition.Single,
                 backgroundColor = color,
             )
             InfoListItemMolecule(
                 message = { Text("A top item") },
-                icon = { Icon(resourceId = CommonDrawables.ic_compound_info, contentDescription = null) },
+                icon = { Icon(resourceId = CommonDrawables.ic_compound_info_solid, contentDescription = null) },
                 position = InfoListItemPosition.Top,
                 backgroundColor = color,
             )
             InfoListItemMolecule(
                 message = { Text("A middle item") },
-                icon = { Icon(resourceId = CommonDrawables.ic_compound_info, contentDescription = null) },
+                icon = { Icon(resourceId = CommonDrawables.ic_compound_info_solid, contentDescription = null) },
                 position = InfoListItemPosition.Middle,
                 backgroundColor = color,
             )
             InfoListItemMolecule(
                 message = { Text("A bottom item") },
-                icon = { Icon(resourceId = CommonDrawables.ic_compound_info, contentDescription = null) },
+                icon = { Icon(resourceId = CommonDrawables.ic_compound_info_solid, contentDescription = null) },
                 position = InfoListItemPosition.Bottom,
                 backgroundColor = color,
             )

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/components/list/ListItemContent.kt

@@ -24,6 +24,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.DpSize
 import androidx.compose.ui.unit.dp
+import io.element.android.libraries.designsystem.atomic.atoms.RedIndicatorAtom
 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.Checkbox as CheckboxComponent
@@ -94,6 +95,9 @@ sealed interface ListItemContent {
     /** Displays any custom content. */
     data class Custom(val content: @Composable () -> Unit) : ListItemContent
 
+    /** Displays a badge. */
+    data object Badge : ListItemContent
+
     @Composable
     fun View() {
         when (this) {
@@ -114,12 +118,15 @@ sealed interface ListItemContent {
                 onClick = onClick,
                 enabled = enabled
             )
-            is Icon -> IconComponent(
+            is Icon -> {
+                IconComponent(
                     modifier = Modifier.size(maxCompactSize),
                     painter = iconSource.getPainter(),
                     contentDescription = iconSource.contentDescription
                 )
+            }
             is Text -> TextComponent(modifier = Modifier.widthIn(max = 128.dp), text = text, maxLines = 1, overflow = TextOverflow.Ellipsis)
+            is Badge -> RedIndicatorAtom()
             is Custom -> content()
         }
     }

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/icons/IconsList.kt

@@ -28,6 +28,7 @@ internal val iconsCompound = listOf(
     R.drawable.ic_compound_chat_problem,
     R.drawable.ic_compound_check,
     R.drawable.ic_compound_check_circle,
+    R.drawable.ic_compound_check_circle_solid,
     R.drawable.ic_compound_chevron_down,
     R.drawable.ic_compound_chevron_left,
     R.drawable.ic_compound_chevron_right,
@@ -48,6 +49,7 @@ internal val iconsCompound = listOf(
     R.drawable.ic_compound_filter,
     R.drawable.ic_compound_grid_view,
     R.drawable.ic_compound_info,
+    R.drawable.ic_compound_info_solid,
     R.drawable.ic_compound_leave,
     R.drawable.ic_compound_link,
     R.drawable.ic_compound_lock,
@@ -79,6 +81,7 @@ internal val iconsCompound = listOf(
     R.drawable.ic_compound_spotlight_view,
     R.drawable.ic_compound_threads,
     R.drawable.ic_compound_threads_solid,
+    R.drawable.ic_compound_user,
     R.drawable.ic_compound_user_add,
     R.drawable.ic_compound_user_add_solid,
     R.drawable.ic_compound_user_profile,
@@ -116,7 +119,8 @@ internal val iconsSeptember = listOf(
 // This list and all the drawable it contains should be removed at some point.
 // All the icons should be defined in Compound.
 internal val iconsOther = listOf(
-    R.drawable.ic_developer_mode,
+    R.drawable.ic_developer_options,
+    R.drawable.ic_devices,
     R.drawable.ic_groups,
     R.drawable.ic_indent_decrease,
     R.drawable.ic_indent_increase,
@@ -130,4 +134,5 @@ internal val iconsOther = listOf(
     R.drawable.ic_strikethrough,
     R.drawable.ic_thread_decoration,
     R.drawable.ic_underline,
+    R.drawable.ic_sign_out,
 )

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/icons/IconsPreview.kt

@@ -27,33 +27,40 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.tooling.preview.PreviewParameterProvider
 import androidx.compose.ui.unit.dp
-import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 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.Text
 import io.element.android.libraries.theme.ElementTheme
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.collections.immutable.toPersistentList
 
-@PreviewsDayNight
-@Composable
-internal fun IconsCompoundPart1Preview() = ElementPreview {
-    IconsPreview(
-        title = "R.drawable.ic_compound_* 1 / 2",
-        iconsList = iconsCompound.take(36).toPersistentList(),
-        iconNameTransform = { name ->
-            name.removePrefix("ic_compound_")
-                .replace("_", " ")
-        })
+internal class IconChunkPreviewProvider : PreviewParameterProvider<IconChunk> {
+    override val values: Sequence<IconChunk>
+        get() {
+            val chunks = iconsCompound.chunked(36)
+            return chunks.mapIndexed { index, chunk ->
+                IconChunk(index = index+1, total =  chunks.size, icons = chunk.toPersistentList())
+            }
+                .asSequence()
         }
+}
+
+internal data class IconChunk(
+    val index: Int,
+    val total: Int,
+    val icons: ImmutableList<Int>,
+)
 
 @PreviewsDayNight
 @Composable
-internal fun IconsCompoundPart2Preview() = ElementPreview {
+internal fun IconsCompoundPreview(@PreviewParameter(IconChunkPreviewProvider::class) chunk: IconChunk) = ElementPreview {
     IconsPreview(
-        title = "R.drawable.ic_compound_* 2 / 2",
-        iconsList = iconsCompound.drop(36).toPersistentList(),
+        title = "R.drawable.ic_compound_* ${chunk.index}/${chunk.total}",
+        iconsList = chunk.icons,
         iconNameTransform = { name ->
             name.removePrefix("ic_compound_")
                 .replace("_", " ")

libraries/designsystem/src/main/res/drawable/ic_compound_check_circle.xml

@@ -1,25 +1,9 @@
-<!--
-  ~ Copyright (c) 2023 New Vector Ltd
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~     http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
-
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:width="24dp"
     android:height="24dp"
     android:viewportWidth="24"
     android:viewportHeight="24">
     <path
-      android:pathData="M10.6,13.8L8.45,11.65C8.267,11.467 8.033,11.375 7.75,11.375C7.467,11.375 7.233,11.467 7.05,11.65C6.867,11.833 6.775,12.067 6.775,12.35C6.775,12.633 6.867,12.867 7.05,13.05L9.9,15.9C10.1,16.1 10.333,16.2 10.6,16.2C10.867,16.2 11.1,16.1 11.3,15.9L16.95,10.25C17.133,10.067 17.225,9.833 17.225,9.55C17.225,9.267 17.133,9.033 16.95,8.85C16.767,8.667 16.533,8.575 16.25,8.575C15.967,8.575 15.733,8.667 15.55,8.85L10.6,13.8ZM12,22C10.617,22 9.317,21.737 8.1,21.212C6.883,20.688 5.825,19.975 4.925,19.075C4.025,18.175 3.313,17.117 2.787,15.9C2.263,14.683 2,13.383 2,12C2,10.617 2.263,9.317 2.787,8.1C3.313,6.883 4.025,5.825 4.925,4.925C5.825,4.025 6.883,3.313 8.1,2.787C9.317,2.263 10.617,2 12,2C13.383,2 14.683,2.263 15.9,2.787C17.117,3.313 18.175,4.025 19.075,4.925C19.975,5.825 20.688,6.883 21.212,8.1C21.737,9.317 22,10.617 22,12C22,13.383 21.737,14.683 21.212,15.9C20.688,17.117 19.975,18.175 19.075,19.075C18.175,19.975 17.117,20.688 15.9,21.212C14.683,21.737 13.383,22 12,22Z"
-      android:fillColor="@android:color/white"/>
+        android:fillColor="#FF000000"
+        android:pathData="M10.6 13.8l-2.2-2.2c-0.2-0.2-0.4-0.3-0.7-0.3-0.3 0-0.5 0.1-0.7 0.3-0.2 0.2-0.3 0.4-0.3 0.7 0 0.3 0.1 0.5 0.3 0.7L9.9 15.9c0.2 0.2 0.4 0.3 0.7 0.3 0.3 0 0.5-0.1 0.7-0.3l5.7-5.7c0.2-0.2 0.3-0.4 0.3-0.7 0-0.3-0.1-0.5-0.3-0.7-0.2-0.2-0.4-0.3-0.7-0.3-0.3 0-0.5 0.1-0.7 0.3L10.6 13.8ZM12 22c-1.4 0-2.7-0.3-3.9-0.8-1.2-0.5-2.3-1.2-3.2-2.1-0.9-0.9-1.6-2-2.1-3.2C2.3 14.7 2 13.4 2 12s0.3-2.7 0.8-3.9C3.3 6.9 4 5.8 4.9 4.9c0.9-0.9 2-1.6 3.2-2.1C9.3 2.3 10.6 2 12 2s2.7 0.3 3.9 0.8c1.2 0.5 2.3 1.2 3.2 2.1 0.9 0.9 1.6 2 2.1 3.2C21.7 9.3 22 10.6 22 12s-0.3 2.7-0.8 3.9c-0.5 1.2-1.2 2.3-2.1 3.2-0.9 0.9-2 1.6-3.2 2.1C14.7 21.7 13.4 22 12 22Zm0-2c2.2 0 4.1-0.8 5.7-2.3C19.2 16.1 20 14.2 20 12c0-2.2-0.8-4.1-2.3-5.7C16.1 4.8 14.2 4 12 4 9.8 4 7.9 4.8 6.3 6.3 4.8 7.9 4 9.8 4 12s0.8 4.1 2.3 5.7C7.9 19.2 9.8 20 12 20Z"/>
 </vector>

libraries/designsystem/src/main/res/drawable/ic_compound_check_circle_solid.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M10.6 13.8l-2.2-2.2c-0.2-0.2-0.4-0.3-0.7-0.3-0.3 0-0.5 0.1-0.7 0.3-0.2 0.2-0.3 0.4-0.3 0.7 0 0.3 0.1 0.5 0.3 0.7L9.9 15.9c0.2 0.2 0.4 0.3 0.7 0.3 0.3 0 0.5-0.1 0.7-0.3l5.7-5.7c0.2-0.2 0.3-0.4 0.3-0.7 0-0.3-0.1-0.5-0.3-0.7-0.2-0.2-0.4-0.3-0.7-0.3-0.3 0-0.5 0.1-0.7 0.3L10.6 13.8ZM12 22c-1.4 0-2.7-0.3-3.9-0.8-1.2-0.5-2.3-1.2-3.2-2.1-0.9-0.9-1.6-2-2.1-3.2C2.3 14.7 2 13.4 2 12s0.3-2.7 0.8-3.9C3.3 6.9 4 5.8 4.9 4.9c0.9-0.9 2-1.6 3.2-2.1C9.3 2.3 10.6 2 12 2s2.7 0.3 3.9 0.8c1.2 0.5 2.3 1.2 3.2 2.1 0.9 0.9 1.6 2 2.1 3.2C21.7 9.3 22 10.6 22 12s-0.3 2.7-0.8 3.9c-0.5 1.2-1.2 2.3-2.1 3.2-0.9 0.9-2 1.6-3.2 2.1C14.7 21.7 13.4 22 12 22Z"/>
+</vector>

libraries/designsystem/src/main/res/drawable/ic_compound_info.xml

@@ -1,25 +1,16 @@
-<!--
-  ~ Copyright (c) 2023 New Vector Ltd
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~     http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
-
 <vector xmlns:android="http://schemas.android.com/apk/res/android"
     android:width="24dp"
     android:height="24dp"
     android:viewportWidth="24"
     android:viewportHeight="24">
     <path
-      android:pathData="M12,17C12.283,17 12.521,16.904 12.712,16.712C12.904,16.521 13,16.283 13,16V12C13,11.717 12.904,11.479 12.712,11.288C12.521,11.096 12.283,11 12,11C11.717,11 11.479,11.096 11.288,11.288C11.096,11.479 11,11.717 11,12V16C11,16.283 11.096,16.521 11.288,16.712C11.479,16.904 11.717,17 12,17ZM12,9C12.283,9 12.521,8.904 12.712,8.712C12.904,8.521 13,8.283 13,8C13,7.717 12.904,7.479 12.712,7.287C12.521,7.096 12.283,7 12,7C11.717,7 11.479,7.096 11.288,7.287C11.096,7.479 11,7.717 11,8C11,8.283 11.096,8.521 11.288,8.712C11.479,8.904 11.717,9 12,9ZM12,22C10.617,22 9.317,21.737 8.1,21.212C6.883,20.688 5.825,19.975 4.925,19.075C4.025,18.175 3.313,17.117 2.787,15.9C2.263,14.683 2,13.383 2,12C2,10.617 2.263,9.317 2.787,8.1C3.313,6.883 4.025,5.825 4.925,4.925C5.825,4.025 6.883,3.313 8.1,2.787C9.317,2.263 10.617,2 12,2C13.383,2 14.683,2.263 15.9,2.787C17.117,3.313 18.175,4.025 19.075,4.925C19.975,5.825 20.688,6.883 21.212,8.1C21.737,9.317 22,10.617 22,12C22,13.383 21.737,14.683 21.212,15.9C20.688,17.117 19.975,18.175 19.075,19.075C18.175,19.975 17.117,20.688 15.9,21.212C14.683,21.737 13.383,22 12,22Z"
-      android:fillColor="@android:color/white"/>
+        android:fillColor="#FF000000"
+        android:pathData="M11.29 7.29C11.48 7.09 11.72 7 12 7c0.28 0 0.52 0.1 0.71 0.29C12.91 7.48 13 7.72 13 8c0 0.28-0.1 0.52-0.29 0.71C12.52 8.91 12.28 9 12 9c-0.28 0-0.52-0.1-0.71-0.29C11.09 8.52 11 8.28 11 8c0-0.28 0.1-0.52 0.29-0.71Z"/>
+    <path
+        android:fillColor="#FF000000"
+        android:pathData="M11.29 11.29C11.48 11.09 11.72 11 12 11c0.28 0 0.52 0.1 0.71 0.29C12.91 11.48 13 11.72 13 12v4c0 0.28-0.1 0.52-0.29 0.71C12.52 16.91 12.28 17 12 17c-0.28 0-0.52-0.1-0.71-0.29C11.09 16.52 11 16.28 11 16v-4c0-0.28 0.1-0.52 0.29-0.71Z"/>
+    <path
+        android:fillColor="#FF000000"
+        android:fillType="evenOdd"
+        android:pathData="M22 12c0 5.52-4.48 10-10 10S2 17.52 2 12 6.48 2 12 2s10 4.48 10 10Zm-2 0c0 4.42-3.58 8-8 8s-8-3.58-8-8 3.58-8 8-8 8 3.58 8 8Z"/>
 </vector>

libraries/designsystem/src/main/res/drawable/ic_compound_info_solid.xml

@@ -0,0 +1,25 @@
+<!--
+  ~ Copyright (c) 2023 New Vector Ltd
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~     http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  -->
+
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M12,17C12.283,17 12.521,16.904 12.712,16.712C12.904,16.521 13,16.283 13,16V12C13,11.717 12.904,11.479 12.712,11.288C12.521,11.096 12.283,11 12,11C11.717,11 11.479,11.096 11.288,11.288C11.096,11.479 11,11.717 11,12V16C11,16.283 11.096,16.521 11.288,16.712C11.479,16.904 11.717,17 12,17ZM12,9C12.283,9 12.521,8.904 12.712,8.712C12.904,8.521 13,8.283 13,8C13,7.717 12.904,7.479 12.712,7.287C12.521,7.096 12.283,7 12,7C11.717,7 11.479,7.096 11.288,7.287C11.096,7.479 11,7.717 11,8C11,8.283 11.096,8.521 11.288,8.712C11.479,8.904 11.717,9 12,9ZM12,22C10.617,22 9.317,21.737 8.1,21.212C6.883,20.688 5.825,19.975 4.925,19.075C4.025,18.175 3.313,17.117 2.787,15.9C2.263,14.683 2,13.383 2,12C2,10.617 2.263,9.317 2.787,8.1C3.313,6.883 4.025,5.825 4.925,4.925C5.825,4.025 6.883,3.313 8.1,2.787C9.317,2.263 10.617,2 12,2C13.383,2 14.683,2.263 15.9,2.787C17.117,3.313 18.175,4.025 19.075,4.925C19.975,5.825 20.688,6.883 21.212,8.1C21.737,9.317 22,10.617 22,12C22,13.383 21.737,14.683 21.212,15.9C20.688,17.117 19.975,18.175 19.075,19.075C18.175,19.975 17.117,20.688 15.9,21.212C14.683,21.737 13.383,22 12,22Z"
+      android:fillColor="@android:color/white"/>
+</vector>

libraries/designsystem/src/main/res/drawable/ic_compound_user.xml

@@ -0,0 +1,11 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+    <path
+        android:fillColor="#FF000000"
+        android:strokeColor="#FF000000"
+        android:strokeWidth="0.03"
+        android:pathData="M5.84 17.1v0.02l0.02-0.01a10.42 10.42 0 0 1 2.84-1.54 9.72 9.72 0 0 1 3.3-0.56c1.15 0 2.25 0.19 3.3 0.56a10.42 10.42 0 0 1 2.84 1.54h0.01 0.01a7.74 7.74 0 0 0 1.36-2.33 7.85 7.85 0 0 0 0.5-2.78c0-2.22-0.79-4.11-2.35-5.67-1.56-1.56-3.45-2.34-5.67-2.34-2.22 0-4.11 0.78-5.67 2.34C4.77 7.89 3.99 9.78 3.99 12c0 0.98 0.16 1.91 0.49 2.78 0.32 0.87 0.78 1.64 1.36 2.33ZM12 13c-0.98 0-1.8-0.34-2.48-1.01-0.67-0.67-1-1.5-1-2.48s0.33-1.8 1-2.48c0.67-0.67 1.5-1 2.48-1s1.8 0.33 2.48 1c0.67 0.67 1 1.5 1 2.48s-0.33 1.8-1 2.48c-0.67 0.67-1.5 1-2.48 1Zm0 9a9.72 9.72 0 0 1-3.9-0.79 10.09 10.09 0 0 1-3.17-2.13A10.09 10.09 0 0 1 2.8 15.9 9.72 9.72 0 0 1 2 12c0-1.38 0.27-2.68 0.79-3.9a10.09 10.09 0 0 1 2.13-3.17A10.09 10.09 0 0 1 8.1 2.8 9.72 9.72 0 0 1 12 2c1.38 0 2.68 0.27 3.9 0.79a10.09 10.09 0 0 1 3.17 2.13c0.9 0.9 1.6 1.96 2.13 3.17A9.72 9.72 0 0 1 22 12a9.73 9.73 0 0 1-0.79 3.9 10.09 10.09 0 0 1-2.13 3.17 10.09 10.09 0 0 1-3.17 2.13A9.72 9.72 0 0 1 12 22Z"/>
+</vector>

libraries/designsystem/src/main/res/drawable/ic_developer_mode.xml

@@ -1,10 +0,0 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
-    android:viewportWidth="960"
-    android:viewportHeight="960"
-    android:tint="?attr/colorControlNormal">
-  <path
-      android:fillColor="@android:color/white"
-      android:pathData="M344,664L160,480L344,296L400,354L274,480L400,606L344,664ZM200,680L280,680L280,720L680,720L680,680L760,680L760,840Q760,873 736.5,896.5Q713,920 680,920L280,920Q247,920 223.5,896.5Q200,873 200,840L200,680ZM280,280L200,280L200,120Q200,87 223.5,63.5Q247,40 280,40L680,40Q713,40 736.5,63.5Q760,87 760,120L760,280L680,280L680,240L280,240L280,280ZM280,800L280,840Q280,840 280,840Q280,840 280,840L680,840Q680,840 680,840Q680,840 680,840L680,800L280,800ZM280,160L680,160L680,120Q680,120 680,120Q680,120 680,120L280,120Q280,120 280,120Q280,120 280,120L280,160ZM616,664L560,606L686,480L560,354L616,296L800,480L616,664ZM280,160L280,120Q280,120 280,120Q280,120 280,120L280,120Q280,120 280,120Q280,120 280,120L280,160L280,160ZM280,800L280,800L280,840Q280,840 280,840Q280,840 280,840L280,840Q280,840 280,840Q280,840 280,840L280,800Z"/>
-</vector>

libraries/designsystem/src/main/res/drawable/ic_developer_options.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M8.825,12L10.3,10.525C10.5,10.325 10.6,10.092 10.6,9.825C10.6,9.558 10.5,9.325 10.3,9.125C10.1,8.925 9.863,8.825 9.587,8.825C9.313,8.825 9.075,8.925 8.875,9.125L6.7,11.3C6.6,11.4 6.529,11.508 6.488,11.625C6.446,11.742 6.425,11.867 6.425,12C6.425,12.133 6.446,12.258 6.488,12.375C6.529,12.492 6.6,12.6 6.7,12.7L8.875,14.875C9.075,15.075 9.313,15.175 9.587,15.175C9.863,15.175 10.1,15.075 10.3,14.875C10.5,14.675 10.6,14.442 10.6,14.175C10.6,13.908 10.5,13.675 10.3,13.475L8.825,12ZM15.175,12L13.7,13.475C13.5,13.675 13.4,13.908 13.4,14.175C13.4,14.442 13.5,14.675 13.7,14.875C13.9,15.075 14.137,15.175 14.413,15.175C14.688,15.175 14.925,15.075 15.125,14.875L17.3,12.7C17.4,12.6 17.471,12.492 17.513,12.375C17.554,12.258 17.575,12.133 17.575,12C17.575,11.867 17.554,11.742 17.513,11.625C17.471,11.508 17.4,11.4 17.3,11.3L15.125,9.125C15.025,9.025 14.913,8.95 14.788,8.9C14.663,8.85 14.538,8.825 14.413,8.825C14.288,8.825 14.163,8.85 14.038,8.9C13.913,8.95 13.8,9.025 13.7,9.125C13.5,9.325 13.4,9.558 13.4,9.825C13.4,10.092 13.5,10.325 13.7,10.525L15.175,12ZM5,21C4.45,21 3.979,20.804 3.588,20.413C3.196,20.021 3,19.55 3,19V5C3,4.45 3.196,3.979 3.588,3.588C3.979,3.196 4.45,3 5,3H19C19.55,3 20.021,3.196 20.413,3.588C20.804,3.979 21,4.45 21,5V19C21,19.55 20.804,20.021 20.413,20.413C20.021,20.804 19.55,21 19,21H5ZM5,19H19V5H5V19Z"
+      android:fillColor="#1B1D22"/>
+</vector>

libraries/designsystem/src/main/res/drawable/ic_devices.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M3.5,20C3.083,20 2.729,19.854 2.438,19.563C2.146,19.271 2,18.917 2,18.5C2,18.083 2.146,17.729 2.438,17.438C2.729,17.146 3.083,17 3.5,17H4V6C4,5.45 4.196,4.979 4.588,4.588C4.979,4.196 5.45,4 6,4H20C20.283,4 20.521,4.096 20.712,4.287C20.904,4.479 21,4.717 21,5C21,5.283 20.904,5.521 20.712,5.713C20.521,5.904 20.283,6 20,6H6V17H10.5C10.917,17 11.271,17.146 11.563,17.438C11.854,17.729 12,18.083 12,18.5C12,18.917 11.854,19.271 11.563,19.563C11.271,19.854 10.917,20 10.5,20H3.5ZM15,20C14.717,20 14.479,19.904 14.288,19.712C14.096,19.521 14,19.283 14,19V9C14,8.717 14.096,8.479 14.288,8.288C14.479,8.096 14.717,8 15,8H21C21.283,8 21.521,8.096 21.712,8.288C21.904,8.479 22,8.717 22,9V19C22,19.283 21.904,19.521 21.712,19.712C21.521,19.904 21.283,20 21,20H15ZM16,17H20V10H16V17Z"
+      android:fillColor="#1B1D22"/>
+</vector>

libraries/designsystem/src/main/res/drawable/ic_sign_out.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M9,12.031C9,11.748 9.096,11.51 9.288,11.319C9.479,11.127 9.717,11.031 10,11.031H17.15L15.275,9.156C15.075,8.956 14.975,8.723 14.975,8.456C14.975,8.19 15.083,7.948 15.3,7.731C15.5,7.531 15.738,7.435 16.013,7.444C16.288,7.452 16.517,7.548 16.7,7.731L20.3,11.331C20.4,11.431 20.471,11.54 20.513,11.656C20.554,11.773 20.575,11.898 20.575,12.031C20.575,12.165 20.554,12.29 20.513,12.406C20.471,12.523 20.4,12.631 20.3,12.731L16.7,16.331C16.5,16.531 16.263,16.627 15.988,16.619C15.713,16.61 15.483,16.515 15.3,16.331C15.1,16.131 14.996,15.894 14.988,15.619C14.979,15.344 15.075,15.106 15.275,14.906L17.15,13.031H10C9.717,13.031 9.479,12.935 9.288,12.744C9.096,12.552 9,12.315 9,12.031ZM3,5.031C3,4.481 3.196,4.01 3.588,3.619C3.979,3.227 4.45,3.031 5,3.031H11C11.283,3.031 11.521,3.127 11.713,3.319C11.904,3.51 12,3.748 12,4.031C12,4.315 11.904,4.552 11.713,4.744C11.521,4.935 11.283,5.031 11,5.031L5,5.031L5,19.031H11C11.283,19.031 11.521,19.127 11.713,19.319C11.904,19.51 12,19.748 12,20.031C12,20.315 11.904,20.552 11.713,20.744C11.521,20.935 11.283,21.031 11,21.031H5C4.45,21.031 3.979,20.835 3.588,20.444C3.196,20.052 3,19.581 3,19.031V5.031Z"
+      android:fillColor="#1B1D22"/>
+</vector>

libraries/ui-strings/src/main/res/values/localazy.xml

@@ -172,8 +172,10 @@
   <string name="common_voice_message">"Voice message"</string>
   <string name="common_waiting">"Waiting…"</string>
   <string name="common_waiting_for_decryption_key">"Waiting for this message"</string>
+  <string name="common_report_a_problem">"Report a problem"</string>
   <string name="common_poll_end_confirmation">"Are you sure you want to end this poll?"</string>
   <string name="common_poll_summary">"Poll: %1$s"</string>
+  <string name="common_verify_device">"Verify device"</string>
   <string name="dialog_title_confirmation">"Confirmation"</string>
   <string name="dialog_title_warning">"Warning"</string>
   <string name="emoji_picker_category_activity">"Activities"</string>