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
BirthdayResearch · Oct 1, 2021 · 2c4ff89 · 2c4ff89
1 parent dd6e6e1
commit 2c4ff89
Show file tree

Hide file tree

Showing 6 changed files with 7 additions and 6 deletions.
diff --git 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
       <ThemedView
         light={tailwind('bg-gray-800')}
         dark={tailwind('bg-gray-100')}
-        style={tailwind('top-2 left-3 rounded-full absolute w-9/12 h-3/6 -z-1', { 'w-5/12': Platform.OS === 'web' })}
+        style={tailwind('top-2 left-3 rounded-full absolute w-9/12 h-4 -z-1', { 'w-5/12': Platform.OS === 'web' })}
       />
       <ThemedIcon
         iconType='MaterialIcons'

diff --git a/mobile-app/app/screens/AppNavigator/screens/Balances/screens/ConvertScreen.tsx b/mobile-app/app/screens/AppNavigator/screens/Balances/screens/ConvertScreen.tsx
@@ -162,7 +162,7 @@ function ConversionIOCard (props: { style?: StyleProp<ViewStyle>, 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
@@ -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
@@ -169,7 +169,7 @@ function TokenInput (props: { symbol: string, balance: BigNumber, current: strin
       <WalletTextInput
         onChangeText={txt => 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
@@ -114,6 +114,7 @@ export function RemoveLiquidityScreen (props: Props): JSX.Element {
             ]}
             testID='text_input_percentage'
             value={percentage}
+            keyboardType='numeric'
           />
 
           <ThemedText>

diff --git 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}