fix: Input icon alignment on Android

src/components/Input.tsx

@@ -1,13 +1,45 @@
+import React from 'react';
+import { Platform, TextInputProps } from 'react-native';
 import styled, { css } from 'styled-components/native';
+import useDefaultStyles from './Colors';
+import { Gap } from './Utility';
 
-const Input = styled.TextInput<{ icon?: boolean }>`
-    margin: 10px 0;
+export interface InputProps extends TextInputProps {
+    icon?: React.ReactNode
+}
+
+const Container = styled.View`
+    margin: 6px 0;
     border-radius: 8px;
-    padding: 15px;
-
-    ${(props) => props.icon && css`
-        padding-left: 40px;
-    `}
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    
+    ${Platform.select({
+        ios: css`padding: 12px;`,
+        android: css`padding: 4px 12px;`,
+    })}
 `;
 
+const InputWrapper = styled.TextInput`
+    margin: 0;
+    padding: 0;
+`;
+
+function Input({ icon = null, style, ...rest }: InputProps) {
+    const defaultStyles = useDefaultStyles();
+
+    return (
+        <Container style={[defaultStyles.input, style]}>
+            {icon && (
+                <>
+                    {icon}
+                    <Gap size={8} />
+                </>
+            )}
+            <InputWrapper {...rest} />
+        </Container>
+    );
+}
+
 export default Input;