fix(ui): fix spacing & font for Money components

Author: pwltr

src/components/AmountToggle.tsx

@@ -13,6 +13,7 @@ import { EBalanceUnit } from '../store/types/wallet';
 const AmountToggle = ({
 	sats,
 	unit,
+	secondaryFont = 'caption13Up',
 	space = 0, // space between the rows
 	reverse = false,
 	disable = false,
@@ -23,6 +24,7 @@ const AmountToggle = ({
 	testID,
 }: {
 	sats: number;
+	secondaryFont?: 'text01m' | 'caption13Up';
 	unit?: EBalanceUnit;
 	reverse?: boolean;
 	space?: number;
@@ -51,15 +53,15 @@ const AmountToggle = ({
 			<Money
 				key="secondary"
 				sats={sats}
-				size="text01m"
+				size={secondaryFont}
 				color="gray1"
 				decimalLength={decimalLength}
 				{...{ ...(primaryUnit === EBalanceUnit.fiat ? btcProps : fiatProps) }}
 			/>,
 		];
 
 		return reverse ? arr.reverse() : arr;
-	}, [primaryUnit, sats, reverse, space, decimalLength]);
+	}, [primaryUnit, sats, reverse, space, decimalLength, secondaryFont]);
 
 	LayoutAnimation.easeInEaseOut();
 

src/components/BalanceHeader.tsx

@@ -76,11 +76,12 @@ const BalanceHeader = (): ReactElement => {
 							pending: (
 								<Money
 									color="gray1"
-									size="caption13M"
+									size="caption13Up"
 									sats={claimableBalance}
 									unit={balanceUnit}
 									enableHide={true}
 									symbol={false}
+									decimalLength="long"
 								/>
 							),
 						}}

src/components/ImageText.tsx

@@ -1,6 +1,6 @@
 import React, { memo, ReactElement } from 'react';
 import { View, TouchableOpacity, StyleSheet } from 'react-native';
-import { Text01M, Caption13M } from '../styles/text';
+import { Text01M, Text02M } from '../styles/text';
 import { PenIcon } from '../styles/icons';
 import Money from '../components/Money';
 
@@ -28,7 +28,7 @@ const ImageText = ({
 				{icon}
 				<View style={styles.titleContainer}>
 					<Text01M>{title}</Text01M>
-					<Caption13M color="gray1">{description}</Caption13M>
+					<Text02M color="gray1">{description}</Text02M>
 				</View>
 			</View>
 
@@ -46,7 +46,7 @@ const ImageText = ({
 				<Money
 					style={styles.value}
 					sats={value}
-					size="caption13M"
+					size="text02m"
 					color="gray1"
 					symbol={true}
 					showFiat={true}

src/components/Money.tsx

@@ -4,12 +4,10 @@ import { useSelector } from 'react-redux';
 
 import {
 	Caption13M,
+	Caption13Up,
 	Display,
-	Headline,
 	Text01M,
-	Text01S,
 	Text02M,
-	Text02S,
 	Title,
 } from '../styles/text';
 import { BIcon, LightningIcon } from '../styles/icons';
@@ -36,13 +34,11 @@ interface IMoney {
 	testID?: string;
 	size?:
 		| 'display'
-		| 'text01s'
 		| 'text01m'
-		| 'text02s'
 		| 'text02m'
 		| 'caption13M'
-		| 'title'
-		| 'headline';
+		| 'caption13Up'
+		| 'title';
 }
 
 const Money = (props: IMoney): ReactElement => {
@@ -68,20 +64,15 @@ const Money = (props: IMoney): ReactElement => {
 
 	const [Text, lineHeight, iconHeight, iconWidth] = useMemo(() => {
 		switch (size) {
-			case 'headline':
-				// Override lineHeight for Display font
-				return [Headline, '41px', 40, 20];
 			case 'title':
 				return [Title, undefined, 26, 12];
-			case 'text01s':
-				return [Text01S, undefined, 21, 10];
 			case 'text01m':
 				return [Text01M, undefined, 21, 10];
-			case 'text02s':
-				return [Text02S, undefined, 18, 9];
 			case 'text02m':
 				return [Text02M, undefined, 18, 9];
 			case 'caption13M':
+				return [Caption13Up, undefined, 16, 8];
+			case 'caption13Up':
 				return [Caption13M, undefined, 16, 8];
 			default:
 				// Override lineHeight for Display font

src/components/NumberPadTextField.tsx

@@ -96,7 +96,7 @@ const NumberPadTextField = ({
 				<Money
 					style={styles.secondary}
 					sats={satoshis}
-					size="text01m"
+					size="caption13Up"
 					color="gray1"
 					{...{ ...(unit === EBalanceUnit.fiat ? btcProps : fiatProps) }}
 				/>

src/screens/Activity/ActivityDetail.tsx

@@ -320,7 +320,7 @@ const OnchainActivityDetail = ({
 			<Money
 				sats={value}
 				unit={EBalanceUnit.fiat}
-				size="caption13M"
+				size="caption13Up"
 				color="gray1"
 			/>
 			<View style={styles.title}>
@@ -632,7 +632,7 @@ const LightningActivityDetail = ({
 			<Money
 				sats={value}
 				unit={EBalanceUnit.fiat}
-				size="caption13M"
+				size="caption13Up"
 				color="gray1"
 			/>
 			<View style={styles.title}>

src/screens/Lightning/CustomConfirm.tsx

@@ -139,14 +139,14 @@ const CustomConfirm = ({
 							<Caption13Up color="purple" style={styles.space}>
 								{t('spending_label')}
 							</Caption13Up>
-							<AmountToggle sats={spendingAmount} />
+							<AmountToggle sats={spendingAmount} secondaryFont="text01m" />
 						</View>
 
 						<View style={styles.block}>
 							<Caption13Up color="purple" style={styles.space}>
 								{t('receiving_label')}
 							</Caption13Up>
-							<AmountToggle sats={receivingAmount} />
+							<AmountToggle sats={receivingAmount} secondaryFont="text01m" />
 						</View>
 					</AnimatedView>
 				)}

src/screens/Lightning/QuickConfirm.tsx

@@ -117,7 +117,7 @@ const QuickConfirm = ({
 					<Caption13Up style={styles.amountCaption} color="purple">
 						{t('spending_label')}
 					</Caption13Up>
-					<AmountToggle sats={spendingAmount} />
+					<AmountToggle sats={spendingAmount} secondaryFont="text01m" />
 				</View>
 
 				<SwipeToConfirm

src/screens/Transfer/Confirm.tsx

@@ -141,7 +141,7 @@ const Confirm = ({
 					<Caption13Up style={styles.amountCaption} color="purple">
 						{t('spending_label')}
 					</Caption13Up>
-					<AmountToggle sats={spendingAmount} />
+					<AmountToggle sats={spendingAmount} secondaryFont="text01m" />
 				</View>
 
 				<SwipeToConfirm

src/screens/Wallets/Header.tsx

@@ -39,7 +39,7 @@ const EnabledSlashtagsProfileButton = (): ReactElement => {
 			{profile?.name ? (
 				<Title>{truncate(profile?.name, 20)}</Title>
 			) : (
-				<Title>{t('your_name')}</Title>
+				<Title>{t('your_name_capital')}</Title>
 			)}
 		</TouchableOpacity>
 	);