mirror of
https://github.com/tapframe/NuvioStreaming.git
synced 2026-04-21 00:32:04 +00:00
Refactor LogoSourceSettings to integrate theme context and enhance styling
Update the LogoSourceSettings component to utilize the new ThemeContext for dynamic theming, improving visual consistency. Refactor styles into a dedicated function to adapt to the current theme colors, enhancing the overall user experience. This change streamlines the component's layout and ensures a cohesive interface across different themes.
This commit is contained in:
tapframe
parent
ccff34016b
commit
12379b9e34
2 changed files with 279 additions and 271 deletions
|
|
@ -16,7 +16,7 @@ import { RouteProp } from '@react-navigation/native';
|
||||||
import { StackNavigationProp } from '@react-navigation/stack';
|
import { StackNavigationProp } from '@react-navigation/stack';
|
||||||
import { RootStackParamList } from '../navigation/AppNavigator';
|
import { RootStackParamList } from '../navigation/AppNavigator';
|
||||||
import { Meta, stremioService } from '../services/stremioService';
|
import { Meta, stremioService } from '../services/stremioService';
|
||||||
import { colors } from '../styles';
|
import { useTheme } from '../contexts/ThemeContext';
|
||||||
import { Image } from 'expo-image';
|
import { Image } from 'expo-image';
|
||||||
import { MaterialIcons } from '@expo/vector-icons';
|
import { MaterialIcons } from '@expo/vector-icons';
|
||||||
import { logger } from '../utils/logger';
|
import { logger } from '../utils/logger';
|
||||||
|
|
@ -45,6 +45,120 @@ const NUM_COLUMNS = 3;
|
||||||
const ITEM_MARGIN = SPACING.sm;
|
const ITEM_MARGIN = SPACING.sm;
|
||||||
const ITEM_WIDTH = (width - (SPACING.lg * 2) - (ITEM_MARGIN * 2 * NUM_COLUMNS)) / NUM_COLUMNS;
|
const ITEM_WIDTH = (width - (SPACING.lg * 2) - (ITEM_MARGIN * 2 * NUM_COLUMNS)) / NUM_COLUMNS;
|
||||||
|
|
||||||
|
// Create a styles creator function that accepts the theme colors
|
||||||
|
const createStyles = (colors: any) => StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: colors.darkBackground,
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
paddingTop: Platform.OS === 'android' ? ANDROID_STATUSBAR_HEIGHT + 8 : 8,
|
||||||
|
},
|
||||||
|
backButton: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
padding: 8,
|
||||||
|
},
|
||||||
|
backText: {
|
||||||
|
fontSize: 17,
|
||||||
|
fontWeight: '400',
|
||||||
|
color: colors.primary,
|
||||||
|
},
|
||||||
|
headerTitle: {
|
||||||
|
fontSize: 34,
|
||||||
|
fontWeight: '700',
|
||||||
|
color: colors.white,
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
paddingBottom: 16,
|
||||||
|
paddingTop: 8,
|
||||||
|
},
|
||||||
|
list: {
|
||||||
|
padding: SPACING.lg,
|
||||||
|
paddingTop: SPACING.sm,
|
||||||
|
},
|
||||||
|
columnWrapper: {
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
},
|
||||||
|
item: {
|
||||||
|
width: ITEM_WIDTH,
|
||||||
|
marginBottom: SPACING.lg,
|
||||||
|
borderRadius: 12,
|
||||||
|
overflow: 'hidden',
|
||||||
|
backgroundColor: colors.elevation2,
|
||||||
|
shadowColor: '#000',
|
||||||
|
shadowOffset: { width: 0, height: 2 },
|
||||||
|
shadowOpacity: 0.1,
|
||||||
|
shadowRadius: 4,
|
||||||
|
elevation: 2,
|
||||||
|
},
|
||||||
|
poster: {
|
||||||
|
width: '100%',
|
||||||
|
aspectRatio: 2/3,
|
||||||
|
borderTopLeftRadius: 12,
|
||||||
|
borderTopRightRadius: 12,
|
||||||
|
backgroundColor: colors.elevation3,
|
||||||
|
},
|
||||||
|
itemContent: {
|
||||||
|
padding: SPACING.sm,
|
||||||
|
},
|
||||||
|
title: {
|
||||||
|
fontSize: 14,
|
||||||
|
fontWeight: '600',
|
||||||
|
color: colors.white,
|
||||||
|
lineHeight: 18,
|
||||||
|
},
|
||||||
|
releaseInfo: {
|
||||||
|
fontSize: 12,
|
||||||
|
marginTop: SPACING.xs,
|
||||||
|
color: colors.mediumGray,
|
||||||
|
},
|
||||||
|
footer: {
|
||||||
|
padding: SPACING.lg,
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
button: {
|
||||||
|
marginTop: SPACING.md,
|
||||||
|
paddingVertical: SPACING.md,
|
||||||
|
paddingHorizontal: SPACING.xl,
|
||||||
|
backgroundColor: colors.primary,
|
||||||
|
borderRadius: 8,
|
||||||
|
elevation: 2,
|
||||||
|
},
|
||||||
|
buttonText: {
|
||||||
|
color: colors.white,
|
||||||
|
fontWeight: '600',
|
||||||
|
fontSize: 16,
|
||||||
|
},
|
||||||
|
centered: {
|
||||||
|
flex: 1,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
padding: SPACING.xl,
|
||||||
|
},
|
||||||
|
emptyText: {
|
||||||
|
color: colors.white,
|
||||||
|
fontSize: 16,
|
||||||
|
textAlign: 'center',
|
||||||
|
marginTop: SPACING.md,
|
||||||
|
marginBottom: SPACING.sm,
|
||||||
|
},
|
||||||
|
errorText: {
|
||||||
|
color: colors.white,
|
||||||
|
fontSize: 16,
|
||||||
|
textAlign: 'center',
|
||||||
|
marginTop: SPACING.md,
|
||||||
|
marginBottom: SPACING.sm,
|
||||||
|
},
|
||||||
|
loadingText: {
|
||||||
|
color: colors.white,
|
||||||
|
fontSize: 16,
|
||||||
|
marginTop: SPACING.lg,
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
const CatalogScreen: React.FC<CatalogScreenProps> = ({ route, navigation }) => {
|
const CatalogScreen: React.FC<CatalogScreenProps> = ({ route, navigation }) => {
|
||||||
const { addonId, type, id, name: originalName, genreFilter } = route.params;
|
const { addonId, type, id, name: originalName, genreFilter } = route.params;
|
||||||
const [items, setItems] = useState<Meta[]>([]);
|
const [items, setItems] = useState<Meta[]>([]);
|
||||||
|
|
@ -54,6 +168,9 @@ const CatalogScreen: React.FC<CatalogScreenProps> = ({ route, navigation }) => {
|
||||||
const [hasMore, setHasMore] = useState(true);
|
const [hasMore, setHasMore] = useState(true);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
const [dataSource, setDataSource] = useState<DataSource>(DataSource.STREMIO_ADDONS);
|
const [dataSource, setDataSource] = useState<DataSource>(DataSource.STREMIO_ADDONS);
|
||||||
|
const { currentTheme } = useTheme();
|
||||||
|
const colors = currentTheme.colors;
|
||||||
|
const styles = createStyles(colors);
|
||||||
const isDarkMode = true;
|
const isDarkMode = true;
|
||||||
|
|
||||||
const { getCustomName, isLoadingCustomNames } = useCustomCatalogNames();
|
const { getCustomName, isLoadingCustomNames } = useCustomCatalogNames();
|
||||||
|
|
@ -326,7 +443,7 @@ const CatalogScreen: React.FC<CatalogScreenProps> = ({ route, navigation }) => {
|
||||||
</View>
|
</View>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
);
|
);
|
||||||
}, [navigation]);
|
}, [navigation, styles]);
|
||||||
|
|
||||||
const renderEmptyState = () => (
|
const renderEmptyState = () => (
|
||||||
<View style={styles.centered}>
|
<View style={styles.centered}>
|
||||||
|
|
@ -451,117 +568,4 @@ const CatalogScreen: React.FC<CatalogScreenProps> = ({ route, navigation }) => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
flex: 1,
|
|
||||||
backgroundColor: colors.darkBackground,
|
|
||||||
},
|
|
||||||
header: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
paddingHorizontal: 16,
|
|
||||||
paddingTop: Platform.OS === 'android' ? ANDROID_STATUSBAR_HEIGHT + 8 : 8,
|
|
||||||
},
|
|
||||||
backButton: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
padding: 8,
|
|
||||||
},
|
|
||||||
backText: {
|
|
||||||
fontSize: 17,
|
|
||||||
fontWeight: '400',
|
|
||||||
color: colors.primary,
|
|
||||||
},
|
|
||||||
headerTitle: {
|
|
||||||
fontSize: 34,
|
|
||||||
fontWeight: '700',
|
|
||||||
color: colors.white,
|
|
||||||
paddingHorizontal: 16,
|
|
||||||
paddingBottom: 16,
|
|
||||||
paddingTop: 8,
|
|
||||||
},
|
|
||||||
list: {
|
|
||||||
padding: SPACING.lg,
|
|
||||||
paddingTop: SPACING.sm,
|
|
||||||
},
|
|
||||||
columnWrapper: {
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
},
|
|
||||||
item: {
|
|
||||||
width: ITEM_WIDTH,
|
|
||||||
marginBottom: SPACING.lg,
|
|
||||||
borderRadius: 12,
|
|
||||||
overflow: 'hidden',
|
|
||||||
backgroundColor: colors.elevation2,
|
|
||||||
shadowColor: '#000',
|
|
||||||
shadowOffset: { width: 0, height: 2 },
|
|
||||||
shadowOpacity: 0.1,
|
|
||||||
shadowRadius: 4,
|
|
||||||
elevation: 2,
|
|
||||||
},
|
|
||||||
poster: {
|
|
||||||
width: '100%',
|
|
||||||
aspectRatio: 2/3,
|
|
||||||
borderTopLeftRadius: 12,
|
|
||||||
borderTopRightRadius: 12,
|
|
||||||
backgroundColor: colors.elevation3,
|
|
||||||
},
|
|
||||||
itemContent: {
|
|
||||||
padding: SPACING.sm,
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
fontSize: 14,
|
|
||||||
fontWeight: '600',
|
|
||||||
color: colors.white,
|
|
||||||
lineHeight: 18,
|
|
||||||
},
|
|
||||||
releaseInfo: {
|
|
||||||
fontSize: 12,
|
|
||||||
marginTop: SPACING.xs,
|
|
||||||
color: colors.mediumGray,
|
|
||||||
},
|
|
||||||
footer: {
|
|
||||||
padding: SPACING.lg,
|
|
||||||
alignItems: 'center',
|
|
||||||
},
|
|
||||||
button: {
|
|
||||||
marginTop: SPACING.md,
|
|
||||||
paddingVertical: SPACING.md,
|
|
||||||
paddingHorizontal: SPACING.xl,
|
|
||||||
backgroundColor: colors.primary,
|
|
||||||
borderRadius: 8,
|
|
||||||
elevation: 2,
|
|
||||||
},
|
|
||||||
buttonText: {
|
|
||||||
color: colors.white,
|
|
||||||
fontWeight: '600',
|
|
||||||
fontSize: 16,
|
|
||||||
},
|
|
||||||
centered: {
|
|
||||||
flex: 1,
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
padding: SPACING.xl,
|
|
||||||
},
|
|
||||||
emptyText: {
|
|
||||||
color: colors.white,
|
|
||||||
fontSize: 16,
|
|
||||||
textAlign: 'center',
|
|
||||||
marginTop: SPACING.md,
|
|
||||||
marginBottom: SPACING.sm,
|
|
||||||
},
|
|
||||||
errorText: {
|
|
||||||
color: colors.white,
|
|
||||||
fontSize: 16,
|
|
||||||
textAlign: 'center',
|
|
||||||
marginTop: SPACING.md,
|
|
||||||
marginBottom: SPACING.sm,
|
|
||||||
},
|
|
||||||
loadingText: {
|
|
||||||
color: colors.white,
|
|
||||||
fontSize: 16,
|
|
||||||
marginTop: SPACING.lg,
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
export default CatalogScreen;
|
export default CatalogScreen;
|
||||||
|
|
@ -18,7 +18,7 @@ import {
|
||||||
} from 'react-native';
|
} from 'react-native';
|
||||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||||
import { useNavigation } from '@react-navigation/native';
|
import { useNavigation } from '@react-navigation/native';
|
||||||
import { colors } from '../styles';
|
import { useTheme } from '../contexts/ThemeContext';
|
||||||
import { stremioService } from '../services/stremioService';
|
import { stremioService } from '../services/stremioService';
|
||||||
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
|
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
|
||||||
import { useCatalogContext } from '../contexts/CatalogContext';
|
import { useCatalogContext } from '../contexts/CatalogContext';
|
||||||
|
|
@ -52,12 +52,171 @@ const CATALOG_SETTINGS_KEY = 'catalog_settings';
|
||||||
const CATALOG_CUSTOM_NAMES_KEY = 'catalog_custom_names';
|
const CATALOG_CUSTOM_NAMES_KEY = 'catalog_custom_names';
|
||||||
const ANDROID_STATUSBAR_HEIGHT = StatusBar.currentHeight || 0;
|
const ANDROID_STATUSBAR_HEIGHT = StatusBar.currentHeight || 0;
|
||||||
|
|
||||||
|
// Create a styles creator function that accepts the theme colors
|
||||||
|
const createStyles = (colors: any) => StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
flex: 1,
|
||||||
|
backgroundColor: colors.darkBackground,
|
||||||
|
},
|
||||||
|
loadingContainer: {
|
||||||
|
flex: 1,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
header: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
paddingTop: Platform.OS === 'android' ? ANDROID_STATUSBAR_HEIGHT + 8 : 8,
|
||||||
|
},
|
||||||
|
backButton: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
padding: 8,
|
||||||
|
},
|
||||||
|
backText: {
|
||||||
|
fontSize: 17,
|
||||||
|
fontWeight: '400',
|
||||||
|
color: colors.primary,
|
||||||
|
},
|
||||||
|
headerTitle: {
|
||||||
|
fontSize: 34,
|
||||||
|
fontWeight: '700',
|
||||||
|
color: colors.white,
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
paddingBottom: 16,
|
||||||
|
paddingTop: 8,
|
||||||
|
},
|
||||||
|
scrollView: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
scrollContent: {
|
||||||
|
paddingBottom: 32,
|
||||||
|
},
|
||||||
|
addonSection: {
|
||||||
|
marginBottom: 24,
|
||||||
|
},
|
||||||
|
addonTitle: {
|
||||||
|
fontSize: 13,
|
||||||
|
fontWeight: '600',
|
||||||
|
color: colors.mediumGray,
|
||||||
|
marginHorizontal: 16,
|
||||||
|
marginBottom: 8,
|
||||||
|
letterSpacing: 0.8,
|
||||||
|
},
|
||||||
|
card: {
|
||||||
|
marginHorizontal: 16,
|
||||||
|
borderRadius: 12,
|
||||||
|
overflow: 'hidden',
|
||||||
|
backgroundColor: colors.elevation2,
|
||||||
|
shadowColor: '#000',
|
||||||
|
shadowOffset: { width: 0, height: 2 },
|
||||||
|
shadowOpacity: 0.1,
|
||||||
|
shadowRadius: 4,
|
||||||
|
elevation: 2,
|
||||||
|
},
|
||||||
|
groupHeader: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingVertical: 12,
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
borderBottomWidth: 0.5,
|
||||||
|
borderBottomColor: 'rgba(255, 255, 255, 0.1)',
|
||||||
|
},
|
||||||
|
groupTitle: {
|
||||||
|
fontSize: 17,
|
||||||
|
fontWeight: '600',
|
||||||
|
color: colors.white,
|
||||||
|
},
|
||||||
|
groupHeaderRight: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
},
|
||||||
|
enabledCount: {
|
||||||
|
fontSize: 15,
|
||||||
|
color: colors.mediumGray,
|
||||||
|
marginRight: 8,
|
||||||
|
},
|
||||||
|
catalogItem: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingVertical: 12,
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
borderBottomWidth: 0.5,
|
||||||
|
borderBottomColor: 'rgba(255, 255, 255, 0.1)',
|
||||||
|
// Ensure last item doesn't have border if needed (check logic)
|
||||||
|
},
|
||||||
|
catalogItemPressed: {
|
||||||
|
backgroundColor: 'rgba(255, 255, 255, 0.05)', // Subtle feedback for press
|
||||||
|
},
|
||||||
|
catalogInfo: {
|
||||||
|
flex: 1,
|
||||||
|
marginRight: 8, // Add space before switch
|
||||||
|
},
|
||||||
|
catalogName: {
|
||||||
|
fontSize: 15,
|
||||||
|
color: colors.white,
|
||||||
|
marginBottom: 2,
|
||||||
|
},
|
||||||
|
catalogType: {
|
||||||
|
fontSize: 13,
|
||||||
|
color: colors.mediumGray,
|
||||||
|
},
|
||||||
|
|
||||||
|
// Modal Styles
|
||||||
|
modalOverlay: {
|
||||||
|
flex: 1,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
backgroundColor: 'rgba(0, 0, 0, 0.6)',
|
||||||
|
},
|
||||||
|
modalContent: {
|
||||||
|
backgroundColor: Platform.OS === 'ios' ? undefined : colors.elevation3,
|
||||||
|
borderRadius: 14,
|
||||||
|
padding: 20,
|
||||||
|
width: '85%',
|
||||||
|
shadowColor: '#000',
|
||||||
|
shadowOffset: { width: 0, height: 4 },
|
||||||
|
shadowOpacity: 0.3,
|
||||||
|
shadowRadius: 10,
|
||||||
|
elevation: 10,
|
||||||
|
overflow: 'hidden',
|
||||||
|
},
|
||||||
|
modalTitle: {
|
||||||
|
fontSize: 18,
|
||||||
|
fontWeight: '600',
|
||||||
|
color: colors.white,
|
||||||
|
marginBottom: 15,
|
||||||
|
textAlign: 'center',
|
||||||
|
},
|
||||||
|
modalInput: {
|
||||||
|
backgroundColor: colors.elevation1, // Darker input background
|
||||||
|
color: colors.white,
|
||||||
|
borderRadius: 8,
|
||||||
|
paddingHorizontal: 12,
|
||||||
|
paddingVertical: 10,
|
||||||
|
fontSize: 16,
|
||||||
|
marginBottom: 20,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
},
|
||||||
|
modalButtons: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'space-around', // Adjust as needed (e.g., 'flex-end')
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
const CatalogSettingsScreen = () => {
|
const CatalogSettingsScreen = () => {
|
||||||
const [loading, setLoading] = useState(true);
|
const [loading, setLoading] = useState(true);
|
||||||
const [settings, setSettings] = useState<CatalogSetting[]>([]);
|
const [settings, setSettings] = useState<CatalogSetting[]>([]);
|
||||||
const [groupedSettings, setGroupedSettings] = useState<GroupedCatalogs>({});
|
const [groupedSettings, setGroupedSettings] = useState<GroupedCatalogs>({});
|
||||||
const navigation = useNavigation();
|
const navigation = useNavigation();
|
||||||
const { refreshCatalogs } = useCatalogContext();
|
const { refreshCatalogs } = useCatalogContext();
|
||||||
|
const { currentTheme } = useTheme();
|
||||||
|
const colors = currentTheme.colors;
|
||||||
|
const styles = createStyles(colors);
|
||||||
const isDarkMode = true; // Force dark mode
|
const isDarkMode = true; // Force dark mode
|
||||||
|
|
||||||
// Modal State
|
// Modal State
|
||||||
|
|
@ -390,159 +549,4 @@ const CatalogSettingsScreen = () => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const styles = StyleSheet.create({
|
|
||||||
container: {
|
|
||||||
flex: 1,
|
|
||||||
backgroundColor: colors.darkBackground,
|
|
||||||
},
|
|
||||||
loadingContainer: {
|
|
||||||
flex: 1,
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
},
|
|
||||||
header: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
paddingHorizontal: 16,
|
|
||||||
paddingTop: Platform.OS === 'android' ? ANDROID_STATUSBAR_HEIGHT + 8 : 8,
|
|
||||||
},
|
|
||||||
backButton: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
padding: 8,
|
|
||||||
},
|
|
||||||
backText: {
|
|
||||||
fontSize: 17,
|
|
||||||
fontWeight: '400',
|
|
||||||
color: colors.primary,
|
|
||||||
},
|
|
||||||
headerTitle: {
|
|
||||||
fontSize: 34,
|
|
||||||
fontWeight: '700',
|
|
||||||
color: colors.white,
|
|
||||||
paddingHorizontal: 16,
|
|
||||||
paddingBottom: 16,
|
|
||||||
paddingTop: 8,
|
|
||||||
},
|
|
||||||
scrollView: {
|
|
||||||
flex: 1,
|
|
||||||
},
|
|
||||||
scrollContent: {
|
|
||||||
paddingBottom: 32,
|
|
||||||
},
|
|
||||||
addonSection: {
|
|
||||||
marginBottom: 24,
|
|
||||||
},
|
|
||||||
addonTitle: {
|
|
||||||
fontSize: 13,
|
|
||||||
fontWeight: '600',
|
|
||||||
color: colors.mediumGray,
|
|
||||||
marginHorizontal: 16,
|
|
||||||
marginBottom: 8,
|
|
||||||
letterSpacing: 0.8,
|
|
||||||
},
|
|
||||||
card: {
|
|
||||||
marginHorizontal: 16,
|
|
||||||
borderRadius: 12,
|
|
||||||
overflow: 'hidden',
|
|
||||||
backgroundColor: colors.elevation2,
|
|
||||||
shadowColor: '#000',
|
|
||||||
shadowOffset: { width: 0, height: 2 },
|
|
||||||
shadowOpacity: 0.1,
|
|
||||||
shadowRadius: 4,
|
|
||||||
elevation: 2,
|
|
||||||
},
|
|
||||||
groupHeader: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
paddingVertical: 12,
|
|
||||||
paddingHorizontal: 16,
|
|
||||||
borderBottomWidth: 0.5,
|
|
||||||
borderBottomColor: 'rgba(255, 255, 255, 0.1)',
|
|
||||||
},
|
|
||||||
groupTitle: {
|
|
||||||
fontSize: 17,
|
|
||||||
fontWeight: '600',
|
|
||||||
color: colors.white,
|
|
||||||
},
|
|
||||||
groupHeaderRight: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
},
|
|
||||||
enabledCount: {
|
|
||||||
fontSize: 15,
|
|
||||||
color: colors.mediumGray,
|
|
||||||
marginRight: 8,
|
|
||||||
},
|
|
||||||
catalogItem: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
alignItems: 'center',
|
|
||||||
paddingVertical: 12,
|
|
||||||
paddingHorizontal: 16,
|
|
||||||
borderBottomWidth: 0.5,
|
|
||||||
borderBottomColor: 'rgba(255, 255, 255, 0.1)',
|
|
||||||
// Ensure last item doesn't have border if needed (check logic)
|
|
||||||
},
|
|
||||||
catalogItemPressed: {
|
|
||||||
backgroundColor: 'rgba(255, 255, 255, 0.05)', // Subtle feedback for press
|
|
||||||
},
|
|
||||||
catalogInfo: {
|
|
||||||
flex: 1,
|
|
||||||
marginRight: 8, // Add space before switch
|
|
||||||
},
|
|
||||||
catalogName: {
|
|
||||||
fontSize: 15,
|
|
||||||
color: colors.white,
|
|
||||||
marginBottom: 2,
|
|
||||||
},
|
|
||||||
catalogType: {
|
|
||||||
fontSize: 13,
|
|
||||||
color: colors.mediumGray,
|
|
||||||
},
|
|
||||||
|
|
||||||
// Modal Styles
|
|
||||||
modalOverlay: {
|
|
||||||
flex: 1,
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
backgroundColor: 'rgba(0, 0, 0, 0.6)',
|
|
||||||
},
|
|
||||||
modalContent: {
|
|
||||||
backgroundColor: Platform.OS === 'ios' ? undefined : colors.elevation3,
|
|
||||||
borderRadius: 14,
|
|
||||||
padding: 20,
|
|
||||||
width: '85%',
|
|
||||||
shadowColor: '#000',
|
|
||||||
shadowOffset: { width: 0, height: 4 },
|
|
||||||
shadowOpacity: 0.3,
|
|
||||||
shadowRadius: 10,
|
|
||||||
elevation: 10,
|
|
||||||
overflow: 'hidden',
|
|
||||||
},
|
|
||||||
modalTitle: {
|
|
||||||
fontSize: 18,
|
|
||||||
fontWeight: '600',
|
|
||||||
color: colors.white,
|
|
||||||
marginBottom: 15,
|
|
||||||
textAlign: 'center',
|
|
||||||
},
|
|
||||||
modalInput: {
|
|
||||||
backgroundColor: colors.elevation1, // Darker input background
|
|
||||||
color: colors.white,
|
|
||||||
borderRadius: 8,
|
|
||||||
paddingHorizontal: 12,
|
|
||||||
paddingVertical: 10,
|
|
||||||
fontSize: 16,
|
|
||||||
marginBottom: 20,
|
|
||||||
borderWidth: 1,
|
|
||||||
borderColor: colors.border,
|
|
||||||
},
|
|
||||||
modalButtons: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
justifyContent: 'space-around', // Adjust as needed (e.g., 'flex-end')
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export default CatalogSettingsScreen;
|
export default CatalogSettingsScreen;
|
||||||
Loading…
Reference in a new issue