From 80f8fadacd01180c4339ea9f37e172357022d194 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jorge=20Mart=C3=ADn?= Date: Tue, 9 Apr 2024 14:14:56 +0200 Subject: [PATCH 1/4] Improve designs of FTUE analytics opt-in screen --- .../analytics/impl/AnalyticsOptInView.kt | 38 +++++++------------ .../atomic/molecules/InfoListItemMolecule.kt | 4 +- 2 files changed, 15 insertions(+), 27 deletions(-) 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 index a51ce30f9d8..fc4dace9dbd 100644 --- 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 @@ -28,8 +28,6 @@ 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,10 +43,12 @@ 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 @@ -82,6 +82,7 @@ fun AnalyticsOptInView( .fillMaxSize() .systemBarsPadding() .imePadding(), + background = { OnboardingBackground() }, header = { AnalyticsOptInHeader(state, onClickTerms) }, content = { AnalyticsOptInContent() }, footer = { @@ -103,11 +104,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 +137,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 +150,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 index f8e0b9baa89..5c25593184a 100644 --- 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() From ecb8ec29ea17bb74c523e441af6496c54911dedf Mon Sep 17 00:00:00 2001 From: ElementBot Date: Wed, 10 Apr 2024 06:39:22 +0000 Subject: [PATCH 2/4] Update screenshots --- ...null_AnalyticsOptInView-Day-0_1_null_0,NEXUS_5,1.0,en].png | 4 ++-- ...ll_AnalyticsOptInView-Night-0_2_null_0,NEXUS_5,1.0,en].png | 4 ++-- ...comeView_null_WelcomeView-Day-1_2_null,NEXUS_5,1.0,en].png | 4 ++-- ...meView_null_WelcomeView-Night-1_3_null,NEXUS_5,1.0,en].png | 4 ++-- ...View_null_SignedOutView-Day-0_1_null_0,NEXUS_5,1.0,en].png | 4 ++-- ...ew_null_SignedOutView-Night-0_2_null_0,NEXUS_5,1.0,en].png | 4 ++-- ...e_null_InfoListItemMolecule-Day_0_null,NEXUS_5,1.0,en].png | 4 ++-- ...null_InfoListItemMolecule-Night_1_null,NEXUS_5,1.0,en].png | 4 ++-- ...anism_null_InfoListOrganism-Day_0_null,NEXUS_5,1.0,en].png | 4 ++-- ...ism_null_InfoListOrganism-Night_1_null,NEXUS_5,1.0,en].png | 4 ++-- 10 files changed, 20 insertions(+), 20 deletions(-) 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 index 59d9ccc85da..211571ab7cc 100644 --- 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 index fee4ff17997..d4e8907ab9a 100644 --- 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 index ab74556c3dd..b9b2597ddc4 100644 --- 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 index 90be31dea2d..72fa53cd51a 100644 --- 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 index fd4d7fc97bb..f145a1f1b2f 100644 --- 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 index 9817a5e9855..105c9840f8e 100644 --- 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 index f87e41e29fa..967a8690073 100644 --- 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 index ebf76be6fcb..3678bc1d31c 100644 --- 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 index b98fc16eeb1..a2016c4e6d4 100644 --- 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 index d703c086a7d..3b617db3ce7 100644 --- 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 From fcbdcf071ba1dbb3a6a2f58c5cc94912d0443a6a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jorge=20Mart=C3=ADn?= Date: Wed, 10 Apr 2024 09:04:32 +0200 Subject: [PATCH 3/4] Fix lint issues --- .../android/features/analytics/impl/AnalyticsOptInView.kt | 5 ----- 1 file changed, 5 deletions(-) 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 index fc4dace9dbd..08095a4e339 100644 --- 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,16 +17,13 @@ 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.material3.MaterialTheme import androidx.compose.runtime.Composable @@ -54,9 +51,7 @@ 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 From 77de18727d674884cae85c1890c39ab60b402073 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jorge=20Mart=C3=ADn?= Date: Wed, 10 Apr 2024 09:05:24 +0200 Subject: [PATCH 4/4] Add changelog --- changelog.d/2684.misc | 1 + 1 file changed, 1 insertion(+) create mode 100644 changelog.d/2684.misc diff --git a/changelog.d/2684.misc b/changelog.d/2684.misc new file mode 100644 index 00000000000..6604e938fd7 --- /dev/null +++ b/changelog.d/2684.misc @@ -0,0 +1 @@ +Improve analytics opt-in screen UI.