diff --git a/wormhole-connect/src/App.css b/wormhole-connect/src/App.css index ba7e17f4b..8c1a2d2ed 100644 --- a/wormhole-connect/src/App.css +++ b/wormhole-connect/src/App.css @@ -4,13 +4,3 @@ .walletconnect-modal__mobile__toggle { color: #000000; } - -input::-webkit-outer-spin-button, -input::-webkit-inner-spin-button { - -webkit-appearance: none; - margin: 0; -} -input[type='number'] { - -moz-appearance: textfield; - /* Firefox */ -} diff --git a/wormhole-connect/src/views/v2/Bridge/AmountInput/index.tsx b/wormhole-connect/src/views/v2/Bridge/AmountInput/index.tsx index 6d9c31755..a7885d3e8 100644 --- a/wormhole-connect/src/views/v2/Bridge/AmountInput/index.tsx +++ b/wormhole-connect/src/views/v2/Bridge/AmountInput/index.tsx @@ -79,6 +79,15 @@ const useStyles = makeStyles()((theme) => ({ balance: { color: theme.palette.text.secondary, }, + amountInput: { + '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': { + '-webkit-appearance': 'none', + margin: 0, + }, + '&[type="number"]': { + '-moz-appearance': 'textfield', + }, + }, })); type Props = { @@ -200,6 +209,7 @@ const AmountInput = (props: Props) => { // See for details: https://github.com/mui/material-ui/issues/7960 e.currentTarget.blur(); }, + step: '0.1', }} placeholder="0" variant="standard" @@ -224,6 +234,7 @@ const AmountInput = (props: Props) => { ), type: 'number', + classes: { input: classes.amountInput }, }} />