[#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,9 +60,10 @@ class MainActivity : ComponentActivity() {
     }
 
     private fun setupSplashScreen() {
-        installSplashScreen().also {
+        val splashScreen = installSplashScreen()
         val start = SystemClock.elapsedRealtime().milliseconds
-            it.setKeepVisibleCondition {
+
+        splashScreen.setKeepVisibleCondition {
             if (SPLASH_SCREEN_DELAY > Duration.ZERO) {
                 val now = SystemClock.elapsedRealtime().milliseconds
 
@@ -71,11 +76,15 @@ class MainActivity : ComponentActivity() {
             WalletState.Loading == walletViewModel.state.value
         }
     }
-    }
 
     private fun setupUiContent() {
         setContent {
             ZcashTheme {
+                GradientSurface(
+                    Modifier
+                        .fillMaxWidth()
+                        .fillMaxHeight()
+                ) {
                     val walletState = walletViewModel.state.collectAsState().value
 
                     when (walletState) {
@@ -96,6 +105,7 @@ class MainActivity : ComponentActivity() {
                 }
             }
         }
+    }
 
     @Composable
     private fun WrapBackup(persistableWallet: PersistableWallet) {

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,16 +37,18 @@ import cash.z.ecc.ui.theme.ZcashTheme
 @Preview(device = Devices.PIXEL_4)
 @Composable
 fun ComposablePreview() {
-    ZcashTheme(darkTheme = true) {
+    ZcashTheme(darkTheme = false) {
+        GradientSurface {
             BackupWallet(
                 PersistableWalletFixture.new(),
-            BackupState(BackupStage.Test),
+                BackupState(BackupStage.EducationOverview),
                 TestChoices(),
                 onCopyToClipboard = {},
                 onComplete = {}
             )
         }
     }
+}
 
 /**
  * @param onComplete Callback when the user has completed the backup test.
@@ -59,7 +61,6 @@ fun BackupWallet(
     onCopyToClipboard: () -> Unit,
     onComplete: () -> Unit,
 ) {
-    Surface {
     Column {
         when (backupState.current.collectAsState().value) {
             BackupStage.EducationOverview -> EducationOverview(onNext = backupState::goNext)
@@ -82,7 +83,6 @@ fun BackupWallet(
         }
     }
 }
-}
 
 @Composable
 private fun EducationOverview(onNext: () -> Unit) {

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) {
+        GradientSurface {
             Home(PersistableWalletFixture.new())
         }
     }
+}
 
 @Composable
 fun Home(@Suppress("UNUSED_PARAMETER") persistableWallet: PersistableWallet) {
-    Surface {
     Column {
         // Placeholder
         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,6 +39,7 @@ import cash.z.ecc.ui.theme.ZcashTheme
 @Composable
 fun ComposablePreview() {
     ZcashTheme(darkTheme = true) {
+        GradientSurface {
             Onboarding(
                 OnboardingState(OnboardingStage.UnifiedAddresses),
                 onImportWallet = {},
@@ -45,6 +47,7 @@ fun ComposablePreview() {
             )
         }
     }
+}
 
 /**
  * @param onImportWallet Callback when the user decides to import an existing wallet.
@@ -56,7 +59,6 @@ fun Onboarding(
     onImportWallet: () -> Unit,
     onCreateWallet: () -> Unit
 ) {
-    Surface {
     Column {
         TopNavButtons(onboardingState)
 
@@ -75,7 +77,6 @@ fun Onboarding(
         BottomNav(onboardingStage.getProgress(), onboardingState::goNext)
     }
 }
-}
 
 @Composable
 private fun TopNavButtons(onboardingState: OnboardingState) {
@@ -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,