layout changes on auth and address,

App.tsx

@@ -5,6 +5,7 @@ import "react-native-url-polyfill/auto";
 import Jellify from './components/jellify';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { createTamagui, TamaguiProvider, Theme } from 'tamagui';
+import { ToastProvider } from '@tamagui/toast'
 import defaultConfig from '@tamagui/config/v3';
 import { useColorScheme } from 'react-native';
 
@@ -20,7 +21,12 @@ export default function App(): React.JSX.Element {
     <QueryClientProvider client={queryClient}>
       <TamaguiProvider config={config}>
         <Theme name={isDarkMode ? 'dark' : 'light'}>
-          <Jellify />
+          <ToastProvider
+            swipeDirection='down'
+            native={false}
+            >
+            <Jellify />
+          </ToastProvider>
         </Theme>
       </TamaguiProvider>
     </QueryClientProvider>

components/Login/helpers/server-address.tsx

@@ -7,7 +7,7 @@ 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 } from "tamagui";
+import { Button, Input, SizableText, useTheme, View, YStack, Stack, XStack, getFontSizeToken, Paragraph, H2 } from "tamagui";
 import { CheckboxWithLabel } from "../../helpers/checkbox-with-label";
 import { SwitchWithLabel } from "../../helpers/switch-with-label";
 
@@ -53,13 +53,10 @@ export default function ServerAddress(): React.JSX.Element {
     });
 
     return (
-        <View flex={1} justifyContent='center'>
-            <Paragraph 
-                paddingVertical={30}
-                fontSize={20} 
-                fontWeight={800}>
-                    Connect to Jellyfin
-                </Paragraph>
+        <View marginHorizontal={10} flex={1} justifyContent='center'>
+            <H2 marginVertical={30}>
+                Connect to Jellyfin
+            </H2>
             <XStack>
                 <SwitchWithLabel 
                     checked={useHttps} 
@@ -73,7 +70,7 @@ export default function ServerAddress(): React.JSX.Element {
                     onChangeText={setServerAddress} />
             </XStack>
             <Button 
-                paddingVertical={30}
+                marginVertical={30}
                 onPress={() => {
                     useServerMutation.mutate(`${useHttps ? "https" : "http"}://${serverAddress}`);
                 }}>

components/Login/helpers/server-authentication.tsx

@@ -39,7 +39,7 @@ export default function ServerAuthentication(): React.JSX.Element {
         },
         onError: async (error: Error) => {
             console.error("An error occurred connecting to the Jellyfin instance", error);
-            return await AsyncStorage.setItem(AsyncStorageKeys.ServerUrl, "");
+            return Promise.reject(`An error occured signing into ${server!.name}`);
         }
     });
 

package.json

@@ -21,7 +21,9 @@
     "@react-navigation/native-stack": "^6.11.0",
     "@react-navigation/stack": "^6.4.1",
     "@tamagui/config": "^1.115.5",
+    "@tamagui/toast": "^1.115.5",
     "@tanstack/react-query": "^5.52.1",
+    "burnt": "^0.12.2",
     "lodash": "^4.17.21",
     "react": "18.3.1",
     "react-native": "0.75.2",