Refactor components to use StyledButton for consistent button styling

- Replaced custom button implementations with StyledButton in various components including DetailScreen, HomeScreen, SearchScreen, and SettingsModal.
- Updated button styles and behaviors to align with the new StyledButton component.
- Removed the obsolete DetailButton component to streamline the codebase.

components/MediaButton.tsx

@@ -1,53 +1,16 @@
-import React from "react";
-import { Pressable, StyleSheet, StyleProp, ViewStyle } from "react-native";
+import React, { ComponentProps } from "react";
+import { StyledButton } from "./StyledButton";
+import { StyleSheet } from "react-native";
 
-interface MediaButtonProps {
-  onPress: () => void;
-  children: React.ReactNode;
-  isDisabled?: boolean;
-  hasTVPreferredFocus?: boolean;
-  style?: StyleProp<ViewStyle>;
-}
+type StyledButtonProps = ComponentProps<typeof StyledButton>;
 
-export const MediaButton: React.FC<MediaButtonProps> = ({
-  onPress,
-  children,
-  isDisabled = false,
-  hasTVPreferredFocus = false,
-  style,
-}) => {
-  return (
-    <Pressable
-      hasTVPreferredFocus={hasTVPreferredFocus}
-      onPress={onPress}
-      disabled={isDisabled}
-      style={({ focused }) => [
-        styles.mediaControlButton,
-        focused && styles.focusedButton,
-        isDisabled && styles.disabledButton,
-        style,
-      ]}
-    >
-      {children}
-    </Pressable>
-  );
-};
+export const MediaButton = (props: StyledButtonProps) => (
+  <StyledButton {...props} style={[styles.mediaControlButton, props.style]} variant="ghost" />
+);
 
 const styles = StyleSheet.create({
   mediaControlButton: {
-    backgroundColor: "rgba(51, 51, 51, 0.8)",
     padding: 12,
-    borderRadius: 8,
-    alignItems: "center",
-    justifyContent: "center",
     minWidth: 80,
-    margin: 5,
-  },
-  focusedButton: {
-    backgroundColor: "rgba(119, 119, 119, 0.9)",
-    transform: [{ scale: 1.1 }],
-  },
-  disabledButton: {
-    opacity: 0.5,
   },
 });