diff --git a/app/components/UI/CustomGas/index.js b/app/components/UI/CustomGas/index.js index ee312a2a130..cb7de2500d9 100644 --- a/app/components/UI/CustomGas/index.js +++ b/app/components/UI/CustomGas/index.js @@ -16,12 +16,21 @@ import { getTicker } from '../../../util/transactions'; import Radio from '../Radio'; const styles = StyleSheet.create({ + labelText: { + ...fontStyles.bold, + color: colors.grey400, + fontSize: 16 + }, titleContainer: { flex: 1, width: '100%', flexDirection: 'row', justifyContent: 'space-between' }, + titleMargin: { + marginBottom: 10, + alignItems: 'flex-end' + }, radio: { marginLeft: 'auto' }, @@ -49,8 +58,7 @@ const styles = StyleSheet.create({ }, advancedOptions: { textAlign: 'right', - alignItems: 'flex-end', - marginTop: 10 + alignItems: 'flex-end' }, slow: { borderBottomStartRadius: 6, @@ -81,7 +89,8 @@ const styles = StyleSheet.create({ textTransform: 'none' }, textAdvancedOptions: { - color: colors.blue + color: colors.blue, + fontSize: 14 }, gasInput: { ...fontStyles.bold, @@ -135,7 +144,11 @@ class CustomGas extends PureComponent { /** * Current provider ticker */ - ticker: PropTypes.string + ticker: PropTypes.string, + /** + * Displayed when there is a gas station error + */ + gasError: PropTypes.string }; state = { @@ -378,18 +391,25 @@ class CustomGas extends PureComponent { render = () => { if (this.state.ready) { const { advancedCustomGas } = this.state; + const { gasError } = this.props; return ( - {advancedCustomGas ? this.renderCustomGasInput() : this.renderCustomGasSelector()} - - - - {advancedCustomGas - ? strings('custom_gas.hide_advanced_options') - : strings('custom_gas.advanced_options')} - - + + + {strings('transaction.gas_fee')}: + {gasError ? {gasError} : null} + + + + + {advancedCustomGas + ? strings('custom_gas.hide_advanced_options') + : strings('custom_gas.advanced_options')} + + + + {advancedCustomGas ? this.renderCustomGasInput() : this.renderCustomGasSelector()} ); } diff --git a/app/components/UI/TransactionEdit/index.js b/app/components/UI/TransactionEdit/index.js index eeae46c2881..21df18fec6c 100644 --- a/app/components/UI/TransactionEdit/index.js +++ b/app/components/UI/TransactionEdit/index.js @@ -429,17 +429,12 @@ class TransactionEdit extends PureComponent { {!paymentChannelTransaction && ( <> - - {strings('transaction.gas_fee')}: - {gasError ? {gasError} : null} - - - diff --git a/locales/en.json b/locales/en.json index be00e4a143b..662e6256cb6 100644 --- a/locales/en.json +++ b/locales/en.json @@ -511,8 +511,8 @@ "not_enough_for_gas": "You have 0 ETH in your account to pay for transaction fees. Buy some ETH or deposit from another account." }, "custom_gas": { - "advanced_options": "Show advanced options", - "hide_advanced_options": "Hide advanced options", + "advanced_options": "Advanced", + "hide_advanced_options": "Hide advanced", "gas_limit": "Gas Limit:", "gas_price": "Gas Price: (GWEI)", "warning_gas_limit": "Gas limit must be greater than 20999 and less than 7920027",