[#65] Add background gradient

ui-lib/src/main/java/cash/z/ecc/ui/MainActivity.kt

@@ -9,14 +9,18 @@ import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.viewModels
 import androidx.annotation.VisibleForTesting
+import androidx.compose.foundation.layout.fillMaxHeight
+import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
+import androidx.compose.ui.Modifier
 import androidx.core.content.res.ResourcesCompat
 import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen
 import androidx.lifecycle.lifecycleScope
 import cash.z.ecc.sdk.model.PersistableWallet
 import cash.z.ecc.ui.screen.backup.view.BackupWallet
 import cash.z.ecc.ui.screen.backup.viewmodel.BackupViewModel
+import cash.z.ecc.ui.screen.common.GradientSurface
 import cash.z.ecc.ui.screen.home.view.Home
 import cash.z.ecc.ui.screen.home.viewmodel.WalletState
 import cash.z.ecc.ui.screen.home.viewmodel.WalletViewModel
@@ -56,42 +60,48 @@ class MainActivity : ComponentActivity() {
     }
 
     private fun setupSplashScreen() {
-        installSplashScreen().also {
+        val splashScreen = installSplashScreen()
-            val start = SystemClock.elapsedRealtime().milliseconds
+        val start = SystemClock.elapsedRealtime().milliseconds
-            it.setKeepVisibleCondition {
-                if (SPLASH_SCREEN_DELAY > Duration.ZERO) {
-                    val now = SystemClock.elapsedRealtime().milliseconds
 
-                    // This delay is for debug purposes only; do not enable for production usage.
+        splashScreen.setKeepVisibleCondition {
-                    if (now - start < SPLASH_SCREEN_DELAY) {
+            if (SPLASH_SCREEN_DELAY > Duration.ZERO) {
-                        return@setKeepVisibleCondition true
+                val now = SystemClock.elapsedRealtime().milliseconds
-                    }
+
+                // This delay is for debug purposes only; do not enable for production usage.
+                if (now - start < SPLASH_SCREEN_DELAY) {
+                    return@setKeepVisibleCondition true
                 }
-
-                WalletState.Loading == walletViewModel.state.value
             }
+
+            WalletState.Loading == walletViewModel.state.value
         }
     }
 
     private fun setupUiContent() {
         setContent {
             ZcashTheme {
-                val walletState = walletViewModel.state.collectAsState().value
+                GradientSurface(
+                    Modifier
+                        .fillMaxWidth()
+                        .fillMaxHeight()
+                ) {
+                    val walletState = walletViewModel.state.collectAsState().value
 
-                when (walletState) {
+                    when (walletState) {
-                    WalletState.Loading -> {
+                        WalletState.Loading -> {
-                        // For now, keep displaying splash screen using condition above.
+                            // For now, keep displaying splash screen using condition above.
-                        // In the future, we might consider displaying something different here.
+                            // In the future, we might consider displaying something different here.
+                        }
+                        WalletState.NoWallet -> {
+                            WrapOnboarding()
+                        }
+                        is WalletState.NeedsBackup -> WrapBackup(walletState.persistableWallet)
+                        is WalletState.Ready -> WrapHome(walletState.persistableWallet)
                     }
-                    WalletState.NoWallet -> {
-                        WrapOnboarding()
-                    }
-                    is WalletState.NeedsBackup -> WrapBackup(walletState.persistableWallet)
-                    is WalletState.Ready -> WrapHome(walletState.persistableWallet)
-                }
 
-                if (walletState != WalletState.Loading) {
+                    if (walletState != WalletState.Loading) {
-                    reportFullyDrawn()
+                        reportFullyDrawn()
+                    }
                 }
             }
         }

ui-lib/src/main/java/cash/z/ecc/ui/screen/backup/view/BackupView.kt

@@ -7,7 +7,6 @@ import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material.Card
-import androidx.compose.material.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Modifier
@@ -26,6 +25,7 @@ import cash.z.ecc.ui.screen.common.Body
 import cash.z.ecc.ui.screen.common.CHIP_GRID_ROW_SIZE
 import cash.z.ecc.ui.screen.common.Chip
 import cash.z.ecc.ui.screen.common.ChipGrid
+import cash.z.ecc.ui.screen.common.GradientSurface
 import cash.z.ecc.ui.screen.common.Header
 import cash.z.ecc.ui.screen.common.NavigationButton
 import cash.z.ecc.ui.screen.common.PrimaryButton
@@ -37,14 +37,16 @@ import cash.z.ecc.ui.theme.ZcashTheme
 @Preview(device = Devices.PIXEL_4)
 @Composable
 fun ComposablePreview() {
-    ZcashTheme(darkTheme = true) {
+    ZcashTheme(darkTheme = false) {
-        BackupWallet(
+        GradientSurface {
-            PersistableWalletFixture.new(),
+            BackupWallet(
-            BackupState(BackupStage.Test),
+                PersistableWalletFixture.new(),
-            TestChoices(),
+                BackupState(BackupStage.EducationOverview),
-            onCopyToClipboard = {},
+                TestChoices(),
-            onComplete = {}
+                onCopyToClipboard = {},
-        )
+                onComplete = {}
+            )
+        }
     }
 }
 
@@ -59,27 +61,25 @@ fun BackupWallet(
     onCopyToClipboard: () -> Unit,
     onComplete: () -> Unit,
 ) {
-    Surface {
+    Column {
-        Column {
+        when (backupState.current.collectAsState().value) {
-            when (backupState.current.collectAsState().value) {
+            BackupStage.EducationOverview -> EducationOverview(onNext = backupState::goNext)
-                BackupStage.EducationOverview -> EducationOverview(onNext = backupState::goNext)
+            BackupStage.EducationRecoveryPhrase -> EducationRecoveryPhrase(onNext = backupState::goNext)
-                BackupStage.EducationRecoveryPhrase -> EducationRecoveryPhrase(onNext = backupState::goNext)
+            BackupStage.Seed -> SeedPhrase(
-                BackupStage.Seed -> SeedPhrase(
+                wallet,
-                    wallet,
+                onNext = backupState::goNext,
-                    onNext = backupState::goNext,
+                onCopyToClipboard = onCopyToClipboard
-                    onCopyToClipboard = onCopyToClipboard
+            )
-                )
+            BackupStage.Test -> Test(
-                BackupStage.Test -> Test(
+                wallet,
-                    wallet,
+                selectedTestChoices,
-                    selectedTestChoices,
+                onBack = backupState::goPrevious,
-                    onBack = backupState::goPrevious,
+                onNext = backupState::goNext
-                    onNext = backupState::goNext
+            )
-                )
+            BackupStage.Complete -> Complete(
-                BackupStage.Complete -> Complete(
+                onComplete = onComplete,
-                    onComplete = onComplete,
+                onBackToSeedPhrase = backupState::goToSeed
-                    onBackToSeedPhrase = backupState::goToSeed
+            )
-                )
-            }
         }
     }
 }

ui-lib/src/main/java/cash/z/ecc/ui/screen/common/GradientSurface.kt

@@ -0,0 +1,20 @@
+package cash.z.ecc.ui.screen.common
+
+import androidx.compose.foundation.background
+import androidx.compose.material.Surface
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.RectangleShape
+import cash.z.ecc.ui.theme.ZcashTheme
+
+@Composable
+fun GradientSurface(modifier: Modifier = Modifier, content: @Composable () -> Unit) {
+    Surface(
+        color = Color.Transparent,
+        modifier = modifier
+            .background(ZcashTheme.colors.surfaceGradient()),
+        shape = RectangleShape,
+        content = content
+    )
+}

ui-lib/src/main/java/cash/z/ecc/ui/screen/debug/view/DesignGuide.kt

@@ -2,7 +2,6 @@ package cash.z.ecc.ui.screen.debug.view
 
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.material.Surface
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.List
 import androidx.compose.material.icons.filled.Person
@@ -12,6 +11,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
 import cash.z.ecc.ui.screen.common.Body
 import cash.z.ecc.ui.screen.common.Chip
+import cash.z.ecc.ui.screen.common.GradientSurface
 import cash.z.ecc.ui.screen.common.Header
 import cash.z.ecc.ui.screen.common.NavigationButton
 import cash.z.ecc.ui.screen.common.PinkProgress
@@ -35,7 +35,7 @@ fun ComposablePreview() {
 // Allowing magic numbers since this is debug-only
 @Suppress("MagicNumber")
 fun DesignGuide() {
-    Surface {
+    GradientSurface {
         Column {
             Header(text = "H1")
             Body(text = "body")

ui-lib/src/main/java/cash/z/ecc/ui/screen/home/view/HomeView.kt

@@ -1,28 +1,28 @@
 package cash.z.ecc.ui.screen.home.view
 
 import androidx.compose.foundation.layout.Column
-import androidx.compose.material.Surface
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.tooling.preview.Preview
 import cash.z.ecc.sdk.fixture.PersistableWalletFixture
 import cash.z.ecc.sdk.model.PersistableWallet
+import cash.z.ecc.ui.screen.common.GradientSurface
 import cash.z.ecc.ui.theme.ZcashTheme
 
 @Preview
 @Composable
 fun ComposablePreview() {
     ZcashTheme(darkTheme = true) {
-        Home(PersistableWalletFixture.new())
+        GradientSurface {
+            Home(PersistableWalletFixture.new())
+        }
     }
 }
 
 @Composable
 fun Home(@Suppress("UNUSED_PARAMETER") persistableWallet: PersistableWallet) {
-    Surface {
+    Column {
-        Column {
+        // Placeholder
-            // Placeholder
+        Text("Welcome to your wallet")
-            Text("Welcome to your wallet")
-        }
     }
 }

ui-lib/src/main/java/cash/z/ecc/ui/screen/onboarding/view/OnboardingView.kt

@@ -7,10 +7,10 @@ import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.material.Icon
-import androidx.compose.material.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.ui.Modifier
@@ -22,6 +22,7 @@ import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
 import cash.z.ecc.ui.R
 import cash.z.ecc.ui.screen.common.Body
+import cash.z.ecc.ui.screen.common.GradientSurface
 import cash.z.ecc.ui.screen.common.Header
 import cash.z.ecc.ui.screen.common.NavigationButton
 import cash.z.ecc.ui.screen.common.PinkProgress
@@ -38,11 +39,13 @@ import cash.z.ecc.ui.theme.ZcashTheme
 @Composable
 fun ComposablePreview() {
     ZcashTheme(darkTheme = true) {
-        Onboarding(
+        GradientSurface {
-            OnboardingState(OnboardingStage.UnifiedAddresses),
+            Onboarding(
-            onImportWallet = {},
+                OnboardingState(OnboardingStage.UnifiedAddresses),
-            onCreateWallet = {}
+                onImportWallet = {},
-        )
+                onCreateWallet = {}
+            )
+        }
     }
 }
 
@@ -56,24 +59,22 @@ fun Onboarding(
     onImportWallet: () -> Unit,
     onCreateWallet: () -> Unit
 ) {
-    Surface {
+    Column {
-        Column {
+        TopNavButtons(onboardingState)
-            TopNavButtons(onboardingState)
 
-            val onboardingStage = onboardingState.current.collectAsState().value
+        val onboardingStage = onboardingState.current.collectAsState().value
 
-            when (onboardingStage) {
+        when (onboardingStage) {
-                OnboardingStage.ShieldedByDefault -> ShieldedByDefault()
+            OnboardingStage.ShieldedByDefault -> ShieldedByDefault()
-                OnboardingStage.UnifiedAddresses -> UnifiedAddresses()
+            OnboardingStage.UnifiedAddresses -> UnifiedAddresses()
-                OnboardingStage.More -> More()
+            OnboardingStage.More -> More()
-                OnboardingStage.Wallet -> Wallet(
+            OnboardingStage.Wallet -> Wallet(
-                    onCreateWallet = onCreateWallet,
+                onCreateWallet = onCreateWallet,
-                    onImportWallet = onImportWallet
+                onImportWallet = onImportWallet
-                )
+            )
-            }
-
-            BottomNav(onboardingStage.getProgress(), onboardingState::goNext)
         }
+
+        BottomNav(onboardingStage.getProgress(), onboardingState::goNext)
     }
 }
 
@@ -100,6 +101,8 @@ private fun TopNavButtons(onboardingState: OnboardingState) {
 private fun BottomNav(progress: Progress, onNext: () -> Unit) {
     if (progress.current != progress.last) {
         Column {
+            Spacer(modifier = Modifier.fillMaxHeight().weight(MINIMAL_WEIGHT, true))
+
             SecondaryButton(onNext, stringResource(R.string.onboarding_next), Modifier.fillMaxWidth())
 
             // Converts from index to human numbering

ui-lib/src/main/java/cash/z/ecc/ui/theme/Theme.kt

@@ -8,6 +8,7 @@ import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.Immutable
 import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 
 private val DarkColorPalette = darkColors(
@@ -34,6 +35,7 @@ private val LightColorPalette = lightColors(
 
 @Immutable
 data class ExtendedColors(
+    val surfaceEnd: Color,
     val onBackgroundHeader: Color,
     val tertiary: Color,
     val onTertiary: Color,
@@ -43,9 +45,18 @@ data class ExtendedColors(
     val progressEnd: Color,
     val progressBackground: Color,
     val chipIndex: Color
-)
+) {
+    @Composable
+    fun surfaceGradient() = Brush.verticalGradient(
+        colors = listOf(
+            MaterialTheme.colors.surface,
+            ZcashTheme.colors.surfaceEnd
+        )
+    )
+}
 
 val DarkExtendedColorPalette = ExtendedColors(
+    surfaceEnd = Dark.backgroundEnd,
     onBackgroundHeader = Dark.textHeaderOnBackground,
     tertiary = Dark.tertiaryButton,
     onTertiary = Dark.textTertiaryButton,
@@ -58,6 +69,7 @@ val DarkExtendedColorPalette = ExtendedColors(
 )
 
 val LightExtendedColorPalette = ExtendedColors(
+    surfaceEnd = Light.backgroundEnd,
     onBackgroundHeader = Light.textHeaderOnBackground,
     tertiary = Light.tertiaryButton,
     onTertiary = Light.textTertiaryButton,
@@ -71,6 +83,7 @@ val LightExtendedColorPalette = ExtendedColors(
 
 val LocalExtendedColors = staticCompositionLocalOf {
     ExtendedColors(
+        surfaceEnd = Color.Unspecified,
         onBackgroundHeader = Color.Unspecified,
         tertiary = Color.Unspecified,
         onTertiary = Color.Unspecified,