diff --git a/src/action/wallet.js b/src/action/wallet.js index 342ead6c5..571ce69b6 100644 --- a/src/action/wallet.js +++ b/src/action/wallet.js @@ -511,6 +511,17 @@ class WalletAction { log.error('Getting exchange rate failed', err); } } + + /** + * Set the height of Home's main channel balance label. + * This is used for calculating the padding for the top of the btc + * unit next to the balance amount. + * @param {number} The height of the balance. + * @return {undefined} + */ + setBalanceHeight({ height }) { + this._store.balanceHeight = height; + } } export default WalletAction; diff --git a/src/component/label.js b/src/component/label.js index 2a8e0d738..ae2143b5e 100644 --- a/src/component/label.js +++ b/src/component/label.js @@ -15,12 +15,11 @@ const balanceStyles = StyleSheet.create({ numeral: { fontFamily: 'WorkSans ExtraLight', fontSize: font.sizeXXXL, - lineHeight: font.lineHeightXXXL, + lineHeight: null, }, unit: { fontFamily: 'WorkSans Regular', fontSize: font.sizeL, - lineHeight: 60, marginLeft: 10, }, }); @@ -35,7 +34,13 @@ BalanceLabel.propTypes = { }; export const BalanceLabelNumeral = ({ children, style }) => ( - {children} + + {children} + ); BalanceLabelNumeral.propTypes = { @@ -43,8 +48,12 @@ BalanceLabelNumeral.propTypes = { style: RNText.propTypes.style, }; -export const BalanceLabelUnit = ({ children, style }) => - children ? {children} : null; +export const BalanceLabelUnit = ({ children, style, ...props }) => + children ? ( + + {children} + + ) : null; BalanceLabelUnit.propTypes = { children: PropTypes.string, diff --git a/src/computed/wallet.js b/src/computed/wallet.js index a92f6413a..ae3314db1 100644 --- a/src/computed/wallet.js +++ b/src/computed/wallet.js @@ -42,6 +42,9 @@ const ComputedWallet = store => { } return newPassword.length >= MIN_PASSWORD_LENGTH; }, + get balancePaddingTop() { + return calculateTopPadding({ height: store.balanceHeight }); + }, }); }; @@ -59,4 +62,20 @@ const getNewPasswordCopy = ({ newPassword }) => { return ''; }; +/** + * Calculate the appropriate top padding for the btc unit that sits next to the main + * home screen balance. This is needed because the height of the balance adjusts + * dynamically to its width. + * @param {number} height The height of the balance. + * @return {number} The amount of padding to put at the top of the unit. + */ +const calculateTopPadding = ({ height }) => { + if (height >= 80) { + return 15; + } else if (height >= 60) { + return 10; + } + return 5; +}; + export default ComputedWallet; diff --git a/src/store.js b/src/store.js index 8caa6cca5..c79fff467 100644 --- a/src/store.js +++ b/src/store.js @@ -37,6 +37,7 @@ export class Store { pubKey: null, walletAddress: null, displayCopied: false, + balanceHeight: 80, auth: { pin: '', newPin: '', diff --git a/src/view/home.js b/src/view/home.js index 4b9e15743..62957740f 100644 --- a/src/view/home.js +++ b/src/view/home.js @@ -5,7 +5,8 @@ import PropTypes from 'prop-types'; import Background from '../component/background'; import MainContent from '../component/main-content'; import { Header, Title } from '../component/header'; -import { color } from '../component/style'; +import { createStyles, maxWidth } from '../component/media-query'; +import { color, breakWidth, smallBreakWidth } from '../component/style'; import { H4Text } from '../component/text'; import Icon from '../component/icon'; import ChannelIcon from '../asset/icon/channel'; @@ -41,7 +42,12 @@ const HomeView = ({ transaction, nav, }) => { - const { depositLabel, channelBalanceLabel, unitLabel } = store; + const { + depositLabel, + channelBalanceLabel, + unitLabel, + balancePaddingTop, + } = store; return ( wallet.toggleDisplayFiat()} + setBalanceHeight={({ height }) => wallet.setBalanceHeight({ height })} + unitPaddingTop={balancePaddingTop} /> payment.init()} @@ -83,7 +91,7 @@ HomeView.propTypes = { // Balance Display // -const balanceStyles = StyleSheet.create({ +const baseBalanceStyles = { wrapper: { flex: 1, justifyContent: 'center', @@ -92,19 +100,44 @@ const balanceStyles = StyleSheet.create({ marginTop: 30, marginBottom: 5, }, -}); +}; + +const balanceStyles = createStyles( + baseBalanceStyles, + + maxWidth(breakWidth, { + wrapper: { + width: 350, + }, + }), + + maxWidth(smallBreakWidth, { + wrapper: { + width: 250, + }, + }) +); const BalanceDisplay = ({ depositLabel, channelBalanceLabel, unitLabel, toggleDisplayFiat, + setBalanceHeight, + unitPaddingTop, }) => (