styling on screens, build out settings screen more

api/queries/functions/images.ts

@@ -23,7 +23,7 @@ function convertFileToBase64(file: File): Promise<string> {
 
         reader.onloadend = () => {
             if (!_.isEmpty(reader.result))
-                resolve(reader.result.toString())
+                resolve(Buffer.from(reader.result as ArrayBuffer).toString())
             else
                 reject(new Error("Unable to convert file to base64"));
         }

components/Settings/helpers/account-details.tsx

@@ -11,7 +11,7 @@ export default function AccountDetails(): React.JSX.Element {
 
     return (
 
-        <XStack>
+        <XStack alignItems="center">
             <MaterialCommunityIcons name="account-music-outline" />
             <Text>{user!.name}</Text>
             <Avatar itemId={user!.id} circular />

components/Settings/helpers/server-details.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+import { useApiClientContext } from "../../jellyfin-api-provider";
+import { Text } from "react-native";
+import MaterialCommunityIcons from "react-native-vector-icons/MaterialCommunityIcons";
+import { XStack, YStack } from "tamagui";
+import { Colors } from "../../../enums/colors";
+
+export default function ServerDetails() : React.JSX.Element {
+    
+    const { server, apiClient } = useApiClientContext();
+    
+    return (
+        <YStack>
+            <XStack>
+                <MaterialCommunityIcons color={Colors.Primary} name="hand-coin-outline" />
+            </XStack>
+            <XStack>
+                <MaterialCommunityIcons color={Colors.Primary} name="server-network" />
+                <Text>{server!.url}</Text>
+            </XStack>
+        </YStack>
+    )
+}

components/Settings/screens/root.tsx

@@ -3,6 +3,7 @@ import { SafeAreaView } from "react-native";
 import { ScrollView, Separator } from "tamagui";
 import AccountDetails from "../helpers/account-details";
 import SignOut from "../helpers/sign-out";
+import ServerDetails from "../helpers/server-details";
 
 export default function Root() : React.JSX.Element {
     return (
@@ -10,6 +11,8 @@ export default function Root() : React.JSX.Element {
             <ScrollView contentInsetAdjustmentBehavior="automatic">
                 <AccountDetails />
                 <Separator marginVertical={15} />
+                <ServerDetails />
+                <Separator marginVertical={15} />
                 <SignOut />
             </ScrollView>
         </SafeAreaView>

components/tabs.tsx

@@ -25,10 +25,10 @@ export function Tabs() {
                 name="Home" 
                 component={Home}
                 options={{
+                    headerShown: false,
                     tabBarIcon: ({ color, size }) => (
                         <MaterialCommunityIcons name="jellyfish-outline" color={color} size={size} />
                     ),
-                    headerShown: false
                 }}
             />
 
@@ -36,6 +36,7 @@ export function Tabs() {
                 name="Library"
                 component={Library}
                 options={{
+                    headerShown: false,
                     tabBarIcon: ({color, size }) => (
                         <MaterialCommunityIcons name="heart-multiple-outline" color={color} size={size} />
                     )
@@ -56,6 +57,7 @@ export function Tabs() {
                 name="Discover"
                 component={Discover}
                 options={{
+                    headerShown: false,
                     tabBarIcon: ({ color, size }) => (
                         <MaterialCommunityIcons name="music-box-multiple-outline" color={color} size={size} />
                     )
@@ -66,6 +68,7 @@ export function Tabs() {
                 name="Settings"
                 component={Settings}
                 options={{
+                    headerShown: false,
                     tabBarIcon: ({ color, size }) => (
                         <MaterialCommunityIcons name="dip-switch" color={color} size={size} />
                     )