Skip to content

Commit 6db513c

Browse files
jmartinespElementBot
jmartinesp
and
ElementBot
authored
Improve designs of FTUE analytics opt-in screen (#2684)
* Improve designs of FTUE analytics opt-in screen * Update screenshots --------- Co-authored-by: ElementBot <[email protected]>
1 parent cf072fa commit 6db513c

13 files changed

+36
-52
lines changed

‎changelog.d/2684.misc

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Improve analytics opt-in screen UI.

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

Lines changed: 13 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -17,19 +17,14 @@
1717
package io.element.android.features.analytics.impl
1818

1919
import androidx.activity.compose.BackHandler
20-
import androidx.compose.foundation.background
2120
import androidx.compose.foundation.layout.Box
2221
import androidx.compose.foundation.layout.Column
2322
import androidx.compose.foundation.layout.fillMaxSize
2423
import androidx.compose.foundation.layout.fillMaxWidth
2524
import androidx.compose.foundation.layout.imePadding
2625
import androidx.compose.foundation.layout.padding
27-
import androidx.compose.foundation.layout.size
2826
import androidx.compose.foundation.layout.systemBarsPadding
29-
import androidx.compose.foundation.shape.CircleShape
3027
import androidx.compose.foundation.text.ClickableText
31-
import androidx.compose.material.icons.Icons
32-
import androidx.compose.material.icons.filled.Poll
3328
import androidx.compose.material3.MaterialTheme
3429
import androidx.compose.runtime.Composable
3530
import androidx.compose.ui.Alignment
@@ -45,18 +40,18 @@ import io.element.android.compound.theme.ElementTheme
4540
import io.element.android.compound.tokens.generated.CompoundIcons
4641
import io.element.android.features.analytics.api.AnalyticsOptInEvents
4742
import io.element.android.libraries.designsystem.atomic.molecules.ButtonColumnMolecule
48-
import io.element.android.libraries.designsystem.atomic.molecules.IconTitleSubtitleMolecule
4943
import io.element.android.libraries.designsystem.atomic.organisms.InfoListItem
5044
import io.element.android.libraries.designsystem.atomic.organisms.InfoListOrganism
5145
import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
46+
import io.element.android.libraries.designsystem.components.BigIcon
47+
import io.element.android.libraries.designsystem.components.OnboardingBackground
48+
import io.element.android.libraries.designsystem.components.PageTitle
5249
import io.element.android.libraries.designsystem.preview.ElementPreview
5350
import io.element.android.libraries.designsystem.preview.PreviewsDayNight
5451
import io.element.android.libraries.designsystem.text.buildAnnotatedStringWithStyledPart
5552
import io.element.android.libraries.designsystem.theme.components.Button
5653
import io.element.android.libraries.designsystem.theme.components.ButtonSize
57-
import io.element.android.libraries.designsystem.theme.components.Icon
5854
import io.element.android.libraries.designsystem.theme.components.TextButton
59-
import io.element.android.libraries.designsystem.theme.temporaryColorBgSpecial
6055
import io.element.android.libraries.ui.strings.CommonStrings
6156
import kotlinx.collections.immutable.persistentListOf
6257

@@ -82,6 +77,7 @@ fun AnalyticsOptInView(
8277
.fillMaxSize()
8378
.systemBarsPadding()
8479
.imePadding(),
80+
background = { OnboardingBackground() },
8581
header = { AnalyticsOptInHeader(state, onClickTerms) },
8682
content = { AnalyticsOptInContent() },
8783
footer = {
@@ -103,11 +99,11 @@ private fun AnalyticsOptInHeader(
10399
Column(
104100
horizontalAlignment = Alignment.CenterHorizontally,
105101
) {
106-
IconTitleSubtitleMolecule(
102+
PageTitle(
107103
modifier = Modifier.padding(top = 60.dp, bottom = 12.dp),
108104
title = stringResource(id = R.string.screen_analytics_prompt_title, state.applicationName),
109-
subTitle = stringResource(id = R.string.screen_analytics_prompt_help_us_improve),
110-
iconImageVector = Icons.Filled.Poll
105+
subtitle = stringResource(id = R.string.screen_analytics_prompt_help_us_improve),
106+
iconStyle = BigIcon.Style.Default(CompoundIcons.Chart())
111107
)
112108
val text = buildAnnotatedStringWithStyledPart(
113109
R.string.screen_analytics_prompt_read_terms,
@@ -136,19 +132,6 @@ private fun AnalyticsOptInHeader(
136132
}
137133
}
138134

139-
@Composable
140-
private fun CheckIcon() {
141-
Icon(
142-
modifier = Modifier
143-
.size(20.dp)
144-
.background(color = MaterialTheme.colorScheme.background, shape = CircleShape)
145-
.padding(2.dp),
146-
imageVector = CompoundIcons.Check(),
147-
contentDescription = null,
148-
tint = ElementTheme.colors.textActionAccent,
149-
)
150-
}
151-
152135
@Composable
153136
private fun AnalyticsOptInContent() {
154137
Box(
@@ -162,20 +145,20 @@ private fun AnalyticsOptInContent() {
162145
items = persistentListOf(
163146
InfoListItem(
164147
message = stringResource(id = R.string.screen_analytics_prompt_data_usage),
165-
iconComposable = { CheckIcon() },
148+
iconVector = CompoundIcons.CheckCircle(),
166149
),
167150
InfoListItem(
168151
message = stringResource(id = R.string.screen_analytics_prompt_third_party_sharing),
169-
iconComposable = { CheckIcon() },
152+
iconVector = CompoundIcons.CheckCircle(),
170153
),
171154
InfoListItem(
172155
message = stringResource(id = R.string.screen_analytics_prompt_settings),
173-
iconComposable = { CheckIcon() },
156+
iconVector = CompoundIcons.CheckCircle(),
174157
),
175158
),
176-
textStyle = ElementTheme.typography.fontBodyMdMedium,
177-
iconTint = ElementTheme.colors.textPrimary,
178-
backgroundColor = ElementTheme.colors.temporaryColorBgSpecial
159+
textStyle = ElementTheme.typography.fontBodyLgMedium,
160+
iconTint = ElementTheme.colors.iconSuccessPrimary,
161+
backgroundColor = ElementTheme.colors.bgActionSecondaryHovered,
179162
)
180163
}
181164
}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,8 @@ fun InfoListItemMolecule(
5959
color = backgroundColor,
6060
shape = backgroundShape,
6161
)
62-
.padding(vertical = 12.dp, horizontal = 20.dp),
63-
horizontalArrangement = Arrangement.spacedBy(16.dp),
62+
.padding(vertical = 12.dp, horizontal = 18.dp),
63+
horizontalArrangement = Arrangement.spacedBy(12.dp),
6464
) {
6565
icon()
6666
message()

‎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

Lines changed: 2 additions & 2 deletions
Loading

‎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

Lines changed: 2 additions & 2 deletions
Loading

‎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

Lines changed: 2 additions & 2 deletions
Loading

‎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

Lines changed: 2 additions & 2 deletions
Loading

‎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

Lines changed: 2 additions & 2 deletions
Loading

‎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

Lines changed: 2 additions & 2 deletions
Loading

‎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

Lines changed: 2 additions & 2 deletions
Loading

‎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

Lines changed: 2 additions & 2 deletions
Loading

‎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

Lines changed: 2 additions & 2 deletions
Loading

‎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

Lines changed: 2 additions & 2 deletions
Loading

0 commit comments

Comments
 (0)