styling input form

components/Login/helpers/server-address.tsx

@@ -1,18 +1,17 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import _ from "lodash";
-import { useColorScheme } from "react-native";
 import AsyncStorage from "@react-native-async-storage/async-storage";
 import { useMutation } from "@tanstack/react-query";
 import { AsyncStorageKeys } from "../../../enums/async-storage-keys";
 import { JellifyServer } from "../../../types/JellifyServer";
 import { mutateServer, serverMutation } from "../../../api/mutators/functions/storage";
 import { useApiClientContext } from "../../jellyfin-api-provider";
-import { Button, Input, SizableText, useTheme, View, YStack, Stack, XStack, getFontSizeToken, Paragraph, H2 } from "tamagui";
-import { CheckboxWithLabel } from "../../helpers/checkbox-with-label";
+import { Button, useTheme, View, XStack } from "tamagui";
 import { SwitchWithLabel } from "../../helpers/switch-with-label";
 import { buildApiClient } from "../../../api/client";
 import { useAuthenticationContext } from "../provider";
 import { Heading } from "../../helpers/text";
+import Input from "../../helpers/input";
 
 const http = "http://"
 const https = "https://"
@@ -67,8 +66,8 @@ export default function ServerAddress(): React.JSX.Element {
                     label="HTTPS" 
                     size="$2"
                     width={150} />
+                
                 <Input 
-                    flexGrow={1}
                     placeholder="jellyfin.org"
                     onChangeText={setServerAddress} />
             </XStack>

components/helpers/input.tsx

@@ -0,0 +1,20 @@
+import React, { SetStateAction } from 'react';
+import { Input as TamaguiInput} from 'tamagui';
+import { styles } from './text';
+
+interface InputProps {
+    onChangeText: React.Dispatch<SetStateAction<string | undefined>>,
+    placeholder: string
+}
+
+export default function Input(props: InputProps): React.JSX.Element {
+
+    return (
+        <TamaguiInput 
+            style={styles.text}
+            flexGrow={1}
+            placeholder={props.placeholder}
+            onChangeText={props.onChangeText} 
+        />
+    )
+}

components/helpers/text.tsx

@@ -1,15 +1,16 @@
 import { StyleSheet } from "react-native"
 import { H1, SizeTokens, Label as TamaguiLabel } from "tamagui"
+import { Fonts } from '../../enums/assets/fonts';
 
-const styles = StyleSheet.create({
+export const styles = StyleSheet.create({
     heading: {
-        fontFamily: 'Aileron-Black'
+        fontFamily: Fonts.Black
     },
     label: {
-        fontFamily: 'Aileron-SemiBold'
+        fontFamily: Fonts.Heavy
     },
     text: {
-        fontFamily: 'Aileron-Regular'
+        fontFamily: Fonts.Regular
     },
 });
 

enums/assets/fonts.ts

@@ -0,0 +1,9 @@
+export enum Fonts {
+    Black = "Aileron-Black",
+    BlackItalic = "Aileron-BlackItalic",
+    Bold = "Aileron-Bold",
+    BoldItalic = "Aileron-BoldItalic",
+    Heavy = "Aileron-Heavy",
+    HeavyItalic = "Aileron-HeavyItalic",
+    Regular = "Aileron-Regular"
+}