Merge pull request #1781 from vector-im/feature/bma/onBoardingIteration

On boarding iteration

features/ftue/impl/src/main/kotlin/io/element/android/features/ftue/impl/welcome/WelcomeView.kt

@@ -25,10 +25,6 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.outlined.AddComment
-import androidx.compose.material.icons.outlined.Lock
-import androidx.compose.material.icons.outlined.NewReleases
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -41,10 +37,11 @@ import io.element.android.libraries.designsystem.atomic.atoms.ElementLogoAtomSiz
 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.OnBoardingPage
-import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.preview.ElementPreview
+import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Button
 import io.element.android.libraries.designsystem.theme.components.Text
+import io.element.android.libraries.designsystem.utils.CommonDrawables
 import io.element.android.libraries.testtags.TestTags
 import io.element.android.libraries.testtags.testTag
 import io.element.android.libraries.theme.ElementTheme
@@ -79,14 +76,7 @@ fun WelcomeView(
                     color = ElementTheme.colors.textPrimary,
                     textAlign = TextAlign.Center,
                 )
-                Spacer(modifier = Modifier.height(8.dp))
-                Text(
-                    text = stringResource(R.string.screen_welcome_subtitle),
-                    style = ElementTheme.typography.fontBodyMdRegular,
-                    color = ElementTheme.colors.textPrimary,
-                    textAlign = TextAlign.Center,
-                )
-                Spacer(modifier = Modifier.height(40.dp))
+                Spacer(modifier = Modifier.height(80.dp))
                 InfoListOrganism(
                     items = listItems(),
                     textStyle = ElementTheme.typography.fontBodyMdMedium,
@@ -109,17 +99,13 @@ fun WelcomeView(
 
 @Composable
 private fun listItems() = persistentListOf(
-    InfoListItem(
-        message = stringResource(R.string.screen_welcome_bullet_1),
-        iconVector = Icons.Outlined.NewReleases,
-    ),
     InfoListItem(
         message = stringResource(R.string.screen_welcome_bullet_2),
-        iconVector = Icons.Outlined.Lock,
+        iconId = CommonDrawables.ic_lock_outline,
     ),
     InfoListItem(
         message = stringResource(R.string.screen_welcome_bullet_3),
-        iconVector = Icons.Outlined.AddComment,
+        iconId = CommonDrawables.ic_compound_chat_problem,
     ),
 )
 

features/ftue/impl/src/main/res/values/localazy.xml

@@ -5,7 +5,7 @@
   <string name="screen_notification_optin_subtitle">"You can change your settings later."</string>
   <string name="screen_notification_optin_title">"Allow notifications and never miss a message"</string>
   <string name="screen_welcome_bullet_1">"Calls, polls, search and more will be added later this year."</string>
-  <string name="screen_welcome_bullet_2">"Message history for encrypted rooms won’t be available in this update."</string>
+  <string name="screen_welcome_bullet_2">"Message history for encrypted rooms isn’t available yet."</string>
   <string name="screen_welcome_bullet_3">"We’d love to hear from you, let us know what you think via the settings page."</string>
   <string name="screen_welcome_button">"Let\'s go!"</string>
   <string name="screen_welcome_subtitle">"Here’s what you need to know:"</string>

features/signedout/impl/src/main/kotlin/io/element/android/features/signedout/impl/SignedOutView.kt

@@ -17,13 +17,11 @@
 package io.element.android.features.signedout.impl
 
 import androidx.activity.compose.BackHandler
-import androidx.annotation.DrawableRes
 import androidx.compose.foundation.layout.Box
 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.material.icons.Icons
 import androidx.compose.material.icons.filled.AccountCircle
@@ -41,8 +39,8 @@ import io.element.android.libraries.designsystem.atomic.pages.HeaderFooterPage
 import io.element.android.libraries.designsystem.preview.ElementPreview
 import io.element.android.libraries.designsystem.preview.PreviewsDayNight
 import io.element.android.libraries.designsystem.theme.components.Button
-import io.element.android.libraries.designsystem.theme.components.Icon
 import io.element.android.libraries.designsystem.theme.temporaryColorBgSpecial
+import io.element.android.libraries.designsystem.utils.CommonDrawables
 import io.element.android.libraries.theme.ElementTheme
 import io.element.android.libraries.ui.strings.CommonStrings
 import kotlinx.collections.immutable.persistentListOf
@@ -94,38 +92,24 @@ private fun SignedOutContent(
             items = persistentListOf(
                 InfoListItem(
                     message = stringResource(id = R.string.screen_signed_out_reason_1),
-                    iconComposable = { Icon(R.drawable.ic_lock_outline) },
+                    iconId = CommonDrawables.ic_lock_outline,
                 ),
                 InfoListItem(
                     message = stringResource(id = R.string.screen_signed_out_reason_2),
-                    iconComposable = { Icon(R.drawable.ic_devices) },
+                    iconId = CommonDrawables.ic_devices,
                 ),
                 InfoListItem(
                     message = stringResource(id = R.string.screen_signed_out_reason_3),
-                    iconComposable = { Icon(R.drawable.ic_do_disturb_alt) },
+                    iconId = CommonDrawables.ic_do_disturb_alt,
                 ),
             ),
             textStyle = ElementTheme.typography.fontBodyMdMedium,
-            iconTint = ElementTheme.colors.textPrimary,
+            iconTint = ElementTheme.colors.iconSecondary,
             backgroundColor = ElementTheme.colors.temporaryColorBgSpecial
         )
     }
 }
 
-@Composable
-private fun Icon(
-    @DrawableRes iconResourceId: Int,
-    modifier: Modifier = Modifier,
-) {
-    Icon(
-        modifier = modifier
-            .size(20.dp),
-        resourceId = iconResourceId,
-        contentDescription = null,
-        tint = ElementTheme.colors.iconSecondary,
-    )
-}
-
 @Composable
 private fun SignedOutFooter(
     modifier: Modifier = Modifier,

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/organisms/InfoListOrganism.kt

@@ -19,13 +19,15 @@ package io.element.android.libraries.designsystem.atomic.organisms
 import androidx.annotation.DrawableRes
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.size
 import androidx.compose.material3.LocalContentColor
 import androidx.compose.material3.LocalTextStyle
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import io.element.android.libraries.designsystem.atomic.molecules.InfoListItemMolecule
 import io.element.android.libraries.designsystem.atomic.molecules.InfoListItemPosition
@@ -43,6 +45,7 @@ fun InfoListOrganism(
     backgroundColor: Color,
     modifier: Modifier = Modifier,
     iconTint: Color = LocalContentColor.current,
+    iconSize: Dp = 20.dp,
     textStyle: TextStyle = LocalTextStyle.current,
     verticalArrangement: Arrangement.Vertical = Arrangement.spacedBy(4.dp),
 ) {
@@ -67,9 +70,19 @@ fun InfoListOrganism(
                 },
                 icon = {
                     if (item.iconId != null) {
-                        Icon(resourceId = item.iconId, contentDescription = null, tint = iconTint)
+                        Icon(
+                            modifier = Modifier.size(iconSize),
+                            resourceId = item.iconId,
+                            contentDescription = null,
+                            tint = iconTint,
+                        )
                     } else if (item.iconVector != null) {
-                        Icon(imageVector = item.iconVector, contentDescription = null, tint = iconTint)
+                        Icon(
+                            modifier = Modifier.size(iconSize),
+                            imageVector = item.iconVector,
+                            contentDescription = null,
+                            tint = iconTint,
+                        )
                     } else {
                         item.iconComposable()
                     }