aboutsummaryrefslogtreecommitdiffstats
path: root/packages
diff options
context:
space:
mode:
authorSteve Klebanoff <steve.klebanoff@gmail.com>2018-12-13 09:43:27 +0800
committerSteve Klebanoff <steve.klebanoff@gmail.com>2018-12-13 09:43:27 +0800
commit193cd67d6bfffc35feccd46d5c1b5f23320dc8ce (patch)
tree49d3424677bb4b5ca541d863ae74b47c334be1b3 /packages
parent8d54772389b28dec021aa81423ac84795e132581 (diff)
downloaddexon-sol-tools-193cd67d6bfffc35feccd46d5c1b5f23320dc8ce.tar
dexon-sol-tools-193cd67d6bfffc35feccd46d5c1b5f23320dc8ce.tar.gz
dexon-sol-tools-193cd67d6bfffc35feccd46d5c1b5f23320dc8ce.tar.bz2
dexon-sol-tools-193cd67d6bfffc35feccd46d5c1b5f23320dc8ce.tar.lz
dexon-sol-tools-193cd67d6bfffc35feccd46d5c1b5f23320dc8ce.tar.xz
dexon-sol-tools-193cd67d6bfffc35feccd46d5c1b5f23320dc8ce.tar.zst
dexon-sol-tools-193cd67d6bfffc35feccd46d5c1b5f23320dc8ce.zip
A little bit of scaling logic for not cutting off text
Diffstat (limited to 'packages')
-rw-r--r--packages/instant/src/components/instant_heading.tsx15
1 files changed, 9 insertions, 6 deletions
diff --git a/packages/instant/src/components/instant_heading.tsx b/packages/instant/src/components/instant_heading.tsx
index 816cc5c33..99e531574 100644
--- a/packages/instant/src/components/instant_heading.tsx
+++ b/packages/instant/src/components/instant_heading.tsx
@@ -113,20 +113,23 @@ export class InstantHeading extends React.Component<InstantHeadingProps, {}> {
}
private readonly _renderEthAmount = (): React.ReactNode => {
+ const ethAmount = format.ethBaseUnitAmount(
+ this.props.totalEthBaseUnitAmount,
+ 4,
+ <AmountPlaceholder isPulsating={false} color={PLACEHOLDER_COLOR} />,
+ );
+
+ const fontSize = typeof ethAmount === 'string' && ethAmount.length >= 13 ? '14px' : '16px';
return (
<Text
- fontSize="16px"
+ fontSize={fontSize}
textAlign="right"
width="100%"
fontColor={ColorOption.white}
fontWeight={500}
noWrap={true}
>
- {format.ethBaseUnitAmount(
- this.props.totalEthBaseUnitAmount,
- 4,
- <AmountPlaceholder isPulsating={false} color={PLACEHOLDER_COLOR} />,
- )}
+ {ethAmount}
</Text>
);
};