add icon to username field

components/Global/helpers/input.tsx

@@ -1,15 +1,32 @@
 import React from 'react';
-import { Input as TamaguiInput, InputProps as TamaguiInputProps} from 'tamagui';
+import { Input as TamaguiInput, InputProps as TamaguiInputProps, XStack, YStack} from 'tamagui';
 
 interface InputProps extends TamaguiInputProps {
+    prependElement?: React.JSX.Element | undefined;
 }
 
 export default function Input(props: InputProps): React.JSX.Element {
 
     return (
-        <TamaguiInput 
-            {...props}
-            clearButtonMode="always"
-        />
+        <XStack>
+
+            { props.prependElement && (
+                props.prependElement
+            )}
+            
+            <YStack 
+                flex={1} 
+                alignContent='center' 
+                justifyContent='center'
+            >
+
+            </YStack>
+
+            <TamaguiInput 
+                flex={4}
+                {...props}
+                clearButtonMode="always"
+            />
+        </XStack>
     )
 }

components/Login/screens/server-authentication.tsx

@@ -11,6 +11,7 @@ import Client from "../../../api/client";
 import { JellifyUser } from "../../../types/JellifyUser";
 import { ServerAuthenticationProps } from "../../../components/types";
 import Input from "../../../components/Global/helpers/input";
+import Icon from "../../../components/Global/helpers/icon";
 
 export default function ServerAuthentication({
     route,
@@ -71,6 +72,7 @@ export default function ServerAuthentication({
 
             <YStack alignContent="space-between">
                 <Input
+                    prependElement={(<Icon name="person-outline" />)}
                     placeholder="Username"
                     value={username}
                     onChangeText={(value : string | undefined) => setUsername(value)}