From 4b6d2f94a2164ffb6e2fa32e9e2afc2f5674e9db Mon Sep 17 00:00:00 2001
From: Violet Caulfield <violet@cosmonautical.cloud>
Date: Tue, 31 Dec 2024 15:48:01 -0600
Subject: [PATCH] miniplayer flex fix

---
 components/Global/icon.tsx        |  1 +
 components/Player/mini-player.tsx | 38 ++++++++++++++++---------------
 2 files changed, 21 insertions(+), 18 deletions(-)

diff --git a/components/Global/icon.tsx b/components/Global/icon.tsx
index 27d69d01..079b9a83 100644
--- a/components/Global/icon.tsx
+++ b/components/Global/icon.tsx
@@ -20,6 +20,7 @@ export default function Icon({ name, onPress, large }: { name: string, onPress?:
     
     return (
         <MaterialCommunityIcons 
+            color="white"
             name={name} 
             onPress={() => {
                 if (onPress)
diff --git a/components/Player/mini-player.tsx b/components/Player/mini-player.tsx
index 074ee8d7..5b49590d 100644
--- a/components/Player/mini-player.tsx
+++ b/components/Player/mini-player.tsx
@@ -32,32 +32,34 @@ export function Miniplayer({ navigation }: { navigation : NavigationHelpers<Para
                     height={"$6"} 
                     onPress={() => navigation.navigate("Player")}
                 >
+                    <YStack alignContent="center" flex={1}>
+                        <CachedImage
+                            source={getImageApi(apiClient!)
+                                .getItemImageUrlById(
+                                    nowPlaying!.AlbumId,
+                                    ImageType.Primary,
+                                    { ...queryConfig.images }
+                                )
+                            }
+                            imageStyle={{
+                                width: 50,
+                                height: 50,
+                                marginRight: 20,
+                                borderRadius: 2,
+                            }}
+                        />
 
-                    <CachedImage
-                        source={getImageApi(apiClient!)
-                            .getItemImageUrlById(
-                                nowPlaying!.AlbumId,
-                                ImageType.Primary,
-                                { ...queryConfig.images }
-                            )
-                        }
-                        imageStyle={{
-                            width: 50,
-                            height: 50,
-                            marginRight: 20,
-                            borderRadius: 2,
-                            flex: 2
-                        }}
-                    />
+                    </YStack>
 
-                    <YStack alignContent="flex-start">
+
+                    <YStack alignContent="flex-start" flex={3}>
                         <Text bold>{nowPlaying?.title ?? "Nothing Playing"}</Text>
                         <Text>{nowPlaying?.artist ?? ""}</Text>
                     </YStack>
 
                     <Spacer />
                     
-                    <XStack alignItems="flex-end">
+                    <XStack alignItems="flex-end" flex={1}>
                         { playbackState.state === State.Playing && (
                             <Icon name="pause" large onPress={() => pause()} />
                         )}