styling all of the buttons

components/Login/helpers/server-address.tsx

@@ -69,6 +69,7 @@ export default function ServerAddress(): React.JSX.Element {
                     width={100} />
                 
                 <Input 
+                    value={serverAddress}
                     placeholder="jellyfin.org"
                     onChangeText={setServerAddress} />
             </XStack>

components/Login/helpers/server-authentication.tsx

@@ -4,13 +4,16 @@ import { useApiClientContext } from "../../jellyfin-api-provider";
 import _ from "lodash";
 import * as Keychain from "react-native-keychain"
 import { JellyfinCredentials } from "../../../api/types/jellyfin-credentials";
-import { Button, H2, Input, View } from "tamagui";
+import { View } from "tamagui";
 import { client } from "../../../api/client";
 import { useAuthenticationContext } from "../provider";
+import { Heading } from "../../helpers/text";
+import Button from "../../helpers/button";
+import Input from "../../helpers/input";
 
 export default function ServerAuthentication(): React.JSX.Element {
     const { username, setUsername, setServerAddress } = useAuthenticationContext();
-    const [password, setPassword] = React.useState('');
+    const [password, setPassword] = React.useState<string | undefined>('');
 
     const { apiClient, setApiClient, server, setUsername: setClientUsername } = useApiClientContext();
 
@@ -53,9 +56,9 @@ export default function ServerAuthentication(): React.JSX.Element {
 
     return (
         <View marginHorizontal={10} flex={1} justifyContent='center'>
-            <H2 marginVertical={30}>
-                Sign in to {server?.name ?? "Jellyfin"}
-            </H2>
+            <Heading>
+                { `Sign in to ${server?.name ?? "Jellyfin"}`}
+            </Heading>
             <Button
                 onPress={() => {
                     clearServer.mutate();

components/Login/helpers/server-library.tsx

@@ -1,13 +1,13 @@
 import { useMutation } from "@tanstack/react-query";
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import { useApiClientContext } from "../../jellyfin-api-provider";
-import { Button, H2, Select, Text, View } from "tamagui";
+import { Select, View } from "tamagui";
 import { JellifyLibrary } from "../../../types/JellifyLibrary";
 import { useLibraries } from "../../../api/queries/libraries";
-import { client } from "../../../api/client";
 import { mutateServerCredentials } from "../../../api/mutators/functions/storage";
 import { useAuthenticationContext } from "../provider";
-import { useApi } from "../../../api/queries";
+import { Heading } from "../../helpers/text";
+import Button from "../../helpers/button";
 
 export default function ServerLibrary(): React.JSX.Element {
 
@@ -37,14 +37,16 @@ export default function ServerLibrary(): React.JSX.Element {
 
     return (
         <View marginHorizontal={10} flex={1} justifyContent='center'>
-            <H2 marginVertical={30}>Select Music Library</H2>
+            <Heading>Select Music Library</Heading>
 
             <Button
                 onPress={() => {
                     serverCredentials.mutate(undefined);
                     clearUser.mutate();
                 }}
-                >Switch User</Button>
+            >
+                Switch User
+            </Button>
 
             <Select value={libraryName}></Select>
         </View>

components/helpers/button.tsx

@@ -4,7 +4,7 @@ import { styles } from './text';
 interface ButtonProps {
     children: string;
     onPress: () => void;
-    disabled: boolean;
+    disabled?: boolean | undefined;
 }
 
 export default function Button(props: ButtonProps): React.JSX.Element {

components/helpers/input.tsx

@@ -5,6 +5,8 @@ import { styles } from './text';
 interface InputProps {
     onChangeText: React.Dispatch<SetStateAction<string | undefined>>,
     placeholder: string
+    value: string | undefined;
+    secureTextEntry?: boolean | undefined;
 }
 
 export default function Input(props: InputProps): React.JSX.Element {
@@ -15,6 +17,8 @@ export default function Input(props: InputProps): React.JSX.Element {
             flexGrow={1}
             placeholder={props.placeholder}
             onChangeText={props.onChangeText} 
+            value={props.value}
+            secureTextEntry={props.secureTextEntry}
         />
     )
 }