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

jmartinesp · ElementBot · web-flow · commit 6db513c1258f · 2024-04-10T10:28:05.000+02:00
* Improve designs of FTUE analytics opt-in screen

* Update screenshots

---------

Co-authored-by: ElementBot &lt;benoitm+elementbot@element.io&gt;
diff --git a/changelog.d/2684.misc b/changelog.d/2684.misc
@@ -0,0 +1 @@
+Improve analytics opt-in screen UI.
diff --git a/features/analytics/impl/src/main/kotlin/io/element/android/features/analytics/impl/AnalyticsOptInView.kt b/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,
         )
     }
 }
diff --git a/libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/molecules/InfoListItemMolecule.kt b/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()
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[f.analytics.impl_AnalyticsOptInView_null_AnalyticsOptInView-Day-0_1_null_0,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[f.analytics.impl_AnalyticsOptInView_null_AnalyticsOptInView-Day-0_1_null_0,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bfd87b963e38343c0b9da618414b7bdc1fe79fbb3f48727916a1d20868eb7483
-size 50628
+oid sha256:1d5426156630c38e8222a52c7e78a30db19a5ebc3f39cfb671bef1d1bd7b9576
+size 97356
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[f.analytics.impl_AnalyticsOptInView_null_AnalyticsOptInView-Night-0_2_null_0,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[f.analytics.impl_AnalyticsOptInView_null_AnalyticsOptInView-Night-0_2_null_0,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:97f2610be9d2c2351dea5c7935e5d6bcb7213780280c506253ade9a16868a093
-size 49519
+oid sha256:6d8b5a13e95a7c9091275809337ad9b55058d4846d4d2ed5a2fffae8e1a0287d
+size 91071
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[f.ftue.impl.welcome_WelcomeView_null_WelcomeView-Day-1_2_null,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[f.ftue.impl.welcome_WelcomeView_null_WelcomeView-Day-1_2_null,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:de05e9bffd5210895933179d1a331a768e61b7d398a26e93dfd8dc65bdd01c1f
-size 286642
+oid sha256:93a96978e4575891ff2577c2ecca801cad9e95ddda4ff21e5c0d28f5ee256df6
+size 286706
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[f.ftue.impl.welcome_WelcomeView_null_WelcomeView-Night-1_3_null,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[f.ftue.impl.welcome_WelcomeView_null_WelcomeView-Night-1_3_null,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e5fec377a61aa10b3f23eb28aeeec2871a7b08bf6da2e586b01aae153821fdf5
-size 390188
+oid sha256:994cbbdebe72e7385eb8c8ff98312510c0e8610a40dc204ce26e37acb36c0dd6
+size 390300
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[f.signedout.impl_SignedOutView_null_SignedOutView-Day-0_1_null_0,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[f.signedout.impl_SignedOutView_null_SignedOutView-Day-0_1_null_0,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8bbb1f43f85ef3ac2c24182ad91629e5779d0e812d8fb2714f3c497bd6fca1cd
-size 60462
+oid sha256:67c0ab8e3553db828c81ea56b2397b3a3f9a2fe8ff6f668ecdc460ecfadb4726
+size 60375
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[f.signedout.impl_SignedOutView_null_SignedOutView-Night-0_2_null_0,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[f.signedout.impl_SignedOutView_null_SignedOutView-Night-0_2_null_0,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5b452dd45e6581d3661724eb537d4020b73cdef47775a04d26e28d449f3d8a9b
-size 58730
+oid sha256:f1b0d0d4cb8eafdd9eafa64f4788f32052542036757698200ef16ff0e20562c5
+size 58668
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.atomic.molecules_InfoListItemMolecule_null_InfoListItemMolecule-Day_0_null,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.atomic.molecules_InfoListItemMolecule_null_InfoListItemMolecule-Day_0_null,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6d3e7c8e6fa22c73e34ef27c7b6dc2c5780f48ad9b0680e5a0310896c0f11512
-size 19510
+oid sha256:4621864865a1acb0a4d8d502f1a75a3a888b6e6db92fa74fc24c4d93fd72cc28
+size 19488
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.atomic.molecules_InfoListItemMolecule_null_InfoListItemMolecule-Night_1_null,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.atomic.molecules_InfoListItemMolecule_null_InfoListItemMolecule-Night_1_null,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:240f32ad0c193c37d1533dd12500cad19ea52b5f7c36555dc734b371488eb750
-size 18820
+oid sha256:f1f088b90404dd0905e6799ea29912387c50262856ea25ad2f265c3ae0f0eacc
+size 18833
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.atomic.organisms_InfoListOrganism_null_InfoListOrganism-Day_0_null,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.atomic.organisms_InfoListOrganism_null_InfoListOrganism-Day_0_null,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:897ee73ef00a3a322a5ab99b6b3d39945e0b62fea72f1099ace542e4cff893cf
-size 13104
+oid sha256:6f4fcfd8a51f291510c25abaec2437ca46bd7bd70e83a4f77fb304210854181e
+size 13141
diff --git a/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.atomic.organisms_InfoListOrganism_null_InfoListOrganism-Night_1_null,NEXUS_5,1.0,en].png b/tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.atomic.organisms_InfoListOrganism_null_InfoListOrganism-Night_1_null,NEXUS_5,1.0,en].png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:770f21753ce0d8f85e8e20b7d74f4ff903da693e5ca9704ef6f2430895656454
-size 12437
+oid sha256:bfe2fb59100daf7b057e6c6b128b3684d4956331f7faaa2324e10d435c9f8234
+size 12463
