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

Desing: onboarding iteration

features/onboarding/impl/src/main/kotlin/io/element/android/features/onboarding/impl/OnBoardingView.kt

@@ -22,7 +22,9 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.QrCode
@@ -31,7 +33,6 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment.Companion.CenterHorizontally
 import androidx.compose.ui.BiasAlignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
@@ -49,8 +50,14 @@ import io.element.android.libraries.designsystem.theme.components.OutlinedButton
 import io.element.android.libraries.designsystem.theme.components.Text
 import io.element.android.libraries.testtags.TestTags
 import io.element.android.libraries.testtags.testTag
+import io.element.android.libraries.theme.ElementTheme
+import io.element.android.libraries.ui.strings.CommonStrings
 
-// Ref: https://www.figma.com/file/o9p34zmiuEpZRyvZXJZAYL/FTUE?type=design&node-id=133-5427&t=5SHVppfYzjvkEywR-0
+// Refs:
+// FTUE:
+// - https://www.figma.com/file/o9p34zmiuEpZRyvZXJZAYL/FTUE?type=design&node-id=133-5427&t=5SHVppfYzjvkEywR-0
+// ElementX:
+// - https://www.figma.com/file/0MMNu7cTOzLOlWb7ctTkv3/Element-X?type=design&node-id=1816-97419
 @Composable
 fun OnBoardingView(
     state: OnBoardingState,
@@ -61,6 +68,9 @@ fun OnBoardingView(
 ) {
     OnBoardingPage(
         modifier = modifier,
+        content = {
+            OnBoardingContent()
+        },
         footer = {
             OnBoardingButtons(
                 state = state,
@@ -69,42 +79,61 @@ fun OnBoardingView(
                 onCreateAccount = onCreateAccount,
             )
         }
-    ) {
+    )
-        OnBoardingContent()
-    }
 }
 
 @Composable
 private fun OnBoardingContent(modifier: Modifier = Modifier) {
+    // Note: having a night variant of R.drawable.onboarding_icon in the folder `drawable-night` is working
+    // at runtime, but is not in Android Studio Preview. So I prefer to handle this manually.
+    val isLight = ElementTheme.colors.isLight
+    val iconDrawableRes = if (isLight) R.drawable.onboarding_icon_light else R.drawable.onboarding_icon_dark
     Box(
         modifier = modifier.fillMaxSize(),
-        contentAlignment = BiasAlignment(
-            horizontalBias = 0f,
-            verticalBias = -0.2f
-        )
     ) {
-        Column(
+        Box(
-            modifier = Modifier
+            modifier = Modifier.fillMaxSize(),
-                .fillMaxWidth(),
+            contentAlignment = BiasAlignment(
-            horizontalAlignment = CenterHorizontally,
+                horizontalBias = 0f,
+                verticalBias = -0.4f
+            )
         ) {
+            // Dark and light icon does not have the same size, add padding to the smaller one
+            val imagePadding = if (isLight) 28.dp else 0.dp
             Image(
-                painter = painterResource(id = R.drawable.element_logo),
+                modifier = Modifier
+                    .size(278.dp)
+                    .padding(imagePadding),
+                painter = painterResource(id = iconDrawableRes),
                 contentDescription = null,
             )
-            Image(
+        }
-                modifier = Modifier.padding(top = 14.dp),
+        Box(
-                painter = painterResource(id = R.drawable.element),
+            modifier = Modifier.fillMaxSize(),
-                colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.primary),
+            contentAlignment = BiasAlignment(
-                contentDescription = null,
+                horizontalBias = 0f,
-            )
+                verticalBias = 0.6f
-            Text(
-                modifier = Modifier.padding(top = 24.dp),
-                text = stringResource(id = R.string.screen_onboarding_subtitle),
-                color = MaterialTheme.colorScheme.secondary,
-                fontSize = 20.sp,
-                textAlign = TextAlign.Center
             )
+        ) {
+            Column(
+                modifier = Modifier
+                    .fillMaxWidth(),
+                horizontalAlignment = CenterHorizontally,
+            ) {
+                Text(
+                    text = stringResource(id = R.string.screen_onboarding_welcome_title),
+                    color = ElementTheme.materialColors.primary,
+                    style = ElementTheme.typography.fontHeadingLgBold,
+                    textAlign = TextAlign.Center
+                )
+                Spacer(modifier = Modifier.height(8.dp))
+                Text(
+                    text = stringResource(id = R.string.screen_onboarding_welcome_message),
+                    color = ElementTheme.materialColors.secondary,
+                    style = ElementTheme.typography.fontBodyLgRegular.copy(fontSize = 17.sp),
+                    textAlign = TextAlign.Center
+                )
+            }
         }
     }
 }
@@ -118,6 +147,11 @@ private fun OnBoardingButtons(
     modifier: Modifier = Modifier,
 ) {
     ButtonColumnMolecule(modifier = modifier) {
+        val signInButtonStringRes = if (state.canLoginWithQrCode || state.canCreateAccount) {
+            R.string.screen_onboarding_sign_in_manually
+        } else {
+            CommonStrings.action_continue
+        }
         if (state.canLoginWithQrCode) {
             Button(
                 onClick = onSignInWithQrCode,
@@ -130,7 +164,10 @@ private fun OnBoardingButtons(
                     tint = MaterialTheme.colorScheme.onPrimary
                 )
                 Spacer(Modifier.width(14.dp))
-                Text(text = stringResource(id = R.string.screen_onboarding_sign_in_with_qr_code))
+                Text(
+                    text = stringResource(id = R.string.screen_onboarding_sign_in_with_qr_code),
+                    style = ElementTheme.typography.fontBodyLgMedium,
+                )
             }
         }
         Button(
@@ -140,7 +177,10 @@ private fun OnBoardingButtons(
                 .fillMaxWidth()
                 .testTag(TestTags.onBoardingSignIn)
         ) {
-            Text(text = stringResource(id = R.string.screen_onboarding_sign_in_manually))
+            Text(
+                text = stringResource(id = signInButtonStringRes),
+                style = ElementTheme.typography.fontBodyLgMedium,
+            )
         }
         if (state.canCreateAccount) {
             OutlinedButton(
@@ -149,9 +189,13 @@ private fun OnBoardingButtons(
                 modifier = Modifier
                     .fillMaxWidth()
             ) {
-                Text(text = stringResource(id = R.string.screen_onboarding_sign_up))
+                Text(
+                    text = stringResource(id = R.string.screen_onboarding_sign_up),
+                    style = ElementTheme.typography.fontBodyLgMedium,
+                )
             }
         }
+        Spacer(modifier = Modifier.height(16.dp))
     }
 }
 

features/onboarding/impl/src/main/res/drawable/element.xml

@@ -1,27 +0,0 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="160dp"
-    android:height="34dp"
-    android:viewportWidth="160"
-    android:viewportHeight="34">
-  <path
-      android:pathData="M22.18,23.71H5.07C5.27,25.51 5.92,26.94 7.02,28.01C8.12,29.05 9.56,29.57 11.35,29.57C12.53,29.57 13.6,29.28 14.56,28.71C15.51,28.13 16.19,27.35 16.59,26.36H21.79C21.1,28.65 19.8,30.5 17.89,31.92C16.01,33.31 13.79,34 11.22,34C7.87,34 5.16,32.89 3.08,30.66C1.03,28.43 0,25.61 0,22.2C0,18.87 1.04,16.08 3.12,13.82C5.2,11.56 7.88,10.43 11.18,10.43C14.47,10.43 17.13,11.55 19.15,13.78C21.2,15.97 22.22,18.75 22.22,22.11L22.18,23.71ZM11.18,14.64C9.56,14.64 8.22,15.12 7.15,16.08C6.08,17.03 5.42,18.3 5.16,19.9H17.11C16.88,18.3 16.25,17.03 15.21,16.08C14.17,15.12 12.82,14.64 11.18,14.64Z"
-      android:fillColor="#1B1D22"/>
-  <path
-      android:pathData="M25.77,26.75V0.93H30.93V26.84C30.93,28 31.56,28.58 32.83,28.58L33.74,28.53V33.44C33.25,33.52 32.73,33.57 32.18,33.57C29.96,33.57 28.33,33 27.29,31.87C26.28,30.75 25.77,29.04 25.77,26.75Z"
-      android:fillColor="#1B1D22"/>
-  <path
-      android:pathData="M57.75,23.71H40.64C40.84,25.51 41.49,26.94 42.59,28.01C43.69,29.05 45.13,29.57 46.92,29.57C48.11,29.57 49.18,29.28 50.13,28.71C51.08,28.13 51.76,27.35 52.16,26.36H57.36C56.67,28.65 55.37,30.5 53.46,31.92C51.59,33.31 49.36,34 46.79,34C43.44,34 40.73,32.89 38.65,30.66C36.6,28.43 35.57,25.61 35.57,22.2C35.57,18.87 36.61,16.08 38.69,13.82C40.77,11.56 43.46,10.43 46.75,10.43C50.04,10.43 52.7,11.55 54.72,13.78C56.77,15.97 57.8,18.75 57.8,22.11L57.75,23.71ZM46.75,14.64C45.13,14.64 43.79,15.12 42.72,16.08C41.65,17.03 40.99,18.3 40.73,19.9H52.68C52.45,18.3 51.82,17.03 50.78,16.08C49.74,15.12 48.4,14.64 46.75,14.64Z"
-      android:fillColor="#1B1D22"/>
-  <path
-      android:pathData="M81.01,20.55V33.48H75.86V19.98C75.86,16.57 74.44,14.86 71.61,14.86C70.08,14.86 68.85,15.35 67.93,16.34C67.03,17.32 66.59,18.67 66.59,20.37V33.48H61.43V10.95H66.2V13.95C66.75,12.94 67.58,12.1 68.71,11.43C69.84,10.77 71.24,10.43 72.91,10.43C76.03,10.43 78.28,11.62 79.67,13.99C81.58,11.62 84.12,10.43 87.29,10.43C89.92,10.43 91.94,11.26 93.36,12.91C94.77,14.53 95.48,16.67 95.48,19.33V33.48H90.33V19.98C90.33,16.57 88.91,14.86 86.08,14.86C84.52,14.86 83.28,15.37 82.36,16.38C81.46,17.36 81.01,18.75 81.01,20.55Z"
-      android:fillColor="#1B1D22"/>
-  <path
-      android:pathData="M121.12,23.71H104.01C104.21,25.51 104.86,26.94 105.96,28.01C107.06,29.05 108.5,29.57 110.29,29.57C111.47,29.57 112.54,29.28 113.5,28.71C114.45,28.13 115.13,27.35 115.53,26.36H120.73C120.04,28.65 118.74,30.5 116.83,31.92C114.96,33.31 112.73,34 110.16,34C106.81,34 104.1,32.89 102.02,30.66C99.97,28.43 98.94,25.61 98.94,22.2C98.94,18.87 99.98,16.08 102.06,13.82C104.14,11.56 106.82,10.43 110.12,10.43C113.41,10.43 116.07,11.55 118.09,13.78C120.14,15.97 121.16,18.75 121.16,22.11L121.12,23.71ZM110.12,14.64C108.5,14.64 107.16,15.12 106.09,16.08C105.02,17.03 104.36,18.3 104.1,19.9H116.05C115.82,18.3 115.19,17.03 114.15,16.08C113.11,15.12 111.76,14.64 110.12,14.64Z"
-      android:fillColor="#1B1D22"/>
-  <path
-      android:pathData="M129.56,10.95V13.95C130.08,12.97 130.94,12.14 132.12,11.48C133.33,10.78 134.79,10.43 136.5,10.43C139.15,10.43 141.2,11.24 142.65,12.86C144.12,14.48 144.86,16.64 144.86,19.33V33.48H139.7V19.98C139.7,18.39 139.33,17.15 138.57,16.25C137.85,15.32 136.74,14.86 135.24,14.86C133.59,14.86 132.29,15.35 131.34,16.34C130.42,17.32 129.95,18.68 129.95,20.42V33.48H124.8V10.95H129.56Z"
-      android:fillColor="#1B1D22"/>
-  <path
-      android:pathData="M159.91,28.88V33.35C159.28,33.52 158.38,33.61 157.23,33.61C152.84,33.61 150.64,31.4 150.64,26.97V15.08H147.22V10.95H150.64V5.1H155.8V10.95H160V15.08H155.8V26.45C155.8,28.21 156.63,29.1 158.31,29.1L159.91,28.88Z"
-      android:fillColor="#1B1D22"/>
-</vector>

features/onboarding/impl/src/main/res/drawable/element_logo.xml

@@ -1,26 +0,0 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="50dp"
-    android:height="49dp"
-    android:viewportWidth="50"
-    android:viewportHeight="49">
-  <path
-      android:pathData="M24.8,48.608C38.199,48.608 49.061,37.726 49.061,24.304C49.061,10.881 38.199,0 24.8,0C11.401,0 0.54,10.881 0.54,24.304C0.54,37.726 11.401,48.608 24.8,48.608Z"
-      android:fillColor="#0DBD8B"
-      android:fillType="evenOdd"/>
-  <path
-      android:pathData="M20.365,11.324C20.365,10.343 21.16,9.548 22.142,9.548C28.793,9.548 34.185,14.938 34.185,21.587C34.185,22.568 33.389,23.363 32.408,23.363C31.426,23.363 30.631,22.568 30.631,21.587C30.631,16.9 26.83,13.1 22.142,13.1C21.16,13.1 20.365,12.305 20.365,11.324Z"
-      android:fillColor="#ffffff"
-      android:fillType="evenOdd"/>
-  <path
-      android:pathData="M37.753,19.81C38.735,19.81 39.53,20.606 39.53,21.587C39.53,28.236 34.138,33.626 27.487,33.626C26.506,33.626 25.71,32.831 25.71,31.85C25.71,30.869 26.506,30.073 27.487,30.073C32.176,30.073 35.976,26.274 35.976,21.587C35.976,20.606 36.772,19.81 37.753,19.81Z"
-      android:fillColor="#ffffff"
-      android:fillType="evenOdd"/>
-  <path
-      android:pathData="M29.264,37.283C29.264,38.264 28.468,39.06 27.487,39.06C20.836,39.06 15.444,33.669 15.444,27.02C15.444,26.039 16.24,25.244 17.221,25.244C18.202,25.244 18.998,26.039 18.998,27.02C18.998,31.708 22.799,35.507 27.487,35.507C28.468,35.507 29.264,36.302 29.264,37.283Z"
-      android:fillColor="#ffffff"
-      android:fillType="evenOdd"/>
-  <path
-      android:pathData="M11.847,28.797C10.866,28.797 10.071,28.002 10.071,27.021C10.071,20.372 15.462,14.981 22.113,14.981C23.095,14.981 23.89,15.777 23.89,16.758C23.89,17.739 23.095,18.534 22.113,18.534C17.425,18.534 13.624,22.333 13.624,27.021C13.624,28.002 12.829,28.797 11.847,28.797Z"
-      android:fillColor="#ffffff"
-      android:fillType="evenOdd"/>
-</vector>

libraries/designsystem/src/main/kotlin/io/element/android/libraries/designsystem/atomic/pages/OnBoardingPage.kt

@@ -50,6 +50,10 @@ fun OnBoardingPage(
     footer: @Composable () -> Unit = {},
     content: @Composable () -> Unit = {},
 ) {
+    // Note: having a night variant of R.drawable.onboarding_bg in the folder `drawable-night` is working
+    // at runtime, but is not in Android Studio Preview. So I prefer to handle this manually.
+    val isLight = ElementTheme.colors.isLight
+    val bgDrawableRes = if (isLight) R.drawable.onboarding_bg_light else R.drawable.onboarding_bg_dark
     Box(
         modifier = modifier
             .fillMaxSize()
@@ -58,7 +62,7 @@ fun OnBoardingPage(
         Image(
             modifier = Modifier
                 .fillMaxSize(),
-            painter = painterResource(id = R.drawable.onboarding_bg),
+            painter = painterResource(id = bgDrawableRes),
             contentScale = ContentScale.Crop,
             contentDescription = null,
         )

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.onboarding.impl_null_DefaultGroup_OnBoardingScreenDarkPreview_0_null_0,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:93babf0a42a224e2d2288cf57141e2e766aef29725f6cc2c2c54d91fe1da70fa
+oid sha256:1c001e4db1cee87d99b4faa8956d322dd5f70c1a3fe92ea36ccd24ba7f6ee94b
-size 251481
+size 471797

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.onboarding.impl_null_DefaultGroup_OnBoardingScreenDarkPreview_0_null_1,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:19243cd6c9bccd091b807b808b94d77aebc61696aded13bdeea60eabaaf70513
+oid sha256:188c11dc1c5eca937a0e8aa20b71ea6ec0436a7d4139cb2294feb25f72037ab3
-size 241183
+size 454206

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.onboarding.impl_null_DefaultGroup_OnBoardingScreenDarkPreview_0_null_2,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:79cfac58781ea6924533968f7b7912afc18d307b3df4a607e5aa91da7f7e5336
+oid sha256:887b8771ed039e5e4b8da51a567e73a886606497d0dd4906a89513ea5e3ce3e7
-size 250927
+size 470644

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.onboarding.impl_null_DefaultGroup_OnBoardingScreenDarkPreview_0_null_3,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:e8fd4cb80a1fd482faf0de7e70ec6788fcf77904df36424dd502afe2817d49a2
+oid sha256:7f7742fadef66ce01fffab3b8ba7ce2b7ac81977300b9bf541f7d10d3dd7650b
-size 237499
+size 442213

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.onboarding.impl_null_DefaultGroup_OnBoardingScreenLightPreview_0_null_0,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8a6e438c1c7949d8f6dd1dd98036cfebc72f79d77a846aa470e19656e3e10217
+oid sha256:c809d004a829c2bc6b900e139c0c1e7379249403741646ad92bc1c2c9f248903
-size 242094
+size 354381

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.onboarding.impl_null_DefaultGroup_OnBoardingScreenLightPreview_0_null_1,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6f4d0f7fbbcb2bad92d973678669d3dd6a99c8d3c149b4e138beafcdd47dae19
+oid sha256:15c75a82f4cd2e26108898622eaba99a2720fe9733d12c418b2eaacde009d9bb
-size 231833
+size 344302

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.onboarding.impl_null_DefaultGroup_OnBoardingScreenLightPreview_0_null_2,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:3e34ebd0eddf70241af88ecbb3ffe8fee6eaa438843bda056acb3f5a105ade98
+oid sha256:b9e4204700497f29a073ff238f5d42b1373e346a995e242861ec2ba1ebd6f606
-size 241836
+size 356483

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.features.onboarding.impl_null_DefaultGroup_OnBoardingScreenLightPreview_0_null_3,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2f4fa21fb8352153b69e80003fd0fa014c7cbb8db42259e0edb6584794c5bc98
+oid sha256:726a2c5fcf7d7e6b24799ad62bcd58872730493be0fd8282aab7884e2832d7ac
-size 227974
+size 336263

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.atomic.pages_null_DefaultGroup_OnBoardingPageDarkPreview_0_null,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d4f4a703cad1981b65781f01be3b5d88e00639a274c90dc849a59a9b52133067
+oid sha256:709d08d911e60ef3ec443a347a2824ef42fccc15749903ed3492fa980869c505
-size 249863
+size 430087

tests/uitests/src/test/snapshots/images/io.element.android.tests.uitests_ScreenshotTest_preview_tests[io.element.android.libraries.designsystem.atomic.pages_null_DefaultGroup_OnBoardingPageLightPreview_0_null,NEXUS_5,1.0,en].png

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:9354d10ff9ab0c276c010c2ea5248bf98329b73f0f7a760b1359b0c54efb1f9c
+oid sha256:65b33cc70bdfd18f94ea77fe39e6bb6e0595b7fe68583ed88c891baf0b907743
-size 240224
+size 295653