Iterate on onboarding screen - WIP

features/onboarding/impl/build.gradle.kts

@@ -40,8 +40,6 @@ dependencies {
     implementation(projects.libraries.testtags)
     implementation(projects.libraries.uiStrings)
     implementation(projects.libraries.androidutils)
-    implementation(libs.accompanist.pager)
-    implementation(libs.accompanist.pagerindicator)
     api(projects.features.onboarding.api)
     ksp(libs.showkase.processor)
 

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

@@ -50,7 +50,6 @@ class OnBoardingNode @AssistedInject constructor(
         OnBoardingScreen(
             modifier = modifier,
             onSignIn = this::onSignIn,
-            onSignUp = this::onSignUp
         )
     }
 }

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

@@ -17,151 +17,159 @@
 package io.element.android.features.onboarding.impl
 
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.systemBarsPadding
+import androidx.compose.foundation.layout.width
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.QrCode
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
-import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment.Companion.CenterHorizontally
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.ColorFilter
+import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
-import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import com.google.accompanist.pager.HorizontalPager
-import com.google.accompanist.pager.HorizontalPagerIndicator
-import com.google.accompanist.pager.rememberPagerState
 import io.element.android.libraries.designsystem.preview.ElementPreviewDark
 import io.element.android.libraries.designsystem.preview.ElementPreviewLight
 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.components.Text
+import io.element.android.libraries.designsystem.theme.components.TextButton
 import io.element.android.libraries.testtags.TestTags
 import io.element.android.libraries.testtags.testTag
-import kotlinx.coroutines.delay
-import kotlinx.coroutines.launch
 
 @Composable
 fun OnBoardingScreen(
     modifier: Modifier = Modifier,
-    onPageChanged: (Int) -> Unit = {},
+    onSignInWithQrCode: () -> Unit = {},
-    onSignUp: () -> Unit = {},
     onSignIn: () -> Unit = {},
+    onCreateAccount: () -> Unit = {},
 ) {
-    val carrouselData = remember { SplashCarouselDataFactory().create() }
-    val nbOfPages = carrouselData.items.size
-    var key by remember { mutableStateOf(false) }
     Box(
         modifier = modifier
             .fillMaxSize()
-            .systemBarsPadding()
-            .padding(vertical = 16.dp)
     ) {
+        // BG
+        Image(
+            modifier = modifier
+                .fillMaxSize(),
+            painter = painterResource(id = R.drawable.onboarding_bg),
+            contentScale = ContentScale.Crop,
+            contentDescription = null,
+        )
         Column(
-            modifier = Modifier.fillMaxSize(),
+            modifier = Modifier
+                .fillMaxSize()
+                .systemBarsPadding()
+                .padding(vertical = 16.dp),
         ) {
-            val pagerState = rememberPagerState()
+            Column(
-            LaunchedEffect(key) {
-                launch {
-                    delay(3_000)
-                    pagerState.animateScrollToPage((pagerState.currentPage + 1) % nbOfPages)
-                    // https://stackoverflow.com/questions/73714228/accompanist-pager-animatescrolltopage-doesnt-scroll-to-next-page-correctly
-                    key = !key
-                }
-            }
-            LaunchedEffect(pagerState) {
-                // Collect from the pager state a snapshotFlow reading the currentPage
-                snapshotFlow { pagerState.currentPage }.collect { page ->
-                    onPageChanged(page)
-                }
-            }
-            HorizontalPager(
-                modifier = Modifier.weight(1f),
-                count = nbOfPages,
-                state = pagerState,
-            ) { page ->
-                // Our page content
-                OnBoardingPage(carrouselData.items[page])
-            }
-            HorizontalPagerIndicator(
-                pagerState = pagerState,
                 modifier = Modifier
-                    .align(CenterHorizontally)
+                    .weight(1f)
-                    .padding(16.dp),
+                    .padding(horizontal = 24.dp)
-            )
+                    .fillMaxWidth(),
-            Button(
-                onClick = {
-                    onSignIn()
-                },
-                enabled = true,
-                modifier = Modifier
-                    .align(CenterHorizontally)
-                    .testTag(TestTags.onBoardingSignIn)
-                    .padding(top = 16.dp)
             ) {
-                Text(text = stringResource(id = R.string.login_splash_submit))
+                Spacer(modifier = Modifier.weight(2f))
+                OnBoardingHeader()
+                Spacer(modifier = Modifier.weight(3f))
             }
+            OnBoardingButtons(
+                onSignInWithQrCode = onSignInWithQrCode,
+                onSignIn = onSignIn,
+                onCreateAccount = onCreateAccount,
+            )
         }
     }
 }
 
 @Composable
-fun OnBoardingPage(
+private fun ColumnScope.OnBoardingHeader() {
-    item: SplashCarouselData.Item,
+    Column(
-    modifier: Modifier = Modifier,
+        modifier = Modifier
-) {
+            .weight(3f)
-    Box(
+            .fillMaxWidth(),
-        modifier = modifier,
+        horizontalAlignment = CenterHorizontally,
     ) {
-        /*
         Image(
-            painterResource(id = item.pageBackground),
+            painter = painterResource(id = R.drawable.element_logo),
             contentDescription = null,
-            modifier = Modifier.fillMaxSize()
         )
-         */
+        Image(
-        Column(
+            modifier = Modifier.padding(top = 14.dp),
-            modifier = Modifier.padding(vertical = 16.dp, horizontal = 32.dp)
+            painter = painterResource(id = R.drawable.element),
+            colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.primary),
+            contentDescription = null,
+        )
+        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
+        )
+    }
+}
+
+@Composable
+private fun OnBoardingButtons(
+    onSignInWithQrCode: () -> Unit,
+    onSignIn: () -> Unit,
+    onCreateAccount: () -> Unit,
+) {
+    Column(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp),
+        horizontalAlignment = CenterHorizontally,
+        verticalArrangement = Arrangement.spacedBy(16.dp)
+    ) {
+        Button(
+            onClick = {
+                onSignInWithQrCode()
+            },
+            enabled = true,
+            modifier = Modifier
+                .fillMaxWidth()
         ) {
-            Image(
+            Icon(
-                painterResource(id = item.image),
+                imageVector = Icons.Default.QrCode, contentDescription = null,
-                contentDescription = null,
+                tint = MaterialTheme.colorScheme.onPrimary
-                modifier = Modifier
-                    .align(CenterHorizontally)
-                    .size(192.dp)
-                    .padding(16.dp)
-            )
-            Text(
-                text = stringResource(id = item.title),
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .align(CenterHorizontally)
-                    .padding(8.dp),
-                textAlign = TextAlign.Center,
-                fontWeight = FontWeight.Bold,
-                color = MaterialTheme.colorScheme.primary,
-                fontSize = 24.sp,
-            )
-            Text(
-                text = stringResource(id = item.body),
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .align(CenterHorizontally),
-                textAlign = TextAlign.Center,
-                color = MaterialTheme.colorScheme.primary,
             )
+            Spacer(Modifier.width(14.dp))
+            Text(text = stringResource(id = R.string.screen_onboarding_sign_in_with_qr_code))
+        }
+        Button(
+            onClick = {
+                onSignIn()
+            },
+            enabled = true,
+            modifier = Modifier
+                .fillMaxWidth()
+                .testTag(TestTags.onBoardingSignIn)
+        ) {
+            Text(text = stringResource(id = R.string.screen_onboarding_sign_in_manually))
+        }
+        TextButton(
+            onClick = {
+                onCreateAccount()
+            },
+            enabled = true,
+            modifier = Modifier
+                .fillMaxWidth()
+        ) {
+            Text(text = stringResource(id = R.string.screen_onboarding_sign_up))
         }
     }
 }

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

@@ -1,31 +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.
- */
-
-package io.element.android.features.onboarding.impl
-
-import androidx.annotation.DrawableRes
-import androidx.annotation.StringRes
-
-data class SplashCarouselData(
-    val items: List<Item>
-) {
-    data class Item(
-        @StringRes val title: Int,
-        @StringRes val body: Int,
-        @DrawableRes val image: Int,
-        @DrawableRes val pageBackground: Int
-    )
-}

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

@@ -1,73 +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.
- */
-
-package io.element.android.features.onboarding.impl
-
-import androidx.annotation.DrawableRes
-
-class SplashCarouselDataFactory {
-    fun create(): SplashCarouselData {
-        val lightTheme = true
-
-        fun background(@DrawableRes lightDrawable: Int) =
-            if (lightTheme) lightDrawable else R.drawable.bg_color_background
-
-        fun hero(@DrawableRes lightDrawable: Int, @DrawableRes darkDrawable: Int) =
-            if (lightTheme) lightDrawable else darkDrawable
-
-        return SplashCarouselData(
-            listOf(
-                SplashCarouselData.Item(
-                    R.string.ftue_auth_carousel_secure_title,
-                    R.string.ftue_auth_carousel_secure_body,
-                    hero(
-                        R.drawable.ic_splash_conversations,
-                        R.drawable.ic_splash_conversations_dark
-                    ),
-                    background(R.drawable.bg_carousel_page_1)
-                ),
-                SplashCarouselData.Item(
-                    R.string.ftue_auth_carousel_control_title,
-                    R.string.ftue_auth_carousel_control_body,
-                    hero(R.drawable.ic_splash_control, R.drawable.ic_splash_control_dark),
-                    background(R.drawable.bg_carousel_page_2)
-                ),
-                SplashCarouselData.Item(
-                    R.string.ftue_auth_carousel_encrypted_title,
-                    R.string.ftue_auth_carousel_encrypted_body,
-                    hero(R.drawable.ic_splash_secure, R.drawable.ic_splash_secure_dark),
-                    background(R.drawable.bg_carousel_page_3)
-                ),
-                SplashCarouselData.Item(
-                    collaborationTitle(),
-                    R.string.ftue_auth_carousel_workplace_body,
-                    hero(
-                        R.drawable.ic_splash_collaboration,
-                        R.drawable.ic_splash_collaboration_dark
-                    ),
-                    background(R.drawable.bg_carousel_page_4)
-                )
-            )
-        )
-    }
-
-    private fun collaborationTitle(): Int {
-        return when {
-            true -> R.string.cut_the_slack_from_teams
-            else -> R.string.ftue_auth_carousel_workplace_title
-        }
-    }
-}

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

@@ -1,23 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-  ~ Copyright (c) 2022 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.
-  -->
-
-<shape xmlns:android="http://schemas.android.com/apk/res/android">
-    <gradient
-        android:angle="@integer/rtl_mirror_flip"
-        android:endColor="#3372C7DA"
-        android:startColor="#33BBE7CF" />
-</shape>

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

@@ -1,23 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-  ~ Copyright (c) 2022 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.
-  -->
-
-<shape xmlns:android="http://schemas.android.com/apk/res/android">
-    <gradient
-        android:angle="@integer/rtl_mirror_flip"
-        android:endColor="#33B972DA"
-        android:startColor="#3372C7DA" />
-</shape>

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

@@ -1,23 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-  ~ Copyright (c) 2022 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.
-  -->
-
-<shape xmlns:android="http://schemas.android.com/apk/res/android">
-    <gradient
-        android:angle="@integer/rtl_mirror_flip"
-        android:endColor="#330DBD8B"
-        android:startColor="#33B972DA" />
-</shape>

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

@@ -1,23 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-  ~ Copyright (c) 2022 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.
-  -->
-
-<shape xmlns:android="http://schemas.android.com/apk/res/android">
-    <gradient
-        android:angle="@integer/rtl_mirror_flip"
-        android:endColor="#33BBE7CF"
-        android:startColor="#330DBD8B" />
-</shape>

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

@@ -1,20 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-  ~ Copyright (c) 2022 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.
-  -->
-
-<shape xmlns:android="http://schemas.android.com/apk/res/android">
-    <solid android:color="?android:colorBackground" />
-</shape>

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

@@ -0,0 +1,27 @@
+<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

@@ -0,0 +1,26 @@
+<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>

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

@@ -1,5 +1,9 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources xmlns:xliff="urn:oasis:names:tc:xliff:document:1.2">
+  <string name="screen_onboarding_sign_in_manually">"Sign in manually"</string>
+  <string name="screen_onboarding_sign_in_with_qr_code">"Sign in with QR code"</string>
+  <string name="screen_onboarding_sign_up">"Create account"</string>
+  <string name="screen_onboarding_subtitle">"Communicate and collaborate securely"</string>
   <string name="screen_onboarding_welcome_subtitle">"Welcome to the %1$s Beta. Supercharged, for speed and simplicity."</string>
   <string name="screen_onboarding_welcome_title">"Be in your Element"</string>
 </resources>

features/onboarding/impl/src/main/res/values/strings.xml

@@ -1,37 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!--
-  ~ Copyright (c) 2022 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.
-  -->
-
-<resources>
-    <!-- File to remove once the screen will be updated -->
-
-    <string name="cut_the_slack_from_teams" translatable="false">Cut the slack from teams.</string>
-
-    <string name="login_splash_submit">Get started</string>
-
-    <string name="ftue_auth_carousel_secure_title">Own your conversations.</string>
-    <string name="ftue_auth_carousel_control_title">You\'re in control.</string>
-    <string name="ftue_auth_carousel_encrypted_title">Secure messaging.</string>
-    <string name="ftue_auth_carousel_workplace_title">Messaging for your team.</string>
-
-    <string name="ftue_auth_carousel_secure_body">Secure and independent communication that gives you the same level of privacy as a face-to-face conversation in your own home.</string>
-    <string name="ftue_auth_carousel_control_body">Choose where your conversations are kept, giving you control and independence. Connected via Matrix.</string>
-    <string name="ftue_auth_carousel_encrypted_body">End-to-end encrypted and no phone number required. No ads or datamining.</string>
-
-    <string name="ftue_auth_carousel_workplace_body">Element is also great for the workplace. It’s trusted by the world’s most secure organisations.</string>
-
-
-</resources>

gradle/libs.versions.toml

@@ -96,8 +96,6 @@ accompanist_permission = { module = "com.google.accompanist:accompanist-permissi
 accompanist_material = { module = "com.google.accompanist:accompanist-navigation-material", version.ref = "accompanist" }
 accompanist_systemui = { module = "com.google.accompanist:accompanist-systemuicontroller", version.ref = "accompanist" }
 accompanist_placeholder = { module = "com.google.accompanist:accompanist-placeholder-material", version.ref = "accompanist" }
-accompanist_pager = { module = "com.google.accompanist:accompanist-pager", version.ref = "accompanist" }
-accompanist_pagerindicator = { module = "com.google.accompanist:accompanist-pager-indicators", version.ref = "accompanist" }
 accompanist_flowlayout = { module = "com.google.accompanist:accompanist-flowlayout", version.ref = "accompanist" }
 
 # Libraries