From 1f50fb1df1eb0f22c321907640ffdb331d064927 Mon Sep 17 00:00:00 2001
From: avaamsel <avadnunes@gmail.com>
Date: Sun, 7 Dec 2025 15:30:36 -0800
Subject: [PATCH 1/2] small fix to youtube export modal

---
 vynl/src/components/YouTubeExportModal.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/vynl/src/components/YouTubeExportModal.tsx b/vynl/src/components/YouTubeExportModal.tsx
index 7e8a2e5..aea8fe4 100644
--- a/vynl/src/components/YouTubeExportModal.tsx
+++ b/vynl/src/components/YouTubeExportModal.tsx
@@ -180,11 +180,11 @@ export default function YouTubeExportModal({
       onSuccess?.(result.playlistUrl);
 
       Alert.alert(
-        'Exported to YouTube Music',
-        `Found ${result.tracksFound} of ${result.tracksTotal} tracks`,
+        'Success!',
+        `Playlist exported to YouTube Music!\n\nFound ${result.tracksFound} out of ${result.tracksTotal} tracks.`,
         [
           {
-            text: 'Open Playlist',
+            text: 'Open in YouTube Music',
             onPress: () => {
               if (Platform.OS === 'web') {
                 if (typeof window !== 'undefined') {
@@ -195,7 +195,7 @@ export default function YouTubeExportModal({
               }
             },
           },
-          { text: 'Close', onPress: onClose },
+          { text: 'OK', onPress: onClose },
         ]
       );
     } catch (error: any) {

From 2243df65ba283d038fd8d42c00b5fe80b9aa1f69 Mon Sep 17 00:00:00 2001
From: vliu526 <vliu21@uw.edu>
Date: Sun, 7 Dec 2025 16:12:01 -0800
Subject: [PATCH 2/2] Fixed model so all export information can be read and
 access without scrolling to access the button

---
 vynl/src/components/SpotifyExportModal.tsx | 77 ++++++++++++---------
 vynl/src/components/YouTubeExportModal.tsx | 79 ++++++++++++----------
 2 files changed, 89 insertions(+), 67 deletions(-)

diff --git a/vynl/src/components/SpotifyExportModal.tsx b/vynl/src/components/SpotifyExportModal.tsx
index d03f452..8c9a2a6 100644
--- a/vynl/src/components/SpotifyExportModal.tsx
+++ b/vynl/src/components/SpotifyExportModal.tsx
@@ -254,8 +254,8 @@ export default function SpotifyExportModal({
           activeOpacity={1}
           onPress={onClose}
         />
-        <View style={[styles.modalContentWrapper, { marginBottom: insets.bottom }]}>
-          <LinearGradient colors={['#F8F9FD', '#FFFFFF']} style={styles.modalContent}>
+        <View style={styles.modalContentWrapper}>
+          <LinearGradient colors={['#F8F9FD', '#FFFFFF']} style={[styles.modalContent, { paddingBottom: Math.max(16, insets.bottom) }]}>
             <View style={styles.header}>
               <Text style={styles.title}>Export to Spotify</Text>
               <TouchableOpacity onPress={onClose} style={styles.closeButton}>
@@ -313,11 +313,12 @@ export default function SpotifyExportModal({
                 </View>
               ) : exportResult ? (
                 <View style={styles.successSection}>
-                  <Ionicons name="checkmark-circle" size={64} color="#1DB954" style={styles.successIcon} />
-                  <Text style={styles.successTitle}>Export Complete!</Text>
-                  <Text style={styles.successText}>
-                    Found {exportResult.tracksFound} out of {exportResult.tracksTotal} tracks
-                  </Text>
+                  <View style={styles.playlistInfoCompact}>
+                    <Text style={styles.playlistNameCompact}>{playlistName}</Text>
+                    <Text style={styles.songCountCompact}>
+                      Found {exportResult.tracksFound} out of {exportResult.tracksTotal} tracks
+                    </Text>
+                  </View>
                   <View style={styles.buttonContainer}>
                     <AppButton
                       title="Open in Spotify"
@@ -347,18 +348,10 @@ export default function SpotifyExportModal({
                 </View>
               ) : (
                 <View style={styles.readySection}>
-                  <Ionicons name="musical-notes" size={64} color="#1DB954" style={styles.spotifyIcon} />
-                  <Text style={styles.readyTitle}>Ready to Export</Text>
-                  <Text style={styles.readyDescription}>
-                    Export "{playlistName}" with {songs.length} song{songs.length !== 1 ? 's' : ''} to
-                    Spotify?
-                  </Text>
-                  <View style={styles.playlistInfo}>
-                    <Text style={styles.playlistInfoText}>
-                      <Text style={styles.bold}>Playlist:</Text> {playlistName}
-                    </Text>
-                    <Text style={styles.playlistInfoText}>
-                      <Text style={styles.bold}>Songs:</Text> {songs.length}
+                  <View style={styles.playlistInfoCompact}>
+                    <Text style={styles.playlistNameCompact}>{playlistName}</Text>
+                    <Text style={styles.songCountCompact}>
+                      {songs.length} song{songs.length !== 1 ? 's' : ''}
                     </Text>
                   </View>
                   <View style={styles.buttonContainer}>
@@ -393,15 +386,14 @@ const styles = StyleSheet.create({
     borderTopLeftRadius: 24,
     borderTopRightRadius: 24,
     overflow: 'hidden',
-    maxHeight: '80%',
-    minHeight: 300,
+    maxHeight: '85%',
+    width: '100%',
   },
   modalContent: {
     paddingTop: 16,
     paddingBottom: 16,
     paddingHorizontal: 24,
-    maxHeight: '100%',
-    flex: 1,
+    minHeight: 200,
   },
   header: {
     flexDirection: 'row',
@@ -422,11 +414,10 @@ const styles = StyleSheet.create({
     padding: 8,
   },
   content: {
-    flex: 1,
-    maxHeight: '100%',
+    flexShrink: 1,
   },
   contentContainer: {
-    paddingBottom: 24,
+    paddingBottom: 16,
     flexGrow: 1,
   },
   centerContent: {
@@ -493,8 +484,8 @@ const styles = StyleSheet.create({
     color: '#6F7A88',
   },
   successSection: {
-    alignItems: 'center',
-    paddingVertical: 16,
+    alignItems: 'stretch',
+    paddingVertical: 4,
   },
   successIcon: {
     marginBottom: 12,
@@ -513,8 +504,8 @@ const styles = StyleSheet.create({
     paddingHorizontal: 8,
   },
   readySection: {
-    alignItems: 'center',
-    paddingVertical: 12,
+    alignItems: 'stretch',
+    paddingVertical: 4,
   },
   readyTitle: {
     fontSize: 22,
@@ -542,16 +533,36 @@ const styles = StyleSheet.create({
     color: '#001133',
     marginBottom: 8,
   },
+  playlistInfoCompact: {
+    width: '100%',
+    backgroundColor: 'white',
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 16,
+    alignItems: 'center',
+  },
+  playlistNameCompact: {
+    fontSize: 20,
+    fontWeight: '700',
+    color: '#001133',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  songCountCompact: {
+    fontSize: 16,
+    color: '#6F7A88',
+    textAlign: 'center',
+  },
   bold: {
     fontWeight: '700',
   },
   buttonContainer: {
     width: '100%',
-    marginBottom: 12,
+    marginBottom: 10,
   },
   disconnectButton: {
-    marginTop: 8,
-    padding: 12,
+    marginTop: 4,
+    padding: 10,
     width: '100%',
   },
   disconnectText: {
diff --git a/vynl/src/components/YouTubeExportModal.tsx b/vynl/src/components/YouTubeExportModal.tsx
index aea8fe4..30517b0 100644
--- a/vynl/src/components/YouTubeExportModal.tsx
+++ b/vynl/src/components/YouTubeExportModal.tsx
@@ -278,8 +278,8 @@ export default function YouTubeExportModal({
     >
       <View style={styles.modalOverlay}>
         <TouchableOpacity style={StyleSheet.absoluteFill} activeOpacity={1} onPress={onClose} />
-        <View style={[styles.modalContentWrapper, { marginBottom: insets.bottom }]}>
-          <LinearGradient colors={['#F8F9FD', '#FFFFFF']} style={styles.modalContent}>
+        <View style={styles.modalContentWrapper}>
+          <LinearGradient colors={['#F8F9FD', '#FFFFFF']} style={[styles.modalContent, { paddingBottom: Math.max(16, insets.bottom) }]}>
             <View style={styles.header}>
               <Text style={styles.title}>Export to YouTube Music</Text>
               <TouchableOpacity onPress={onClose} style={styles.closeButton}>
@@ -287,7 +287,7 @@ export default function YouTubeExportModal({
               </TouchableOpacity>
             </View>
 
-            <ScrollView
+            <ScrollView 
               style={styles.content}
               contentContainerStyle={styles.contentContainer}
               showsVerticalScrollIndicator={false}
@@ -340,11 +340,12 @@ export default function YouTubeExportModal({
                 </View>
               ) : exportResult ? (
                 <View style={styles.successSection}>
-                  <Ionicons name="checkmark-circle" size={64} color="#1DB954" style={styles.successIcon} />
-                  <Text style={styles.successTitle}>All set!</Text>
-                  <Text style={styles.successText}>
-                    Found {exportResult.tracksFound} of {exportResult.tracksTotal} tracks.
-                  </Text>
+                  <View style={styles.playlistInfoCompact}>
+                    <Text style={styles.playlistNameCompact}>{playlistName}</Text>
+                    <Text style={styles.songCountCompact}>
+                      Found {exportResult.tracksFound} of {exportResult.tracksTotal} tracks
+                    </Text>
+                  </View>
                   <View style={styles.buttonContainer}>
                     <AppButton
                       title="Open in YouTube Music"
@@ -374,18 +375,10 @@ export default function YouTubeExportModal({
                 </View>
               ) : (
                 <View style={styles.readySection}>
-                  <Ionicons name="logo-youtube" size={64} color="#FF0000" style={styles.youtubeIcon} />
-                  <Text style={styles.readyTitle}>Ready to Export</Text>
-                  <Text style={styles.readyDescription}>
-                    Export "{playlistName}" with {songs.length} song{songs.length !== 1 ? 's' : ''} to YouTube
-                    Music.
-                  </Text>
-                  <View style={styles.playlistInfo}>
-                    <Text style={styles.playlistInfoText}>
-                      <Text style={styles.bold}>Playlist:</Text> {playlistName}
-                    </Text>
-                    <Text style={styles.playlistInfoText}>
-                      <Text style={styles.bold}>Songs:</Text> {songs.length}
+                  <View style={styles.playlistInfoCompact}>
+                    <Text style={styles.playlistNameCompact}>{playlistName}</Text>
+                    <Text style={styles.songCountCompact}>
+                      {songs.length} song{songs.length !== 1 ? 's' : ''}
                     </Text>
                   </View>
                   <View style={styles.buttonContainer}>
@@ -420,15 +413,14 @@ const styles = StyleSheet.create({
     borderTopLeftRadius: 24,
     borderTopRightRadius: 24,
     overflow: 'hidden',
-    maxHeight: '80%',
-    minHeight: 300,
+    maxHeight: '85%',
+    width: '100%',
   },
   modalContent: {
     paddingTop: 16,
     paddingBottom: 16,
     paddingHorizontal: 24,
-    maxHeight: '100%',
-    flex: 1,
+    minHeight: 200,
   },
   header: {
     flexDirection: 'row',
@@ -449,11 +441,10 @@ const styles = StyleSheet.create({
     padding: 8,
   },
   content: {
-    flex: 1,
-    maxHeight: '100%',
+    flexShrink: 1,
   },
   contentContainer: {
-    paddingBottom: 24,
+    paddingBottom: 16,
     flexGrow: 1,
   },
   centerContent: {
@@ -520,8 +511,8 @@ const styles = StyleSheet.create({
     color: '#6F7A88',
   },
   successSection: {
-    alignItems: 'center',
-    paddingVertical: 16,
+    alignItems: 'stretch',
+    paddingVertical: 4,
   },
   successIcon: {
     marginBottom: 12,
@@ -540,8 +531,8 @@ const styles = StyleSheet.create({
     paddingHorizontal: 8,
   },
   readySection: {
-    alignItems: 'center',
-    paddingVertical: 12,
+    alignItems: 'stretch',
+    paddingVertical: 4,
   },
   readyTitle: {
     fontSize: 22,
@@ -569,16 +560,36 @@ const styles = StyleSheet.create({
     color: '#001133',
     marginBottom: 8,
   },
+  playlistInfoCompact: {
+    width: '100%',
+    backgroundColor: 'white',
+    borderRadius: 12,
+    padding: 16,
+    marginBottom: 16,
+    alignItems: 'center',
+  },
+  playlistNameCompact: {
+    fontSize: 20,
+    fontWeight: '700',
+    color: '#001133',
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  songCountCompact: {
+    fontSize: 16,
+    color: '#6F7A88',
+    textAlign: 'center',
+  },
   bold: {
     fontWeight: '700',
   },
   buttonContainer: {
     width: '100%',
-    marginBottom: 12,
+    marginBottom: 10,
   },
   disconnectButton: {
-    marginTop: 8,
-    padding: 12,
+    marginTop: 4,
+    padding: 10,
     width: '100%',
   },
   disconnectText: {