[#1085] Grid pattern in the screen background

- Closes #1085
- Closes #1091
- These are prerequisites for the Dark mode adoption within #1011
- A few unused UI components have been removed to simplify the dark mode adoption
- BlankSurface and GridSurface have been added and used instead of the previous GradientSurface
- A new BlankBgScaffold, GridBgScaffold, BlankBgColumn, and GridBgColumn UI components have been prepared to provide an easy grid or blank screen background adoption across the whole app
- Several colors from resources have been eliminated, as the design doc simplified its color palette
- The grid pattern has been added to the screens according to the design doc and iOS platform
- Changelog updated

CHANGELOG.md

@@ -9,6 +9,12 @@ directly impact users rather than highlighting other key architectural updates.*
 
 ## [Unreleased]
 
+### Added
+- Grid pattern background has been added to several screens
+
+### Changed
+- The color palette used across the app has been reworked to align with the updated design document
+
 ## [1.1 (655)] - 2024-05-24
 
 ### Added

ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/Button.kt

@@ -15,7 +15,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.width
 import androidx.compose.material3.Button
-import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.ButtonDefaults.buttonColors
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.MaterialTheme
@@ -48,14 +47,12 @@ import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 @Composable
 private fun ButtonComposablePreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
+        BlankSurface {
             Column(Modifier.padding(ZcashTheme.dimens.spacingDefault)) {
                 PrimaryButton(onClick = { }, text = "Primary")
                 PrimaryButton(onClick = { }, text = "Primary...", showProgressBar = true)
                 PrimaryButton(onClick = { }, text = "Primary Small", minHeight = ZcashTheme.dimens.buttonHeightSmall)
                 SecondaryButton(onClick = { }, text = "Secondary")
-                TertiaryButton(onClick = { }, text = "Tertiary")
-                TertiaryButton(onClick = { }, text = "Tertiary", enabled = false)
                 NavigationButton(onClick = { }, text = "Navigation")
                 @Suppress("MagicNumber")
                 Row {
@@ -257,41 +254,6 @@ fun NavigationButton(
     }
 }
 
-@Composable
-fun TertiaryButton(
-    onClick: () -> Unit,
-    text: String,
-    modifier: Modifier = Modifier,
-    outerPaddingValues: PaddingValues =
-        PaddingValues(
-            horizontal = ZcashTheme.dimens.spacingNone,
-            vertical = ZcashTheme.dimens.spacingSmall
-        ),
-    enabled: Boolean = true
-) {
-    Button(
-        shape = RectangleShape,
-        onClick = onClick,
-        modifier =
-            modifier.then(
-                Modifier
-                    .fillMaxWidth()
-                    .padding(outerPaddingValues)
-                    .defaultMinSize(ZcashTheme.dimens.buttonWidth, ZcashTheme.dimens.buttonHeight)
-            ),
-        enabled = enabled,
-        elevation = ButtonDefaults.buttonElevation(0.dp, 0.dp, 0.dp),
-        colors = buttonColors(containerColor = ZcashTheme.colors.tertiary)
-    ) {
-        Text(
-            style = MaterialTheme.typography.labelLarge,
-            textAlign = TextAlign.Center,
-            text = text,
-            color = ZcashTheme.colors.onTertiary
-        )
-    }
-}
-
 @Suppress("LongParameterList")
 fun Modifier.shadow(
     contentColor: Color = Color.Black,

ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/Column.kt

@@ -0,0 +1,64 @@
+package co.electriccoin.zcash.ui.design.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.ColumnScope
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.tooling.preview.Preview
+import co.electriccoin.zcash.ui.design.theme.ZcashTheme
+
+@Preview("Column with blank background")
+@Composable
+private fun BlankBgColumnComposablePreview() {
+    ZcashTheme(forceDarkMode = false) {
+        BlankBgColumn {
+            Text(text = "Blank background column")
+        }
+    }
+}
+
+@Preview("Column with grip pattern background")
+@Composable
+private fun GridBgScaffoldComposablePreview() {
+    ZcashTheme(forceDarkMode = false) {
+        GridBgColumn {
+            Text(text = "Grid pattern background column")
+        }
+    }
+}
+
+@Composable
+fun BlankBgColumn(
+    modifier: Modifier = Modifier,
+    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
+    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
+    content: @Composable ColumnScope.() -> Unit
+) {
+    Column(
+        modifier = modifier.then(Modifier.background(ZcashTheme.colors.backgroundColor)),
+        horizontalAlignment = horizontalAlignment,
+        verticalArrangement = verticalArrangement,
+        content = content,
+    )
+}
+
+@Composable
+fun GridBgColumn(
+    modifier: Modifier = Modifier,
+    verticalArrangement: Arrangement.Vertical = Arrangement.Top,
+    horizontalAlignment: Alignment.Horizontal = Alignment.Start,
+    content: @Composable ColumnScope.() -> Unit
+) {
+    GridSurface {
+        Column(
+            horizontalAlignment = horizontalAlignment,
+            verticalArrangement = verticalArrangement,
+            content = content,
+            modifier = modifier,
+        )
+    }
+}

ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/CommonComponents.kt

@@ -18,7 +18,7 @@ import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 @Composable
 private fun TopScreenLogoRegularComposablePreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
+        BlankSurface {
             TopScreenLogoTitle(
                 title = "Test screen title",
                 logoContentDescription = "Test logo content description"
@@ -31,7 +31,7 @@ private fun TopScreenLogoRegularComposablePreview() {
 @Composable
 private fun TopScreenLogoLongComposablePreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
+        BlankSurface {
             TopScreenLogoTitle(
                 title = "Test screen title which is very very long and can overflow the allowed title length",
                 logoContentDescription = "Test logo content description"

ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/GradientSurface.kt

@@ -1,24 +0,0 @@
-package co.electriccoin.zcash.ui.design.component
-
-import androidx.compose.foundation.background
-import androidx.compose.material3.Surface
-import androidx.compose.runtime.Composable
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.graphics.RectangleShape
-import co.electriccoin.zcash.ui.design.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-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/Progress.kt

@@ -21,7 +21,7 @@ import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 @Composable
 private fun CircularScreenProgressIndicatorComposablePreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
+        BlankSurface {
             Column {
                 CircularScreenProgressIndicator()
                 CircularMidProgressIndicator()
@@ -79,7 +79,7 @@ fun CircularSmallProgressIndicator(
 @Composable
 private fun LinearProgressIndicatorComposablePreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
+        BlankSurface {
             @Suppress("MagicNumber")
             SmallLinearProgressIndicator(0.75f)
         }

ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/Scaffold.kt

@@ -0,0 +1,68 @@
+package co.electriccoin.zcash.ui.design.component
+
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.material3.Scaffold
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import co.electriccoin.zcash.ui.design.theme.ZcashTheme
+
+@Preview("Scaffold with blank background")
+@Composable
+private fun BlankBgScaffoldComposablePreview() {
+    ZcashTheme(forceDarkMode = false) {
+        BlankBgScaffold {
+            Text(text = "Blank background scaffold")
+        }
+    }
+}
+
+@Preview("Scaffold with grip pattern background")
+@Composable
+private fun GridBgScaffoldComposablePreview() {
+    ZcashTheme(forceDarkMode = false) {
+        GridBgScaffold {
+            Text(text = "Grid pattern background scaffold")
+        }
+    }
+}
+
+@Composable
+fun BlankBgScaffold(
+    modifier: Modifier = Modifier,
+    topBar: @Composable () -> Unit = {},
+    bottomBar: @Composable () -> Unit = {},
+    snackbarHost: @Composable () -> Unit = {},
+    content: @Composable (PaddingValues) -> Unit
+) {
+    Scaffold(
+        containerColor = ZcashTheme.colors.backgroundColor,
+        topBar = topBar,
+        snackbarHost = snackbarHost,
+        bottomBar = bottomBar,
+        content = content,
+        modifier = modifier,
+    )
+}
+
+@Composable
+fun GridBgScaffold(
+    modifier: Modifier = Modifier,
+    topBar: @Composable () -> Unit = {},
+    bottomBar: @Composable () -> Unit = {},
+    snackbarHost: @Composable () -> Unit = {},
+    content: @Composable (PaddingValues) -> Unit
+) {
+    GridSurface {
+        Scaffold(
+            containerColor = Color.Transparent,
+            topBar = topBar,
+            snackbarHost = snackbarHost,
+            bottomBar = bottomBar,
+            content = content,
+            modifier = modifier,
+        )
+    }
+}

ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/Surface.kt

@@ -0,0 +1,116 @@
+package co.electriccoin.zcash.ui.design.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.RectangleShape
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.Dp
+import co.electriccoin.zcash.ui.design.theme.ZcashTheme
+
+@Preview("Blank background")
+@Composable
+private fun BlankSurfacePreview() {
+    ZcashTheme(forceDarkMode = false) {
+        BlankSurface {
+            Text(
+                text = "Test text on the blank app background",
+                modifier = Modifier.fillMaxSize()
+            )
+        }
+    }
+}
+
+@Preview("Grid background")
+@Composable
+private fun GridSurfacePreview() {
+    ZcashTheme(forceDarkMode = false) {
+        GridSurface {
+            Text(
+                text = "Test text on the grip app background",
+                modifier = Modifier.fillMaxSize()
+            )
+        }
+    }
+}
+
+@Composable
+fun BlankSurface(
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit
+) {
+    Surface(
+        color = ZcashTheme.colors.backgroundColor,
+        shape = RectangleShape,
+        content = content,
+        modifier = modifier
+    )
+}
+
+@Composable
+fun GridSurface(
+    modifier: Modifier = Modifier,
+    content: @Composable () -> Unit
+) {
+    Surface(
+        color = Color.Transparent,
+        shape = RectangleShape,
+        content = content,
+        modifier =
+            modifier.then(
+                Modifier
+                    .gridBackground(
+                        backgroundColor = ZcashTheme.colors.backgroundColor,
+                        gridSize = ZcashTheme.dimens.gridCellSize,
+                        gridColor = ZcashTheme.colors.gridColor,
+                        gridLineWidth = ZcashTheme.dimens.gridLineWidth
+                    )
+            )
+    )
+}
+
+fun Modifier.gridBackground(
+    backgroundColor: Color,
+    gridSize: Dp,
+    gridColor: Color,
+    gridLineWidth: Dp
+): Modifier {
+    return then(
+        background(backgroundColor)
+            .drawBehind {
+                val gridWidth = size.width
+                val gridHeight = size.height
+
+                val stepX = gridSize.toPx()
+                val stepY = gridSize.toPx()
+
+                val xSteps = (gridWidth / stepX).toInt()
+                val ySteps = (gridHeight / stepY).toInt()
+
+                for (i in 0..xSteps) {
+                    val x = i * stepX
+                    drawLine(
+                        start = Offset(x, 0f),
+                        end = Offset(x, gridHeight),
+                        color = gridColor,
+                        strokeWidth = gridLineWidth.toPx()
+                    )
+                }
+                for (i in 0..ySteps) {
+                    val y = i * stepY
+                    drawLine(
+                        start = Offset(0f, y),
+                        end = Offset(gridWidth, y),
+                        color = gridColor,
+                        strokeWidth = gridLineWidth.toPx()
+                    )
+                }
+            }
+    )
+}

ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/Text.kt

@@ -42,7 +42,7 @@ import java.util.Locale
 @Composable
 private fun ReferenceComposablePreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
+        BlankSurface {
             Column {
                 Reference(
                     text = "Test reference text",
@@ -70,7 +70,7 @@ private fun ReferenceComposablePreview() {
 @Composable
 private fun StyledBalanceComposablePreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
+        BlankSurface {
             Column {
                 StyledBalance(
                     balanceString = "1,234.56789012",
@@ -411,7 +411,7 @@ fun BodyWithFiatCurrencySymbol(
 @Composable
 private fun NavigationTabTextPreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
+        BlankSurface {
             Column {
                 NavigationTabText(
                     text = "Account",
@@ -443,7 +443,7 @@ fun NavigationTabText(
             },
         maxLines = 1,
         overflow = TextOverflow.Visible,
-        color = ZcashTheme.colors.tabTextColor,
+        color = ZcashTheme.colors.textCommon,
         modifier =
             Modifier
                 .clip(RoundedCornerShape(ZcashTheme.dimens.regularRippleEffectCorner))

ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/TextField.kt

@@ -50,8 +50,8 @@ fun FormTextField(
     keyboardOptions: KeyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Text),
     colors: TextFieldColors =
         TextFieldDefaults.colors(
-            focusedContainerColor = Color.Transparent,
+            focusedContainerColor = ZcashTheme.colors.backgroundColor,
-            unfocusedContainerColor = Color.Transparent,
+            unfocusedContainerColor = ZcashTheme.colors.backgroundColor,
             disabledContainerColor = ZcashTheme.colors.textDisabled,
             errorContainerColor = Color.Transparent,
             focusedIndicatorColor = Color.Transparent,
@@ -120,7 +120,7 @@ fun FormTextField(
 
             BodySmall(
                 text = error,
-                color = ZcashTheme.colors.textFieldError,
+                color = ZcashTheme.colors.textFieldWarning,
                 maxLines = 1,
                 overflow = TextOverflow.Ellipsis
             )

ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/component/TopAppBar.kt

@@ -33,6 +33,7 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextAlign
@@ -49,7 +50,7 @@ import co.electriccoin.zcash.ui.design.theme.internal.TopAppBarColors
 @Composable
 private fun TopAppBarTextComposablePreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
+        BlankSurface {
             SmallTopAppBar(titleText = "Screen A", backText = "Back")
         }
     }
@@ -59,7 +60,7 @@ private fun TopAppBarTextComposablePreview() {
 @Composable
 private fun TopAppBarTextRestoringComposablePreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
+        BlankSurface {
             SmallTopAppBar(
                 titleText = "Screen A",
                 backText = "Back",
@@ -73,7 +74,7 @@ private fun TopAppBarTextRestoringComposablePreview() {
 @Composable
 private fun TopAppBarTextRestoringLongComposablePreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
+        BlankSurface {
             SmallTopAppBar(
                 titleText = "Screen A",
                 backText = "Back",
@@ -87,7 +88,7 @@ private fun TopAppBarTextRestoringLongComposablePreview() {
 @Composable
 private fun TopAppBarLogoComposablePreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
+        BlankSurface {
             SmallTopAppBar(showTitleLogo = true, backText = "Back")
         }
     }
@@ -97,7 +98,7 @@ private fun TopAppBarLogoComposablePreview() {
 @Composable
 private fun TopAppBarLogoRestoringComposablePreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
+        BlankSurface {
             SmallTopAppBar(
                 showTitleLogo = true,
                 backText = "Back",
@@ -111,7 +112,7 @@ private fun TopAppBarLogoRestoringComposablePreview() {
 @Composable
 private fun TopAppBarRegularMenuComposablePreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
+        BlankSurface {
             SmallTopAppBar(
                 titleText = "Screen B",
                 regularActions = {
@@ -129,7 +130,7 @@ private fun TopAppBarRegularMenuComposablePreview() {
 @Composable
 private fun TopAppBarOneVisibleActionMenuComposablePreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
+        BlankSurface {
             SmallTopAppBar(
                 titleText = "Screen C",
                 backText = "Back",
@@ -147,7 +148,7 @@ private fun TopAppBarOneVisibleActionMenuComposablePreview() {
 @Composable
 private fun TopAppBarHamburgerMenuComposablePreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
+        BlankSurface {
             SmallTopAppBar(
                 titleText = "Screen D",
                 backText = "Back",
@@ -165,7 +166,7 @@ private fun TopAppBarHamburgerMenuComposablePreview() {
 @Composable
 private fun TopAppBarHamburgerPlusActionComposablePreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
+        BlankSurface {
             SmallTopAppBar(
                 titleText = "Screen E",
                 hamburgerMenuActions = {
@@ -260,6 +261,42 @@ private fun TopBarOneVisibleActionMenuExample(
     )
 }
 
+@Composable
+@Suppress("LongParameterList")
+fun GridBgSmallTopAppBar(
+    modifier: Modifier = Modifier,
+    backContentDescriptionText: String? = null,
+    backText: String? = null,
+    colors: TopAppBarColors = ZcashTheme.colors.topAppBarColors,
+    hamburgerMenuActions: (@Composable RowScope.() -> Unit)? = null,
+    onBack: (() -> Unit)? = null,
+    regularActions: (@Composable RowScope.() -> Unit)? = null,
+    restoringLabel: String? = null,
+    showTitleLogo: Boolean = false,
+    titleText: String? = null,
+) {
+    SmallTopAppBar(
+        modifier =
+            modifier.then(
+                Modifier.gridBackground(
+                    backgroundColor = ZcashTheme.colors.backgroundColor,
+                    gridSize = ZcashTheme.dimens.gridCellSize,
+                    gridColor = ZcashTheme.colors.gridColor,
+                    gridLineWidth = ZcashTheme.dimens.gridLineWidth
+                )
+            ),
+        backContentDescriptionText = backContentDescriptionText,
+        backText = backText,
+        colors = colors.copyColors(containerColor = Color.Transparent),
+        hamburgerMenuActions = hamburgerMenuActions,
+        onBack = onBack,
+        regularActions = regularActions,
+        restoringLabel = restoringLabel,
+        showTitleLogo = showTitleLogo,
+        titleText = titleText
+    )
+}
+
 @Composable
 @Suppress("LongParameterList", "LongMethod")
 @OptIn(ExperimentalMaterial3Api::class)

ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/Dimens.kt

@@ -30,6 +30,9 @@ data class Dimens(
     val buttonWidth: Dp,
     val buttonHeight: Dp,
     val buttonHeightSmall: Dp,
+    // Screen background grid
+    val gridCellSize: Dp,
+    val gridLineWidth: Dp,
     // Chip
     val chipShadowElevation: Dp,
     val chipStroke: Dp,
@@ -79,6 +82,8 @@ private val defaultDimens =
         buttonWidth = 244.dp,
         buttonHeight = 56.dp,
         buttonHeightSmall = 38.dp,
+        gridCellSize = 14.dp,
+        gridLineWidth = 1.dp,
         chipShadowElevation = 4.dp,
         chipStroke = 0.5.dp,
         circularScreenProgressWidth = 48.dp,

ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/ExtendedColors.kt

@@ -1,50 +1,35 @@
 package co.electriccoin.zcash.ui.design.theme
 
-import androidx.compose.material3.MaterialTheme
-import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Immutable
-import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import co.electriccoin.zcash.ui.design.theme.internal.TopAppBarColors
 
 @Immutable
 data class ExtendedColors(
-    val surfaceEnd: Color,
+    val backgroundColor: Color,
+    val gridColor: Color,
     val onBackgroundHeader: Color,
-    val tertiary: Color,
-    val onTertiary: Color,
-    val callout: Color,
-    val onCallout: Color,
     val circularProgressBarSmall: Color,
     val circularProgressBarSmallDark: Color,
     val circularProgressBarScreen: Color,
     val linearProgressBarTrack: Color,
     val linearProgressBarBackground: Color,
-    val chipIndex: Color,
     val textCommon: Color,
-    val textMedium: Color,
+    val textDescription: Color,
     val textDisabled: Color,
     val textFieldHint: Color,
-    val textFieldError: Color,
     val textFieldWarning: Color,
     val textFieldFrame: Color,
-    val textDescription: Color,
     val textDescriptionDark: Color,
-    val textPending: Color,
     val layoutStroke: Color,
     val overlay: Color,
-    val highlight: Color,
     val reference: Color,
     val disabledButtonColor: Color,
     val disabledButtonTextColor: Color,
-    val buttonShadowColor: Color,
-    val screenTitleColor: Color,
-    val aboutTextColor: Color,
     val welcomeAnimationColor: Color,
     val complementaryColor: Color,
     val dividerColor: Color,
     val darkDividerColor: Color,
-    val tabTextColor: Color,
     val panelBackgroundColor: Color,
     val cameraDisabledBackgroundColor: Color,
     val cameraDisabledFrameColor: Color,
@@ -55,14 +40,4 @@ data class ExtendedColors(
     val historySyncingColor: Color,
     val topAppBarColors: TopAppBarColors,
     val transparentTopAppBarColors: TopAppBarColors
-) {
-    @Composable
-    fun surfaceGradient() =
-        Brush.verticalGradient(
-            colors =
-                listOf(
-                    MaterialTheme.colorScheme.surface,
-                    ZcashTheme.colors.surfaceEnd
 )
-        )
-}

ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/internal/Color.kt

@@ -11,45 +11,33 @@ import co.electriccoin.zcash.ui.design.theme.ExtendedColors
 // TODO [#998]: Check and enhance screen dark mode
 // TODO [#998]: https://github.com/Electric-Coin-Company/zashi-android/issues/998
 
-// TODO [#1091]: Clear unused color resources
-// TODO [#1091]: https://github.com/Electric-Coin-Company/zashi-android/issues/1091
-
 internal object Dark {
-    val backgroundStart = Color(0xFF000000)
+    val backgroundColor = Color(0xFF231F20)
-    val backgroundEnd = Color(0xFF000000)
+    val gridColor = Color(0xFF272727)
 
     val textHeaderOnBackground = Color(0xFFFFFFFF)
     val textBodyOnBackground = Color(0xFFFFFFFF)
     val textPrimaryButton = Color(0xFF000000)
     val textSecondaryButton = Color(0xFF000000)
-    val textTertiaryButton = Color.White
     val textCommon = Color(0xFFFFFFFF)
-    val textMedium = Color(0xFF353535)
     val textDisabled = Color(0xFFB7B7B7)
-    val textChipIndex = Color(0xFFFFB900)
     val textFieldFrame = Color(0xFF231F20)
-    val textFieldError = Color(0xFFFF0000)
     val textFieldWarning = Color(0xFFF40202)
     val textFieldHint = Color(0xFFB7B7B7)
     val textDescription = Color(0xFF777777)
     val textDescriptionDark = Color(0xFF4D4D4D)
-    val textProgress = Color(0xFF8B8A8A)
 
-    val aboutTextColor = Color(0xFF4E4E4E)
-    val screenTitleColor = Color(0xFF040404)
     val welcomeAnimationColor = Color(0xFF231F20)
     val complementaryColor = Color(0xFFF4B728)
     val dividerColor = Color(0xFFDDDDDD)
     val darkDividerColor = Color(0xFF000000)
-    val tabTextColor = Color(0xFF040404)
     val layoutStroke = Color(0xFFFFFFFF)
-    val panelBackgroundColor = Color(0xFFEAEAEA)
+    val panelBackgroundColor = Color(0xFFF6F6F6)
     val cameraDisabledBackgroundColor = Color(0xFF5E5C5C)
     val cameraDisabledFrameColor = Color(0xFFFFFFFF)
 
     val primaryButton = Color(0xFFFFFFFF)
     val secondaryButton = Color(0xFFFFFFFF)
-    val tertiaryButton = Color.Transparent
 
     val radioButtonColor = Color(0xFF070707)
     val radioButtonTextColor = Color(0xFF4E4E4E)
@@ -60,19 +48,13 @@ internal object Dark {
     val linearProgressBarTrack = Color(0xFFD9D9D9)
     val linearProgressBarBackground = complementaryColor
 
-    val callout = Color(0xFFFFFFFF)
-    val onCallout = Color(0xFFFFFFFF)
-
     val overlay = Color(0x22000000)
-    val highlight = Color(0xFFFFD800)
 
     val reference = Color(0xFFFFFFFF)
 
     val disabledButtonColor = Color(0xFFB7B7B7)
     val disabledButtonTextColor = Color(0xFFDDDDDD)
 
-    val buttonShadowColor = Color(0xFFFFFFFF)
-
     val historyBackgroundColor = Color(0xFFF6F6F6)
     val historyRedColor = textFieldWarning
     val historySyncingColor = panelBackgroundColor
@@ -82,41 +64,32 @@ internal object Dark {
 }
 
 internal object Light {
-    val backgroundStart = Color(0xFFFFFFFF)
+    val backgroundColor = Color(0xFFFFFFFF)
-    val backgroundEnd = Color(0xFFFFFFFF)
+    val gridColor = Color(0xFFFBFBFB)
 
     val textHeaderOnBackground = Color(0xFF000000)
     val textBodyOnBackground = Color(0xFF000000)
     val textPrimaryButton = Color(0xFFFFFFFF)
     val textSecondaryButton = Color(0xFF000000)
-    val textTertiaryButton = Color(0xFF000000)
     val textCommon = Color(0xFF000000)
-    val textMedium = Color(0xFF353535)
     val textDisabled = Color(0xFFB7B7B7)
     val textFieldFrame = Color(0xFF231F20)
-    val textFieldError = Color(0xFFCD0002)
     val textFieldWarning = Color(0xFFF40202)
     val textFieldHint = Color(0xFFB7B7B7)
-    val textChipIndex = Color(0xFFEE8592)
     val textDescription = Color(0xFF777777)
     val textDescriptionDark = Color(0xFF4D4D4D)
-    val textProgress = Color(0xFF8B8A8A)
 
-    val screenTitleColor = Color(0xFF040404)
-    val aboutTextColor = Color(0xFF4E4E4E)
     val welcomeAnimationColor = Color(0xFF231F20)
     val complementaryColor = Color(0xFFF4B728)
     val dividerColor = Color(0xFFDDDDDD)
     val darkDividerColor = Color(0xFF000000)
-    val tabTextColor = Color(0xFF040404)
     val layoutStroke = Color(0xFF000000)
-    val panelBackgroundColor = Color(0xFFEAEAEA)
+    val panelBackgroundColor = Color(0xFFEBEBEB)
     val cameraDisabledBackgroundColor = Color(0xFF5E5C5C)
     val cameraDisabledFrameColor = Color(0xFFFFFFFF)
 
     val primaryButton = Color(0xFF000000)
     val secondaryButton = Color(0xFFFFFFFF)
-    val tertiaryButton = Color.Transparent
 
     val radioButtonColor = Color(0xFF070707)
     val radioButtonTextColor = Color(0xFF4E4E4E)
@@ -127,21 +100,16 @@ internal object Light {
     val linearProgressBarTrack = Color(0xFFD9D9D9)
     val linearProgressBarBackground = complementaryColor
 
-    val callout = Color(0xFFFFFFFF)
-    val onCallout = Color(0xFFFFFFFF)
-
     val overlay = Color(0x22000000)
-    val highlight = Color(0xFFFFD800)
 
     val reference = Color(0xFF000000)
 
     val disabledButtonColor = Color(0xFFB7B7B7)
     val disabledButtonTextColor = Color(0xFFDDDDDD)
-    val buttonShadowColor = Color(0xFF000000)
 
     val historyBackgroundColor = Color(0xFFF6F6F6)
     val historyRedColor = textFieldWarning
-    val historySyncingColor = Dark.panelBackgroundColor
+    val historySyncingColor = panelBackgroundColor
 
     val topAppBarColors = LightTopAppBarColors()
     val transparentTopAppBarColors = TransparentTopAppBarColors()
@@ -153,9 +121,9 @@ internal val DarkColorPalette =
         secondary = Dark.secondaryButton,
         onPrimary = Dark.textPrimaryButton,
         onSecondary = Dark.textSecondaryButton,
-        surface = Dark.backgroundStart,
+        surface = Dark.backgroundColor,
         onSurface = Dark.textBodyOnBackground,
-        background = Dark.backgroundStart,
+        background = Dark.backgroundColor,
         onBackground = Dark.textBodyOnBackground,
     )
 
@@ -165,50 +133,38 @@ internal val LightColorPalette =
         secondary = Light.secondaryButton,
         onPrimary = Light.textPrimaryButton,
         onSecondary = Light.textSecondaryButton,
-        surface = Light.backgroundStart,
+        surface = Light.backgroundColor,
         onSurface = Light.textBodyOnBackground,
-        background = Light.backgroundStart,
+        background = Light.backgroundColor,
         onBackground = Light.textBodyOnBackground,
     )
 
 internal val DarkExtendedColorPalette =
     ExtendedColors(
-        surfaceEnd = Dark.backgroundEnd,
+        backgroundColor = Dark.backgroundColor,
+        gridColor = Dark.gridColor,
         onBackgroundHeader = Dark.textHeaderOnBackground,
-        tertiary = Dark.tertiaryButton,
-        onTertiary = Dark.textTertiaryButton,
-        callout = Dark.callout,
-        onCallout = Dark.onCallout,
         circularProgressBarSmall = Dark.circularProgressBarSmall,
         circularProgressBarSmallDark = Dark.circularProgressBarSmallDark,
         circularProgressBarScreen = Dark.circularProgressBarScreen,
         linearProgressBarTrack = Dark.linearProgressBarTrack,
         linearProgressBarBackground = Dark.linearProgressBarBackground,
-        chipIndex = Dark.textChipIndex,
         textCommon = Dark.textCommon,
-        textMedium = Dark.textMedium,
         textDisabled = Dark.textDisabled,
         textFieldFrame = Dark.textFieldFrame,
-        textFieldError = Dark.textFieldError,
         textFieldWarning = Dark.textFieldWarning,
         textFieldHint = Dark.textFieldHint,
         textDescription = Dark.textDescription,
         textDescriptionDark = Dark.textDescriptionDark,
-        textPending = Dark.textProgress,
         layoutStroke = Dark.layoutStroke,
         overlay = Dark.overlay,
-        highlight = Dark.highlight,
         disabledButtonTextColor = Dark.disabledButtonTextColor,
         disabledButtonColor = Dark.disabledButtonColor,
         reference = Dark.reference,
-        buttonShadowColor = Dark.buttonShadowColor,
-        screenTitleColor = Dark.screenTitleColor,
-        aboutTextColor = Dark.aboutTextColor,
         welcomeAnimationColor = Dark.welcomeAnimationColor,
         complementaryColor = Dark.complementaryColor,
         dividerColor = Dark.dividerColor,
         darkDividerColor = Dark.darkDividerColor,
-        tabTextColor = Dark.tabTextColor,
         panelBackgroundColor = Dark.panelBackgroundColor,
         cameraDisabledBackgroundColor = Dark.cameraDisabledBackgroundColor,
         cameraDisabledFrameColor = Dark.cameraDisabledFrameColor,
@@ -223,42 +179,30 @@ internal val DarkExtendedColorPalette =
 
 internal val LightExtendedColorPalette =
     ExtendedColors(
-        surfaceEnd = Light.backgroundEnd,
+        backgroundColor = Light.backgroundColor,
+        gridColor = Light.gridColor,
         onBackgroundHeader = Light.textHeaderOnBackground,
-        tertiary = Light.tertiaryButton,
-        onTertiary = Light.textTertiaryButton,
-        callout = Light.callout,
-        onCallout = Light.onCallout,
         circularProgressBarScreen = Light.circularProgressBarScreen,
         circularProgressBarSmall = Light.circularProgressBarSmall,
         circularProgressBarSmallDark = Light.circularProgressBarSmallDark,
         linearProgressBarTrack = Light.linearProgressBarTrack,
         linearProgressBarBackground = Light.linearProgressBarBackground,
-        chipIndex = Light.textChipIndex,
         textCommon = Light.textCommon,
-        textMedium = Light.textMedium,
         textDisabled = Light.textDisabled,
         textFieldFrame = Light.textFieldFrame,
-        textFieldError = Light.textFieldError,
         textFieldWarning = Light.textFieldWarning,
         textFieldHint = Light.textFieldHint,
         textDescription = Light.textDescription,
         textDescriptionDark = Light.textDescriptionDark,
-        textPending = Light.textProgress,
         layoutStroke = Light.layoutStroke,
         overlay = Light.overlay,
-        highlight = Light.highlight,
         disabledButtonTextColor = Light.disabledButtonTextColor,
         disabledButtonColor = Light.disabledButtonColor,
         reference = Light.reference,
-        buttonShadowColor = Light.buttonShadowColor,
-        screenTitleColor = Light.screenTitleColor,
-        aboutTextColor = Light.aboutTextColor,
         welcomeAnimationColor = Light.welcomeAnimationColor,
         complementaryColor = Light.complementaryColor,
         dividerColor = Light.dividerColor,
         darkDividerColor = Light.darkDividerColor,
-        tabTextColor = Light.tabTextColor,
         panelBackgroundColor = Light.panelBackgroundColor,
         cameraDisabledBackgroundColor = Light.cameraDisabledBackgroundColor,
         cameraDisabledFrameColor = Light.cameraDisabledFrameColor,
@@ -275,42 +219,30 @@ internal val LightExtendedColorPalette =
 internal val LocalExtendedColors =
     staticCompositionLocalOf {
         ExtendedColors(
-            surfaceEnd = Color.Unspecified,
+            backgroundColor = Color.Unspecified,
+            gridColor = Color.Unspecified,
             onBackgroundHeader = Color.Unspecified,
-            tertiary = Color.Unspecified,
-            onTertiary = Color.Unspecified,
-            callout = Color.Unspecified,
-            onCallout = Color.Unspecified,
             circularProgressBarScreen = Color.Unspecified,
             circularProgressBarSmall = Color.Unspecified,
             circularProgressBarSmallDark = Color.Unspecified,
             linearProgressBarTrack = Color.Unspecified,
             linearProgressBarBackground = Color.Unspecified,
-            chipIndex = Color.Unspecified,
             textCommon = Color.Unspecified,
-            textMedium = Color.Unspecified,
             textDisabled = Color.Unspecified,
             textFieldHint = Color.Unspecified,
-            textFieldError = Color.Unspecified,
             textFieldWarning = Color.Unspecified,
             textFieldFrame = Color.Unspecified,
             textDescription = Color.Unspecified,
             textDescriptionDark = Color.Unspecified,
-            textPending = Color.Unspecified,
             layoutStroke = Color.Unspecified,
             overlay = Color.Unspecified,
-            highlight = Color.Unspecified,
             disabledButtonTextColor = Color.Unspecified,
             disabledButtonColor = Color.Unspecified,
             reference = Color.Unspecified,
-            buttonShadowColor = Color.Unspecified,
-            screenTitleColor = Color.Unspecified,
-            aboutTextColor = Color.Unspecified,
             welcomeAnimationColor = Color.Unspecified,
             complementaryColor = Color.Unspecified,
             dividerColor = Color.Unspecified,
             darkDividerColor = Color.Unspecified,
-            tabTextColor = Color.Unspecified,
             panelBackgroundColor = Color.Unspecified,
             cameraDisabledBackgroundColor = Color.Unspecified,
             cameraDisabledFrameColor = Color.Unspecified,

ui-design-lib/src/main/java/co/electriccoin/zcash/ui/design/theme/internal/TopAppBarColors.kt

@@ -23,6 +23,14 @@ interface TopAppBarColors {
             titleContentColor = titleColor,
             actionIconContentColor = actionColor
         )
+
+    fun copyColors(
+        containerColor: Color = this.containerColor,
+        navigationColor: Color = this.navigationColor,
+        titleColor: Color = this.titleColor,
+        subTitleColor: Color = this.subTitleColor,
+        actionColor: Color = this.actionColor,
+    ): TopAppBarColors
 }
 
 @Immutable
@@ -32,7 +40,21 @@ internal data class DefaultTopAppBarColors(
     override val titleColor: Color = Color.Unspecified,
     override val subTitleColor: Color = Color.Unspecified,
     override val actionColor: Color = Color.Unspecified,
-) : TopAppBarColors
+) : TopAppBarColors {
+    override fun copyColors(
+        containerColor: Color,
+        navigationColor: Color,
+        titleColor: Color,
+        subTitleColor: Color,
+        actionColor: Color
+    ) = this.copy(
+        containerColor = containerColor,
+        navigationColor = navigationColor,
+        titleColor = titleColor,
+        subTitleColor = subTitleColor,
+        actionColor = actionColor
+    )
+}
 
 @Immutable
 internal data class LightTopAppBarColors(
@@ -41,7 +63,21 @@ internal data class LightTopAppBarColors(
     override val titleColor: Color = Color(0xFF000000),
     override val subTitleColor: Color = Color(0xFF8A8888),
     override val actionColor: Color = Color(0xFF000000),
-) : TopAppBarColors
+) : TopAppBarColors {
+    override fun copyColors(
+        containerColor: Color,
+        navigationColor: Color,
+        titleColor: Color,
+        subTitleColor: Color,
+        actionColor: Color
+    ) = this.copy(
+        containerColor = containerColor,
+        navigationColor = navigationColor,
+        titleColor = titleColor,
+        subTitleColor = subTitleColor,
+        actionColor = actionColor
+    )
+}
 
 @Immutable
 internal data class DarkTopAppBarColors(
@@ -50,7 +86,21 @@ internal data class DarkTopAppBarColors(
     override val titleColor: Color = Color(0xFFFFFFFF),
     override val subTitleColor: Color = Color(0xFF8A8888),
     override val actionColor: Color = Color(0xFFFFFFFF),
-) : TopAppBarColors
+) : TopAppBarColors {
+    override fun copyColors(
+        containerColor: Color,
+        navigationColor: Color,
+        titleColor: Color,
+        subTitleColor: Color,
+        actionColor: Color
+    ) = this.copy(
+        containerColor = containerColor,
+        navigationColor = navigationColor,
+        titleColor = titleColor,
+        subTitleColor = subTitleColor,
+        actionColor = actionColor
+    )
+}
 
 @Immutable
 internal data class TransparentTopAppBarColors(
@@ -59,4 +109,18 @@ internal data class TransparentTopAppBarColors(
     override val titleColor: Color = Color(0xFFFFFFFF),
     override val subTitleColor: Color = Color(0xFFFFFFFF),
     override val actionColor: Color = Color(0xFFFFFFFF),
-) : TopAppBarColors
+) : TopAppBarColors {
+    override fun copyColors(
+        containerColor: Color,
+        navigationColor: Color,
+        titleColor: Color,
+        subTitleColor: Color,
+        actionColor: Color
+    ) = this.copy(
+        containerColor = containerColor,
+        navigationColor = navigationColor,
+        titleColor = titleColor,
+        subTitleColor = subTitleColor,
+        actionColor = actionColor
+    )
+}

ui-lib/src/main/java/co/electriccoin/zcash/ui/MainActivity.kt

@@ -38,8 +38,8 @@ import co.electriccoin.zcash.ui.common.viewmodel.SecretState
 import co.electriccoin.zcash.ui.common.viewmodel.WalletViewModel
 import co.electriccoin.zcash.ui.configuration.RemoteConfig
 import co.electriccoin.zcash.ui.design.component.AnimationConstants
+import co.electriccoin.zcash.ui.design.component.BlankSurface
 import co.electriccoin.zcash.ui.design.component.ConfigurationOverride
-import co.electriccoin.zcash.ui.design.component.GradientSurface
 import co.electriccoin.zcash.ui.design.component.Override
 import co.electriccoin.zcash.ui.design.component.WelcomeAnimationAutostart
 import co.electriccoin.zcash.ui.design.theme.ZcashTheme
@@ -132,7 +132,7 @@ class MainActivity : AppCompatActivity() {
         setContent {
             Override(configurationOverrideFlow) {
                 ZcashTheme {
-                    GradientSurface(
+                    BlankSurface(
                         Modifier
                             .fillMaxWidth()
                             .fillMaxHeight()

ui-lib/src/main/java/co/electriccoin/zcash/ui/common/compose/BalanceWidget.kt

@@ -22,9 +22,9 @@ import cash.z.ecc.android.sdk.model.Zatoshi
 import cash.z.ecc.android.sdk.model.toZecString
 import cash.z.ecc.sdk.type.ZcashCurrency
 import co.electriccoin.zcash.ui.design.R
+import co.electriccoin.zcash.ui.design.component.BlankSurface
 import co.electriccoin.zcash.ui.design.component.Body
 import co.electriccoin.zcash.ui.design.component.CircularSmallProgressIndicator
-import co.electriccoin.zcash.ui.design.component.GradientSurface
 import co.electriccoin.zcash.ui.design.component.Reference
 import co.electriccoin.zcash.ui.design.component.StyledBalance
 import co.electriccoin.zcash.ui.design.theme.ZcashTheme
@@ -33,7 +33,7 @@ import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 @Composable
 private fun BalanceWidgetPreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface(
+        BlankSurface(
             modifier = Modifier.fillMaxWidth()
         ) {
             @Suppress("MagicNumber")
@@ -57,7 +57,7 @@ private fun BalanceWidgetPreview() {
 @Composable
 private fun BalanceWidgetNotAvailableYetPreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface(
+        BlankSurface(
             modifier = Modifier.fillMaxWidth()
         ) {
             @Suppress("MagicNumber")

ui-lib/src/main/java/co/electriccoin/zcash/ui/common/compose/SynchronizationStatus.kt

@@ -25,8 +25,8 @@ import cash.z.ecc.sdk.extension.toPercentageWithDecimal
 import co.electriccoin.zcash.ui.R
 import co.electriccoin.zcash.ui.common.model.WalletSnapshot
 import co.electriccoin.zcash.ui.design.component.AppAlertDialog
+import co.electriccoin.zcash.ui.design.component.BlankSurface
 import co.electriccoin.zcash.ui.design.component.BodySmall
-import co.electriccoin.zcash.ui.design.component.GradientSurface
 import co.electriccoin.zcash.ui.design.component.SmallLinearProgressIndicator
 import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 import co.electriccoin.zcash.ui.fixture.WalletSnapshotFixture
@@ -37,7 +37,7 @@ import co.electriccoin.zcash.ui.screen.balances.model.WalletDisplayValues
 @Composable
 private fun BalanceWidgetPreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface(
+        BlankSurface(
             modifier = Modifier.fillMaxWidth()
         ) {
             SynchronizationStatus(

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/about/view/AboutView.kt

@@ -18,7 +18,6 @@ import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.Text
@@ -42,7 +41,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import co.electriccoin.zcash.ui.R
 import co.electriccoin.zcash.ui.common.model.VersionInfo
 import co.electriccoin.zcash.ui.common.model.WalletRestoringState
-import co.electriccoin.zcash.ui.design.component.GradientSurface
+import co.electriccoin.zcash.ui.design.component.BlankBgScaffold
 import co.electriccoin.zcash.ui.design.component.SmallTopAppBar
 import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 import co.electriccoin.zcash.ui.fixture.ConfigInfoFixture
@@ -53,18 +52,16 @@ import co.electriccoin.zcash.ui.screen.support.model.ConfigInfo
 @Composable
 private fun AboutPreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
         About(
             onBack = {},
             configInfo = ConfigInfoFixture.new(),
             onPrivacyPolicy = {},
             snackbarHostState = SnackbarHostState(),
             versionInfo = VersionInfoFixture.new(),
-                walletRestoringState = WalletRestoringState.NONE,
+            walletRestoringState = WalletRestoringState.NONE
         )
     }
 }
-}
 
 @Composable
 @Suppress("LongParameterList")
@@ -76,7 +73,7 @@ fun About(
     versionInfo: VersionInfo,
     walletRestoringState: WalletRestoringState,
 ) {
-    Scaffold(
+    BlankBgScaffold(
         topBar = {
             AboutTopAppBar(
                 onBack = onBack,
@@ -214,7 +211,7 @@ fun AboutMainContent(
 
         Text(
             text = stringResource(id = R.string.about_description),
-            color = ZcashTheme.colors.aboutTextColor,
+            color = ZcashTheme.colors.textDescriptionDark,
             style = ZcashTheme.extendedTypography.aboutText
         )
 
@@ -236,18 +233,18 @@ fun PrivacyPolicyLink(onPrivacyPolicy: () -> Unit) {
         ClickableText(
             text =
                 buildAnnotatedString {
-                    withStyle(SpanStyle(color = ZcashTheme.colors.aboutTextColor)) {
+                    withStyle(SpanStyle(color = ZcashTheme.colors.textDescriptionDark)) {
                         append(textPart1)
                     }
                     withStyle(
                         SpanStyle(
                             textDecoration = TextDecoration.Underline,
-                            color = ZcashTheme.colors.aboutTextColor,
+                            color = ZcashTheme.colors.textDescriptionDark,
                         )
                     ) {
                         append(textPart2)
                     }
-                    withStyle(SpanStyle(color = ZcashTheme.colors.aboutTextColor)) {
+                    withStyle(SpanStyle(color = ZcashTheme.colors.textDescriptionDark)) {
                         append(textPart3)
                     }
                 },

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/account/view/AccountView.kt

@@ -7,7 +7,6 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.runtime.Composable
@@ -25,7 +24,7 @@ import co.electriccoin.zcash.ui.common.compose.StatusDialog
 import co.electriccoin.zcash.ui.common.model.WalletRestoringState
 import co.electriccoin.zcash.ui.common.model.WalletSnapshot
 import co.electriccoin.zcash.ui.common.test.CommonTag
-import co.electriccoin.zcash.ui.design.component.GradientSurface
+import co.electriccoin.zcash.ui.design.component.BlankBgScaffold
 import co.electriccoin.zcash.ui.design.component.SmallTopAppBar
 import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 import co.electriccoin.zcash.ui.fixture.BalanceStateFixture
@@ -39,7 +38,6 @@ import co.electriccoin.zcash.ui.screen.balances.model.StatusAction
 @Composable
 private fun HistoryLoadingComposablePreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
         Account(
             balanceState = BalanceStateFixture.new(),
             goBalances = {},
@@ -55,16 +53,18 @@ private fun HistoryLoadingComposablePreview() {
         )
     }
 }
-}
 
 @Composable
 @Preview("Account History List")
 private fun HistoryListComposablePreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
         @Suppress("MagicNumber")
         Account(
-                balanceState = BalanceState.Available(Zatoshi(123_000_000L), Zatoshi(123_000_000L)),
+            balanceState =
+                BalanceState.Available(
+                    Zatoshi(123_000_000L),
+                    Zatoshi(123_000_000L)
+                ),
             goBalances = {},
             goSettings = {},
             hideStatusDialog = {},
@@ -78,7 +78,6 @@ private fun HistoryListComposablePreview() {
         )
     }
 }
-}
 
 @Composable
 @Suppress("LongParameterList")
@@ -95,7 +94,7 @@ internal fun Account(
     walletRestoringState: WalletRestoringState,
     walletSnapshot: WalletSnapshot,
 ) {
-    Scaffold(
+    BlankBgScaffold(
         topBar = {
             AccountTopAppBar(
                 showRestoring = walletRestoringState == WalletRestoringState.RESTORING,

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/account/view/HistoryView.kt

@@ -49,8 +49,8 @@ import co.electriccoin.zcash.ui.R
 import co.electriccoin.zcash.ui.common.compose.SynchronizationStatus
 import co.electriccoin.zcash.ui.common.model.WalletRestoringState
 import co.electriccoin.zcash.ui.common.model.WalletSnapshot
+import co.electriccoin.zcash.ui.design.component.BlankSurface
 import co.electriccoin.zcash.ui.design.component.CircularMidProgressIndicator
-import co.electriccoin.zcash.ui.design.component.GradientSurface
 import co.electriccoin.zcash.ui.design.component.StyledBalance
 import co.electriccoin.zcash.ui.design.component.TextWithIcon
 import co.electriccoin.zcash.ui.design.theme.ZcashTheme
@@ -74,7 +74,6 @@ import java.util.Locale
 @Preview("History")
 private fun ComposablePreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
         HistoryContainer(
             onTransactionItemAction = {},
             onStatusClick = {},
@@ -84,13 +83,11 @@ private fun ComposablePreview() {
         )
     }
 }
-}
 
 @Composable
 @Preview("History List")
 private fun ComposableHistoryListPreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
         HistoryContainer(
             transactionState = TransactionUiState.Done(transactions = TransactionsFixture.new()),
             onTransactionItemAction = {},
@@ -100,7 +97,6 @@ private fun ComposableHistoryListPreview() {
         )
     }
 }
-}
 
 private val dateFormat: DateFormat by lazy {
     SimpleDateFormat(
@@ -234,7 +230,7 @@ private fun HistoryList(
 @Preview("History List Item")
 private fun ComposableHistoryListItemPreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
+        BlankSurface {
             HistoryItem(
                 onAction = {},
                 transaction = TransactionUiFixture.new()
@@ -773,7 +769,7 @@ private fun HistoryItemMessagePart(
         Text(
             text = stringResource(id = R.string.account_history_item_message),
             style = ZcashTheme.extendedTypography.transactionItemStyles.contentMedium,
-            color = ZcashTheme.colors.textMedium
+            color = ZcashTheme.colors.textCommon
         )
 
         Spacer(modifier = Modifier.height(ZcashTheme.dimens.spacingSmall))

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/advancedsettings/view/AdvancedSettingsView.kt

@@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.height
 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
 import androidx.compose.ui.Alignment
@@ -21,7 +20,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import co.electriccoin.zcash.ui.R
 import co.electriccoin.zcash.ui.common.model.WalletRestoringState
 import co.electriccoin.zcash.ui.design.MINIMAL_WEIGHT
-import co.electriccoin.zcash.ui.design.component.GradientSurface
+import co.electriccoin.zcash.ui.design.component.BlankBgScaffold
 import co.electriccoin.zcash.ui.design.component.PrimaryButton
 import co.electriccoin.zcash.ui.design.component.SmallTopAppBar
 import co.electriccoin.zcash.ui.design.theme.ZcashTheme
@@ -35,18 +34,16 @@ import co.electriccoin.zcash.ui.screen.advancedsettings.AdvancedSettingsTag
 @Composable
 private fun PreviewAdvancedSettings() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
         AdvancedSettings(
             onBack = {},
             onDeleteWallet = {},
             onExportPrivateData = {},
             onChooseServer = {},
             onSeedRecovery = {},
-                walletRestoringState = WalletRestoringState.NONE,
+            walletRestoringState = WalletRestoringState.NONE
         )
     }
 }
-}
 
 @Composable
 @Suppress("LongParameterList")
@@ -58,12 +55,14 @@ fun AdvancedSettings(
     onSeedRecovery: () -> Unit,
     walletRestoringState: WalletRestoringState,
 ) {
-    Scaffold(topBar = {
+    BlankBgScaffold(
+        topBar = {
             AdvancedSettingsTopAppBar(
                 onBack = onBack,
                 showRestoring = walletRestoringState == WalletRestoringState.RESTORING,
             )
-    }) { paddingValues ->
+        }
+    ) { paddingValues ->
         AdvancedSettingsMainContent(
             modifier =
                 Modifier

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/authentication/view/AuthenticationView.kt

@@ -14,7 +14,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import co.electriccoin.zcash.ui.R
 import co.electriccoin.zcash.ui.common.viewmodel.AuthenticationResult
 import co.electriccoin.zcash.ui.design.component.AppAlertDialog
-import co.electriccoin.zcash.ui.design.component.GradientSurface
+import co.electriccoin.zcash.ui.design.component.BlankSurface
 import co.electriccoin.zcash.ui.design.component.WelcomeAnimation
 import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 
@@ -22,7 +22,7 @@ import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 @Composable
 private fun PreviewAppAccessAuthentication() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
+        BlankSurface {
             AppAccessAuthentication(
                 welcomeAnimVisibility = true
             )
@@ -34,7 +34,7 @@ private fun PreviewAppAccessAuthentication() {
 @Composable
 private fun PreviewErrorAuthentication() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
+        BlankSurface {
             AuthenticationErrorDialog(
                 onDismiss = {},
                 onRetry = {},

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/balances/view/BalancesView.kt

@@ -25,7 +25,6 @@ import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.Text
@@ -68,12 +67,13 @@ import co.electriccoin.zcash.ui.common.model.spendableBalance
 import co.electriccoin.zcash.ui.common.model.valuePendingBalance
 import co.electriccoin.zcash.ui.common.test.CommonTag
 import co.electriccoin.zcash.ui.design.component.AppAlertDialog
+import co.electriccoin.zcash.ui.design.component.BlankBgScaffold
+import co.electriccoin.zcash.ui.design.component.BlankSurface
 import co.electriccoin.zcash.ui.design.component.Body
 import co.electriccoin.zcash.ui.design.component.BodySmall
 import co.electriccoin.zcash.ui.design.component.BodyWithFiatCurrencySymbol
 import co.electriccoin.zcash.ui.design.component.CircularScreenProgressIndicator
 import co.electriccoin.zcash.ui.design.component.CircularSmallProgressIndicator
-import co.electriccoin.zcash.ui.design.component.GradientSurface
 import co.electriccoin.zcash.ui.design.component.PrimaryButton
 import co.electriccoin.zcash.ui.design.component.Reference
 import co.electriccoin.zcash.ui.design.component.Small
@@ -91,7 +91,6 @@ import co.electriccoin.zcash.ui.screen.balances.model.WalletDisplayValues
 @Composable
 private fun ComposableBalancesPreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
         Balances(
             balanceState = BalanceStateFixture.new(),
             isFiatConversionEnabled = false,
@@ -110,13 +109,11 @@ private fun ComposableBalancesPreview() {
         )
     }
 }
-}
 
 @Preview("BalancesShieldFailure")
 @Composable
 private fun ComposableBalancesShieldFailurePreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
         Balances(
             balanceState = BalanceStateFixture.new(),
             isFiatConversionEnabled = false,
@@ -135,13 +132,12 @@ private fun ComposableBalancesShieldFailurePreview() {
         )
     }
 }
-}
 
 @Preview("BalancesShieldErrorDialog")
 @Composable
 private fun ComposableBalancesShieldErrorDialogPreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
+        BlankSurface {
             ShieldingErrorDialog(
                 reason = "Test Error Text",
                 onDone = {}
@@ -168,7 +164,7 @@ fun Balances(
     walletSnapshot: WalletSnapshot?,
     walletRestoringState: WalletRestoringState,
 ) {
-    Scaffold(
+    BlankBgScaffold(
         topBar = {
             BalancesTopAppBar(
                 showRestoring = walletRestoringState == WalletRestoringState.RESTORING,
@@ -470,7 +466,7 @@ fun TransparentBalanceRow(
                         ZcashTheme.extendedTypography.balanceSingleStyles.first,
                         ZcashTheme.extendedTypography.balanceSingleStyles.second
                     ),
-                textColor = ZcashTheme.colors.textPending
+                textColor = ZcashTheme.colors.textDescriptionDark
             )
 
             Spacer(modifier = Modifier.width(ZcashTheme.dimens.spacingTiny))
@@ -627,7 +623,7 @@ fun ChangePendingRow(walletSnapshot: WalletSnapshot) {
                         ZcashTheme.extendedTypography.balanceSingleStyles.first,
                         ZcashTheme.extendedTypography.balanceSingleStyles.second
                     ),
-                textColor = ZcashTheme.colors.textPending
+                textColor = ZcashTheme.colors.textDescriptionDark
             )
 
             Spacer(modifier = Modifier.width(12.dp))
@@ -661,7 +657,7 @@ fun PendingTransactionsRow(walletSnapshot: WalletSnapshot) {
                         ZcashTheme.extendedTypography.balanceSingleStyles.first,
                         ZcashTheme.extendedTypography.balanceSingleStyles.second
                     ),
-                textColor = ZcashTheme.colors.textPending
+                textColor = ZcashTheme.colors.textDescriptionDark
             )
 
             Spacer(modifier = Modifier.width(12.dp))

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/chooseserver/view/ChooseServerView.kt

@@ -17,7 +17,6 @@ import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.DividerDefaults
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableIntStateOf
@@ -41,8 +40,8 @@ import co.electriccoin.lightwallet.client.model.LightWalletEndpoint
 import co.electriccoin.zcash.ui.R
 import co.electriccoin.zcash.ui.common.model.WalletRestoringState
 import co.electriccoin.zcash.ui.design.component.AppAlertDialog
+import co.electriccoin.zcash.ui.design.component.BlankBgScaffold
 import co.electriccoin.zcash.ui.design.component.FormTextField
-import co.electriccoin.zcash.ui.design.component.GradientSurface
 import co.electriccoin.zcash.ui.design.component.PrimaryButton
 import co.electriccoin.zcash.ui.design.component.RadioButton
 import co.electriccoin.zcash.ui.design.component.SmallTopAppBar
@@ -56,7 +55,6 @@ import kotlinx.collections.immutable.toImmutableList
 @Composable
 private fun PreviewChooseServer() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
         ChooseServer(
             availableServers = emptyList<LightWalletEndpoint>().toImmutableList(),
             onBack = {},
@@ -71,7 +69,6 @@ private fun PreviewChooseServer() {
         )
     }
 }
-}
 
 @Composable
 @Suppress("LongMethod", "LongParameterList")
@@ -123,7 +120,7 @@ fun ChooseServer(
             mutableStateOf(initialCustomServerValue)
         }
 
-    Scaffold(
+    BlankBgScaffold(
         topBar = {
             ChooseServerTopAppBar(
                 onBack = onBack,

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/debug/view/DesignGuide.kt

@@ -6,14 +6,13 @@ import androidx.compose.runtime.Composable
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import co.electriccoin.zcash.spackle.model.Index
+import co.electriccoin.zcash.ui.design.component.BlankSurface
 import co.electriccoin.zcash.ui.design.component.Body
 import co.electriccoin.zcash.ui.design.component.ChipIndexed
-import co.electriccoin.zcash.ui.design.component.GradientSurface
 import co.electriccoin.zcash.ui.design.component.Header
 import co.electriccoin.zcash.ui.design.component.NavigationButton
 import co.electriccoin.zcash.ui.design.component.PrimaryButton
 import co.electriccoin.zcash.ui.design.component.SecondaryButton
-import co.electriccoin.zcash.ui.design.component.TertiaryButton
 import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 
 @Preview("DesignGuide")
@@ -28,7 +27,7 @@ private fun ComposablePreview() {
 // Allowing magic numbers since this is debug-only
 @Suppress("MagicNumber")
 fun DesignGuide() {
-    GradientSurface {
+    BlankSurface {
         Column {
             Header(text = "H1")
             Body(text = "body")
@@ -36,7 +35,6 @@ fun DesignGuide() {
             NavigationButton(onClick = { }, text = "Next")
             PrimaryButton(onClick = { }, text = "Primary button", outerPaddingValues = PaddingValues(24.dp))
             SecondaryButton(onClick = { }, text = "Secondary button", outerPaddingValues = PaddingValues(24.dp))
-            TertiaryButton(onClick = { }, text = "Tertiary button", outerPaddingValues = PaddingValues(24.dp))
             ChipIndexed(Index(1), "edict")
         }
     }

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/deletewallet/view/DeleteWalletView.kt

@@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.height
 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.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.Text
@@ -25,9 +24,9 @@ import co.electriccoin.zcash.ui.common.model.WalletRestoringState
 import co.electriccoin.zcash.ui.design.MINIMAL_WEIGHT
 import co.electriccoin.zcash.ui.design.component.Body
 import co.electriccoin.zcash.ui.design.component.CheckBox
-import co.electriccoin.zcash.ui.design.component.GradientSurface
+import co.electriccoin.zcash.ui.design.component.GridBgScaffold
+import co.electriccoin.zcash.ui.design.component.GridBgSmallTopAppBar
 import co.electriccoin.zcash.ui.design.component.PrimaryButton
-import co.electriccoin.zcash.ui.design.component.SmallTopAppBar
 import co.electriccoin.zcash.ui.design.component.TopScreenLogoTitle
 import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 
@@ -35,7 +34,6 @@ import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 @Composable
 private fun ExportPrivateDataPreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
         DeleteWallet(
             snackbarHostState = SnackbarHostState(),
             onBack = {},
@@ -44,7 +42,6 @@ private fun ExportPrivateDataPreview() {
         )
     }
 }
-}
 
 @Composable
 fun DeleteWallet(
@@ -53,7 +50,7 @@ fun DeleteWallet(
     onConfirm: () -> Unit,
     walletRestoringState: WalletRestoringState,
 ) {
-    Scaffold(
+    GridBgScaffold(
         topBar = {
             DeleteWalletDataTopAppBar(
                 onBack = onBack,
@@ -83,7 +80,7 @@ private fun DeleteWalletDataTopAppBar(
     onBack: () -> Unit,
     showRestoring: Boolean
 ) {
-    SmallTopAppBar(
+    GridBgSmallTopAppBar(
         restoringLabel =
             if (showRestoring) {
                 stringResource(id = R.string.restoring_wallet_label)

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/exportdata/view/ExportPrivateDataView.kt

@@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.height
 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.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.Text
@@ -27,9 +26,9 @@ import co.electriccoin.zcash.ui.common.model.WalletRestoringState
 import co.electriccoin.zcash.ui.design.MINIMAL_WEIGHT
 import co.electriccoin.zcash.ui.design.component.Body
 import co.electriccoin.zcash.ui.design.component.CheckBox
-import co.electriccoin.zcash.ui.design.component.GradientSurface
+import co.electriccoin.zcash.ui.design.component.GridBgScaffold
+import co.electriccoin.zcash.ui.design.component.GridBgSmallTopAppBar
 import co.electriccoin.zcash.ui.design.component.PrimaryButton
-import co.electriccoin.zcash.ui.design.component.SmallTopAppBar
 import co.electriccoin.zcash.ui.design.component.TopScreenLogoTitle
 import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 
@@ -37,7 +36,6 @@ import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 @Composable
 private fun ExportPrivateDataPreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
         ExportPrivateData(
             snackbarHostState = SnackbarHostState(),
             onBack = {},
@@ -47,7 +45,6 @@ private fun ExportPrivateDataPreview() {
         )
     }
 }
-}
 
 // TODO [#998]: Check and enhance screen dark mode
 // TODO [#998]: https://github.com/Electric-Coin-Company/zashi-android/issues/998
@@ -60,7 +57,7 @@ fun ExportPrivateData(
     onConfirm: () -> Unit,
     walletRestoringState: WalletRestoringState,
 ) {
-    Scaffold(
+    GridBgScaffold(
         topBar = {
             ExportPrivateDataTopAppBar(
                 onBack = onBack,
@@ -91,7 +88,7 @@ private fun ExportPrivateDataTopAppBar(
     onBack: () -> Unit,
     showRestoring: Boolean
 ) {
-    SmallTopAppBar(
+    GridBgSmallTopAppBar(
         restoringLabel =
             if (showRestoring) {
                 stringResource(id = R.string.restoring_wallet_label)

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/home/view/HomeView.kt

@@ -17,7 +17,6 @@ import androidx.compose.material3.TabRowDefaults
 import androidx.compose.material3.TabRowDefaults.tabIndicatorOffset
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.getValue
 import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.rememberUpdatedState
 import androidx.compose.runtime.snapshotFlow
@@ -34,7 +33,7 @@ import co.electriccoin.zcash.ui.R
 import co.electriccoin.zcash.ui.common.compose.DisableScreenTimeout
 import co.electriccoin.zcash.ui.common.model.WalletSnapshot
 import co.electriccoin.zcash.ui.design.component.AppAlertDialog
-import co.electriccoin.zcash.ui.design.component.GradientSurface
+import co.electriccoin.zcash.ui.design.component.BlankSurface
 import co.electriccoin.zcash.ui.design.component.NavigationTabText
 import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 import co.electriccoin.zcash.ui.fixture.WalletSnapshotFixture
@@ -50,7 +49,7 @@ import kotlinx.coroutines.launch
 @Composable
 private fun ComposablePreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
+        BlankSurface {
             Home(
                 forcePage = null,
                 isKeepScreenOnWhileSyncing = false,

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/newwalletrecovery/view/NewWalletRecoveryView.kt

@@ -21,7 +21,6 @@ import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -34,7 +33,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
-import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
 import cash.z.ecc.android.sdk.model.PersistableWallet
 import cash.z.ecc.sdk.fixture.PersistableWalletFixture
@@ -46,19 +44,18 @@ import co.electriccoin.zcash.ui.common.test.CommonTag.WALLET_BIRTHDAY
 import co.electriccoin.zcash.ui.design.MINIMAL_WEIGHT
 import co.electriccoin.zcash.ui.design.component.BodySmall
 import co.electriccoin.zcash.ui.design.component.ChipGrid
-import co.electriccoin.zcash.ui.design.component.GradientSurface
+import co.electriccoin.zcash.ui.design.component.GridBgScaffold
+import co.electriccoin.zcash.ui.design.component.GridBgSmallTopAppBar
 import co.electriccoin.zcash.ui.design.component.PrimaryButton
-import co.electriccoin.zcash.ui.design.component.SmallTopAppBar
 import co.electriccoin.zcash.ui.design.component.TopScreenLogoTitle
 import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 import co.electriccoin.zcash.ui.fixture.VersionInfoFixture
 import kotlinx.collections.immutable.toPersistentList
 
-@Preview(name = "NewWalletRecovery", device = Devices.PIXEL_4)
+@Preview(name = "NewWalletRecovery")
 @Composable
 private fun ComposablePreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
         NewWalletRecovery(
             PersistableWalletFixture.new(),
             onSeedCopy = {},
@@ -68,7 +65,6 @@ private fun ComposablePreview() {
         )
     }
 }
-}
 
 // TODO [#998]: Check and enhance screen dark mode
 // TODO [#998]: https://github.com/Electric-Coin-Company/zashi-android/issues/998
@@ -84,7 +80,7 @@ fun NewWalletRecovery(
     onComplete: () -> Unit,
     versionInfo: VersionInfo,
 ) {
-    Scaffold(
+    GridBgScaffold(
         topBar = {
             NewWalletRecoveryTopAppBar(
                 onSeedCopy = onSeedCopy,
@@ -115,7 +111,7 @@ private fun NewWalletRecoveryTopAppBar(
     modifier: Modifier = Modifier,
     onSeedCopy: () -> Unit
 ) {
-    SmallTopAppBar(
+    GridBgSmallTopAppBar(
         modifier = modifier,
         regularActions = {
             if (versionInfo.isDebuggable && !versionInfo.isRunningUnderTestService) {

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/onboarding/view/OnboardingView.kt

@@ -14,7 +14,6 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material3.Scaffold
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -25,7 +24,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import cash.z.ecc.android.sdk.fixture.WalletFixture
 import co.electriccoin.zcash.ui.R
 import co.electriccoin.zcash.ui.design.MINIMAL_WEIGHT
-import co.electriccoin.zcash.ui.design.component.GradientSurface
+import co.electriccoin.zcash.ui.design.component.GridBgScaffold
 import co.electriccoin.zcash.ui.design.component.PrimaryButton
 import co.electriccoin.zcash.ui.design.component.SecondaryButton
 import co.electriccoin.zcash.ui.design.component.TitleLarge
@@ -35,7 +34,6 @@ import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 @Composable
 private fun OnboardingComposablePreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
         Onboarding(
             isDebugMenuEnabled = true,
             onImportWallet = {},
@@ -44,7 +42,6 @@ private fun OnboardingComposablePreview() {
         )
     }
 }
-}
 
 // TODO [#998]: Check and enhance screen dark mode
 // TODO [#998]: https://github.com/Electric-Coin-Company/zashi-android/issues/998
@@ -63,7 +60,7 @@ fun Onboarding(
     onCreateWallet: () -> Unit,
     onFixtureWallet: (String) -> Unit
 ) {
-    Scaffold { paddingValues ->
+    GridBgScaffold { paddingValues ->
         OnboardingMainContent(
             isDebugMenuEnabled = isDebugMenuEnabled,
             onCreateWallet = onCreateWallet,

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/receive/view/ReceiveView.kt

@@ -15,7 +15,6 @@ import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.Text
@@ -43,8 +42,8 @@ import co.electriccoin.zcash.ui.common.compose.ScreenBrightnessState
 import co.electriccoin.zcash.ui.common.model.VersionInfo
 import co.electriccoin.zcash.ui.common.model.WalletRestoringState
 import co.electriccoin.zcash.ui.common.test.CommonTag
+import co.electriccoin.zcash.ui.design.component.BlankBgScaffold
 import co.electriccoin.zcash.ui.design.component.CircularScreenProgressIndicator
-import co.electriccoin.zcash.ui.design.component.GradientSurface
 import co.electriccoin.zcash.ui.design.component.Reference
 import co.electriccoin.zcash.ui.design.component.SmallTopAppBar
 import co.electriccoin.zcash.ui.design.component.SubHeader
@@ -59,7 +58,6 @@ import kotlin.math.roundToInt
 @Composable
 private fun ComposablePreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
         Receive(
             screenBrightnessState = ScreenBrightnessState.NORMAL,
             walletAddress = runBlocking { WalletAddressesFixture.new() },
@@ -73,7 +71,6 @@ private fun ComposablePreview() {
         )
     }
 }
-}
 
 @Suppress("LongParameterList")
 @Composable
@@ -88,7 +85,7 @@ fun Receive(
     versionInfo: VersionInfo,
     walletRestoringState: WalletRestoringState,
 ) {
-    Scaffold(
+    BlankBgScaffold(
         topBar = {
             ReceiveTopAppBar(
                 onSettings = onSettings,

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/restore/view/RestoreView.kt

@@ -25,7 +25,6 @@ import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.MaterialTheme
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextField
@@ -42,7 +41,6 @@ import androidx.compose.runtime.rememberCoroutineScope
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
-import androidx.compose.ui.ExperimentalComposeUiApi
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
@@ -72,10 +70,10 @@ import co.electriccoin.zcash.ui.design.MINIMAL_WEIGHT
 import co.electriccoin.zcash.ui.design.component.Body
 import co.electriccoin.zcash.ui.design.component.ChipOnSurface
 import co.electriccoin.zcash.ui.design.component.FormTextField
-import co.electriccoin.zcash.ui.design.component.GradientSurface
+import co.electriccoin.zcash.ui.design.component.GridBgScaffold
+import co.electriccoin.zcash.ui.design.component.GridBgSmallTopAppBar
 import co.electriccoin.zcash.ui.design.component.PrimaryButton
 import co.electriccoin.zcash.ui.design.component.Reference
-import co.electriccoin.zcash.ui.design.component.SmallTopAppBar
 import co.electriccoin.zcash.ui.design.component.TopScreenLogoTitle
 import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 import co.electriccoin.zcash.ui.screen.restore.RestoreTag
@@ -92,7 +90,6 @@ import kotlinx.coroutines.launch
 @Composable
 private fun PreviewRestoreSeed() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
         RestoreWallet(
             ZcashNetwork.Mainnet,
             restoreState = RestoreState(RestoreStage.Seed),
@@ -118,7 +115,6 @@ private fun PreviewRestoreSeed() {
         )
     }
 }
-}
 
 @Preview("Restore Seed Birthday")
 @Composable
@@ -184,7 +180,7 @@ fun RestoreWallet(
         }
     }
 
-    Scaffold(
+    GridBgScaffold(
         modifier = Modifier.navigationBarsPadding(),
         topBar = {
             when (currentStage) {
@@ -293,7 +289,7 @@ private fun RestoreSeedTopAppBar(
     onClear: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    SmallTopAppBar(
+    GridBgSmallTopAppBar(
         modifier = modifier,
         backText = stringResource(id = R.string.restore_back).uppercase(),
         backContentDescriptionText = stringResource(R.string.restore_back_content_description),
@@ -311,7 +307,7 @@ private fun RestoreSeedBirthdayTopAppBar(
     onBack: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    SmallTopAppBar(
+    GridBgSmallTopAppBar(
         modifier = modifier,
         backText = stringResource(id = R.string.restore_back).uppercase(),
         backContentDescriptionText = stringResource(R.string.restore_back_content_description),
@@ -319,7 +315,6 @@ private fun RestoreSeedBirthdayTopAppBar(
     )
 }
 
-@OptIn(ExperimentalComposeUiApi::class)
 @Suppress("UNUSED_PARAMETER", "LongParameterList", "LongMethod")
 @Composable
 private fun RestoreSeedMainContent(

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/scan/view/ScanView.kt

@@ -60,7 +60,7 @@ import cash.z.ecc.android.sdk.type.AddressType
 import co.electriccoin.zcash.spackle.Twig
 import co.electriccoin.zcash.ui.R
 import co.electriccoin.zcash.ui.common.model.WalletRestoringState
-import co.electriccoin.zcash.ui.design.component.GradientSurface
+import co.electriccoin.zcash.ui.design.component.BlankSurface
 import co.electriccoin.zcash.ui.design.component.SecondaryButton
 import co.electriccoin.zcash.ui.design.component.Small
 import co.electriccoin.zcash.ui.design.component.SmallTopAppBar
@@ -84,7 +84,7 @@ import kotlin.math.roundToInt
 @Composable
 private fun PreviewScan() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
+        BlankSurface {
             Scan(
                 snackbarHostState = SnackbarHostState(),
                 onBack = {},

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/securitywarning/view/SecurityWarningView.kt

@@ -9,7 +9,6 @@ import androidx.compose.foundation.layout.height
 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
 import androidx.compose.runtime.mutableStateOf
@@ -26,9 +25,9 @@ import co.electriccoin.zcash.ui.R
 import co.electriccoin.zcash.ui.common.model.VersionInfo
 import co.electriccoin.zcash.ui.design.MINIMAL_WEIGHT
 import co.electriccoin.zcash.ui.design.component.CheckBox
-import co.electriccoin.zcash.ui.design.component.GradientSurface
+import co.electriccoin.zcash.ui.design.component.GridBgScaffold
+import co.electriccoin.zcash.ui.design.component.GridBgSmallTopAppBar
 import co.electriccoin.zcash.ui.design.component.PrimaryButton
-import co.electriccoin.zcash.ui.design.component.SmallTopAppBar
 import co.electriccoin.zcash.ui.design.component.TopScreenLogoTitle
 import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 import co.electriccoin.zcash.ui.fixture.VersionInfoFixture
@@ -37,7 +36,6 @@ import co.electriccoin.zcash.ui.fixture.VersionInfoFixture
 @Composable
 private fun SecurityWarningPreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
         SecurityWarning(
             versionInfo = VersionInfoFixture.new(),
             onBack = {},
@@ -46,7 +44,6 @@ private fun SecurityWarningPreview() {
         )
     }
 }
-}
 
 // TODO [#998]: Check and enhance screen dark mode
 // TODO [#998]: https://github.com/Electric-Coin-Company/zashi-android/issues/998
@@ -59,7 +56,7 @@ fun SecurityWarning(
     onAcknowledged: (Boolean) -> Unit,
     onConfirm: () -> Unit,
 ) {
-    Scaffold(
+    GridBgScaffold(
         topBar = { SecurityWarningTopAppBar(onBack = onBack) },
     ) { paddingValues ->
         SecurityWarningContent(
@@ -82,7 +79,7 @@ fun SecurityWarning(
 
 @Composable
 private fun SecurityWarningTopAppBar(onBack: () -> Unit) {
-    SmallTopAppBar(
+    GridBgSmallTopAppBar(
         backText = stringResource(R.string.security_warning_back).uppercase(),
         backContentDescriptionText = stringResource(R.string.security_warning_back_content_description),
         onBack = onBack,

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/seedrecovery/view/SeedRecoveryView.kt

@@ -21,7 +21,6 @@ import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -47,9 +46,9 @@ import co.electriccoin.zcash.ui.common.test.CommonTag.WALLET_BIRTHDAY
 import co.electriccoin.zcash.ui.design.MINIMAL_WEIGHT
 import co.electriccoin.zcash.ui.design.component.BodySmall
 import co.electriccoin.zcash.ui.design.component.ChipGrid
-import co.electriccoin.zcash.ui.design.component.GradientSurface
+import co.electriccoin.zcash.ui.design.component.GridBgScaffold
+import co.electriccoin.zcash.ui.design.component.GridBgSmallTopAppBar
 import co.electriccoin.zcash.ui.design.component.PrimaryButton
-import co.electriccoin.zcash.ui.design.component.SmallTopAppBar
 import co.electriccoin.zcash.ui.design.component.TopScreenLogoTitle
 import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 import co.electriccoin.zcash.ui.fixture.VersionInfoFixture
@@ -59,7 +58,6 @@ import kotlinx.collections.immutable.toPersistentList
 @Composable
 private fun ComposablePreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
         SeedRecovery(
             PersistableWalletFixture.new(),
             onBack = {},
@@ -71,7 +69,6 @@ private fun ComposablePreview() {
         )
     }
 }
-}
 
 // TODO [#998]: Check and enhance screen dark mode
 // TODO [#998]: https://github.com/Electric-Coin-Company/zashi-android/issues/998
@@ -90,7 +87,7 @@ fun SeedRecovery(
     versionInfo: VersionInfo,
     walletRestoringState: WalletRestoringState,
 ) {
-    Scaffold(
+    GridBgScaffold(
         topBar = {
             SeedRecoveryTopAppBar(
                 onBack = onBack,
@@ -125,7 +122,7 @@ private fun SeedRecoveryTopAppBar(
     showRestoring: Boolean,
     modifier: Modifier = Modifier,
 ) {
-    SmallTopAppBar(
+    GridBgSmallTopAppBar(
         restoringLabel =
             if (showRestoring) {
                 stringResource(id = R.string.restoring_wallet_label)

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/send/view/SendView.kt

@@ -22,7 +22,6 @@ import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableIntStateOf
@@ -66,10 +65,11 @@ import co.electriccoin.zcash.ui.common.model.spendableBalance
 import co.electriccoin.zcash.ui.common.test.CommonTag
 import co.electriccoin.zcash.ui.design.MINIMAL_WEIGHT
 import co.electriccoin.zcash.ui.design.component.AppAlertDialog
+import co.electriccoin.zcash.ui.design.component.BlankBgScaffold
+import co.electriccoin.zcash.ui.design.component.BlankSurface
 import co.electriccoin.zcash.ui.design.component.Body
 import co.electriccoin.zcash.ui.design.component.BodySmall
 import co.electriccoin.zcash.ui.design.component.FormTextField
-import co.electriccoin.zcash.ui.design.component.GradientSurface
 import co.electriccoin.zcash.ui.design.component.PrimaryButton
 import co.electriccoin.zcash.ui.design.component.Small
 import co.electriccoin.zcash.ui.design.component.SmallTopAppBar
@@ -88,7 +88,6 @@ import java.util.Locale
 @Preview("SendForm")
 private fun PreviewSendForm() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
         Send(
             sendStage = SendStage.Form,
             onCreateZecSend = {},
@@ -110,7 +109,6 @@ private fun PreviewSendForm() {
         )
     }
 }
-}
 
 // TODO [#1260]: Cover Send screens UI with tests
 // TODO [#1260]: https://github.com/Electric-Coin-Company/zashi-android/issues/1260
@@ -136,7 +134,7 @@ fun Send(
     walletRestoringState: WalletRestoringState,
     walletSnapshot: WalletSnapshot,
 ) {
-    Scaffold(topBar = {
+    BlankBgScaffold(topBar = {
         SendTopAppBar(
             showRestoring = walletRestoringState == WalletRestoringState.RESTORING,
             onSettings = onSettings
@@ -725,7 +723,7 @@ fun SendFormMemoTextField(
                     if (memoState is MemoState.Correct) {
                         ZcashTheme.colors.textFieldHint
                     } else {
-                        ZcashTheme.colors.textFieldError
+                        ZcashTheme.colors.textFieldWarning
                     },
                 textAlign = TextAlign.End,
                 modifier =
@@ -741,7 +739,7 @@ fun SendFormMemoTextField(
 @Preview("SendFailure")
 private fun PreviewSendFailure() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
+        BlankSurface {
             SendFailure(
                 onDone = {},
                 reason = "Insufficient balance"

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/sendconfirmation/view/SendConfirmationView.kt

@@ -19,7 +19,6 @@ import androidx.compose.foundation.layout.wrapContentSize
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.Icon
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.Text
@@ -46,8 +45,9 @@ import co.electriccoin.zcash.ui.common.compose.BalanceWidgetBigLineOnly
 import co.electriccoin.zcash.ui.common.model.WalletRestoringState
 import co.electriccoin.zcash.ui.design.MINIMAL_WEIGHT
 import co.electriccoin.zcash.ui.design.component.AppAlertDialog
+import co.electriccoin.zcash.ui.design.component.BlankBgScaffold
+import co.electriccoin.zcash.ui.design.component.BlankSurface
 import co.electriccoin.zcash.ui.design.component.Body
-import co.electriccoin.zcash.ui.design.component.GradientSurface
 import co.electriccoin.zcash.ui.design.component.PrimaryButton
 import co.electriccoin.zcash.ui.design.component.Small
 import co.electriccoin.zcash.ui.design.component.SmallTopAppBar
@@ -64,7 +64,6 @@ import kotlinx.coroutines.runBlocking
 @Preview("SendConfirmation")
 private fun PreviewSendConfirmation() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
         SendConfirmationContent(
             zecSend =
                 ZecSend(
@@ -79,13 +78,11 @@ private fun PreviewSendConfirmation() {
         )
     }
 }
-}
 
 @Composable
 @Preview("SendMultipleTransactionFailure")
 private fun PreviewSendMultipleTransactionFailure() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
         @Suppress("MagicNumber")
         MultipleSubmissionFailure(
             onContactSupport = {},
@@ -108,7 +105,6 @@ private fun PreviewSendMultipleTransactionFailure() {
         )
     }
 }
-}
 
 // TODO [#1260]: Cover Send screens UI with tests
 // TODO [#1260]: https://github.com/Electric-Coin-Company/zashi-android/issues/1260
@@ -125,7 +121,7 @@ fun SendConfirmation(
     zecSend: ZecSend,
     walletRestoringState: WalletRestoringState,
 ) {
-    Scaffold(
+    BlankBgScaffold(
         topBar = {
             SendConfirmationTopAppBar(
                 onBack = onBack,
@@ -375,7 +371,7 @@ fun SendConfirmationActionButtons(
 @Preview("SendConfirmationFailure")
 private fun PreviewSendConfirmationFailure() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
+        BlankSurface {
             SendFailure(
                 onDone = {},
                 reason = "Failed due to network error"

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/settings/view/SettingsView.kt

@@ -16,7 +16,6 @@ import androidx.compose.material3.DropdownMenu
 import androidx.compose.material3.DropdownMenuItem
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -31,7 +30,7 @@ import androidx.compose.ui.tooling.preview.Preview
 import co.electriccoin.zcash.ui.R
 import co.electriccoin.zcash.ui.common.model.WalletRestoringState
 import co.electriccoin.zcash.ui.design.MINIMAL_WEIGHT
-import co.electriccoin.zcash.ui.design.component.GradientSurface
+import co.electriccoin.zcash.ui.design.component.BlankBgScaffold
 import co.electriccoin.zcash.ui.design.component.PrimaryButton
 import co.electriccoin.zcash.ui.design.component.SmallTopAppBar
 import co.electriccoin.zcash.ui.design.theme.ZcashTheme
@@ -43,7 +42,6 @@ import co.electriccoin.zcash.ui.screen.settings.model.TroubleshootingParameters
 @Composable
 private fun PreviewSettings() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
         Settings(
             onAbout = {},
             onAdvancedSettings = {},
@@ -65,7 +63,6 @@ private fun PreviewSettings() {
         )
     }
 }
-}
 
 @Composable
 @Suppress("LongParameterList")
@@ -81,7 +78,7 @@ fun Settings(
     troubleshootingParameters: TroubleshootingParameters,
     walletRestoringState: WalletRestoringState,
 ) {
-    Scaffold(topBar = {
+    BlankBgScaffold(topBar = {
         SettingsTopAppBar(
             troubleshootingParameters = troubleshootingParameters,
             onBackgroundSyncSettingsChanged = onBackgroundSyncSettingsChanged,

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/support/view/SupportView.kt

@@ -10,7 +10,6 @@ import androidx.compose.foundation.layout.height
 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.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.Text
@@ -32,18 +31,19 @@ import co.electriccoin.zcash.ui.R
 import co.electriccoin.zcash.ui.common.model.WalletRestoringState
 import co.electriccoin.zcash.ui.design.MINIMAL_WEIGHT
 import co.electriccoin.zcash.ui.design.component.AppAlertDialog
+import co.electriccoin.zcash.ui.design.component.BlankSurface
 import co.electriccoin.zcash.ui.design.component.Body
 import co.electriccoin.zcash.ui.design.component.FormTextField
-import co.electriccoin.zcash.ui.design.component.GradientSurface
+import co.electriccoin.zcash.ui.design.component.GridBgScaffold
+import co.electriccoin.zcash.ui.design.component.GridBgSmallTopAppBar
 import co.electriccoin.zcash.ui.design.component.PrimaryButton
-import co.electriccoin.zcash.ui.design.component.SmallTopAppBar
 import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 
 @Preview("Support")
 @Composable
 private fun PreviewSupport() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
+        BlankSurface {
             Support(
                 isShowingDialog = false,
                 setShowDialog = {},
@@ -60,14 +60,12 @@ private fun PreviewSupport() {
 @Composable
 private fun PreviewSupportPopup() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
         SupportConfirmationDialog(
             onConfirm = {},
             onDismiss = {}
         )
     }
 }
-}
 
 @Composable
 @Suppress("LongParameterList")
@@ -81,7 +79,7 @@ fun Support(
 ) {
     val (message, setMessage) = rememberSaveable { mutableStateOf("") }
 
-    Scaffold(
+    GridBgScaffold(
         topBar = {
             SupportTopAppBar(
                 onBack = onBack,
@@ -117,7 +115,7 @@ private fun SupportTopAppBar(
     onBack: () -> Unit,
     showRestoring: Boolean
 ) {
-    SmallTopAppBar(
+    GridBgSmallTopAppBar(
         restoringLabel =
             if (showRestoring) {
                 stringResource(id = R.string.restoring_wallet_label)

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/update/view/UpdateView.kt

@@ -15,7 +15,6 @@ import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.DividerDefaults
 import androidx.compose.material3.HorizontalDivider
-import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SnackbarHost
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.material3.Text
@@ -31,10 +30,10 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import co.electriccoin.zcash.ui.R
 import co.electriccoin.zcash.ui.design.component.Body
-import co.electriccoin.zcash.ui.design.component.GradientSurface
+import co.electriccoin.zcash.ui.design.component.GridBgScaffold
+import co.electriccoin.zcash.ui.design.component.GridBgSmallTopAppBar
 import co.electriccoin.zcash.ui.design.component.PrimaryButton
 import co.electriccoin.zcash.ui.design.component.Reference
-import co.electriccoin.zcash.ui.design.component.SmallTopAppBar
 import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 import co.electriccoin.zcash.ui.fixture.UpdateInfoFixture
 import co.electriccoin.zcash.ui.screen.update.UpdateTag
@@ -45,7 +44,6 @@ import co.electriccoin.zcash.ui.screen.update.model.UpdateState
 @Composable
 private fun PreviewUpdate() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
         Update(
             snackbarHostState = SnackbarHostState(),
             UpdateInfoFixture.new(appUpdateInfo = null),
@@ -55,7 +53,6 @@ private fun PreviewUpdate() {
         )
     }
 }
-}
 
 @Composable
 fun Update(
@@ -65,7 +62,7 @@ fun Update(
     onLater: () -> Unit,
     onReference: () -> Unit
 ) {
-    Scaffold(
+    GridBgScaffold(
         topBar = {
             UpdateTopAppBar(updateInfo = updateInfo)
         },
@@ -81,7 +78,7 @@ fun Update(
             )
         }
     ) { paddingValues ->
-        UpdateContentContent(
+        UpdateContent(
             onReference = onReference,
             updateInfo = updateInfo,
             modifier =
@@ -118,7 +115,7 @@ fun UpdateOverlayRunning(updateInfo: UpdateInfo) {
 
 @Composable
 private fun UpdateTopAppBar(updateInfo: UpdateInfo) {
-    SmallTopAppBar(
+    GridBgSmallTopAppBar(
         titleText =
             stringResource(
                 updateInfo.isForce.let { force ->
@@ -207,7 +204,7 @@ private fun UpdateBottomAppBar(
 
 @Composable
 @Suppress("LongMethod")
-private fun UpdateContentContent(
+private fun UpdateContent(
     onReference: () -> Unit,
     updateInfo: UpdateInfo,
     modifier: Modifier = Modifier,

ui-lib/src/main/java/co/electriccoin/zcash/ui/screen/warning/view/NotEnoughSpaceView.kt

@@ -2,7 +2,6 @@ package co.electriccoin.zcash.ui.screen.warning.view
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -19,7 +18,7 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import co.electriccoin.zcash.ui.R
 import co.electriccoin.zcash.ui.design.component.Body
-import co.electriccoin.zcash.ui.design.component.GradientSurface
+import co.electriccoin.zcash.ui.design.component.GridBgColumn
 import co.electriccoin.zcash.ui.design.component.Header
 import co.electriccoin.zcash.ui.design.component.Small
 import co.electriccoin.zcash.ui.design.theme.ZcashTheme
@@ -28,21 +27,19 @@ import co.electriccoin.zcash.ui.design.theme.ZcashTheme
 @Composable
 private fun NotEnoughSpacePreview() {
     ZcashTheme(forceDarkMode = false) {
-        GradientSurface {
         NotEnoughSpaceView(
             storageSpaceRequiredGigabytes = 1,
             spaceRequiredToContinueMegabytes = 300
         )
     }
 }
-}
 
 @Composable
 fun NotEnoughSpaceView(
     storageSpaceRequiredGigabytes: Int,
     spaceRequiredToContinueMegabytes: Int
 ) {
-    Column(
+    GridBgColumn(
         Modifier
             .fillMaxSize()
             .padding(ZcashTheme.dimens.screenHorizontalSpacingRegular)