diff --git a/src/__tests__/components/__snapshots__/TransactionListTop.test.tsx.snap b/src/__tests__/components/__snapshots__/TransactionListTop.test.tsx.snap
index 77d9dcfa9cc..677dbbd1179 100644
--- a/src/__tests__/components/__snapshots__/TransactionListTop.test.tsx.snap
+++ b/src/__tests__/components/__snapshots__/TransactionListTop.test.tsx.snap
@@ -4,356 +4,238 @@ exports[`TransactionListTop should render (with ENABLE_VISA_PROGRAM) 1`] = `
[
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
+ }
+ />
-
- wallet name
-
-
-
-
-
-
-
-
-
-
-
- 0.00123123 BTC
+ wallet name
- $0.00 USD
+
+
+
+ 0.00123123 BTC
+
+
+ $0.00 USD
+
+
-
-
-
-
-
-
+ ,
+
-
+
-
+
-
-
-
-
- Buy Prepaid Visa® Cards
-
+ />
+
+ Buy Prepaid Visa® Cards
+
,
+
+
-
+
+
+
+
+
-
-
-
-
-
-
-
-
-
+ }
+ />
-
- wallet name
-
-
-
-
-
-
-
-
-
-
-
- 0.00123123 BTC
+ wallet name
- $0.00 USD
+
+
+
+ 0.00123123 BTC
+
+
+ $0.00 USD
+
+
-
-
-
-
-
-
{
})
return (
-
+
{({ insetStyles }) => (
({
},
text: {
fontFamily: theme.fontFaceMedium,
- fontSize: theme.rem(1.25),
+ fontSize: theme.rem(1),
marginLeft: theme.rem(0.5)
},
topRow: {
diff --git a/src/components/themed/TransactionListTop.tsx b/src/components/themed/TransactionListTop.tsx
index 106295cf1e3..c14d87c9cef 100644
--- a/src/components/themed/TransactionListTop.tsx
+++ b/src/components/themed/TransactionListTop.tsx
@@ -3,12 +3,10 @@ import { EdgeAccount, EdgeBalanceMap, EdgeCurrencyWallet, EdgeDenomination, Edge
import * as React from 'react'
import { ActivityIndicator, TouchableOpacity, View } from 'react-native'
import { AirshipBridge } from 'react-native-airship'
-import AntDesignIcon from 'react-native-vector-icons/AntDesign'
import Ionicons from 'react-native-vector-icons/Ionicons'
import { sprintf } from 'sprintf-js'
import { toggleAccountBalanceVisibility } from '../../actions/LocalSettingsActions'
-import { Fontello } from '../../assets/vector'
import { getSymbolFromCurrency, SPECIAL_CURRENCY_INFO } from '../../constants/WalletAndCurrencyConstants'
import { ENV } from '../../env'
import { useHandler } from '../../hooks/useHandler'
@@ -32,6 +30,7 @@ import { WalletListMenuModal } from '../modals/WalletListMenuModal'
import { WalletListModal, WalletListResult } from '../modals/WalletListModal'
import { Airship, showError } from '../services/AirshipInstance'
import { cacheStyles, Theme, ThemeProps, useTheme } from '../services/ThemeContext'
+import { CardUi4 } from '../ui4/CardUi4'
import { CryptoIconUi4 } from '../ui4/CryptoIconUi4'
import { EdgeText } from './EdgeText'
import { SceneHeader } from './SceneHeader'
@@ -199,7 +198,7 @@ export class TransactionListTopComponent extends React.PureComponent
+ <>
@@ -208,9 +207,6 @@ export class TransactionListTopComponent extends React.PureComponent
-
-
-
{isAccountBalanceVisible ? (
@@ -228,7 +224,7 @@ export class TransactionListTopComponent extends React.PureComponent
)}
-
+ >
)
}
@@ -375,40 +371,35 @@ export class TransactionListTopComponent extends React.PureComponent
-
- {searching ? null : (
- <>
- {this.renderBalanceBox()}
- {isStakingAvailable && this.renderStakedBalance()}
-
-
-
-
- {lstrings.fragment_request_subtitle}
-
-
-
-
-
- {lstrings.fragment_send_subtitle}
-
-
- {!isStakePoliciesLoaded ? (
-
- ) : (
- isStakingAvailable && (
-
-
- {lstrings.stake_earn_button_label}
- {bestApy != null ? {bestApy} : null}
-
- )
- )}
-
- >
- )}
- {isEmpty || searching ? null : }
-
+ {searching ? null : (
+
+ {this.renderBalanceBox()}
+ {isStakingAvailable && this.renderStakedBalance()}
+
+
+
+ {lstrings.fragment_request_subtitle}
+
+
+
+
+ {lstrings.fragment_send_subtitle}
+
+
+ {!isStakePoliciesLoaded ? (
+
+ ) : (
+ isStakingAvailable && (
+
+ {lstrings.stake_earn_button_label}
+ {bestApy != null ? {bestApy} : null}
+
+ )
+ )}
+
+
+ )}
+ {isEmpty || searching ? null : }
{isEmpty || searching ? null : (
{lstrings.fragment_transaction_list_transaction}
@@ -420,20 +411,14 @@ export class TransactionListTopComponent extends React.PureComponent ({
- container: {
- flex: 1,
- paddingHorizontal: theme.rem(1),
- paddingBottom: theme.rem(1),
- marginBottom: theme.rem(0.5)
- },
-
// Balance Box
balanceBoxContainer: {
marginTop: theme.rem(1.5)
},
balanceBoxWalletNameCurrencyContainer: {
flexDirection: 'row',
- justifyContent: 'space-between'
+ justifyContent: 'space-between',
+ marginBottom: theme.rem(0.5)
},
balanceBoxWalletNameContainer: {
flexShrink: 1,
@@ -458,25 +443,26 @@ const getStyles = cacheStyles((theme: Theme) => ({
fontSize: theme.rem(2)
},
settingsIcon: {
- alignSelf: 'center'
+ alignSelf: 'flex-end'
},
// Send/Receive Buttons
buttonsContainer: {
+ flex: 1,
marginTop: theme.rem(1),
- flexDirection: 'row'
+ marginHorizontal: -theme.rem(1),
+ flexDirection: 'row',
+ justifyContent: 'space-evenly'
},
buttons: {
flexShrink: 1,
flexDirection: 'row',
- justifyContent: 'flex-start',
- alignItems: 'center',
- paddingRight: theme.rem(1.5)
+ justifyContent: 'center',
+ alignItems: 'center'
},
buttonsText: {
fontSize: theme.rem(1),
color: theme.textLink,
- fontFamily: theme.fontFaceMedium,
- marginLeft: theme.rem(0.25)
+ fontFamily: theme.fontFaceMedium
},
apyText: {
fontSize: theme.rem(0.75),
diff --git a/src/components/ui4/HomeCardUi4.tsx b/src/components/ui4/HomeCardUi4.tsx
index ebad0cea57a..7416720e24e 100644
--- a/src/components/ui4/HomeCardUi4.tsx
+++ b/src/components/ui4/HomeCardUi4.tsx
@@ -1,7 +1,6 @@
import * as React from 'react'
import { View } from 'react-native'
import { LinearGradientProps } from 'react-native-linear-gradient'
-import IonIcon from 'react-native-vector-icons/Ionicons'
import { useHandler } from '../../hooks/useHandler'
import { cacheStyles, Theme, useTheme } from '../services/ThemeContext'
@@ -32,10 +31,7 @@ export const HomeCardUi4 = (props: Props) => {
return (
-
- {title}
-
-
+ {title}
{footer}
@@ -45,11 +41,6 @@ export const HomeCardUi4 = (props: Props) => {
}
const getStyles = cacheStyles((theme: Theme) => ({
- titleContainer: {
- flexDirection: 'row',
- justifyContent: 'space-between',
- alignItems: 'stretch'
- },
footerText: {
fontSize: theme.rem(0.75)
},
@@ -57,11 +48,5 @@ const getStyles = cacheStyles((theme: Theme) => ({
flex: 1, // Make sure the card fills the space
justifyContent: 'space-between', // Aligns title to the top, footer to the bottom
margin: theme.rem(0.5)
- },
-
- // Adjust for bounding box
- chevronIcon: {
- alignSelf: 'center',
- marginRight: -6
}
}))