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,

features/signedout/impl/src/main/res/drawable/ic_devices.xml

@@ -1,29 +0,0 @@
-<!--
-  ~ Copyright (c) 2023 New Vector Ltd
-  ~
-  ~ Licensed under the Apache License, Version 2.0 (the "License");
-  ~ you may not use this file except in compliance with the License.
-  ~ You may obtain a copy of the License at
-  ~
-  ~     http://www.apache.org/licenses/LICENSE-2.0
-  ~
-  ~ Unless required by applicable law or agreed to in writing, software
-  ~ distributed under the License is distributed on an "AS IS" BASIS,
-  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  ~ See the License for the specific language governing permissions and
-  ~ limitations under the License.
-  -->
-
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="20dp"
-    android:height="20dp"
-    android:viewportWidth="20"
-    android:viewportHeight="20">
-  <group>
-    <clip-path
-        android:pathData="M0,0h20v20h-20z"/>
-    <path
-        android:pathData="M3.333,5.833C3.333,5.375 3.708,5 4.167,5H17.5C17.958,5 18.333,4.625 18.333,4.167C18.333,3.708 17.958,3.333 17.5,3.333H3.333C2.417,3.333 1.667,4.083 1.667,5V14.167H1.25C0.558,14.167 0,14.725 0,15.417C0,16.108 0.558,16.667 1.25,16.667H11.667V14.167H3.333V5.833ZM19.167,6.667H14.167C13.708,6.667 13.333,7.042 13.333,7.5V15.833C13.333,16.292 13.708,16.667 14.167,16.667H19.167C19.625,16.667 20,16.292 20,15.833V7.5C20,7.042 19.625,6.667 19.167,6.667ZM18.333,14.167H15V8.333H18.333V14.167Z"
-        android:fillColor="@android:color/white"/>
-  </group>
-</vector>

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

@@ -19,6 +19,7 @@ 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
@@ -26,6 +27,7 @@ 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()
                     }