[#975] Post Core BTS UI changes

- PrimaryButton centered horizontally on all screen
- Compose Preview switched to light theme on all screens as Zashi supports light theme only
- Closes #975
This commit is contained in:
Honza Rychnovský 2023-10-04 16:01:40 +02:00 committed by GitHub
parent 8aaa5367d8
commit e4d744fc98
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 167 additions and 44 deletions

View File

@ -30,7 +30,7 @@ import co.electriccoin.zcash.ui.design.theme.ZcashTheme
@Preview
@Composable
private fun ButtonComposablePreview() {
ZcashTheme(darkTheme = true) {
ZcashTheme(darkTheme = false) {
GradientSurface {
Column {
PrimaryButton(onClick = { }, text = "Primary")

View File

@ -34,7 +34,7 @@ import co.electriccoin.zcash.ui.screen.support.model.ConfigInfo
@Preview("About")
@Composable
private fun AboutPreview() {
ZcashTheme(darkTheme = true) {
ZcashTheme(darkTheme = false) {
GradientSurface {
About(
versionInfo = VersionInfoFixture.new(),

View File

@ -58,7 +58,7 @@ import kotlinx.coroutines.runBlocking
@Preview("WalletAddresses")
@Composable
private fun ComposablePreview() {
ZcashTheme(darkTheme = true) {
ZcashTheme(darkTheme = false) {
GradientSurface {
WalletAddresses(
runBlocking { WalletAddressesFixture.new() },

View File

@ -11,6 +11,7 @@ import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
@ -31,6 +32,7 @@ import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.testTag
import androidx.compose.ui.res.painterResource
@ -425,7 +427,10 @@ private fun BackupBottomNav(
onComplete: () -> Unit,
onBackToSeedPhrase: () -> Unit
) {
Column {
Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally
) {
when (backupStage) {
is BackupStage.EducationOverview -> {
PrimaryButton(onClick = onNext, text = stringResource(R.string.new_wallet_1_button))
@ -457,5 +462,7 @@ private fun BackupBottomNav(
PrimaryButton(onClick = onBack, text = stringResource(R.string.new_wallet_3_button_finished))
}
}
Spacer(modifier = Modifier.height(ZcashTheme.dimens.spacingDefault))
}
}

View File

@ -3,7 +3,10 @@
package co.electriccoin.zcash.ui.screen.backup.view
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
@ -22,6 +25,7 @@ import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Devices
@ -155,7 +159,12 @@ private fun CopySeedMenu(onCopyToClipboard: () -> Unit) {
private fun ShortNewWalletBottomNav(
onComplete: () -> Unit
) {
Column {
Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally
) {
PrimaryButton(onClick = onComplete, text = stringResource(R.string.new_wallet_short_button_finished))
Spacer(modifier = Modifier.height(ZcashTheme.dimens.spacingDefault))
}
}

View File

@ -58,7 +58,7 @@ import java.util.Locale
@Preview("History")
@Composable
private fun ComposablePreview() {
ZcashTheme(darkTheme = true) {
ZcashTheme(darkTheme = false) {
GradientSurface {
History(
transactionState = TransactionHistorySyncState.Loading,

View File

@ -77,7 +77,7 @@ import kotlinx.coroutines.CoroutineScope
@Preview("Home")
@Composable
private fun ComposablePreview() {
ZcashTheme(darkTheme = true) {
ZcashTheme(darkTheme = false) {
GradientSurface {
Home(
walletSnapshot = WalletSnapshotFixture.new(),
@ -307,7 +307,8 @@ private fun HomeMainContent(
.verticalScroll(
rememberScrollState()
)
.then(modifier)
.then(modifier),
horizontalAlignment = Alignment.CenterHorizontally
) {
Status(walletSnapshot, isUpdateAvailable, isFiatConversionEnabled, isCircularProgressBarEnabled)

View File

@ -28,6 +28,7 @@ import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.scale
import androidx.compose.ui.graphics.painter.Painter
@ -52,7 +53,7 @@ import co.electriccoin.zcash.ui.screen.onboarding.state.OnboardingState
@Preview("LongOnboarding")
@Composable
private fun ComposablePreview() {
ZcashTheme(darkTheme = true) {
ZcashTheme(darkTheme = false) {
GradientSurface {
LongOnboarding(
OnboardingState(OnboardingStage.Wallet),
@ -188,12 +189,17 @@ private fun WalletStageBottomNav(
onCreateWallet: () -> Unit,
onImportWallet: () -> Unit
) {
PrimaryButton(onCreateWallet, stringResource(R.string.onboarding_4_create_new_wallet), Modifier.fillMaxWidth())
TertiaryButton(
onImportWallet,
stringResource(R.string.onboarding_4_import_existing_wallet),
Modifier.fillMaxWidth()
)
Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally
) {
PrimaryButton(onCreateWallet, stringResource(R.string.onboarding_4_create_new_wallet))
TertiaryButton(
onImportWallet,
stringResource(R.string.onboarding_4_import_existing_wallet),
Modifier.fillMaxWidth()
)
}
}
@Composable

View File

@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
@ -25,6 +26,7 @@ import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
@ -40,7 +42,7 @@ import co.electriccoin.zcash.ui.design.theme.ZcashTheme
@Preview("ShortOnboarding")
@Composable
private fun ShortOnboardingComposablePreview() {
ZcashTheme(darkTheme = true) {
ZcashTheme(darkTheme = false) {
GradientSurface {
ShortOnboarding(
isDebugMenuEnabled = false,
@ -125,11 +127,12 @@ private fun OnboardingMainContent(
) {
Column(
Modifier
.fillMaxHeight()
.fillMaxSize()
.verticalScroll(
rememberScrollState()
)
.then(modifier)
.then(modifier),
horizontalAlignment = Alignment.CenterHorizontally
) {
Header(text = stringResource(R.string.onboarding_short_header))

View File

@ -5,6 +5,7 @@ import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
@ -44,7 +45,7 @@ import kotlin.math.roundToInt
@Preview("Receive")
@Composable
private fun ComposablePreview() {
ZcashTheme(darkTheme = true) {
ZcashTheme(darkTheme = false) {
GradientSurface {
Receive(
walletAddress = runBlocking { WalletAddressFixture.unified() },
@ -102,7 +103,10 @@ private fun ReceiveContents(
onAddressDetails: () -> Unit,
modifier: Modifier = Modifier
) {
Column(modifier) {
Column(
modifier = modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally
) {
QrCode(data = walletAddress.address, DEFAULT_QR_CODE_SIZE, Modifier.align(Alignment.CenterHorizontally))
Spacer(modifier = Modifier.height(ZcashTheme.dimens.spacingLarge))

View File

@ -4,6 +4,7 @@ import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.text.KeyboardOptions
@ -21,6 +22,7 @@ import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
@ -46,7 +48,7 @@ import kotlinx.coroutines.runBlocking
@Preview("Request")
@Composable
private fun PreviewRequest() {
ZcashTheme(darkTheme = true) {
ZcashTheme(darkTheme = false) {
GradientSurface {
Request(
myAddress = runBlocking { WalletAddressFixture.unified() },
@ -70,8 +72,8 @@ fun Request(
RequestTopAppBar(onBack = goBack)
}) { paddingValues ->
RequestMainContent(
paddingValues,
myAddress,
paddingValues = paddingValues,
myAddress = myAddress,
onCreateAndSend = onCreateAndSend
)
}
@ -113,8 +115,9 @@ private fun RequestMainContent(
Column(
Modifier
.fillMaxHeight()
.padding(top = paddingValues.calculateTopPadding())
.fillMaxSize()
.padding(top = paddingValues.calculateTopPadding()),
horizontalAlignment = Alignment.CenterHorizontally
) {
// TODO [#289]: Crash occurs while typed more than some acceptable amount to this field.
TextField(

View File

@ -40,6 +40,7 @@ import androidx.compose.runtime.remember
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.Alignment.Companion.CenterVertically
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
@ -90,7 +91,7 @@ import kotlinx.coroutines.launch
@Preview("Restore Wallet")
@Composable
private fun PreviewRestore() {
ZcashTheme(darkTheme = true) {
ZcashTheme(darkTheme = false) {
GradientSurface {
RestoreWallet(
ZcashNetwork.Mainnet,
@ -121,7 +122,7 @@ private fun PreviewRestore() {
@Preview("Restore Complete")
@Composable
private fun PreviewRestoreComplete() {
ZcashTheme(darkTheme = true) {
ZcashTheme(darkTheme = false) {
RestoreComplete(
onComplete = {}
)
@ -288,7 +289,8 @@ private fun RestoreSeedMainContent(
Modifier
.fillMaxHeight()
.verticalScroll(scrollState)
.then(modifier)
.then(modifier),
horizontalAlignment = Alignment.CenterHorizontally
) {
Body(text = stringResource(id = R.string.restore_seed_instructions))
@ -317,6 +319,8 @@ private fun RestoreSeedMainContent(
enabled = isSeedValid,
outerPaddingValues = PaddingValues(top = dimens.spacingSmall)
)
Spacer(modifier = Modifier.height(ZcashTheme.dimens.spacingDefault))
}
if (isSeedValid) {
@ -541,7 +545,8 @@ private fun RestoreBirthday(
Modifier
.fillMaxHeight()
.verticalScroll(rememberScrollState())
.then(modifier)
.then(modifier),
horizontalAlignment = Alignment.CenterHorizontally
) {
Header(stringResource(R.string.restore_birthday_header))
@ -600,6 +605,8 @@ private fun RestoreBirthday(
text = stringResource(R.string.restore_birthday_button_skip),
outerPaddingValues = PaddingValues(top = dimens.spacingSmall)
)
Spacer(modifier = Modifier.height(ZcashTheme.dimens.spacingDefault))
}
}
@ -612,7 +619,8 @@ private fun RestoreComplete(
Modifier
.fillMaxHeight()
.verticalScroll(rememberScrollState())
.then(modifier)
.then(modifier),
horizontalAlignment = Alignment.CenterHorizontally
) {
Header(stringResource(R.string.restore_complete_header))
@ -633,5 +641,7 @@ private fun RestoreComplete(
text = stringResource(R.string.restore_button_see_wallet),
outerPaddingValues = PaddingValues(top = dimens.spacingSmall)
)
Spacer(modifier = Modifier.height(ZcashTheme.dimens.spacingDefault))
}
}

View File

@ -82,7 +82,7 @@ import kotlin.math.roundToInt
@Preview("Scan")
@Composable
private fun PreviewScan() {
ZcashTheme(darkTheme = true) {
ZcashTheme(darkTheme = false) {
GradientSurface {
Scan(
snackbarHostState = SnackbarHostState(),

View File

@ -34,7 +34,7 @@ import kotlinx.collections.immutable.toPersistentList
@Preview("Seed")
@Composable
private fun PreviewSeed() {
ZcashTheme(darkTheme = true) {
ZcashTheme(darkTheme = false) {
GradientSurface {
Seed(
persistableWallet = PersistableWalletFixture.new(),

View File

@ -1,3 +1,5 @@
@file:Suppress("TooManyFunctions")
package co.electriccoin.zcash.ui.screen.send.view
import androidx.compose.foundation.layout.Column
@ -25,12 +27,14 @@ import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.tooling.preview.Preview
import cash.z.ecc.android.sdk.fixture.WalletAddressFixture
import cash.z.ecc.android.sdk.model.Memo
import cash.z.ecc.android.sdk.model.MonetarySeparators
import cash.z.ecc.android.sdk.model.Zatoshi
@ -39,6 +43,7 @@ import cash.z.ecc.android.sdk.model.ZecSendExt
import cash.z.ecc.android.sdk.model.ZecString
import cash.z.ecc.android.sdk.model.ZecStringExt
import cash.z.ecc.android.sdk.model.toZecString
import cash.z.ecc.sdk.fixture.MemoFixture
import cash.z.ecc.sdk.fixture.ZatoshiFixture
import co.electriccoin.zcash.ui.R
import co.electriccoin.zcash.ui.design.MINIMAL_WEIGHT
@ -54,11 +59,12 @@ import co.electriccoin.zcash.ui.screen.send.ext.abbreviated
import co.electriccoin.zcash.ui.screen.send.ext.valueOrEmptyChar
import co.electriccoin.zcash.ui.screen.send.model.SendArgumentsWrapper
import co.electriccoin.zcash.ui.screen.send.model.SendStage
import kotlinx.coroutines.runBlocking
@Composable
@Preview("Send")
private fun PreviewSend() {
ZcashTheme(darkTheme = true) {
@Preview("SendForm")
private fun PreviewSendForm() {
ZcashTheme {
GradientSurface {
Send(
mySpendableBalance = ZatoshiFixture.new(),
@ -76,6 +82,57 @@ private fun PreviewSend() {
}
}
@Composable
@Preview("SendSuccessful")
private fun PreviewSendSuccessful() {
ZcashTheme {
GradientSurface {
SendSuccessful(
zecSend = ZecSend(
destination = runBlocking { WalletAddressFixture.sapling() },
amount = ZatoshiFixture.new(),
memo = MemoFixture.new()
),
onDone = {}
)
}
}
}
@Composable
@Preview("SendFailure")
private fun PreviewSendFailure() {
ZcashTheme {
GradientSurface {
SendFailure(
zecSend = ZecSend(
destination = runBlocking { WalletAddressFixture.sapling() },
amount = ZatoshiFixture.new(),
memo = MemoFixture.new()
),
onDone = {}
)
}
}
}
@Composable
@Preview("SendConfirmation")
private fun PreviewSendConfirmation() {
ZcashTheme {
GradientSurface {
Confirmation(
zecSend = ZecSend(
destination = runBlocking { WalletAddressFixture.sapling() },
amount = ZatoshiFixture.new(),
memo = MemoFixture.new()
),
onConfirmation = {}
)
}
}
}
@Suppress("LongParameterList")
@Composable
fun Send(
@ -254,7 +311,10 @@ private fun SendForm(
memoString = sendArgumentsWrapper.memo
}
Column(modifier) {
Column(
modifier = modifier,
horizontalAlignment = Alignment.CenterHorizontally
) {
Header(
text = stringResource(id = R.string.send_balance, myBalance.toZecString()),
textAlign = TextAlign.Center,
@ -366,7 +426,10 @@ private fun Confirmation(
onConfirmation: () -> Unit,
modifier: Modifier = Modifier
) {
Column(modifier) {
Column(
modifier = modifier,
horizontalAlignment = Alignment.CenterHorizontally
) {
Body(
stringResource(
R.string.send_confirmation_amount_and_address_format,
@ -395,6 +458,8 @@ private fun Confirmation(
text = stringResource(id = R.string.send_confirmation_button),
outerPaddingValues = PaddingValues(top = dimens.spacingSmall)
)
Spacer(modifier = Modifier.height(dimens.spacingDefault))
}
}
@ -452,7 +517,10 @@ private fun SendSuccessful(
onDone: () -> Unit,
modifier: Modifier = Modifier
) {
Column(modifier) {
Column(
modifier = modifier,
horizontalAlignment = Alignment.CenterHorizontally
) {
Header(
text = stringResource(R.string.send_successful_title),
textAlign = TextAlign.Center,
@ -486,6 +554,8 @@ private fun SendSuccessful(
onClick = onDone,
outerPaddingValues = PaddingValues(top = dimens.spacingSmall)
)
Spacer(modifier = Modifier.height(dimens.spacingDefault))
}
}
@ -495,7 +565,10 @@ private fun SendFailure(
onDone: () -> Unit,
modifier: Modifier = Modifier
) {
Column(modifier) {
Column(
modifier = modifier,
horizontalAlignment = Alignment.CenterHorizontally
) {
Header(
text = stringResource(R.string.send_failure_title),
textAlign = TextAlign.Center,
@ -529,5 +602,7 @@ private fun SendFailure(
onClick = onDone,
outerPaddingValues = PaddingValues(top = dimens.spacingSmall)
)
Spacer(modifier = Modifier.height(dimens.spacingDefault))
}
}

View File

@ -23,6 +23,7 @@ import androidx.compose.material3.TopAppBar
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.RectangleShape
import androidx.compose.ui.res.stringResource
@ -39,7 +40,7 @@ import co.electriccoin.zcash.ui.design.theme.ZcashTheme
@Preview("Support")
@Composable
private fun PreviewSupport() {
ZcashTheme(darkTheme = true) {
ZcashTheme(darkTheme = false) {
GradientSurface {
Support(
onBack = {},
@ -53,7 +54,7 @@ private fun PreviewSupport() {
@Preview("Support-Popup")
@Composable
private fun PreviewSupportPopup() {
ZcashTheme(darkTheme = true) {
ZcashTheme(darkTheme = false) {
GradientSurface {
SupportConfirmationDialog(
onConfirm = {},
@ -130,7 +131,8 @@ private fun SupportMainContent(
.verticalScroll(
rememberScrollState()
)
.then(modifier)
.then(modifier),
horizontalAlignment = Alignment.CenterHorizontally
) {
Body(stringResource(id = R.string.support_information))

View File

@ -40,7 +40,7 @@ import co.electriccoin.zcash.ui.screen.update.model.UpdateState
@Preview("Update")
@Composable
private fun PreviewUpdate() {
ZcashTheme(darkTheme = true) {
ZcashTheme(darkTheme = false) {
GradientSurface {
Update(
snackbarHostState = SnackbarHostState(),
@ -142,7 +142,10 @@ private fun UpdateBottomAppBar(
onLater: () -> Unit,
modifier: Modifier = Modifier
) {
Column(modifier) {
Column(
modifier = modifier,
horizontalAlignment = Alignment.CenterHorizontally
) {
PrimaryButton(
onClick = { onDownload(UpdateState.Running) },
text = stringResource(R.string.update_download_button),