From 2c4ff89f35d1b3938e185665849da35305b17fd9 Mon Sep 17 00:00:00 2001 From: Keng Ye <40191153+kyleleow@users.noreply.github.com> Date: Fri, 1 Oct 2021 12:04:16 +0800 Subject: [PATCH] `input field` - fix button overflow (#995) * fix: add fixed height to background of clear input button Fixess #991 * fix: QR scan button overflow Also added fixes to prevent amount row from overflowing in smaller screen Fixes #991 * feat: prevent text input overflow in smaller device Apply to all screen that uses input with SetAmountButton and clear input button * feat: add numeric keyboard to remove liquidity input * feat: replace height with tailwind class --- mobile-app/app/components/WalletTextInput.tsx | 2 +- .../AppNavigator/screens/Balances/screens/ConvertScreen.tsx | 2 +- .../AppNavigator/screens/Balances/screens/SendScreen.tsx | 4 ++-- .../app/screens/AppNavigator/screens/Dex/DexAddLiquidity.tsx | 2 +- .../screens/AppNavigator/screens/Dex/DexRemoveLiquidity.tsx | 1 + .../AppNavigator/screens/Dex/PoolSwap/PoolSwapScreen.tsx | 2 +- 6 files changed, 7 insertions(+), 6 deletions(-) diff --git a/mobile-app/app/components/WalletTextInput.tsx b/mobile-app/app/components/WalletTextInput.tsx index b3957ebf3a..a9966ee114 100644 --- a/mobile-app/app/components/WalletTextInput.tsx +++ b/mobile-app/app/components/WalletTextInput.tsx @@ -110,7 +110,7 @@ function ClearButton (props: {onPress?: () => void, testID?: string}): JSX.Eleme , mode: 'input' props.onChange(event.nativeEvent.text) }} placeholder={translate('screens/ConvertScreen', 'Enter an amount')} - style={tailwind('flex-1 text-gray-500 px-1')} + style={tailwind('flex-grow w-2/5 text-gray-500 px-1')} testID={`text_input_convert_from_${props.mode}`} value={props.current} inputType='numeric' diff --git a/mobile-app/app/screens/AppNavigator/screens/Balances/screens/SendScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Balances/screens/SendScreen.tsx index 8ced52e75f..9532c1accc 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Balances/screens/SendScreen.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Balances/screens/SendScreen.tsx @@ -170,7 +170,7 @@ function AddressRow ({ multiline onChangeText={onChange} placeholder={translate('screens/SendScreen', 'Paste wallet address here')} - style={tailwind('w-4/5 flex-grow pb-1')} + style={tailwind('w-3/5 flex-grow pb-1')} testID='address_input' value={value} displayClearButton={value !== defaultValue} @@ -235,7 +235,7 @@ function AmountRow ({ token, control, setValue, onAmountButtonPress }: AmountFor autoCapitalize='none' onChangeText={onChange} placeholder={translate('screens/SendScreen', 'Enter an amount')} - style={tailwind('flex-1 items-baseline')} + style={tailwind('flex-grow w-2/5')} testID='amount_input' value={value} displayClearButton={value !== defaultValue} diff --git a/mobile-app/app/screens/AppNavigator/screens/Dex/DexAddLiquidity.tsx b/mobile-app/app/screens/AppNavigator/screens/Dex/DexAddLiquidity.tsx index 7c8a41954a..21a6c29f53 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Dex/DexAddLiquidity.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Dex/DexAddLiquidity.tsx @@ -169,7 +169,7 @@ function TokenInput (props: { symbol: string, balance: BigNumber, current: strin props.onChange(txt)} placeholder={translate('screens/AddLiquidity', 'Enter an amount')} - style={tailwind('flex-1')} + style={tailwind('flex-grow w-2/5')} testID={`token_input_${props.type}`} value={props.current} title={translate('screens/AddLiquidity', 'How much {{symbol}} to supply?', { symbol: props.symbol })} diff --git a/mobile-app/app/screens/AppNavigator/screens/Dex/DexRemoveLiquidity.tsx b/mobile-app/app/screens/AppNavigator/screens/Dex/DexRemoveLiquidity.tsx index b82b324842..83a097b08b 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Dex/DexRemoveLiquidity.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Dex/DexRemoveLiquidity.tsx @@ -114,6 +114,7 @@ export function RemoveLiquidityScreen (props: Props): JSX.Element { ]} testID='text_input_percentage' value={percentage} + keyboardType='numeric' /> diff --git a/mobile-app/app/screens/AppNavigator/screens/Dex/PoolSwap/PoolSwapScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Dex/PoolSwap/PoolSwapScreen.tsx index a95a57494b..0a1e3805ef 100644 --- a/mobile-app/app/screens/AppNavigator/screens/Dex/PoolSwap/PoolSwapScreen.tsx +++ b/mobile-app/app/screens/AppNavigator/screens/Dex/PoolSwap/PoolSwapScreen.tsx @@ -330,7 +330,7 @@ function TokenRow (form: TokenForm): JSX.Element { } }} placeholder={isDisabled ? undefined : translate('screens/PoolSwapScreen', 'Enter an amount')} - style={tailwind('flex-1')} + style={tailwind('flex-grow w-2/5')} testID={`text_input_${controlName}`} value={value} displayClearButton={(value !== defaultValue) && !isDisabled}