Sulkta-OSS/element-x-ada
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source 
* Improve designs of FTUE analytics opt-in screen

* Update screenshots

---------

Co-authored-by: ElementBot <benoitm+elementbot@element.io>
This commit is contained in:
Jorge Martin Espinosa 2024-04-10 10:28:05 +02:00 • committed by GitHub
parent cf072fa1e1
commit 6db513c125
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
13 changed files with 36 additions and 52 deletions
Download patch file Download diff file Expand all files Collapse all files

1
changelog.d/2684.misc Normal file
View file

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

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

@ -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,
)
}
}

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

@ -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()

4
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
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:bfd87b963e38343c0b9da618414b7bdc1fe79fbb3f48727916a1d20868eb7483
size 50628
oid sha256:1d5426156630c38e8222a52c7e78a30db19a5ebc3f39cfb671bef1d1bd7b9576
size 97356

4
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
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:97f2610be9d2c2351dea5c7935e5d6bcb7213780280c506253ade9a16868a093
size 49519
oid sha256:6d8b5a13e95a7c9091275809337ad9b55058d4846d4d2ed5a2fffae8e1a0287d
size 91071

4
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
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:de05e9bffd5210895933179d1a331a768e61b7d398a26e93dfd8dc65bdd01c1f
size 286642
oid sha256:93a96978e4575891ff2577c2ecca801cad9e95ddda4ff21e5c0d28f5ee256df6
size 286706

4
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
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:e5fec377a61aa10b3f23eb28aeeec2871a7b08bf6da2e586b01aae153821fdf5
size 390188
oid sha256:994cbbdebe72e7385eb8c8ff98312510c0e8610a40dc204ce26e37acb36c0dd6
size 390300

4
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
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:8bbb1f43f85ef3ac2c24182ad91629e5779d0e812d8fb2714f3c497bd6fca1cd
size 60462
oid sha256:67c0ab8e3553db828c81ea56b2397b3a3f9a2fe8ff6f668ecdc460ecfadb4726
size 60375

4
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
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:5b452dd45e6581d3661724eb537d4020b73cdef47775a04d26e28d449f3d8a9b
size 58730
oid sha256:f1b0d0d4cb8eafdd9eafa64f4788f32052542036757698200ef16ff0e20562c5
size 58668

4
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
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:6d3e7c8e6fa22c73e34ef27c7b6dc2c5780f48ad9b0680e5a0310896c0f11512
size 19510
oid sha256:4621864865a1acb0a4d8d502f1a75a3a888b6e6db92fa74fc24c4d93fd72cc28
size 19488

4
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
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:240f32ad0c193c37d1533dd12500cad19ea52b5f7c36555dc734b371488eb750
size 18820
oid sha256:f1f088b90404dd0905e6799ea29912387c50262856ea25ad2f265c3ae0f0eacc
size 18833

4
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
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:897ee73ef00a3a322a5ab99b6b3d39945e0b62fea72f1099ace542e4cff893cf
size 13104
oid sha256:6f4fcfd8a51f291510c25abaec2437ca46bd7bd70e83a4f77fb304210854181e
size 13141

4
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
View file

@ -1,3 +1,3 @@
version https://git-lfs.github.com/spec/v1
oid sha256:770f21753ce0d8f85e8e20b7d74f4ff903da693e5ca9704ef6f2430895656454
size 12437
oid sha256:bfe2fb59100daf7b057e6c6b128b3684d4956331f7faaa2324e10d435c9f8234
size 12463