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 } }))