mirror of
https://github.com/tapframe/NuvioStreaming.git
synced 2026-04-20 16:22:04 +00:00
f
This commit is contained in:
tapframe
parent
76aa6d21fb
commit
ccff34016b
2 changed files with 322 additions and 309 deletions
|
|
@ -16,7 +16,7 @@ import { useSettings } from '../hooks/useSettings';
|
||||||
import { useNavigation } from '@react-navigation/native';
|
import { useNavigation } from '@react-navigation/native';
|
||||||
import { NavigationProp } from '@react-navigation/native';
|
import { NavigationProp } from '@react-navigation/native';
|
||||||
import { MaterialIcons } from '@expo/vector-icons';
|
import { MaterialIcons } from '@expo/vector-icons';
|
||||||
import { colors } from '../styles/colors';
|
import { useTheme } from '../contexts/ThemeContext';
|
||||||
import { RootStackParamList } from '../navigation/AppNavigator';
|
import { RootStackParamList } from '../navigation/AppNavigator';
|
||||||
|
|
||||||
const ANDROID_STATUSBAR_HEIGHT = StatusBar.currentHeight || 0;
|
const ANDROID_STATUSBAR_HEIGHT = StatusBar.currentHeight || 0;
|
||||||
|
|
@ -24,9 +24,10 @@ const ANDROID_STATUSBAR_HEIGHT = StatusBar.currentHeight || 0;
|
||||||
interface SettingsCardProps {
|
interface SettingsCardProps {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
isDarkMode: boolean;
|
isDarkMode: boolean;
|
||||||
|
colors: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
const SettingsCard: React.FC<SettingsCardProps> = ({ children, isDarkMode }) => (
|
const SettingsCard: React.FC<SettingsCardProps> = ({ children, isDarkMode, colors }) => (
|
||||||
<View style={[
|
<View style={[
|
||||||
styles.card,
|
styles.card,
|
||||||
{ backgroundColor: isDarkMode ? colors.elevation2 : colors.white }
|
{ backgroundColor: isDarkMode ? colors.elevation2 : colors.white }
|
||||||
|
|
@ -46,6 +47,7 @@ interface SettingItemProps {
|
||||||
isLast?: boolean;
|
isLast?: boolean;
|
||||||
onPress?: () => void;
|
onPress?: () => void;
|
||||||
isDarkMode: boolean;
|
isDarkMode: boolean;
|
||||||
|
colors: any;
|
||||||
}
|
}
|
||||||
|
|
||||||
const SettingItem: React.FC<SettingItemProps> = ({
|
const SettingItem: React.FC<SettingItemProps> = ({
|
||||||
|
|
@ -55,7 +57,8 @@ const SettingItem: React.FC<SettingItemProps> = ({
|
||||||
renderControl,
|
renderControl,
|
||||||
isLast = false,
|
isLast = false,
|
||||||
onPress,
|
onPress,
|
||||||
isDarkMode
|
isDarkMode,
|
||||||
|
colors
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
|
|
@ -89,7 +92,7 @@ const SettingItem: React.FC<SettingItemProps> = ({
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const SectionHeader: React.FC<{ title: string; isDarkMode: boolean }> = ({ title, isDarkMode }) => (
|
const SectionHeader: React.FC<{ title: string; isDarkMode: boolean; colors: any }> = ({ title, isDarkMode, colors }) => (
|
||||||
<View style={styles.sectionHeader}>
|
<View style={styles.sectionHeader}>
|
||||||
<Text style={[
|
<Text style={[
|
||||||
styles.sectionHeaderText,
|
styles.sectionHeaderText,
|
||||||
|
|
@ -103,6 +106,8 @@ const SectionHeader: React.FC<{ title: string; isDarkMode: boolean }> = ({ title
|
||||||
const HomeScreenSettings: React.FC = () => {
|
const HomeScreenSettings: React.FC = () => {
|
||||||
const { settings, updateSetting } = useSettings();
|
const { settings, updateSetting } = useSettings();
|
||||||
const systemColorScheme = useColorScheme();
|
const systemColorScheme = useColorScheme();
|
||||||
|
const { currentTheme } = useTheme();
|
||||||
|
const colors = currentTheme.colors;
|
||||||
const isDarkMode = systemColorScheme === 'dark' || settings.enableDarkMode;
|
const isDarkMode = systemColorScheme === 'dark' || settings.enableDarkMode;
|
||||||
const navigation = useNavigation<NavigationProp<RootStackParamList>>();
|
const navigation = useNavigation<NavigationProp<RootStackParamList>>();
|
||||||
const [showSavedIndicator, setShowSavedIndicator] = useState(false);
|
const [showSavedIndicator, setShowSavedIndicator] = useState(false);
|
||||||
|
|
@ -161,7 +166,7 @@ const HomeScreenSettings: React.FC = () => {
|
||||||
styles.radio,
|
styles.radio,
|
||||||
{ borderColor: isDarkMode ? colors.mediumEmphasis : colors.textMutedDark }
|
{ borderColor: isDarkMode ? colors.mediumEmphasis : colors.textMutedDark }
|
||||||
]}>
|
]}>
|
||||||
{selected && <View style={styles.radioInner} />}
|
{selected && <View style={[styles.radioInner, { backgroundColor: colors.primary }]} />}
|
||||||
</View>
|
</View>
|
||||||
<Text style={[
|
<Text style={[
|
||||||
styles.radioLabel,
|
styles.radioLabel,
|
||||||
|
|
@ -229,13 +234,14 @@ const HomeScreenSettings: React.FC = () => {
|
||||||
showsVerticalScrollIndicator={false}
|
showsVerticalScrollIndicator={false}
|
||||||
contentContainerStyle={styles.scrollContent}
|
contentContainerStyle={styles.scrollContent}
|
||||||
>
|
>
|
||||||
<SectionHeader title="DISPLAY OPTIONS" isDarkMode={isDarkMode} />
|
<SectionHeader title="DISPLAY OPTIONS" isDarkMode={isDarkMode} colors={colors} />
|
||||||
<SettingsCard isDarkMode={isDarkMode}>
|
<SettingsCard isDarkMode={isDarkMode} colors={colors}>
|
||||||
<SettingItem
|
<SettingItem
|
||||||
title="Show Hero Section"
|
title="Show Hero Section"
|
||||||
description="Featured content at the top"
|
description="Featured content at the top"
|
||||||
icon="movie-filter"
|
icon="movie-filter"
|
||||||
isDarkMode={isDarkMode}
|
isDarkMode={isDarkMode}
|
||||||
|
colors={colors}
|
||||||
renderControl={() => (
|
renderControl={() => (
|
||||||
<CustomSwitch
|
<CustomSwitch
|
||||||
value={settings.showHeroSection}
|
value={settings.showHeroSection}
|
||||||
|
|
@ -248,6 +254,7 @@ const HomeScreenSettings: React.FC = () => {
|
||||||
description={settings.featuredContentSource === 'tmdb' ? 'TMDB Trending' : 'From Catalogs'}
|
description={settings.featuredContentSource === 'tmdb' ? 'TMDB Trending' : 'From Catalogs'}
|
||||||
icon="settings-input-component"
|
icon="settings-input-component"
|
||||||
isDarkMode={isDarkMode}
|
isDarkMode={isDarkMode}
|
||||||
|
colors={colors}
|
||||||
renderControl={() => <View />}
|
renderControl={() => <View />}
|
||||||
isLast={!settings.showHeroSection || settings.featuredContentSource !== 'catalogs'}
|
isLast={!settings.showHeroSection || settings.featuredContentSource !== 'catalogs'}
|
||||||
/>
|
/>
|
||||||
|
|
@ -257,6 +264,7 @@ const HomeScreenSettings: React.FC = () => {
|
||||||
description={getSelectedCatalogsText()}
|
description={getSelectedCatalogsText()}
|
||||||
icon="list"
|
icon="list"
|
||||||
isDarkMode={isDarkMode}
|
isDarkMode={isDarkMode}
|
||||||
|
colors={colors}
|
||||||
renderControl={ChevronRight}
|
renderControl={ChevronRight}
|
||||||
onPress={() => navigation.navigate('HeroCatalogs')}
|
onPress={() => navigation.navigate('HeroCatalogs')}
|
||||||
isLast={true}
|
isLast={true}
|
||||||
|
|
@ -300,7 +308,7 @@ const HomeScreenSettings: React.FC = () => {
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<SectionHeader title="ABOUT THESE SETTINGS" isDarkMode={isDarkMode} />
|
<SectionHeader title="ABOUT THESE SETTINGS" isDarkMode={isDarkMode} colors={colors} />
|
||||||
<View style={[styles.infoCard, { backgroundColor: isDarkMode ? colors.elevation1 : 'rgba(0,0,0,0.03)' }]}>
|
<View style={[styles.infoCard, { backgroundColor: isDarkMode ? colors.elevation1 : 'rgba(0,0,0,0.03)' }]}>
|
||||||
<Text style={[styles.infoText, { color: isDarkMode ? colors.mediumEmphasis : colors.textMutedDark }]}>
|
<Text style={[styles.infoText, { color: isDarkMode ? colors.mediumEmphasis : colors.textMutedDark }]}>
|
||||||
These settings control how content is displayed on your Home screen. Changes are applied immediately without requiring an app restart.
|
These settings control how content is displayed on your Home screen. Changes are applied immediately without requiring an app restart.
|
||||||
|
|
@ -401,7 +409,7 @@ const styles = StyleSheet.create({
|
||||||
marginHorizontal: 16,
|
marginHorizontal: 16,
|
||||||
marginVertical: 8,
|
marginVertical: 8,
|
||||||
borderRadius: 12,
|
borderRadius: 12,
|
||||||
backgroundColor: colors.elevation1,
|
backgroundColor: 'rgba(255,255,255,0.05)',
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
},
|
},
|
||||||
radioOption: {
|
radioOption: {
|
||||||
|
|
@ -424,7 +432,6 @@ const styles = StyleSheet.create({
|
||||||
width: 10,
|
width: 10,
|
||||||
height: 10,
|
height: 10,
|
||||||
borderRadius: 5,
|
borderRadius: 5,
|
||||||
backgroundColor: colors.primary,
|
|
||||||
},
|
},
|
||||||
radioLabel: {
|
radioLabel: {
|
||||||
fontSize: 16,
|
fontSize: 16,
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@ import {
|
||||||
import { useNavigation } from '@react-navigation/native';
|
import { useNavigation } from '@react-navigation/native';
|
||||||
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
|
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
|
||||||
import AsyncStorage from '@react-native-async-storage/async-storage';
|
import AsyncStorage from '@react-native-async-storage/async-storage';
|
||||||
import { colors } from '../styles/colors';
|
import { useTheme } from '../contexts/ThemeContext';
|
||||||
import { logger } from '../utils/logger';
|
import { logger } from '../utils/logger';
|
||||||
import { RATING_PROVIDERS } from '../components/metadata/RatingsSection';
|
import { RATING_PROVIDERS } from '../components/metadata/RatingsSection';
|
||||||
|
|
||||||
|
|
@ -55,8 +55,312 @@ export const getMDBListAPIKey = async (): Promise<string | null> => {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// 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',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
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,
|
||||||
|
marginLeft: 0,
|
||||||
|
},
|
||||||
|
headerTitle: {
|
||||||
|
fontSize: 34,
|
||||||
|
fontWeight: '700',
|
||||||
|
color: colors.white,
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
paddingBottom: 16,
|
||||||
|
paddingTop: 8,
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
scrollContent: {
|
||||||
|
paddingHorizontal: 12,
|
||||||
|
paddingTop: 10,
|
||||||
|
paddingBottom: 20,
|
||||||
|
},
|
||||||
|
loadingContainer: {
|
||||||
|
flex: 1,
|
||||||
|
justifyContent: 'center',
|
||||||
|
alignItems: 'center',
|
||||||
|
backgroundColor: colors.darkBackground,
|
||||||
|
},
|
||||||
|
loadingText: {
|
||||||
|
marginTop: 12,
|
||||||
|
fontSize: 15,
|
||||||
|
color: colors.mediumGray,
|
||||||
|
},
|
||||||
|
card: {
|
||||||
|
backgroundColor: colors.elevation2,
|
||||||
|
borderRadius: 10,
|
||||||
|
padding: 12,
|
||||||
|
marginBottom: 16,
|
||||||
|
},
|
||||||
|
statusCard: {
|
||||||
|
backgroundColor: colors.elevation1,
|
||||||
|
borderRadius: 10,
|
||||||
|
paddingVertical: 12,
|
||||||
|
paddingHorizontal: 16,
|
||||||
|
marginBottom: 16,
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
},
|
||||||
|
infoCard: {
|
||||||
|
backgroundColor: colors.elevation1,
|
||||||
|
borderRadius: 10,
|
||||||
|
padding: 12,
|
||||||
|
},
|
||||||
|
statusIcon: {
|
||||||
|
marginRight: 12,
|
||||||
|
},
|
||||||
|
statusTextContainer: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
statusTitle: {
|
||||||
|
fontSize: 16,
|
||||||
|
fontWeight: '600',
|
||||||
|
color: colors.white,
|
||||||
|
marginBottom: 2,
|
||||||
|
},
|
||||||
|
statusDescription: {
|
||||||
|
fontSize: 13,
|
||||||
|
color: colors.mediumGray,
|
||||||
|
lineHeight: 18,
|
||||||
|
},
|
||||||
|
sectionTitle: {
|
||||||
|
fontSize: 15,
|
||||||
|
fontWeight: '600',
|
||||||
|
color: colors.lightGray,
|
||||||
|
marginBottom: 10,
|
||||||
|
},
|
||||||
|
inputWrapper: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
backgroundColor: colors.elevation2,
|
||||||
|
borderRadius: 8,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.border,
|
||||||
|
},
|
||||||
|
input: {
|
||||||
|
flex: 1,
|
||||||
|
paddingVertical: 10,
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
color: colors.white,
|
||||||
|
fontSize: 15,
|
||||||
|
},
|
||||||
|
inputFocused: {
|
||||||
|
borderColor: colors.primary,
|
||||||
|
},
|
||||||
|
pasteButton: {
|
||||||
|
padding: 8,
|
||||||
|
marginRight: 2,
|
||||||
|
},
|
||||||
|
testResultContainer: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
paddingVertical: 8,
|
||||||
|
paddingHorizontal: 10,
|
||||||
|
borderRadius: 6,
|
||||||
|
marginTop: 10,
|
||||||
|
borderWidth: 1,
|
||||||
|
},
|
||||||
|
testResultSuccess: {
|
||||||
|
backgroundColor: colors.success + '15',
|
||||||
|
borderColor: colors.success + '40',
|
||||||
|
},
|
||||||
|
testResultError: {
|
||||||
|
backgroundColor: colors.error + '15',
|
||||||
|
borderColor: colors.error + '40',
|
||||||
|
},
|
||||||
|
testResultText: {
|
||||||
|
marginLeft: 8,
|
||||||
|
fontSize: 13,
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
buttonContainer: {
|
||||||
|
marginTop: 12,
|
||||||
|
gap: 10,
|
||||||
|
},
|
||||||
|
buttonIcon: {
|
||||||
|
marginRight: 6,
|
||||||
|
},
|
||||||
|
saveButton: {
|
||||||
|
backgroundColor: colors.primary,
|
||||||
|
borderRadius: 8,
|
||||||
|
paddingVertical: 12,
|
||||||
|
paddingHorizontal: 12,
|
||||||
|
alignItems: 'center',
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
saveButtonDisabled: {
|
||||||
|
backgroundColor: colors.elevation2,
|
||||||
|
opacity: 0.8,
|
||||||
|
},
|
||||||
|
saveButtonText: {
|
||||||
|
color: colors.white,
|
||||||
|
fontSize: 15,
|
||||||
|
fontWeight: '600',
|
||||||
|
},
|
||||||
|
clearButton: {
|
||||||
|
backgroundColor: 'transparent',
|
||||||
|
borderRadius: 8,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: colors.error + '40',
|
||||||
|
paddingVertical: 12,
|
||||||
|
paddingHorizontal: 12,
|
||||||
|
alignItems: 'center',
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'center',
|
||||||
|
},
|
||||||
|
clearButtonDisabled: {
|
||||||
|
borderColor: colors.border,
|
||||||
|
},
|
||||||
|
clearButtonText: {
|
||||||
|
color: colors.error,
|
||||||
|
fontSize: 15,
|
||||||
|
fontWeight: '600',
|
||||||
|
},
|
||||||
|
clearButtonTextDisabled: {
|
||||||
|
color: colors.darkGray,
|
||||||
|
},
|
||||||
|
infoHeader: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
marginBottom: 10,
|
||||||
|
},
|
||||||
|
infoHeaderText: {
|
||||||
|
fontSize: 15,
|
||||||
|
fontWeight: '600',
|
||||||
|
color: colors.white,
|
||||||
|
marginLeft: 8,
|
||||||
|
},
|
||||||
|
infoSteps: {
|
||||||
|
marginBottom: 12,
|
||||||
|
gap: 6,
|
||||||
|
},
|
||||||
|
infoStep: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'flex-start',
|
||||||
|
},
|
||||||
|
infoStepNumber: {
|
||||||
|
fontSize: 13,
|
||||||
|
color: colors.mediumGray,
|
||||||
|
width: 20,
|
||||||
|
},
|
||||||
|
infoStepText: {
|
||||||
|
color: colors.mediumGray,
|
||||||
|
fontSize: 13,
|
||||||
|
flex: 1,
|
||||||
|
lineHeight: 18,
|
||||||
|
},
|
||||||
|
boldText: {
|
||||||
|
fontWeight: '600',
|
||||||
|
color: colors.lightGray,
|
||||||
|
},
|
||||||
|
websiteButton: {
|
||||||
|
backgroundColor: colors.primary + '20',
|
||||||
|
borderRadius: 8,
|
||||||
|
paddingVertical: 12,
|
||||||
|
paddingHorizontal: 12,
|
||||||
|
alignItems: 'center',
|
||||||
|
flexDirection: 'row',
|
||||||
|
justifyContent: 'center',
|
||||||
|
marginTop: 12,
|
||||||
|
},
|
||||||
|
websiteButtonText: {
|
||||||
|
color: colors.primary,
|
||||||
|
fontSize: 15,
|
||||||
|
fontWeight: '600',
|
||||||
|
},
|
||||||
|
websiteButtonDisabled: {
|
||||||
|
backgroundColor: colors.elevation1,
|
||||||
|
},
|
||||||
|
websiteButtonTextDisabled: {
|
||||||
|
color: colors.darkGray,
|
||||||
|
},
|
||||||
|
sectionDescription: {
|
||||||
|
fontSize: 13,
|
||||||
|
color: colors.mediumGray,
|
||||||
|
marginBottom: 12,
|
||||||
|
},
|
||||||
|
providerItem: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
paddingVertical: 12,
|
||||||
|
borderBottomWidth: 1,
|
||||||
|
borderBottomColor: colors.border,
|
||||||
|
},
|
||||||
|
providerInfo: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
providerName: {
|
||||||
|
fontSize: 15,
|
||||||
|
color: colors.white,
|
||||||
|
fontWeight: '500',
|
||||||
|
},
|
||||||
|
masterToggleContainer: {
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
paddingVertical: 4,
|
||||||
|
},
|
||||||
|
masterToggleInfo: {
|
||||||
|
flex: 1,
|
||||||
|
},
|
||||||
|
masterToggleTitle: {
|
||||||
|
fontSize: 15,
|
||||||
|
color: colors.white,
|
||||||
|
fontWeight: '600',
|
||||||
|
},
|
||||||
|
masterToggleDescription: {
|
||||||
|
fontSize: 13,
|
||||||
|
color: colors.mediumGray,
|
||||||
|
marginTop: 2,
|
||||||
|
},
|
||||||
|
disabledCard: {
|
||||||
|
opacity: 0.7,
|
||||||
|
},
|
||||||
|
disabledInput: {
|
||||||
|
borderColor: colors.border,
|
||||||
|
backgroundColor: colors.elevation1,
|
||||||
|
},
|
||||||
|
disabledText: {
|
||||||
|
color: colors.darkGray,
|
||||||
|
},
|
||||||
|
disabledBoldText: {
|
||||||
|
color: colors.darkGray,
|
||||||
|
},
|
||||||
|
darkGray: {
|
||||||
|
color: colors.darkGray || '#555555',
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
const MDBListSettingsScreen = () => {
|
const MDBListSettingsScreen = () => {
|
||||||
const navigation = useNavigation();
|
const navigation = useNavigation();
|
||||||
|
const { currentTheme } = useTheme();
|
||||||
|
const colors = currentTheme.colors;
|
||||||
|
const styles = createStyles(colors);
|
||||||
|
|
||||||
const [apiKey, setApiKey] = useState('');
|
const [apiKey, setApiKey] = useState('');
|
||||||
const [isLoading, setIsLoading] = useState(true);
|
const [isLoading, setIsLoading] = useState(true);
|
||||||
const [isKeySet, setIsKeySet] = useState(false);
|
const [isKeySet, setIsKeySet] = useState(false);
|
||||||
|
|
@ -523,302 +827,4 @@ const MDBListSettingsScreen = () => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
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,
|
|
||||||
marginLeft: 0,
|
|
||||||
},
|
|
||||||
headerTitle: {
|
|
||||||
fontSize: 34,
|
|
||||||
fontWeight: '700',
|
|
||||||
color: colors.white,
|
|
||||||
paddingHorizontal: 16,
|
|
||||||
paddingBottom: 16,
|
|
||||||
paddingTop: 8,
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
flex: 1,
|
|
||||||
},
|
|
||||||
scrollContent: {
|
|
||||||
paddingHorizontal: 12,
|
|
||||||
paddingTop: 10,
|
|
||||||
paddingBottom: 20,
|
|
||||||
},
|
|
||||||
loadingContainer: {
|
|
||||||
flex: 1,
|
|
||||||
justifyContent: 'center',
|
|
||||||
alignItems: 'center',
|
|
||||||
backgroundColor: colors.darkBackground,
|
|
||||||
},
|
|
||||||
loadingText: {
|
|
||||||
marginTop: 12,
|
|
||||||
fontSize: 15,
|
|
||||||
color: colors.mediumGray,
|
|
||||||
},
|
|
||||||
card: {
|
|
||||||
backgroundColor: colors.elevation2,
|
|
||||||
borderRadius: 10,
|
|
||||||
padding: 12,
|
|
||||||
marginBottom: 16,
|
|
||||||
},
|
|
||||||
statusCard: {
|
|
||||||
backgroundColor: colors.elevation1,
|
|
||||||
borderRadius: 10,
|
|
||||||
paddingVertical: 12,
|
|
||||||
paddingHorizontal: 16,
|
|
||||||
marginBottom: 16,
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
borderWidth: 1,
|
|
||||||
borderColor: colors.border,
|
|
||||||
},
|
|
||||||
infoCard: {
|
|
||||||
backgroundColor: colors.elevation1,
|
|
||||||
borderRadius: 10,
|
|
||||||
padding: 12,
|
|
||||||
},
|
|
||||||
statusIcon: {
|
|
||||||
marginRight: 12,
|
|
||||||
},
|
|
||||||
statusTextContainer: {
|
|
||||||
flex: 1,
|
|
||||||
},
|
|
||||||
statusTitle: {
|
|
||||||
fontSize: 16,
|
|
||||||
fontWeight: '600',
|
|
||||||
color: colors.white,
|
|
||||||
marginBottom: 2,
|
|
||||||
},
|
|
||||||
statusDescription: {
|
|
||||||
fontSize: 13,
|
|
||||||
color: colors.mediumGray,
|
|
||||||
lineHeight: 18,
|
|
||||||
},
|
|
||||||
sectionTitle: {
|
|
||||||
fontSize: 15,
|
|
||||||
fontWeight: '600',
|
|
||||||
color: colors.lightGray,
|
|
||||||
marginBottom: 10,
|
|
||||||
},
|
|
||||||
inputWrapper: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
backgroundColor: colors.elevation2,
|
|
||||||
borderRadius: 8,
|
|
||||||
borderWidth: 1,
|
|
||||||
borderColor: colors.border,
|
|
||||||
},
|
|
||||||
input: {
|
|
||||||
flex: 1,
|
|
||||||
paddingVertical: 10,
|
|
||||||
paddingHorizontal: 10,
|
|
||||||
color: colors.white,
|
|
||||||
fontSize: 15,
|
|
||||||
},
|
|
||||||
inputFocused: {
|
|
||||||
borderColor: colors.primary,
|
|
||||||
},
|
|
||||||
pasteButton: {
|
|
||||||
padding: 8,
|
|
||||||
marginRight: 2,
|
|
||||||
},
|
|
||||||
testResultContainer: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
paddingVertical: 8,
|
|
||||||
paddingHorizontal: 10,
|
|
||||||
borderRadius: 6,
|
|
||||||
marginTop: 10,
|
|
||||||
borderWidth: 1,
|
|
||||||
},
|
|
||||||
testResultSuccess: {
|
|
||||||
backgroundColor: colors.success + '15',
|
|
||||||
borderColor: colors.success + '40',
|
|
||||||
},
|
|
||||||
testResultError: {
|
|
||||||
backgroundColor: colors.error + '15',
|
|
||||||
borderColor: colors.error + '40',
|
|
||||||
},
|
|
||||||
testResultText: {
|
|
||||||
marginLeft: 8,
|
|
||||||
fontSize: 13,
|
|
||||||
flex: 1,
|
|
||||||
},
|
|
||||||
buttonContainer: {
|
|
||||||
marginTop: 12,
|
|
||||||
gap: 10,
|
|
||||||
},
|
|
||||||
buttonIcon: {
|
|
||||||
marginRight: 6,
|
|
||||||
},
|
|
||||||
saveButton: {
|
|
||||||
backgroundColor: colors.primary,
|
|
||||||
borderRadius: 8,
|
|
||||||
paddingVertical: 12,
|
|
||||||
paddingHorizontal: 12,
|
|
||||||
alignItems: 'center',
|
|
||||||
flexDirection: 'row',
|
|
||||||
justifyContent: 'center',
|
|
||||||
},
|
|
||||||
saveButtonDisabled: {
|
|
||||||
backgroundColor: colors.elevation2,
|
|
||||||
opacity: 0.8,
|
|
||||||
},
|
|
||||||
saveButtonText: {
|
|
||||||
color: colors.white,
|
|
||||||
fontSize: 15,
|
|
||||||
fontWeight: '600',
|
|
||||||
},
|
|
||||||
clearButton: {
|
|
||||||
backgroundColor: 'transparent',
|
|
||||||
borderRadius: 8,
|
|
||||||
borderWidth: 1,
|
|
||||||
borderColor: colors.error + '40',
|
|
||||||
paddingVertical: 12,
|
|
||||||
paddingHorizontal: 12,
|
|
||||||
alignItems: 'center',
|
|
||||||
flexDirection: 'row',
|
|
||||||
justifyContent: 'center',
|
|
||||||
},
|
|
||||||
clearButtonDisabled: {
|
|
||||||
borderColor: colors.border,
|
|
||||||
},
|
|
||||||
clearButtonText: {
|
|
||||||
color: colors.error,
|
|
||||||
fontSize: 15,
|
|
||||||
fontWeight: '600',
|
|
||||||
},
|
|
||||||
clearButtonTextDisabled: {
|
|
||||||
color: colors.darkGray,
|
|
||||||
},
|
|
||||||
infoHeader: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
marginBottom: 10,
|
|
||||||
},
|
|
||||||
infoHeaderText: {
|
|
||||||
fontSize: 15,
|
|
||||||
fontWeight: '600',
|
|
||||||
color: colors.white,
|
|
||||||
marginLeft: 8,
|
|
||||||
},
|
|
||||||
infoSteps: {
|
|
||||||
marginBottom: 12,
|
|
||||||
gap: 6,
|
|
||||||
},
|
|
||||||
infoStep: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'flex-start',
|
|
||||||
},
|
|
||||||
infoStepNumber: {
|
|
||||||
fontSize: 13,
|
|
||||||
color: colors.mediumGray,
|
|
||||||
width: 20,
|
|
||||||
},
|
|
||||||
infoStepText: {
|
|
||||||
color: colors.mediumGray,
|
|
||||||
fontSize: 13,
|
|
||||||
flex: 1,
|
|
||||||
lineHeight: 18,
|
|
||||||
},
|
|
||||||
boldText: {
|
|
||||||
fontWeight: '600',
|
|
||||||
color: colors.lightGray,
|
|
||||||
},
|
|
||||||
websiteButton: {
|
|
||||||
backgroundColor: colors.primary + '20',
|
|
||||||
borderRadius: 8,
|
|
||||||
paddingVertical: 12,
|
|
||||||
paddingHorizontal: 12,
|
|
||||||
alignItems: 'center',
|
|
||||||
flexDirection: 'row',
|
|
||||||
justifyContent: 'center',
|
|
||||||
marginTop: 12,
|
|
||||||
},
|
|
||||||
websiteButtonText: {
|
|
||||||
color: colors.primary,
|
|
||||||
fontSize: 15,
|
|
||||||
fontWeight: '600',
|
|
||||||
},
|
|
||||||
websiteButtonDisabled: {
|
|
||||||
backgroundColor: colors.elevation1,
|
|
||||||
},
|
|
||||||
websiteButtonTextDisabled: {
|
|
||||||
color: colors.darkGray,
|
|
||||||
},
|
|
||||||
sectionDescription: {
|
|
||||||
fontSize: 13,
|
|
||||||
color: colors.mediumGray,
|
|
||||||
marginBottom: 12,
|
|
||||||
},
|
|
||||||
providerItem: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
paddingVertical: 12,
|
|
||||||
borderBottomWidth: 1,
|
|
||||||
borderBottomColor: colors.border,
|
|
||||||
},
|
|
||||||
providerInfo: {
|
|
||||||
flex: 1,
|
|
||||||
},
|
|
||||||
providerName: {
|
|
||||||
fontSize: 15,
|
|
||||||
color: colors.white,
|
|
||||||
fontWeight: '500',
|
|
||||||
},
|
|
||||||
masterToggleContainer: {
|
|
||||||
flexDirection: 'row',
|
|
||||||
alignItems: 'center',
|
|
||||||
justifyContent: 'space-between',
|
|
||||||
paddingVertical: 4,
|
|
||||||
},
|
|
||||||
masterToggleInfo: {
|
|
||||||
flex: 1,
|
|
||||||
},
|
|
||||||
masterToggleTitle: {
|
|
||||||
fontSize: 15,
|
|
||||||
color: colors.white,
|
|
||||||
fontWeight: '600',
|
|
||||||
},
|
|
||||||
masterToggleDescription: {
|
|
||||||
fontSize: 13,
|
|
||||||
color: colors.mediumGray,
|
|
||||||
marginTop: 2,
|
|
||||||
},
|
|
||||||
disabledCard: {
|
|
||||||
opacity: 0.7,
|
|
||||||
},
|
|
||||||
disabledInput: {
|
|
||||||
borderColor: colors.border,
|
|
||||||
backgroundColor: colors.elevation1,
|
|
||||||
},
|
|
||||||
disabledText: {
|
|
||||||
color: colors.darkGray,
|
|
||||||
},
|
|
||||||
disabledBoldText: {
|
|
||||||
color: colors.darkGray,
|
|
||||||
},
|
|
||||||
darkGray: {
|
|
||||||
color: colors.darkGray || '#555555',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
export default MDBListSettingsScreen;
|
export default MDBListSettingsScreen;
|
||||||
Loading…
Reference in a new issue