update to settings tab

add some easter eggs, move OTA update button to the "Info" tab

fix text not wrapping on narrower handsets

src/components/OtaUpdates/index.tsx

@@ -37,7 +37,7 @@ export const downloadUpdate = (showCatchAlert: boolean = false) => {
 		})
 		.catch((error) => {
 			if (showCatchAlert) {
-				Alert.alert('Either the update is not available or there is an error')
+				Alert.alert('Update not available')
 			}
 			console.error('Error downloading update:', error)
 		})

src/components/Settings/components/info-tab.tsx

@@ -11,6 +11,7 @@ import { ONE_HOUR } from '../../../constants/query-client'
 import { pickRandomItemFromArray } from '../../../utils/random'
 import { FlashList } from '@shopify/flash-list'
 import { getStoredOtaVersion } from 'react-native-nitro-ota'
+import { downloadUpdate } from '../../OtaUpdates'
 export default function InfoTab() {
 	const patrons = usePatrons()
 
@@ -53,12 +54,14 @@ export default function InfoTab() {
 									</XStack>
 									<XStack
 										alignItems='center'
-										onPress={() =>
-											Linking.openURL('https://discord.gg/yf8fBatktn')
-										}
+										onPress={() => downloadUpdate(true)}
 									>
-										<Icon name='chat' small color='$borderColor' />
-										<Text>Join Discord</Text>
+										<Icon
+											name='cellphone-arrow-down'
+											small
+											color='$borderColor'
+										/>
+										<Text>Update</Text>
 									</XStack>
 								</XStack>
 							</YStack>
@@ -82,47 +85,54 @@ export default function InfoTab() {
 									<Icon name='github' small color='$borderColor' />
 									<Text>Report Issue</Text>
 								</XStack>
-							</XStack>
-						),
-					},
-					{
-						title: 'Powered by listeners like you',
-						subTitle: 'Sponsor on GitHub or Patreon',
-						iconName: 'hand-heart',
-						iconColor: '$success',
-						children: (
-							<XStack justifyContent='flex-start' gap={'$4'} marginVertical={'$2'}>
 								<XStack
 									alignItems='center'
-									onPress={() =>
-										Linking.openURL(
-											'https://github.com/sponsors/anultravioletaurora/',
-										)
-									}
+									onPress={() => Linking.openURL('https://discord.gg/yf8fBatktn')}
 								>
-									<Icon name='github' small color='$borderColor' />
-									<Text>Sponsors</Text>
-								</XStack>
-								<XStack
-									alignItems='center'
-									onPress={() =>
-										Linking.openURL('https://patreon.com/anultravioletaurora')
-									}
-								>
-									<Icon name='patreon' small color='$borderColor' />
-									<Text>Patreon</Text>
+									<Icon name='chat' small color='$borderColor' />
+									<Text>Join Discord</Text>
 								</XStack>
 							</XStack>
 						),
 					},
 					{
 						title: 'Wall of Fame',
-						subTitle: 'Thank you to these paid members',
-						iconName: 'heart',
+						subTitle: 'Sponsor on GitHub or Patreon',
+						iconName: 'hand-heart',
 						iconColor: '$secondary',
 						children: (
 							<FlashList
 								data={patrons}
+								ListHeaderComponent={
+									<XStack
+										justifyContent='flex-start'
+										gap={'$4'}
+										marginVertical={'$2'}
+									>
+										<XStack
+											alignItems='center'
+											onPress={() =>
+												Linking.openURL(
+													'https://github.com/sponsors/anultravioletaurora/',
+												)
+											}
+										>
+											<Icon name='github' small color='$borderColor' />
+											<Text>Sponsors</Text>
+										</XStack>
+										<XStack
+											alignItems='center'
+											onPress={() =>
+												Linking.openURL(
+													'https://patreon.com/anultravioletaurora',
+												)
+											}
+										>
+											<Icon name='patreon' small color='$borderColor' />
+											<Text>Patreon</Text>
+										</XStack>
+									</XStack>
+								}
 								numColumns={2}
 								renderItem={({ item }) => (
 									<XStack alignItems='flex-start' maxWidth={'$20'}>

src/components/Settings/components/preferences-tab.tsx

@@ -2,28 +2,38 @@ import { RadioGroup, YStack } from 'tamagui'
 import { SwitchWithLabel } from '../../Global/helpers/switch-with-label'
 import SettingsListGroup from './settings-list-group'
 import { RadioGroupItemWithLabel } from '../../Global/helpers/radio-group-item-with-label'
-import Button from '../../Global/helpers/button'
-import Icon from '../../Global/components/icon'
-import { Text } from '../../Global/helpers/text'
-import { downloadUpdate } from '../../OtaUpdates'
 import {
 	ThemeSetting,
 	useReducedHapticsSetting,
 	useSendMetricsSetting,
 	useThemeSetting,
 } from '../../../stores/settings/app'
+import { useMemo } from 'react'
 
 export default function PreferencesTab(): React.JSX.Element {
 	const [sendMetrics, setSendMetrics] = useSendMetricsSetting()
 	const [reducedHaptics, setReducedHaptics] = useReducedHapticsSetting()
 	const [themeSetting, setThemeSetting] = useThemeSetting()
 
+	const themeSubtitle = useMemo(() => {
+		switch (themeSetting) {
+			case 'light':
+				return 'You crazy diamond'
+			case 'dark':
+				return "There's a dark side??"
+			case 'oled':
+				return 'Back in black'
+			default:
+				return undefined
+		}
+	}, [themeSetting])
+
 	return (
 		<SettingsListGroup
 			settingsList={[
 				{
 					title: 'Theme',
-					subTitle: `Current: ${themeSetting}`,
+					subTitle: themeSubtitle && `${themeSubtitle}`,
 					iconName: 'theme-light-dark',
 					iconColor: `${themeSetting === 'system' ? '$borderColor' : '$primary'}`,
 					children: (
@@ -59,10 +69,10 @@ export default function PreferencesTab(): React.JSX.Element {
 					),
 				},
 				{
-					title: 'Send Metrics and Crash Reports',
+					title: 'Send Analytics',
 					iconName: sendMetrics ? 'bug-check' : 'bug',
 					iconColor: sendMetrics ? '$success' : '$borderColor',
-					subTitle: 'Send anonymous usage and crash data',
+					subTitle: 'Send usage and crash data',
 					children: (
 						<SwitchWithLabel
 							checked={sendMetrics}
@@ -72,26 +82,6 @@ export default function PreferencesTab(): React.JSX.Element {
 						/>
 					),
 				},
-
-				{
-					title: 'Forcefully download the latest OTA',
-					iconName: 'web',
-					iconColor: '$success',
-					subTitle: 'Download the latest ota forcefully',
-					children: (
-						<Button
-							variant='outlined'
-							color={'$success'}
-							borderColor={'$success'}
-							icon={() => <Icon name='download' small color={'$success'} />}
-							onPress={() => downloadUpdate(true)}
-						>
-							<Text bold color={'$success'}>
-								Download Update
-							</Text>
-						</Button>
-					),
-				},
 			]}
 		/>
 	)

src/components/Settings/components/settings-list-group.tsx

@@ -3,6 +3,7 @@ import { SettingsTabList } from '../types'
 import Icon from '../../Global/components/icon'
 import { ThemeTokens } from 'tamagui'
 import React from 'react'
+import { Text } from '../../Global/helpers/text'
 
 interface SettingsListGroupProps {
 	settingsList: SettingsTabList
@@ -30,7 +31,11 @@ export default function SettingsListGroup({
 								size={'$5'}
 								title={setting.title}
 								icon={<Icon name={setting.iconName} color={setting.iconColor} />}
-								subTitle={setting.subTitle}
+								subTitle={
+									setting.subTitle && (
+										<Text color={'$borderColor'}>{setting.subTitle}</Text>
+									)
+								}
 								onPress={setting.onPress}
 								iconAfter={
 									setting.onPress ? (