#2573 - remove increment / decrement arrows by CSS

wormhole-foundation · Sep 17, 2024 · 9d98a8e · 9d98a8e
1 parent 9f0bcf9
commit 9d98a8e
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 10 deletions.
diff --git 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
@@ -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) => {
                 </InputAdornment>
               ),
               type: 'number',
+              classes: { input: classes.amountInput },
             }}
           />
         </CardContent>