Refactor components for consistent styling and improve button animations

components/EpisodeSelectionModal.tsx

@@ -45,7 +45,6 @@ export const EpisodeSelectionModal: React.FC<EpisodeSelectionModalProps> = () =>
                   isSelected={selectedEpisodeGroup === groupIndex}
                   style={styles.episodeGroupButton}
                   textStyle={styles.episodeGroupButtonText}
-                  variant="primary"
                 />
               ))}
             </View>
@@ -56,6 +55,7 @@ export const EpisodeSelectionModal: React.FC<EpisodeSelectionModalProps> = () =>
               (selectedEpisodeGroup + 1) * episodeGroupSize
             )}
             numColumns={5}
+            contentContainerStyle={styles.episodeList}
             keyExtractor={(_, index) => `episode-${selectedEpisodeGroup * episodeGroupSize + index}`}
             renderItem={({ item, index }) => {
               const absoluteIndex = selectedEpisodeGroup * episodeGroupSize + index;
@@ -71,8 +71,6 @@ export const EpisodeSelectionModal: React.FC<EpisodeSelectionModalProps> = () =>
               );
             }}
           />
-
-          <StyledButton text="关闭" onPress={onClose} style={styles.closeButton} />
         </View>
       </View>
     </Modal>
@@ -87,22 +85,25 @@ const styles = StyleSheet.create({
     backgroundColor: "transparent",
   },
   modalContent: {
-    width: 400,
+    width: 600,
     height: "100%",
     backgroundColor: "rgba(0, 0, 0, 0.85)",
     padding: 20,
   },
   modalTitle: {
     color: "white",
-    marginBottom: 20,
+    marginBottom: 12,
     textAlign: "center",
     fontSize: 18,
     fontWeight: "bold",
   },
+  episodeList: {
+    justifyContent: "flex-start",
+  },
   episodeItem: {
-    paddingVertical: 12,
+    paddingVertical: 2,
     margin: 4,
-    flex: 1,
+    width: "18%",
   },
   episodeItemText: {
     fontSize: 14,
@@ -111,20 +112,13 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     flexWrap: "wrap",
     justifyContent: "center",
-    marginBottom: 15,
     paddingHorizontal: 10,
   },
   episodeGroupButton: {
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderRadius: 15,
-    margin: 5,
+    paddingHorizontal: 6,
+    margin: 8,
   },
   episodeGroupButtonText: {
     fontSize: 12,
   },
-  closeButton: {
-    padding: 15,
-    marginTop: 20,
-  },
 });