diff --git a/apps/wallet-mobile/src/components/AmountItem/AmountItem.tsx b/apps/wallet-mobile/src/components/AmountItem/AmountItem.tsx index 7856cb4f8b..b54e312040 100644 --- a/apps/wallet-mobile/src/components/AmountItem/AmountItem.tsx +++ b/apps/wallet-mobile/src/components/AmountItem/AmountItem.tsx @@ -99,40 +99,24 @@ export const AmountItem = ({ } const Left = ({style, ...props}: ViewProps) => -const Middle = ({style, ...props}: ViewProps) => ( - -) -const Right = ({style, ...props}: ViewProps) => +const Middle = ({style, ...props}: ViewProps) => { + const {styles} = useStyles() + + return +} +const Right = ({style, ...props}: ViewProps) => { + const {styles} = useStyles() + + return +} export const AmountItemPlaceholder = ({style}: ViewProps) => { - const {colors} = useStyles() + const {styles} = useStyles() return ( - - - - + + + + ) } @@ -146,6 +130,31 @@ const useStyles = () => { justifyContent: 'space-between', alignItems: 'center', }, + placeholder: { + display: 'flex', + flexDirection: 'row', + gap: 12, + height: 56, + }, + placeholderElement1: { + backgroundColor: color.gray[200], + borderRadius: 8, + flexGrow: 3, + }, + placeholderElement2: { + backgroundColor: color.gray[200], + borderRadius: 8, + flexGrow: 1, + }, + middle: { + flex: 1, + justifyContent: 'center', + paddingHorizontal: 8, + }, + right: { + flexDirection: 'column', + alignItems: 'flex-end', + }, name: { color: color.gray[900], fontSize: 16, @@ -174,7 +183,6 @@ const useStyles = () => { const colors = { text: color.gray[900], - background: color.gray[200], icon: color.secondary[600], } diff --git a/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/TransactionSummary.tsx b/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/TransactionSummary.tsx index 5ebbc0f727..2cca8e61ef 100644 --- a/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/TransactionSummary.tsx +++ b/apps/wallet-mobile/src/features/Swap/useCases/ConfirmTxScreen/TransactionSummary.tsx @@ -138,7 +138,7 @@ export const TransactionSummary = () => { {strings.total} - + {formattedSellText} {!isSellPrimary && ( @@ -336,6 +336,10 @@ const useStyles = () => { bold: { ...typography['body-2-m-medium'], }, + total: { + flexDirection: 'column', + alignItems: 'flex-end', + }, }) return styles