From 612bb5a0d046e78c167315ab26798f84005b92b9 Mon Sep 17 00:00:00 2001
From: tapframe <nayifveliya99@gmail.com>
Date: Sat, 3 May 2025 19:50:55 +0530
Subject: [PATCH] Enhance LogoSourceSettings UI with improved scroll
 performance and visual feedback

Update the LogoSourceSettings component to enhance user experience by adding scroll performance optimizations, including vertical scroll indicators and adjusted scroll event throttling. Introduce active opacity and delay press settings for touchable elements to improve responsiveness. Additionally, refine styling with shadows and elevation for better visual hierarchy and feedback on selected items, ensuring a more polished and user-friendly interface.
---
 src/screens/LogoSourceSettings.tsx | 51 ++++++++++++++++++++++++++++--
 1 file changed, 49 insertions(+), 2 deletions(-)

diff --git a/src/screens/LogoSourceSettings.tsx b/src/screens/LogoSourceSettings.tsx
index 72017003..7682636d 100644
--- a/src/screens/LogoSourceSettings.tsx
+++ b/src/screens/LogoSourceSettings.tsx
@@ -472,7 +472,12 @@ const LogoSourceSettings = () => {
           <View style={styles.headerRight} />
         </View>
         
-        <ScrollView style={styles.scrollView}>
+        <ScrollView 
+          style={styles.scrollView}
+          showsVerticalScrollIndicator={true}
+          scrollEventThrottle={32}
+          decelerationRate="normal"
+        >
           {/* Description */}
           <View style={styles.descriptionContainer}>
             <Text style={styles.description}>
@@ -488,6 +493,8 @@ const LogoSourceSettings = () => {
               horizontal 
               showsHorizontalScrollIndicator={false}
               contentContainerStyle={styles.showsScrollContent}
+              scrollEventThrottle={32}
+              decelerationRate="normal"
             >
               {EXAMPLE_SHOWS.map((show) => (
                 <TouchableOpacity
@@ -497,6 +504,8 @@ const LogoSourceSettings = () => {
                     selectedShow.imdbId === show.imdbId && styles.selectedShowItem
                   ]}
                   onPress={() => handleShowSelect(show)}
+                  activeOpacity={0.7}
+                  delayPressIn={100}
                 >
                   <Text 
                     style={[
@@ -519,6 +528,8 @@ const LogoSourceSettings = () => {
                 logoSource === 'metahub' && styles.selectedCard
               ]}
               onPress={() => applyLogoSourceSetting('metahub')}
+              activeOpacity={0.7}
+              delayPressIn={100}
             >
               <View style={styles.optionHeader}>
                 <Text style={styles.optionTitle}>Metahub</Text>
@@ -545,6 +556,8 @@ const LogoSourceSettings = () => {
                 logoSource === 'tmdb' && styles.selectedCard
               ]}
               onPress={() => applyLogoSourceSetting('tmdb')}
+              activeOpacity={0.7}
+              delayPressIn={100}
             >
               <View style={styles.optionHeader}>
                 <Text style={styles.optionTitle}>TMDB</Text>
@@ -575,6 +588,8 @@ const LogoSourceSettings = () => {
                     horizontal 
                     showsHorizontalScrollIndicator={false}
                     contentContainerStyle={styles.languageScrollContent}
+                    scrollEventThrottle={32}
+                    decelerationRate="normal"
                   >
                     {/* Iterate over unique language codes */}
                     {uniqueTmdbLanguages.map((langCode) => (
@@ -585,6 +600,8 @@ const LogoSourceSettings = () => {
                           selectedTmdbLanguage === langCode && styles.selectedLanguageItem
                         ]}
                         onPress={() => handleTmdbLanguageSelect(langCode)}
+                        activeOpacity={0.7}
+                        delayPressIn={150}
                       >
                         <Text 
                           style={[
@@ -677,10 +694,20 @@ const LogoSourceSettings = () => {
       marginRight: 8,
       borderWidth: 1,
       borderColor: 'transparent',
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.1,
+      shadowRadius: 2,
+      elevation: 1,
     },
     selectedShowItem: {
       borderColor: colors.primary,
       backgroundColor: colors.elevation3,
+      shadowColor: colors.primary,
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.2,
+      shadowRadius: 3,
+      elevation: 2,
     },
     showItemText: {
       color: colors.mediumEmphasis,
@@ -700,9 +727,18 @@ const LogoSourceSettings = () => {
       padding: 16,
       borderWidth: 2,
       borderColor: 'transparent',
+      marginBottom: 12,
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.2,
+      shadowRadius: 3,
+      elevation: 2,
     },
     selectedCard: {
       borderColor: colors.primary,
+      shadowColor: colors.primary,
+      shadowOpacity: 0.3,
+      elevation: 3,
     },
     optionHeader: {
       flexDirection: 'row',
@@ -785,16 +821,27 @@ const LogoSourceSettings = () => {
     },
     languageItem: {
       paddingHorizontal: 12,
-      paddingVertical: 6,
+      paddingVertical: 8,
       backgroundColor: colors.elevation1,
       borderRadius: 16,
       marginRight: 8,
       borderWidth: 1,
       borderColor: colors.elevation3,
+      marginVertical: 2,
+      shadowColor: '#000',
+      shadowOffset: { width: 0, height: 1 },
+      shadowOpacity: 0.1,
+      shadowRadius: 1,
+      elevation: 1,
     },
     selectedLanguageItem: {
       backgroundColor: colors.primary,
       borderColor: colors.primary,
+      shadowColor: colors.primary,
+      shadowOffset: { width: 0, height: 2 },
+      shadowOpacity: 0.2,
+      shadowRadius: 2,
+      elevation: 2,
     },
     languageItemText: {
       color: colors.mediumEmphasis,