layout fixes

components/Login/helpers/server-address.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import _ from "lodash";
 import { serverUrlMutation } from "../../../api/mutators/storage";
-import { Button, SafeAreaView, TextInput, useColorScheme } from "react-native";
+import { Button, SafeAreaView, TextInput, useColorScheme, View } from "react-native";
 
 export default function ServerAddress(): React.JSX.Element {
 
@@ -10,7 +10,7 @@ export default function ServerAddress(): React.JSX.Element {
     const isDarkMode = useColorScheme() === 'dark';
 
     return (
-        <SafeAreaView>
+        <View>
             <TextInput 
                 placeholder="Jellyfin Server Address"
                 onChangeText={setServerUrl}>
@@ -21,6 +21,6 @@ export default function ServerAddress(): React.JSX.Element {
                 title="Connect"
             />
 
-        </SafeAreaView>
+        </View>
     )
 }

components/Login/helpers/server-authentication.tsx

@@ -9,15 +9,12 @@ export default function ServerAuthentication(): React.JSX.Element {
     const isDarkMode = useColorScheme() === 'dark';
 
     return (
-        <>
         <View>
             <Button
                 title="Change Server"
                 onPress={() => console.log("change server requested")}
                 color={'purple'}
                 />
-        </View>
-        <View>
 
             <TextInput
                 placeholder="Username"
@@ -37,6 +34,5 @@ export default function ServerAuthentication(): React.JSX.Element {
                 onPress={() => console.log("sign in pressed")}
                 />
         </View>
-        </>
     );
 }

components/jellify.tsx

@@ -1,4 +1,4 @@
-import { useColorScheme } from "react-native";
+import { SafeAreaView, useColorScheme } from "react-native";
 import { NavigationContainer } from "@react-navigation/native";
 import Login from "./Login/component";
 import Navigation from "./navigation";
@@ -6,6 +6,7 @@ import { Colors } from "react-native/Libraries/NewAppScreen";
 import { setupPlayer } from "react-native-track-player/lib/src/trackPlayer";
 import { useCredentials } from "../api/queries/keychain";
 import _ from "lodash";
+import { jellifyStyles } from "./styles";
 
 export default function Jellify(): React.JSX.Element {
 
@@ -23,7 +24,9 @@ export default function Jellify(): React.JSX.Element {
 
   return (
     <NavigationContainer>
+      <SafeAreaView style={jellifyStyles.container}>
         { (!isError && !_.isUndefined(data)) ? <Navigation /> : <Login /> }
+      </SafeAreaView>
     </NavigationContainer>
   );
 }

components/styles.ts

@@ -0,0 +1,22 @@
+import { StyleSheet } from "react-native";
+
+export const jellifyStyles = StyleSheet.create({
+    container: {
+      flex: 1,
+      justifyContent: 'center',
+      marginHorizontal: 16,
+    },
+    title: {
+      textAlign: 'center',
+      marginVertical: 8,
+    },
+    fixToText: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+    },
+    separator: {
+      marginVertical: 8,
+      borderBottomColor: '#737373',
+      borderBottomWidth: StyleSheet.hairlineWidth,
+    },
+  });