From 66108db73e5bd93c3c01fe946a394abc496380c4 Mon Sep 17 00:00:00 2001 From: minibits-cash Date: Mon, 10 Aug 2026 23:12:11 +0200 Subject: [PATCH] Wallet and headers margins alignment --- src/components/Card.tsx | 2 +- src/screens/BackupOptionsScreen.tsx | 2 +- src/screens/ExportBackupScreen.tsx | 2 +- src/screens/ImportBackupScreen.tsx | 2 +- src/screens/MnemonicScreen.tsx | 2 +- src/screens/NwcScreen.tsx | 2 +- src/screens/OrphanedSeedScreen.tsx | 2 +- src/screens/PayScreen.tsx | 2 +- src/screens/RecoverWalletAddressScreen.tsx | 2 +- src/screens/RelaysScreen.tsx | 7 ++-- src/screens/SecurityScreen.tsx | 2 +- src/screens/SeedRecoveryOptionsScreen.tsx | 2 +- src/screens/SeedRecoveryScreen.tsx | 2 +- src/screens/SettingsScreen.tsx | 2 +- src/screens/TokenReceiveScreen.tsx | 2 +- src/screens/TranHistoryScreen.tsx | 2 +- src/screens/UpdateScreen.tsx | 2 +- src/screens/WalletScreen.tsx | 40 ++++++++++++++++++---- 18 files changed, 52 insertions(+), 27 deletions(-) diff --git a/src/components/Card.tsx b/src/components/Card.tsx index 87f5a1f4..04ee64f5 100644 --- a/src/components/Card.tsx +++ b/src/components/Card.tsx @@ -307,7 +307,7 @@ export const Card = function (props: CardProps) { } const $containerBase: ViewStyle = { - borderRadius: spacing.medium, + borderRadius: spacing.small, paddingHorizontal: spacing.medium, paddingVertical: spacing.extraSmall, // borderWidth: 1, diff --git a/src/screens/BackupOptionsScreen.tsx b/src/screens/BackupOptionsScreen.tsx index 9f995b66..09283b09 100644 --- a/src/screens/BackupOptionsScreen.tsx +++ b/src/screens/BackupOptionsScreen.tsx @@ -105,7 +105,7 @@ const $headerContainer: TextStyle = { } const $contentContainer: TextStyle = { - marginTop: -spacing.extraLarge * 2, + marginTop: -spacing.extraLarge * 1.5, padding: spacing.extraSmall, // alignItems: 'center', } diff --git a/src/screens/ExportBackupScreen.tsx b/src/screens/ExportBackupScreen.tsx index 5cf5e32b..e846a7e2 100644 --- a/src/screens/ExportBackupScreen.tsx +++ b/src/screens/ExportBackupScreen.tsx @@ -467,7 +467,7 @@ const $headerContainer: TextStyle = { const $contentContainer: TextStyle = { flex: 1, - marginTop: -spacing.extraLarge * 2, + marginTop: -spacing.extraLarge * 1.5, padding: spacing.extraSmall, } diff --git a/src/screens/ImportBackupScreen.tsx b/src/screens/ImportBackupScreen.tsx index 020319bf..60bcced5 100644 --- a/src/screens/ImportBackupScreen.tsx +++ b/src/screens/ImportBackupScreen.tsx @@ -462,7 +462,7 @@ const $headerContainer: TextStyle = { const $contentContainer: TextStyle = { flex: 1, - marginTop: -spacing.extraLarge * 2, + marginTop: -spacing.extraLarge * 1.5, padding: spacing.extraSmall, } diff --git a/src/screens/MnemonicScreen.tsx b/src/screens/MnemonicScreen.tsx index a2bb8f2b..7b175ea9 100644 --- a/src/screens/MnemonicScreen.tsx +++ b/src/screens/MnemonicScreen.tsx @@ -166,7 +166,7 @@ const $headerContainer: TextStyle = { } const $contentContainer: TextStyle = { - marginTop: -spacing.extraLarge * 2, + marginTop: -spacing.extraLarge * 1.5, padding: spacing.extraSmall, } diff --git a/src/screens/NwcScreen.tsx b/src/screens/NwcScreen.tsx index ab273969..f48eff49 100644 --- a/src/screens/NwcScreen.tsx +++ b/src/screens/NwcScreen.tsx @@ -410,7 +410,7 @@ const $headerContainer: TextStyle = { const $contentContainer: TextStyle = { flex: 1, padding: spacing.extraSmall, - marginTop: -spacing.extraLarge * 2 + marginTop: -spacing.extraLarge * 1.5 } const $newContainer: TextStyle = { diff --git a/src/screens/OrphanedSeedScreen.tsx b/src/screens/OrphanedSeedScreen.tsx index c0a90bcb..ccd6b79f 100644 --- a/src/screens/OrphanedSeedScreen.tsx +++ b/src/screens/OrphanedSeedScreen.tsx @@ -258,7 +258,7 @@ const $headerContainer: TextStyle = { } const $contentContainer: TextStyle = { - marginTop: -spacing.extraLarge * 2, + marginTop: -spacing.extraLarge * 1.5, padding: spacing.extraSmall, } diff --git a/src/screens/PayScreen.tsx b/src/screens/PayScreen.tsx index 41a01764..efebbe52 100644 --- a/src/screens/PayScreen.tsx +++ b/src/screens/PayScreen.tsx @@ -311,7 +311,7 @@ const $screen: ViewStyle = { const $contentContainer: ViewStyle = { // flex: 1, - marginTop: -spacing.extraLarge * 2, + marginTop: -spacing.extraLarge * 1.5, padding: spacing.extraSmall, // alignItems: 'center', } diff --git a/src/screens/RecoverWalletAddressScreen.tsx b/src/screens/RecoverWalletAddressScreen.tsx index be422cfb..204456a6 100644 --- a/src/screens/RecoverWalletAddressScreen.tsx +++ b/src/screens/RecoverWalletAddressScreen.tsx @@ -232,7 +232,7 @@ const $headerContainer: TextStyle = { const $contentContainer: TextStyle = { flex: 1, - marginTop: -spacing.extraLarge * 2, + marginTop: -spacing.extraLarge * 1.5, padding: spacing.extraSmall, } diff --git a/src/screens/RelaysScreen.tsx b/src/screens/RelaysScreen.tsx index 9668d9af..8f51245a 100644 --- a/src/screens/RelaysScreen.tsx +++ b/src/screens/RelaysScreen.tsx @@ -104,7 +104,6 @@ export const RelaysScreen = observer(function RelaysScreen({ route }: Props) { throw new AppError( Err.VALIDATION_ERROR, translate("invalidRelayUrl"), - newPublicRelay ) } @@ -170,7 +169,7 @@ export const RelaysScreen = observer(function RelaysScreen({ route }: Props) { @@ -297,7 +296,7 @@ export const RelaysScreen = observer(function RelaysScreen({ route }: Props) { ) const $screen: ViewStyle = { - //flex: 1, + flex: 1, } const $headerContainer: TextStyle = { @@ -308,7 +307,7 @@ const $headerContainer: TextStyle = { const $contentContainer: TextStyle = { flex: 1, - marginTop: -spacing.extraLarge * 2, + marginTop: -spacing.extraLarge * 1.5, padding: spacing.extraSmall, // alignItems: 'center', } diff --git a/src/screens/SecurityScreen.tsx b/src/screens/SecurityScreen.tsx index 1e1fd309..2b635aa5 100644 --- a/src/screens/SecurityScreen.tsx +++ b/src/screens/SecurityScreen.tsx @@ -223,7 +223,7 @@ const $headerContainer: TextStyle = { const $contentContainer: TextStyle = { flex: 1, - marginTop: -spacing.extraLarge * 2, + marginTop: -spacing.extraLarge * 1.5, padding: spacing.extraSmall, // alignItems: 'center', } diff --git a/src/screens/SeedRecoveryOptionsScreen.tsx b/src/screens/SeedRecoveryOptionsScreen.tsx index f39e5bcb..7dba963d 100644 --- a/src/screens/SeedRecoveryOptionsScreen.tsx +++ b/src/screens/SeedRecoveryOptionsScreen.tsx @@ -93,7 +93,7 @@ const $headerContainer: ViewStyle = { } const $contentContainer: ViewStyle = { - marginTop: -spacing.extraLarge * 2, + marginTop: -spacing.extraLarge * 1.5, padding: spacing.extraSmall, } diff --git a/src/screens/SeedRecoveryScreen.tsx b/src/screens/SeedRecoveryScreen.tsx index e8b0ffd8..b6590476 100644 --- a/src/screens/SeedRecoveryScreen.tsx +++ b/src/screens/SeedRecoveryScreen.tsx @@ -827,7 +827,7 @@ const $headerContainer: TextStyle = { const $contentContainer: TextStyle = { flex: 1, - marginTop: -spacing.extraLarge * 2, + marginTop: -spacing.extraLarge * 1.5, padding: spacing.extraSmall, } diff --git a/src/screens/SettingsScreen.tsx b/src/screens/SettingsScreen.tsx index cb752eb9..2ecad125 100644 --- a/src/screens/SettingsScreen.tsx +++ b/src/screens/SettingsScreen.tsx @@ -319,7 +319,7 @@ export const SettingsScreen = observer(function SettingsScreen({ route }: Props) scrollY={scrollY} /> c.remainingDailyLimit !== c.dailyLimit) + const nwcCardsData = nwcStore.all.filter(c => c.remainingDailyLimit !== c.dailyLimit) + // True whenever the band below the transactions card renders an NWC card + // (in dev the preview stub always does), so the transactions list gives up + // a row to leave the band enough vertical space. + const isNwcBandVisible = __DEV__ || isNwcVisible + const renderUnitTabs = function ({ route }: { route: { key: string } }) { const unitMints = groupedMints.find((mintUnit) => mintUnit.unit === route.key) @@ -590,7 +597,10 @@ export const WalletScreen = observer(function WalletScreen({ route }: Props) { log.trace('[renderUnitTabs]', {unitBalance}) if(unitBalance) { - const recentTransactions = transactionsStore.getRecentByUnit(unitMints.unit) + // Drop the oldest row while NWC card(s) occupy the band below. + const recentTransactions = isNwcBandVisible + ? transactionsStore.getRecentByUnit(unitMints.unit).slice(0, 2) + : transactionsStore.getRecentByUnit(unitMints.unit) return ( c.remainingDailyLimit !== c.dailyLimit) - const nwcCardsData = nwcStore.all.filter(c => c.remainingDailyLimit !== c.dailyLimit) - // When the leftover band (measured) can't fit a full-height NWC card plus its // gaps, fall back to a compact card: the blank space between the "spent today" // label and the amount is collapsed and the card padding is tightened, so the @@ -1249,14 +1256,33 @@ const $screen: ViewStyle = { } +// The transactions card is pulled up over the header container: $tabContainer +// shifts up by CARD_PULL_UP and pads the card back down by spacing.small, so the +// card's top edge ends up HEADER_CARD_OVERLAP above the header's bottom edge. +const CARD_PULL_UP = spacing.extraLarge * 1.5 +const HEADER_CARD_OVERLAP = CARD_PULL_UP - spacing.small + +// Whitespace that sits above the balance digits but belongs to no visible +// element: the tab bar track's own bottom margin (SegmentedTabBar $track, +// marginVertical: spacing.small) plus CurrencyAmount's wrapper padding +// (spacing.tiny). Nothing similar pads the bottom of the block - the mint chip's +// padding is filled with the mint color - so centering on the raw boxes reads as +// top-heavy. Padding the bottom by the same amount shifts the content up until +// the two gaps look even. +const HEADER_TOP_SLACK = spacing.small + spacing.tiny + const $headerContainer: TextStyle = { alignItems: 'center', - //marginBottom: spacing.small, - height: spacing.screenHeight * 0.22, + // Reserving the overlap as padding makes the visible box end exactly at the + // card's top edge, so centering leaves the same gap above the balance block + // (to the unit tab bar) as below it (to the transactions card). + justifyContent: 'center', + paddingBottom: HEADER_CARD_OVERLAP + HEADER_TOP_SLACK, + height: spacing.screenHeight * 0.28, } const $tabContainer: TextStyle = { - marginTop: -spacing.extraLarge * 1.5, + marginTop: -CARD_PULL_UP, paddingTop: spacing.small, // borderWidth: 1, // borderColor: 'green',