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,
}) => (