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))
+                Spacer(modifier = Modifier.height(80.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))
                 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()
                     }

tests/uitests/src/test/snapshots/images/ui_S_t[f.ftue.impl.welcome_WelcomeView_null_WelcomeView-Day-2_2_null,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3fbfe34e19969a3e3117094ab85428b0a2192a87050d82ddb4e5e321a1fabc45
+oid sha256:812de54cf01d30f00db9606f7907f106453eba5f9bba4b9fd38a61d8944e780c
-size 294795
+size 288364

tests/uitests/src/test/snapshots/images/ui_S_t[f.ftue.impl.welcome_WelcomeView_null_WelcomeView-Night-2_3_null,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8d59dbc9d8b1db8de6bee9769a141c73077581df5c7381e55d1b631bdf21d4a2
+oid sha256:bc89eabc29dd72962b2ccece5bc003ffaf233b81817acf5b59f4574d4774af41
-size 401867
+size 391205

tests/uitests/src/test/snapshots/images/ui_S_t[f.preferences.impl.root_PreferencesRootViewDark_null_PreferencesRootViewDark--1_3_null_0,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:79759b51c1a16981d2643030596d48788bc7028b7f52fb1d2fdda31992841b9a
+oid sha256:d7ceba6d884500e6966d548aa048115f7dc326ed14420739b045de7fe75c0cce
-size 45193
+size 45210

tests/uitests/src/test/snapshots/images/ui_S_t[f.preferences.impl.root_PreferencesRootViewDark_null_PreferencesRootViewDark--1_3_null_1,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0bee3d838df124a7668b93f06e5bfc10d71705c1e5d76790d1e72cd18ad54d45
+oid sha256:a9ba978ff9b76534a9c90ca681268b249ee60865438361b13782269d3d4a7a53
-size 44522
+size 44542

tests/uitests/src/test/snapshots/images/ui_S_t[f.preferences.impl.root_PreferencesRootViewLight_null_PreferencesRootViewLight--0_2_null_0,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:12fbb25e7316b85696813eb598458f0b5617bc87a1277535928693082dbe17da
+oid sha256:c0fe7924589afab07164f2c201c97c1715f38d39d0447614bc67eeb893e3701c
-size 48253
+size 48261

tests/uitests/src/test/snapshots/images/ui_S_t[f.preferences.impl.root_PreferencesRootViewLight_null_PreferencesRootViewLight--0_2_null_1,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:93431e06263c26c11c2bdaf0fb977b558b419190144f007f5bb91de2d0e921cb
+oid sha256:8fa38f9897d0c743c0d44b5db8b57d88e522b8d603af04f02eb7b2f480e90756
-size 48154
+size 48162

tests/uitests/src/test/snapshots/images/ui_S_t[f.signedout.impl_SignedOutView_null_SignedOutView-Day-0_0_null_0,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:25d69103d52132a0d47f3e5c4feebc4a981e4d382255e312c83973fff4e0b3e8
+oid sha256:2848fd51e5c11e31500ed1f1029d4dd5e3e9514e414c7bcb970baca30ff0d94f
-size 60658
+size 60647

tests/uitests/src/test/snapshots/images/ui_S_t[f.signedout.impl_SignedOutView_null_SignedOutView-Night-0_1_null_0,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5844f66e9c07ba824fb3d1871281fc385ec7c0898cae0bf8e532bea1ef2278fb
+oid sha256:29ec7823e9c8eff8e62baef3fee40c5ce606a0d4618e9c4a7e3dfd9b1ebe2f69
-size 58885
+size 58881

tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.icons_IconsOther_null_IconsOther-Day_0_null,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7e80db390d11cdd8984d82d9130bfef29ccb1605feb04e435da9a082ace181b3
+oid sha256:e640dc434451e995e29594d50e0494f8f46792a6a76d498347abb9f48c7b40ea
-size 37009
+size 36937

tests/uitests/src/test/snapshots/images/ui_S_t[l.designsystem.icons_IconsOther_null_IconsOther-Night_1_null,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a0b8d7d8016ec2100670f155376a11b2e17be181be9cfbcb0ee8209bfcb1f739
+oid sha256:37c78d99633c381963224c091524236243273231a9698a632fec31e7131df3c7
-size 35147
+size 35085