mirror of
https://github.com/tapframe/NuvioStreaming.git
synced 2026-04-20 16:22:04 +00:00
settingscreen UI changes
This commit is contained in:
tapframe
parent
3801e80dd9
commit
e160bf6fe0
1 changed files with 188 additions and 131 deletions
|
|
@ -86,7 +86,11 @@ const SettingsCard: React.FC<SettingsCardProps> = ({ children, title, isTablet =
|
||||||
)}
|
)}
|
||||||
<View style={[
|
<View style={[
|
||||||
styles.card,
|
styles.card,
|
||||||
{ backgroundColor: currentTheme.colors.elevation1 },
|
{
|
||||||
|
backgroundColor: currentTheme.colors.elevation1,
|
||||||
|
borderWidth: 1,
|
||||||
|
borderColor: currentTheme.colors.elevation2,
|
||||||
|
},
|
||||||
isTablet && styles.tabletCard
|
isTablet && styles.tabletCard
|
||||||
]}>
|
]}>
|
||||||
{children}
|
{children}
|
||||||
|
|
@ -134,9 +138,7 @@ const SettingItem: React.FC<SettingItemProps> = ({
|
||||||
<View style={[
|
<View style={[
|
||||||
styles.settingIconContainer,
|
styles.settingIconContainer,
|
||||||
{
|
{
|
||||||
backgroundColor: currentTheme.colors.darkGray,
|
backgroundColor: currentTheme.colors.primary + '12',
|
||||||
borderWidth: 1,
|
|
||||||
borderColor: currentTheme.colors.primary + '20'
|
|
||||||
},
|
},
|
||||||
isTablet && styles.tabletSettingIconContainer
|
isTablet && styles.tabletSettingIconContainer
|
||||||
]}>
|
]}>
|
||||||
|
|
@ -145,7 +147,7 @@ const SettingItem: React.FC<SettingItemProps> = ({
|
||||||
) : (
|
) : (
|
||||||
<Feather
|
<Feather
|
||||||
name={icon! as any}
|
name={icon! as any}
|
||||||
size={isTablet ? 24 : 20}
|
size={isTablet ? 22 : 18}
|
||||||
color={currentTheme.colors.primary}
|
color={currentTheme.colors.primary}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
|
@ -195,11 +197,18 @@ interface SidebarProps {
|
||||||
|
|
||||||
const Sidebar: React.FC<SidebarProps> = ({ selectedCategory, onCategorySelect, currentTheme, categories, extraTopPadding = 0 }) => {
|
const Sidebar: React.FC<SidebarProps> = ({ selectedCategory, onCategorySelect, currentTheme, categories, extraTopPadding = 0 }) => {
|
||||||
return (
|
return (
|
||||||
<View style={[styles.sidebar, { backgroundColor: currentTheme.colors.elevation1 }]}>
|
<View style={[
|
||||||
|
styles.sidebar,
|
||||||
|
{
|
||||||
|
backgroundColor: currentTheme.colors.elevation1,
|
||||||
|
borderRightColor: currentTheme.colors.elevation2,
|
||||||
|
}
|
||||||
|
]}>
|
||||||
<View style={[
|
<View style={[
|
||||||
styles.sidebarHeader,
|
styles.sidebarHeader,
|
||||||
{
|
{
|
||||||
paddingTop: (Platform.OS === 'android' ? (StatusBar.currentHeight || 0) + 24 : 48) + extraTopPadding,
|
paddingTop: (Platform.OS === 'android' ? (StatusBar.currentHeight || 0) + 24 : 48) + extraTopPadding,
|
||||||
|
borderBottomColor: currentTheme.colors.elevation2,
|
||||||
}
|
}
|
||||||
]}>
|
]}>
|
||||||
<Text style={[styles.sidebarTitle, { color: currentTheme.colors.highEmphasis }]}>
|
<Text style={[styles.sidebarTitle, { color: currentTheme.colors.highEmphasis }]}>
|
||||||
|
|
@ -215,26 +224,37 @@ const Sidebar: React.FC<SidebarProps> = ({ selectedCategory, onCategorySelect, c
|
||||||
styles.sidebarItem,
|
styles.sidebarItem,
|
||||||
selectedCategory === category.id && [
|
selectedCategory === category.id && [
|
||||||
styles.sidebarItemActive,
|
styles.sidebarItemActive,
|
||||||
{ backgroundColor: `${currentTheme.colors.primary}15` }
|
{ backgroundColor: currentTheme.colors.primary + '10' }
|
||||||
]
|
]
|
||||||
]}
|
]}
|
||||||
onPress={() => onCategorySelect(category.id)}
|
onPress={() => onCategorySelect(category.id)}
|
||||||
|
activeOpacity={0.6}
|
||||||
>
|
>
|
||||||
<Feather
|
<View style={[
|
||||||
name={category.icon as any}
|
styles.sidebarItemIconContainer,
|
||||||
size={22}
|
{
|
||||||
color={
|
backgroundColor: selectedCategory === category.id
|
||||||
selectedCategory === category.id
|
? currentTheme.colors.primary + '15'
|
||||||
? currentTheme.colors.primary
|
: 'transparent',
|
||||||
: currentTheme.colors.mediumEmphasis
|
|
||||||
}
|
}
|
||||||
/>
|
]}>
|
||||||
|
<Feather
|
||||||
|
name={category.icon as any}
|
||||||
|
size={20}
|
||||||
|
color={
|
||||||
|
selectedCategory === category.id
|
||||||
|
? currentTheme.colors.primary
|
||||||
|
: currentTheme.colors.mediumEmphasis
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</View>
|
||||||
<Text style={[
|
<Text style={[
|
||||||
styles.sidebarItemText,
|
styles.sidebarItemText,
|
||||||
{
|
{
|
||||||
color: selectedCategory === category.id
|
color: selectedCategory === category.id
|
||||||
? currentTheme.colors.primary
|
? currentTheme.colors.highEmphasis
|
||||||
: currentTheme.colors.mediumEmphasis
|
: currentTheme.colors.mediumEmphasis,
|
||||||
|
fontWeight: selectedCategory === category.id ? '600' : '500',
|
||||||
}
|
}
|
||||||
]}>
|
]}>
|
||||||
{category.title}
|
{category.title}
|
||||||
|
|
@ -917,7 +937,21 @@ const SettingsScreen: React.FC = () => {
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
<View style={styles.discordContainer}>
|
<View style={styles.discordContainer}>
|
||||||
<View style={{ flexDirection: 'row', gap: 12 }}>
|
<TouchableOpacity
|
||||||
|
style={[styles.discordButton, { backgroundColor: 'transparent', paddingVertical: 0, paddingHorizontal: 0, marginBottom: 8 }]}
|
||||||
|
onPress={() => WebBrowser.openBrowserAsync('https://ko-fi.com/tapframe', {
|
||||||
|
presentationStyle: Platform.OS === 'ios' ? WebBrowser.WebBrowserPresentationStyle.FORM_SHEET : WebBrowser.WebBrowserPresentationStyle.FORM_SHEET
|
||||||
|
})}
|
||||||
|
activeOpacity={0.7}
|
||||||
|
>
|
||||||
|
<FastImage
|
||||||
|
source={require('../../assets/support_me_on_kofi_red.png')}
|
||||||
|
style={styles.kofiImage}
|
||||||
|
resizeMode={FastImage.resizeMode.contain}
|
||||||
|
/>
|
||||||
|
</TouchableOpacity>
|
||||||
|
|
||||||
|
<View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={[styles.discordButton, { backgroundColor: currentTheme.colors.elevation1 }]}
|
style={[styles.discordButton, { backgroundColor: currentTheme.colors.elevation1 }]}
|
||||||
onPress={() => Linking.openURL('https://discord.gg/6w8dr3TSDN')}
|
onPress={() => Linking.openURL('https://discord.gg/6w8dr3TSDN')}
|
||||||
|
|
@ -930,23 +964,26 @@ const SettingsScreen: React.FC = () => {
|
||||||
resizeMode={FastImage.resizeMode.contain}
|
resizeMode={FastImage.resizeMode.contain}
|
||||||
/>
|
/>
|
||||||
<Text style={[styles.discordButtonText, { color: currentTheme.colors.highEmphasis }]}>
|
<Text style={[styles.discordButtonText, { color: currentTheme.colors.highEmphasis }]}>
|
||||||
Join Discord
|
Discord
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
|
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={[styles.discordButton, { backgroundColor: 'transparent', paddingVertical: 0, paddingHorizontal: 0 }]}
|
style={[styles.discordButton, { backgroundColor: '#FF4500' + '15' }]}
|
||||||
onPress={() => WebBrowser.openBrowserAsync('https://ko-fi.com/tapframe', {
|
onPress={() => Linking.openURL('https://www.reddit.com/r/Nuvio/')}
|
||||||
presentationStyle: Platform.OS === 'ios' ? WebBrowser.WebBrowserPresentationStyle.FORM_SHEET : WebBrowser.WebBrowserPresentationStyle.FORM_SHEET
|
|
||||||
})}
|
|
||||||
activeOpacity={0.7}
|
activeOpacity={0.7}
|
||||||
>
|
>
|
||||||
<FastImage
|
<View style={styles.discordButtonContent}>
|
||||||
source={require('../../assets/support_me_on_kofi_red.png')}
|
<FastImage
|
||||||
style={styles.kofiImage}
|
source={{ uri: 'https://www.iconpacks.net/icons/2/free-reddit-logo-icon-2436-thumb.png' }}
|
||||||
resizeMode={FastImage.resizeMode.contain}
|
style={styles.discordLogo}
|
||||||
/>
|
resizeMode={FastImage.resizeMode.contain}
|
||||||
|
/>
|
||||||
|
<Text style={[styles.discordButtonText, { color: '#FF4500' }]}>
|
||||||
|
Reddit
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|
@ -1017,7 +1054,21 @@ const SettingsScreen: React.FC = () => {
|
||||||
|
|
||||||
{/* Support & Community Buttons */}
|
{/* Support & Community Buttons */}
|
||||||
<View style={styles.discordContainer}>
|
<View style={styles.discordContainer}>
|
||||||
<View style={{ flexDirection: 'row', gap: 12 }}>
|
<TouchableOpacity
|
||||||
|
style={[styles.discordButton, { backgroundColor: 'transparent', paddingVertical: 0, paddingHorizontal: 0, marginBottom: 8 }]}
|
||||||
|
onPress={() => WebBrowser.openBrowserAsync('https://ko-fi.com/tapframe', {
|
||||||
|
presentationStyle: Platform.OS === 'ios' ? WebBrowser.WebBrowserPresentationStyle.FORM_SHEET : WebBrowser.WebBrowserPresentationStyle.FORM_SHEET
|
||||||
|
})}
|
||||||
|
activeOpacity={0.7}
|
||||||
|
>
|
||||||
|
<FastImage
|
||||||
|
source={require('../../assets/support_me_on_kofi_red.png')}
|
||||||
|
style={styles.kofiImage}
|
||||||
|
resizeMode={FastImage.resizeMode.contain}
|
||||||
|
/>
|
||||||
|
</TouchableOpacity>
|
||||||
|
|
||||||
|
<View style={{ flexDirection: 'row', gap: 12, flexWrap: 'wrap', justifyContent: 'center' }}>
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={[styles.discordButton, { backgroundColor: currentTheme.colors.elevation1 }]}
|
style={[styles.discordButton, { backgroundColor: currentTheme.colors.elevation1 }]}
|
||||||
onPress={() => Linking.openURL('https://discord.gg/6w8dr3TSDN')}
|
onPress={() => Linking.openURL('https://discord.gg/6w8dr3TSDN')}
|
||||||
|
|
@ -1030,23 +1081,26 @@ const SettingsScreen: React.FC = () => {
|
||||||
resizeMode={FastImage.resizeMode.contain}
|
resizeMode={FastImage.resizeMode.contain}
|
||||||
/>
|
/>
|
||||||
<Text style={[styles.discordButtonText, { color: currentTheme.colors.highEmphasis }]}>
|
<Text style={[styles.discordButtonText, { color: currentTheme.colors.highEmphasis }]}>
|
||||||
Join Discord
|
Discord
|
||||||
</Text>
|
</Text>
|
||||||
</View>
|
</View>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
|
|
||||||
<TouchableOpacity
|
<TouchableOpacity
|
||||||
style={[styles.discordButton, { backgroundColor: 'transparent', paddingVertical: 0, paddingHorizontal: 0 }]}
|
style={[styles.discordButton, { backgroundColor: '#FF4500' + '15' }]}
|
||||||
onPress={() => WebBrowser.openBrowserAsync('https://ko-fi.com/tapframe', {
|
onPress={() => Linking.openURL('https://www.reddit.com/r/Nuvio/')}
|
||||||
presentationStyle: Platform.OS === 'ios' ? WebBrowser.WebBrowserPresentationStyle.FORM_SHEET : WebBrowser.WebBrowserPresentationStyle.FORM_SHEET
|
|
||||||
})}
|
|
||||||
activeOpacity={0.7}
|
activeOpacity={0.7}
|
||||||
>
|
>
|
||||||
<FastImage
|
<View style={styles.discordButtonContent}>
|
||||||
source={require('../../assets/support_me_on_kofi_red.png')}
|
<FastImage
|
||||||
style={styles.kofiImage}
|
source={{ uri: 'https://www.iconpacks.net/icons/2/free-reddit-logo-icon-2436-thumb.png' }}
|
||||||
resizeMode={FastImage.resizeMode.contain}
|
style={styles.discordLogo}
|
||||||
/>
|
resizeMode={FastImage.resizeMode.contain}
|
||||||
|
/>
|
||||||
|
<Text style={[styles.discordButtonText, { color: '#FF4500' }]}>
|
||||||
|
Reddit
|
||||||
|
</Text>
|
||||||
|
</View>
|
||||||
</TouchableOpacity>
|
</TouchableOpacity>
|
||||||
</View>
|
</View>
|
||||||
</View>
|
</View>
|
||||||
|
|
@ -1070,18 +1124,18 @@ const styles = StyleSheet.create({
|
||||||
},
|
},
|
||||||
// Mobile styles
|
// Mobile styles
|
||||||
header: {
|
header: {
|
||||||
paddingHorizontal: Math.max(1, width * 0.05),
|
paddingHorizontal: Math.max(16, width * 0.05),
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
justifyContent: 'space-between',
|
justifyContent: 'space-between',
|
||||||
alignItems: 'flex-end',
|
alignItems: 'flex-end',
|
||||||
paddingBottom: 8,
|
paddingBottom: 12,
|
||||||
backgroundColor: 'transparent',
|
backgroundColor: 'transparent',
|
||||||
zIndex: 2,
|
zIndex: 2,
|
||||||
},
|
},
|
||||||
headerTitle: {
|
headerTitle: {
|
||||||
fontSize: Math.min(32, width * 0.08),
|
fontSize: Math.min(30, width * 0.075),
|
||||||
fontWeight: '800',
|
fontWeight: '700',
|
||||||
letterSpacing: 0.3,
|
letterSpacing: -0.3,
|
||||||
},
|
},
|
||||||
contentContainer: {
|
contentContainer: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
|
|
@ -1095,7 +1149,8 @@ const styles = StyleSheet.create({
|
||||||
scrollContent: {
|
scrollContent: {
|
||||||
flexGrow: 1,
|
flexGrow: 1,
|
||||||
width: '100%',
|
width: '100%',
|
||||||
paddingBottom: 90,
|
paddingTop: 8,
|
||||||
|
paddingBottom: 100,
|
||||||
},
|
},
|
||||||
|
|
||||||
// Tablet-specific styles
|
// Tablet-specific styles
|
||||||
|
|
@ -1106,39 +1161,45 @@ const styles = StyleSheet.create({
|
||||||
sidebar: {
|
sidebar: {
|
||||||
width: 280,
|
width: 280,
|
||||||
borderRightWidth: 1,
|
borderRightWidth: 1,
|
||||||
borderRightColor: 'rgba(255,255,255,0.1)',
|
|
||||||
},
|
},
|
||||||
sidebarHeader: {
|
sidebarHeader: {
|
||||||
padding: 24,
|
paddingHorizontal: 24,
|
||||||
|
paddingBottom: 20,
|
||||||
paddingTop: Platform.OS === 'android' ? (StatusBar.currentHeight || 0) + 24 : 48,
|
paddingTop: Platform.OS === 'android' ? (StatusBar.currentHeight || 0) + 24 : 48,
|
||||||
borderBottomWidth: 1,
|
borderBottomWidth: 1,
|
||||||
borderBottomColor: 'rgba(255,255,255,0.1)',
|
|
||||||
},
|
},
|
||||||
sidebarTitle: {
|
sidebarTitle: {
|
||||||
fontSize: 28,
|
fontSize: 26,
|
||||||
fontWeight: '800',
|
fontWeight: '700',
|
||||||
letterSpacing: 0.3,
|
letterSpacing: -0.3,
|
||||||
},
|
},
|
||||||
sidebarContent: {
|
sidebarContent: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
paddingTop: 16,
|
paddingTop: 12,
|
||||||
|
paddingBottom: 24,
|
||||||
},
|
},
|
||||||
sidebarItem: {
|
sidebarItem: {
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
paddingHorizontal: 24,
|
paddingHorizontal: 16,
|
||||||
paddingVertical: 16,
|
paddingVertical: 12,
|
||||||
marginHorizontal: 12,
|
marginHorizontal: 12,
|
||||||
marginVertical: 2,
|
marginVertical: 2,
|
||||||
borderRadius: 12,
|
borderRadius: 10,
|
||||||
},
|
},
|
||||||
sidebarItemActive: {
|
sidebarItemActive: {
|
||||||
borderRadius: 12,
|
borderRadius: 10,
|
||||||
|
},
|
||||||
|
sidebarItemIconContainer: {
|
||||||
|
width: 32,
|
||||||
|
height: 32,
|
||||||
|
borderRadius: 8,
|
||||||
|
alignItems: 'center',
|
||||||
|
justifyContent: 'center',
|
||||||
},
|
},
|
||||||
sidebarItemText: {
|
sidebarItemText: {
|
||||||
fontSize: 16,
|
fontSize: 15,
|
||||||
fontWeight: '500',
|
marginLeft: 12,
|
||||||
marginLeft: 16,
|
|
||||||
},
|
},
|
||||||
tabletContent: {
|
tabletContent: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
|
|
@ -1146,80 +1207,74 @@ const styles = StyleSheet.create({
|
||||||
},
|
},
|
||||||
tabletScrollView: {
|
tabletScrollView: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
paddingHorizontal: 32,
|
paddingHorizontal: 40,
|
||||||
},
|
},
|
||||||
tabletScrollContent: {
|
tabletScrollContent: {
|
||||||
paddingBottom: 32,
|
paddingTop: 8,
|
||||||
|
paddingBottom: 40,
|
||||||
},
|
},
|
||||||
|
|
||||||
// Common card styles
|
// Common card styles
|
||||||
cardContainer: {
|
cardContainer: {
|
||||||
width: '100%',
|
width: '100%',
|
||||||
marginBottom: 20,
|
marginBottom: 24,
|
||||||
},
|
},
|
||||||
tabletCardContainer: {
|
tabletCardContainer: {
|
||||||
marginBottom: 32,
|
marginBottom: 28,
|
||||||
},
|
},
|
||||||
cardTitle: {
|
cardTitle: {
|
||||||
fontSize: 13,
|
fontSize: 12,
|
||||||
fontWeight: '600',
|
fontWeight: '600',
|
||||||
letterSpacing: 0.8,
|
letterSpacing: 1,
|
||||||
marginLeft: Math.max(12, width * 0.04),
|
marginLeft: Math.max(16, width * 0.045),
|
||||||
marginBottom: 8,
|
marginBottom: 10,
|
||||||
|
textTransform: 'uppercase',
|
||||||
},
|
},
|
||||||
tabletCardTitle: {
|
tabletCardTitle: {
|
||||||
fontSize: 14,
|
fontSize: 12,
|
||||||
marginLeft: 0,
|
marginLeft: 4,
|
||||||
marginBottom: 12,
|
marginBottom: 12,
|
||||||
},
|
},
|
||||||
card: {
|
card: {
|
||||||
marginHorizontal: Math.max(12, width * 0.04),
|
marginHorizontal: Math.max(16, width * 0.04),
|
||||||
borderRadius: 16,
|
borderRadius: 14,
|
||||||
overflow: 'hidden',
|
overflow: 'hidden',
|
||||||
shadowColor: '#000',
|
|
||||||
shadowOffset: { width: 0, height: 2 },
|
|
||||||
shadowOpacity: 0.1,
|
|
||||||
shadowRadius: 4,
|
|
||||||
elevation: 3,
|
|
||||||
width: undefined,
|
width: undefined,
|
||||||
},
|
},
|
||||||
tabletCard: {
|
tabletCard: {
|
||||||
marginHorizontal: 0,
|
marginHorizontal: 0,
|
||||||
borderRadius: 20,
|
borderRadius: 16,
|
||||||
shadowOpacity: 0.15,
|
|
||||||
shadowRadius: 8,
|
|
||||||
elevation: 5,
|
|
||||||
},
|
},
|
||||||
settingItem: {
|
settingItem: {
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
paddingVertical: 12,
|
paddingVertical: 14,
|
||||||
paddingHorizontal: Math.max(12, width * 0.04),
|
paddingHorizontal: Math.max(14, width * 0.04),
|
||||||
borderBottomWidth: 0.5,
|
borderBottomWidth: StyleSheet.hairlineWidth,
|
||||||
minHeight: Math.max(54, width * 0.14),
|
minHeight: Math.max(60, width * 0.15),
|
||||||
width: '100%',
|
width: '100%',
|
||||||
},
|
},
|
||||||
tabletSettingItem: {
|
tabletSettingItem: {
|
||||||
paddingVertical: 16,
|
paddingVertical: 16,
|
||||||
paddingHorizontal: 24,
|
paddingHorizontal: 20,
|
||||||
minHeight: 70,
|
minHeight: 68,
|
||||||
},
|
},
|
||||||
settingItemBorder: {
|
settingItemBorder: {
|
||||||
// Border styling handled directly in the component with borderBottomWidth
|
// Border styling handled directly in the component with borderBottomWidth
|
||||||
},
|
},
|
||||||
settingIconContainer: {
|
settingIconContainer: {
|
||||||
marginRight: 16,
|
marginRight: 14,
|
||||||
width: 36,
|
width: 38,
|
||||||
height: 36,
|
height: 38,
|
||||||
borderRadius: 10,
|
borderRadius: 10,
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
},
|
},
|
||||||
tabletSettingIconContainer: {
|
tabletSettingIconContainer: {
|
||||||
width: 44,
|
width: 42,
|
||||||
height: 44,
|
height: 42,
|
||||||
borderRadius: 12,
|
borderRadius: 11,
|
||||||
marginRight: 20,
|
marginRight: 16,
|
||||||
},
|
},
|
||||||
settingContent: {
|
settingContent: {
|
||||||
flex: 1,
|
flex: 1,
|
||||||
|
|
@ -1230,32 +1285,33 @@ const styles = StyleSheet.create({
|
||||||
flex: 1,
|
flex: 1,
|
||||||
},
|
},
|
||||||
settingTitle: {
|
settingTitle: {
|
||||||
fontSize: Math.min(16, width * 0.042),
|
fontSize: Math.min(16, width * 0.04),
|
||||||
|
fontWeight: '500',
|
||||||
|
marginBottom: 2,
|
||||||
|
letterSpacing: -0.2,
|
||||||
|
},
|
||||||
|
tabletSettingTitle: {
|
||||||
|
fontSize: 17,
|
||||||
fontWeight: '500',
|
fontWeight: '500',
|
||||||
marginBottom: 3,
|
marginBottom: 3,
|
||||||
},
|
},
|
||||||
tabletSettingTitle: {
|
|
||||||
fontSize: 18,
|
|
||||||
fontWeight: '600',
|
|
||||||
marginBottom: 4,
|
|
||||||
},
|
|
||||||
settingDescription: {
|
settingDescription: {
|
||||||
fontSize: Math.min(14, width * 0.037),
|
fontSize: Math.min(13, width * 0.034),
|
||||||
opacity: 0.8,
|
opacity: 0.7,
|
||||||
},
|
},
|
||||||
tabletSettingDescription: {
|
tabletSettingDescription: {
|
||||||
fontSize: 16,
|
fontSize: 14,
|
||||||
opacity: 0.7,
|
opacity: 0.6,
|
||||||
},
|
},
|
||||||
settingControl: {
|
settingControl: {
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
paddingLeft: 12,
|
paddingLeft: 10,
|
||||||
},
|
},
|
||||||
badge: {
|
badge: {
|
||||||
height: 22,
|
height: 20,
|
||||||
minWidth: 22,
|
minWidth: 20,
|
||||||
borderRadius: 11,
|
borderRadius: 10,
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
paddingHorizontal: 6,
|
paddingHorizontal: 6,
|
||||||
|
|
@ -1263,8 +1319,8 @@ const styles = StyleSheet.create({
|
||||||
},
|
},
|
||||||
badgeText: {
|
badgeText: {
|
||||||
color: 'white',
|
color: 'white',
|
||||||
fontSize: 12,
|
fontSize: 11,
|
||||||
fontWeight: '600',
|
fontWeight: '700',
|
||||||
},
|
},
|
||||||
segmentedControl: {
|
segmentedControl: {
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
|
|
@ -1293,26 +1349,27 @@ const styles = StyleSheet.create({
|
||||||
footer: {
|
footer: {
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
marginTop: 10,
|
marginTop: 24,
|
||||||
marginBottom: 8,
|
marginBottom: 12,
|
||||||
},
|
},
|
||||||
footerText: {
|
footerText: {
|
||||||
fontSize: 14,
|
fontSize: 13,
|
||||||
opacity: 0.5,
|
opacity: 0.5,
|
||||||
|
letterSpacing: 0.2,
|
||||||
},
|
},
|
||||||
// New styles for Discord button
|
// Support buttons
|
||||||
discordContainer: {
|
discordContainer: {
|
||||||
marginTop: 8,
|
marginTop: 12,
|
||||||
marginBottom: 20,
|
marginBottom: 24,
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
},
|
},
|
||||||
discordButton: {
|
discordButton: {
|
||||||
flexDirection: 'row',
|
flexDirection: 'row',
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
justifyContent: 'center',
|
justifyContent: 'center',
|
||||||
paddingVertical: 8,
|
paddingVertical: 10,
|
||||||
paddingHorizontal: 16,
|
paddingHorizontal: 18,
|
||||||
borderRadius: 8,
|
borderRadius: 10,
|
||||||
maxWidth: 200,
|
maxWidth: 200,
|
||||||
},
|
},
|
||||||
discordButtonContent: {
|
discordButtonContent: {
|
||||||
|
|
@ -1320,34 +1377,34 @@ const styles = StyleSheet.create({
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
},
|
},
|
||||||
discordLogo: {
|
discordLogo: {
|
||||||
width: 16,
|
width: 18,
|
||||||
height: 16,
|
height: 18,
|
||||||
marginRight: 8,
|
marginRight: 10,
|
||||||
},
|
},
|
||||||
discordButtonText: {
|
discordButtonText: {
|
||||||
fontSize: 14,
|
fontSize: 14,
|
||||||
fontWeight: '500',
|
fontWeight: '600',
|
||||||
},
|
},
|
||||||
kofiImage: {
|
kofiImage: {
|
||||||
height: 32,
|
height: 34,
|
||||||
width: 150,
|
width: 155,
|
||||||
},
|
},
|
||||||
downloadsContainer: {
|
downloadsContainer: {
|
||||||
marginTop: 20,
|
marginTop: 32,
|
||||||
marginBottom: 12,
|
marginBottom: 16,
|
||||||
alignItems: 'center',
|
alignItems: 'center',
|
||||||
},
|
},
|
||||||
downloadsNumber: {
|
downloadsNumber: {
|
||||||
fontSize: 32,
|
fontSize: 36,
|
||||||
fontWeight: '800',
|
fontWeight: '800',
|
||||||
letterSpacing: 1,
|
letterSpacing: 0.5,
|
||||||
marginBottom: 4,
|
marginBottom: 6,
|
||||||
},
|
},
|
||||||
downloadsLabel: {
|
downloadsLabel: {
|
||||||
fontSize: 11,
|
fontSize: 11,
|
||||||
fontWeight: '600',
|
fontWeight: '600',
|
||||||
opacity: 0.6,
|
opacity: 0.5,
|
||||||
letterSpacing: 1.2,
|
letterSpacing: 1.5,
|
||||||
textTransform: 'uppercase',
|
textTransform: 'uppercase',
|
||||||
},
|
},
|
||||||
loadingSpinner: {
|
loadingSpinner: {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue