[Mobile] Fix issue with image inside input

[david0xd]

Images inside input need some styles to be fixed (padding, etc.).

It should work like the icon in the example.

Reference to extension code doing the same thing: https://github.com/MetaMask/metamask-extension/blob/main/ui/components/app/snaps/snap-ui-renderer/index.scss#L37-L42

Snap JSX code that can be used for testing:

<Form name="form">
  <Field label="Send amount">
    <Input
      name="amount"
      type="number"
      placeholder="Enter amount to send"
    />
    <Box direction="horizontal" center>
      <Text color="alternative">ETH</Text>
      <Button name="swap">
        <Icon 
          name="swap-vertical" 
          color="primary" 
          size="md" 
        />
      </Button>
    </Box>
  </Field>
  
  <Field label="Send amount" error="Field is required">
    <Input
      name="amount2"
      type="number"
      placeholder="Enter amount to send"
    />
    <Box direction="horizontal" center>
      <Text color="alternative">Whatever</Text>
      <Button name="swap">
        <Image 
          src={snapIcon} 
          borderRadius="full" 
        />
      </Button>
    </Box>
  </Field>
  
  <Field label="Send amount again" error="Field is required">
    <Input
      name="amount22"
      type="number"
      placeholder="Enter amount to send"
    />
    <Box direction="horizontal" center>
      <Text color="alternative">Whatever</Text>
      <Box>
        <Image 
          src={snapIcon} 
          borderRadius="full" 
        />
      </Box>
    </Box>
  </Field>
</Form>