Merge pull request #1062 from radixdlt/sp/ABW-3512-create-account-ui-…

…refinements

[ABW-3523] - Update UI for create account flow

app/src/main/java/com/babylon/wallet/android/presentation/account/createaccount/CreateAccountNav.kt

@@ -1,7 +1,10 @@
 package com.babylon.wallet.android.presentation.account.createaccount
 
+import android.os.Build
+import android.os.Bundle
 import androidx.annotation.VisibleForTesting
 import androidx.compose.animation.AnimatedContentTransitionScope
+import androidx.core.os.BundleCompat
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.SavedStateHandle
 import androidx.navigation.NavController
@@ -92,10 +95,18 @@ fun NavGraphBuilder.createAccountScreen(
             }
         ),
         enterTransition = {
-            slideIntoContainer(AnimatedContentTransitionScope.SlideDirection.Up)
+            if (requiresHorizontalTransition(targetState.arguments)) {
+                slideIntoContainer(AnimatedContentTransitionScope.SlideDirection.Left)
+            } else {
+                slideIntoContainer(AnimatedContentTransitionScope.SlideDirection.Up)
+            }
         },
         exitTransition = {
-            slideOutOfContainer(AnimatedContentTransitionScope.SlideDirection.Down)
+            if (requiresHorizontalTransition(targetState.arguments)) {
+                slideOutOfContainer(AnimatedContentTransitionScope.SlideDirection.Right)
+            } else {
+                slideOutOfContainer(AnimatedContentTransitionScope.SlideDirection.Down)
+            }
         }
     ) {
         CreateAccountScreen(
@@ -106,3 +117,13 @@ fun NavGraphBuilder.createAccountScreen(
         )
     }
 }
+
+private fun requiresHorizontalTransition(arguments: Bundle?): Boolean {
+    arguments ?: return false
+    val requestSource = if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.TIRAMISU) {
+        arguments.getSerializable(ARG_REQUEST_SOURCE, CreateAccountRequestSource::class.java)
+    } else {
+        BundleCompat.getSerializable(arguments, ARG_REQUEST_SOURCE, CreateAccountRequestSource::class.java)
+    }
+    return requestSource?.isFirstTime() ?: false
+}

app/src/main/java/com/babylon/wallet/android/presentation/account/createaccount/CreateAccountScreen.kt

@@ -11,6 +11,7 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.imePadding
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SnackbarHostState
@@ -23,6 +24,7 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.input.KeyboardCapitalization
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -138,7 +140,7 @@ fun CreateAccountContent(
             RadixCenteredTopAppBar(
                 title = stringResource(id = R.string.empty),
                 onBackClick = onBackClick,
-                backIconType = BackIconType.Close,
+                backIconType = if (firstTime) BackIconType.Back else BackIconType.Close,
                 windowInsets = WindowInsets.statusBarsAndBanner
             )
         },
@@ -160,7 +162,7 @@ fun CreateAccountContent(
         Column(
             modifier = Modifier
                 .padding(padding)
-                .padding(horizontal = RadixTheme.dimensions.paddingLarge)
+                .padding(horizontal = RadixTheme.dimensions.paddingSemiLarge)
                 .padding(top = RadixTheme.dimensions.paddingDefault)
                 .verticalScroll(rememberScrollState()),
             horizontalAlignment = Alignment.CenterHorizontally
@@ -177,6 +179,7 @@ fun CreateAccountContent(
             )
             Spacer(modifier = Modifier.height(RadixTheme.dimensions.paddingDefault))
             Text(
+                modifier = Modifier.padding(horizontal = RadixTheme.dimensions.paddingMedium),
                 text = stringResource(id = R.string.createAccount_nameNewAccount_subtitle),
                 style = RadixTheme.typography.body1Regular,
                 color = RadixTheme.colors.gray1,
@@ -200,7 +203,10 @@ fun CreateAccountContent(
                 },
                 hint = stringResource(id = R.string.createAccount_nameNewAccount_placeholder),
                 hintColor = RadixTheme.colors.gray2,
-                singleLine = true
+                singleLine = true,
+                keyboardOptions = KeyboardOptions.Default.copy(
+                    capitalization = KeyboardCapitalization.Sentences
+                )
             )
             Spacer(modifier = Modifier.height(RadixTheme.dimensions.paddingLarge))
             CreateWithLedgerSwitch(

app/src/main/java/com/babylon/wallet/android/presentation/account/createaccount/confirmation/CreateAccountConfirmationScreen.kt

@@ -5,10 +5,13 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.add
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -21,10 +24,10 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.babylon.wallet.android.R
-import com.babylon.wallet.android.designsystem.composable.RadixPrimaryButton
 import com.babylon.wallet.android.designsystem.theme.RadixTheme
 import com.babylon.wallet.android.designsystem.theme.RadixWalletTheme
 import com.babylon.wallet.android.presentation.ui.composables.AccountCardWithStack
+import com.babylon.wallet.android.presentation.ui.composables.RadixBottomBar
 import com.babylon.wallet.android.presentation.ui.composables.statusBarsAndBanner
 import com.radixdlt.sargon.AppearanceId
 
@@ -68,63 +71,74 @@ fun CreateAccountConfirmationContent(
 
     Scaffold(
         modifier = modifier,
+        bottomBar = {
+            RadixBottomBar(
+                onClick = accountConfirmed,
+                text = stringResource(
+                    id = R.string.createEntity_completion_goToDestination,
+                    when (requestSource) {
+                        CreateAccountRequestSource.AccountsList,
+                        CreateAccountRequestSource.FirstTimeWithCloudBackupDisabled,
+                        CreateAccountRequestSource.FirstTimeWithCloudBackupEnabled -> stringResource(
+                            id = R.string.createEntity_completion_destinationHome
+                        )
+                        CreateAccountRequestSource.ChooseAccount -> stringResource(
+                            R.string.createEntity_completion_destinationChooseAccounts
+                        )
+                        CreateAccountRequestSource.Gateways -> stringResource(id = R.string.createEntity_completion_destinationGateways)
+                    }
+                )
+            )
+        },
         containerColor = RadixTheme.colors.defaultBackground,
         contentWindowInsets = WindowInsets.statusBarsAndBanner.add(WindowInsets.navigationBars)
     ) { padding ->
         Column(
             modifier = Modifier
+                .fillMaxSize()
                 .padding(padding)
                 .padding(
-                    horizontal = RadixTheme.dimensions.paddingLarge,
+                    horizontal = RadixTheme.dimensions.paddingDefault,
                     vertical = RadixTheme.dimensions.paddingDefault
-                ),
+                )
+                .verticalScroll(rememberScrollState()),
             horizontalAlignment = Alignment.CenterHorizontally
         ) {
-            Spacer(modifier = Modifier.weight(0.2f))
-            AccountCardWithStack(Modifier.fillMaxWidth(0.8f), appearanceId, accountName, accountId)
-            Spacer(modifier = Modifier.weight(0.2f))
+            Spacer(modifier = Modifier.weight(2f))
+            AccountCardWithStack(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = RadixTheme.dimensions.paddingXXLarge),
+                appearanceId = appearanceId,
+                accountName = accountName,
+                accountAddress = accountId
+            )
+            Spacer(modifier = Modifier.weight(1f))
             Text(
                 text = stringResource(id = R.string.createEntity_completion_title),
                 style = RadixTheme.typography.title,
                 color = RadixTheme.colors.gray1
             )
-            Spacer(modifier = Modifier.height(RadixTheme.dimensions.paddingMedium))
+            Spacer(modifier = Modifier.height(RadixTheme.dimensions.paddingSemiLarge))
             val text = if (requestSource.isFirstTime()) {
                 stringResource(id = R.string.createAccount_completion_subtitleFirst)
             } else {
                 stringResource(id = R.string.createAccount_completion_subtitleNotFirst)
             }
             Text(
                 text = text,
-                style = RadixTheme.typography.body2Regular,
+                style = RadixTheme.typography.body1Regular,
                 color = RadixTheme.colors.gray1
             )
-            Spacer(modifier = Modifier.height(RadixTheme.dimensions.paddingMedium))
+            Spacer(modifier = Modifier.height(RadixTheme.dimensions.paddingSemiLarge))
             Text(
                 modifier = Modifier.padding(horizontal = RadixTheme.dimensions.paddingXXLarge),
                 text = stringResource(id = R.string.createEntity_nameNewEntity_explanation),
                 textAlign = TextAlign.Center,
-                style = RadixTheme.typography.body2Regular,
+                style = RadixTheme.typography.body1Regular,
                 color = RadixTheme.colors.gray1
             )
-            Spacer(Modifier.weight(0.6f))
-            RadixPrimaryButton(
-                text = when (requestSource) {
-                    CreateAccountRequestSource.AccountsList -> stringResource(
-                        id = R.string.createEntity_completion_goToDestination,
-                        stringResource(id = R.string.createEntity_completion_destinationHome)
-                    )
-
-                    CreateAccountRequestSource.ChooseAccount -> stringResource(R.string.createEntity_completion_destinationChooseAccounts)
-                    CreateAccountRequestSource.Gateways -> stringResource(R.string.createEntity_completion_destinationGateways)
-                    CreateAccountRequestSource.FirstTimeWithCloudBackupDisabled,
-                    CreateAccountRequestSource.FirstTimeWithCloudBackupEnabled -> stringResource(
-                        R.string.createEntity_completion_destinationHome
-                    )
-                },
-                onClick = accountConfirmed,
-                modifier = Modifier.fillMaxWidth()
-            )
+            Spacer(modifier = Modifier.weight(3f))
         }
     }
 }

app/src/main/java/com/babylon/wallet/android/presentation/settings/preferences/WalletPreferencesNav.kt

@@ -95,6 +95,9 @@ private fun NavGraphBuilder.settingsGateway(navController: NavController) {
         },
         exitTransition = {
             slideOutOfContainer(AnimatedContentTransitionScope.SlideDirection.Right)
+        },
+        popEnterTransition = {
+            EnterTransition.None
         }
     ) {
         GatewaysScreen(

app/src/main/java/com/babylon/wallet/android/presentation/ui/composables/AccountCardWithStack.kt

@@ -6,18 +6,20 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.offset
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.zIndex
 import com.babylon.wallet.android.designsystem.theme.RadixTheme
+import com.babylon.wallet.android.designsystem.theme.RadixWalletTheme
 import com.babylon.wallet.android.designsystem.theme.gradient
 import com.babylon.wallet.android.presentation.ui.composables.actionableaddress.ActionableAddressView
 import com.radixdlt.sargon.AccountAddress
@@ -32,18 +34,19 @@ fun AccountCardWithStack(
     accountName: String,
     accountAddress: String,
 ) {
-    val numberOfOtherCards = 4
-    val singleCardHeight = 80.dp
-    val offset = 6.dp
-    Box(modifier = modifier.height(singleCardHeight + offset * numberOfOtherCards)) {
+    val numberOfOtherCards = 3
+    val singleCardHeight = 91.dp
+    Box(
+        modifier = modifier
+    ) {
         Box(
             modifier = Modifier
                 .fillMaxWidth()
                 .height(singleCardHeight)
-                .zIndex(5f)
+                .zIndex(4f)
                 .background(
                     appearanceId.gradient(),
-                    RadixTheme.shapes.roundedRectSmall
+                    RadixTheme.shapes.roundedRectMedium
                 )
         ) {
             Column(
@@ -66,27 +69,32 @@ fun AccountCardWithStack(
                 if (address != null) {
                     ActionableAddressView(
                         address = Address.Account(address),
-                        textStyle = RadixTheme.typography.body2Regular,
+                        textStyle = RadixTheme.typography.body2HighImportance,
                         textColor = Color.White.copy(alpha = 0.8f)
                     )
                 }
             }
         }
-        repeat(4) {
+        repeat(numberOfOtherCards) {
             val index = it + 1
-
             val nextAppearanceIdIndex = appearanceId.value + index.toUInt()
+            val topOffset = (if (index == numberOfOtherCards) 11.dp else 12.dp) * index
+            val bgAlpha = if (index == numberOfOtherCards) 0.1f else 0.2f
+
             Box(
                 modifier = Modifier
-                    .offset(y = offset * index)
+                    .padding(top = topOffset)
                     .fillMaxWidth(1f - 0.05f * (index))
                     .height(singleCardHeight)
-                    .zIndex(5f - index)
+                    .zIndex(4f - index)
                     .background(
-                        AppearanceId(nextAppearanceIdIndex.toUByte()).gradient(alpha = 0.3f),
-                        RadixTheme.shapes.roundedRectSmall
+                        AppearanceId(nextAppearanceIdIndex.toUByte())
+                            .gradient(
+                                alpha = bgAlpha
+                            ),
+                        RadixTheme.shapes.roundedRectMedium
                     )
-                    .align(Alignment.Center)
+                    .align(Alignment.TopCenter)
             )
         }
     }
@@ -95,10 +103,12 @@ fun AccountCardWithStack(
 @Preview(showBackground = true)
 @Composable
 fun CardStackPreview() {
-    AccountCardWithStack(
-        modifier = Modifier,
-        accountName = "My account",
-        accountAddress = "d32d32",
-        appearanceId = AppearanceId(0u)
-    )
+    RadixWalletTheme {
+        AccountCardWithStack(
+            modifier = Modifier,
+            accountName = "My account",
+            accountAddress = "d32d32",
+            appearanceId = AppearanceId(0u)
+        )
+    }
 }

designsystem/src/main/java/com/babylon/wallet/android/designsystem/composable/RadixSwitch.kt

@@ -2,16 +2,12 @@ package com.babylon.wallet.android.designsystem.composable
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.padding
-import androidx.compose.material3.Icon
 import androidx.compose.material3.Switch
 import androidx.compose.material3.SwitchDefaults
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
-import com.babylon.wallet.android.designsystem.R
 import com.babylon.wallet.android.designsystem.theme.RadixTheme
 import com.babylon.wallet.android.designsystem.theme.RadixWalletTheme
 
@@ -27,13 +23,8 @@ fun RadixSwitch(
         checked = checked,
         onCheckedChange = onCheckedChange,
         enabled = enabled,
-        thumbContent = {
-            Icon(
-                modifier = Modifier.padding(4.dp),
-                painter = painterResource(id = R.drawable.ic_check_bold),
-                contentDescription = null
-            )
-        },
+        // Specifying any thumbContent makes the handle size consistent between the states
+        thumbContent = {},
         colors = RadixSwitchDefaults.colors(),
     )
 }