Iterate design on on boarding screen.

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,
@@ -140,7 +174,7 @@ private fun OnBoardingButtons(
                 .fillMaxWidth()
                 .testTag(TestTags.onBoardingSignIn)
         ) {
-            Text(text = stringResource(id = R.string.screen_onboarding_sign_in_manually))
+            Text(text = stringResource(id = signInButtonStringRes))
         }
         if (state.canCreateAccount) {
             OutlinedButton(
@@ -152,6 +186,7 @@ private fun OnBoardingButtons(
                 Text(text = stringResource(id = R.string.screen_onboarding_sign_up))
             }
         }
+        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,
         )