diff --git a/src/alf/index.tsx b/src/alf/index.tsx index f0a0ede7a3..4106e9c303 100644 --- a/src/alf/index.tsx +++ b/src/alf/index.tsx @@ -1,12 +1,13 @@ import React from 'react' import {Dimensions} from 'react-native' + import * as themes from '#/alf/themes' -export * from '#/alf/types' -export * as tokens from '#/alf/tokens' export {atoms} from '#/alf/atoms' -export * from '#/alf/util/platform' +export * as tokens from '#/alf/tokens' +export * from '#/alf/types' export * from '#/alf/util/flatten' +export * from '#/alf/util/platform' type BreakpointName = keyof typeof breakpoints @@ -89,6 +90,10 @@ export function ThemeProvider({ ) } +export function useThemeName() { + return React.useContext(Context).themeName +} + export function useTheme() { return React.useContext(Context).theme } diff --git a/src/view/screens/Settings/index.tsx b/src/view/screens/Settings/index.tsx index bb38da676c..df831c1432 100644 --- a/src/view/screens/Settings/index.tsx +++ b/src/view/screens/Settings/index.tsx @@ -42,12 +42,12 @@ import {useLoggedOutViewControls} from '#/state/shell/logged-out' import {useCloseAllActiveElements} from '#/state/util' import {useAnalytics} from 'lib/analytics/analytics' import * as AppInfo from 'lib/app-info' -import {STATUS_PAGE_URL} from 'lib/constants' +import {FEEDBACK_FORM_URL, HELP_DESK_URL, STATUS_PAGE_URL} from 'lib/constants' import {useAccountSwitcher} from 'lib/hooks/useAccountSwitcher' import {useCustomPalette} from 'lib/hooks/useCustomPalette' import {usePalette} from 'lib/hooks/usePalette' import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries' -import {HandIcon, HashtagIcon} from 'lib/icons' +import {HandIcon, HashtagIcon, ListIcon} from 'lib/icons' import {makeProfileLink} from 'lib/routes/links' import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types' import {NavigationProp} from 'lib/routes/types' @@ -61,6 +61,7 @@ import {Text} from 'view/com/util/text/Text' import * as Toast from 'view/com/util/Toast' import {UserAvatar} from 'view/com/util/UserAvatar' import {ScrollView} from 'view/com/util/Views' +import {atoms as a, useThemeName} from '#/alf' import {useDialogControl} from '#/components/Dialog' import {BirthDateSettingsDialog} from '#/components/dialogs/BirthDateSettings' import {navigate, resetToTab} from '#/Navigation' @@ -270,6 +271,10 @@ export function SettingsScreen({}: Props) { navigation.navigate('SavedFeeds') }, [navigation]) + const onPressLists = React.useCallback(() => { + navigation.navigate('Lists') + }, [navigation]) + const onPressAccessibilitySettings = React.useCallback(() => { navigation.navigate('AccessibilitySettings') }, [navigation]) @@ -315,49 +320,112 @@ export function SettingsScreen({}: Props) { scrollIndicatorInsets={{right: 1}} // @ts-ignore web only -prf dataSet={{'stable-gutters': 1}}> + + navigation.navigate('Moderation') + } + accessibilityRole="button" + accessibilityLabel={_(msg`Moderation settings`)} + accessibilityHint={_(msg`Opens moderation settings`)}> + + + + + Moderation + + + + + + + + My Saved Feeds + + + + + + + + My Lists + + + + {currentAccount ? ( <> Account - - - Email:{' '} - - {currentAccount.emailConfirmed && ( - <> - - - )} - - {currentAccount.email || '(no email)'} - - openModal({name: 'change-email'})}> - - Change + + + + Email:{' '} - - - - - Birthday:{' '} - - - - Show + {currentAccount.emailConfirmed && ( + <> + + + )} + + {currentAccount.email || '(no email)'} - + openModal({name: 'change-email'})}> + + Change + + + + + + Birthday:{' '} + + + + Show + + + @@ -535,24 +603,6 @@ export function SettingsScreen({}: Props) { Thread Preferences - - - - - - My Saved Feeds - - Languages - navigation.navigate('Moderation') - } - accessibilityRole="button" - accessibilityLabel={_(msg`Moderation settings`)} - accessibilityHint={_(msg`Opens moderation settings`)}> - - - - - Moderation - - @@ -936,6 +964,88 @@ function EmailConfirmationNotice() { ) } +function FeedbackAndHelp() { + const themeName = useThemeName() + const pal = usePalette('default') + const {_} = useLingui() + const {track} = useAnalytics() + const {currentAccount} = useSession() + + const onPressFeedback = React.useCallback(() => { + track('Menu:FeedbackClicked') + Linking.openURL( + FEEDBACK_FORM_URL({ + email: currentAccount?.email, + handle: currentAccount?.handle, + }), + ) + }, [track, currentAccount]) + + const onPressHelp = React.useCallback(() => { + track('Menu:HelpClicked') + Linking.openURL(HELP_DESK_URL) + }, [track]) + + return ( + + + + + Feedback + + + + + Help + + + + ) +} + const styles = StyleSheet.create({ dimmed: { opacity: 0.5,