Improve designs of FTUE analytics opt-in screen (#2684)

* Improve designs of FTUE analytics opt-in screen

* Update screenshots

---------

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

changelog.d/2684.misc

@@ -0,0 +1 @@
+Improve analytics opt-in screen UI.

features/analytics/impl/src/main/kotlin/io/element/android/features/analytics/impl/AnalyticsOptInView.kt

@@ -17,19 +17,14 @@
 package io.element.android.features.analytics.impl
 
 import androidx.activity.compose.BackHandler
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.systemBarsPadding
-import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.text.ClickableText
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.Poll
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -45,18 +40,18 @@ import io.element.android.compound.theme.ElementTheme
 import io.element.android.compound.tokens.generated.CompoundIcons
 import io.element.android.features.analytics.api.AnalyticsOptInEvents
 import io.element.android.libraries.designsystem.atomic.molecules.ButtonColumnMolecule
-import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
 import io.element.android.libraries.designsystem.atomic.organisms.InfoListItem
 import io.element.android.libraries.designsystem.atomic.organisms.InfoListOrganism
 import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
+import io.element.android.libraries.designsystem.components.BigIcon
+import io.element.android.libraries.designsystem.components.OnboardingBackground
+import io.element.android.libraries.designsystem.components.PageTitle
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.text.buildAnnotatedStringWithStyledPart
 import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.ButtonSize
-import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.components.TextButton
-import io.element.android.libraries.designsystem.theme.temporaryColorBgSpecial
 import io.element.android.libraries.ui.strings.CommonStrings
 import kotlinx.collections.immutable.persistentListOf
 
@@ -82,6 +77,7 @@ fun AnalyticsOptInView(
             .fillMaxSize()
             .systemBarsPadding()
             .imePadding(),
+        background = { OnboardingBackground() },
         header = { AnalyticsOptInHeader(state, onClickTerms) },
         content = { AnalyticsOptInContent() },
         footer = {
@@ -103,11 +99,11 @@ private fun AnalyticsOptInHeader(
     Column(
         horizontalAlignment = Alignment.CenterHorizontally,
     ) {
-        IconTitleSubtitleMolecule(
+        PageTitle(
             modifier = Modifier.padding(top = 60.dp, bottom = 12.dp),
             title = stringResource(id = R.string.screen_analytics_prompt_title, state.applicationName),
-            subTitle = stringResource(id = R.string.screen_analytics_prompt_help_us_improve),
-            iconImageVector = Icons.Filled.Poll
+            subtitle = stringResource(id = R.string.screen_analytics_prompt_help_us_improve),
+            iconStyle = BigIcon.Style.Default(CompoundIcons.Chart())
         )
         val text = buildAnnotatedStringWithStyledPart(
             R.string.screen_analytics_prompt_read_terms,
@@ -136,19 +132,6 @@ private fun AnalyticsOptInHeader(
     }
 }
 
-@Composable
-private fun CheckIcon() {
-    Icon(
-        modifier = Modifier
-            .size(20.dp)
-            .background(color = MaterialTheme.colorScheme.background, shape = CircleShape)
-            .padding(2.dp),
-        imageVector = CompoundIcons.Check(),
-        contentDescription = null,
-        tint = ElementTheme.colors.textActionAccent,
-    )
-}
-
 @Composable
 private fun AnalyticsOptInContent() {
     Box(
@@ -162,20 +145,20 @@ private fun AnalyticsOptInContent() {
             items = persistentListOf(
                 InfoListItem(
                     message = stringResource(id = R.string.screen_analytics_prompt_data_usage),
-                    iconComposable = { CheckIcon() },
+                    iconVector = CompoundIcons.CheckCircle(),
                 ),
                 InfoListItem(
                     message = stringResource(id = R.string.screen_analytics_prompt_third_party_sharing),
-                    iconComposable = { CheckIcon() },
+                    iconVector = CompoundIcons.CheckCircle(),
                 ),
                 InfoListItem(
                     message = stringResource(id = R.string.screen_analytics_prompt_settings),
-                    iconComposable = { CheckIcon() },
+                    iconVector = CompoundIcons.CheckCircle(),
                 ),
             ),
-            textStyle = ElementTheme.typography.fontBodyMdMedium,
-            iconTint = ElementTheme.colors.textPrimary,
-            backgroundColor = ElementTheme.colors.temporaryColorBgSpecial
+            textStyle = ElementTheme.typography.fontBodyLgMedium,
+            iconTint = ElementTheme.colors.iconSuccessPrimary,
+            backgroundColor = ElementTheme.colors.bgActionSecondaryHovered,
         )
     }
 }

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

@@ -59,8 +59,8 @@ fun InfoListItemMolecule(
                 color = backgroundColor,
                 shape = backgroundShape,
             )
-            .padding(vertical = 12.dp, horizontal = 20.dp),
-        horizontalArrangement = Arrangement.spacedBy(16.dp),
+            .padding(vertical = 12.dp, horizontal = 18.dp),
+        horizontalArrangement = Arrangement.spacedBy(12.dp),
     ) {
         icon()
         message()