diff --git a/modules/bottom-sheet/src/BottomSheetNativeComponent.tsx b/modules/bottom-sheet/src/BottomSheetNativeComponent.tsx index e4e37b1865..817d476fbe 100644 --- a/modules/bottom-sheet/src/BottomSheetNativeComponent.tsx +++ b/modules/bottom-sheet/src/BottomSheetNativeComponent.tsx @@ -16,8 +16,10 @@ import { type BottomSheetState, type BottomSheetViewProps, } from './BottomSheet.types' -import {BottomSheetPortalProvider} from './BottomSheetPortal' -import {Context as PortalContext} from './BottomSheetPortal' +import { + BottomSheetPortalProvider, + Context as PortalContext, +} from './BottomSheetPortal' const screenHeight = Dimensions.get('screen').height diff --git a/src/components/Select/index.tsx b/src/components/Select/index.tsx index 5297e438bf..7250448395 100644 --- a/src/components/Select/index.tsx +++ b/src/components/Select/index.tsx @@ -103,9 +103,9 @@ export function Trigger({children, label}: TriggerProps) { diff --git a/src/view/com/composer/select-language/PostLanguageSelectDialog.tsx b/src/components/dialogs/LanguageSelectDialog.tsx similarity index 88% rename from src/view/com/composer/select-language/PostLanguageSelectDialog.tsx rename to src/components/dialogs/LanguageSelectDialog.tsx index 610cf08d70..567fd6608a 100644 --- a/src/view/com/composer/select-language/PostLanguageSelectDialog.tsx +++ b/src/components/dialogs/LanguageSelectDialog.tsx @@ -6,11 +6,7 @@ import {useLingui} from '@lingui/react' import {languageName} from '#/locale/helpers' import {type Language, LANGUAGES, LANGUAGES_MAP_CODE2} from '#/locale/languages' -import { - toPostLanguages, - useLanguagePrefs, - useLanguagePrefsApi, -} from '#/state/preferences/languages' +import {useLanguagePrefs} from '#/state/preferences/languages' import {ErrorScreen} from '#/view/com/util/error/ErrorScreen' import {ErrorBoundary} from '#/view/com/util/ErrorBoundary' import {atoms as a, useTheme, web} from '#/alf' @@ -22,18 +18,27 @@ import {TimesLarge_Stroke2_Corner0_Rounded as XIcon} from '#/components/icons/Ti import {Text} from '#/components/Typography' import {IS_NATIVE, IS_WEB} from '#/env' -export function PostLanguageSelectDialog({ +export function LanguageSelectDialog({ + titleText, + subtitleText, control, /** * Optionally can be passed to show different values than what is saved in * langPrefs. */ currentLanguages, - onSelectLanguage, + onSelectLanguages, + maxLanguages, }: { control: Dialog.DialogControlProps + titleText?: React.ReactNode + subtitleText?: React.ReactNode + /** + * Defaults to the primary language + */ currentLanguages?: string[] - onSelectLanguage?: (language: string) => void + onSelectLanguages: (languages: string[]) => void + maxLanguages?: number }) { const {height} = useWindowDimensions() const insets = useSafeAreaInsets() @@ -50,8 +55,11 @@ export function PostLanguageSelectDialog({ @@ -59,11 +67,17 @@ export function PostLanguageSelectDialog({ } export function DialogInner({ + titleText, + subtitleText, currentLanguages, - onSelectLanguage, + onSelectLanguages, + maxLanguages, }: { + titleText?: React.ReactNode + subtitleText?: React.ReactNode currentLanguages?: string[] - onSelectLanguage?: (language: string) => void + onSelectLanguages?: (languages: string[]) => void + maxLanguages?: number }) { const control = Dialog.useDialogContext() const [headerHeight, setHeaderHeight] = useState(0) @@ -81,26 +95,17 @@ export function DialogInner({ }, []) const langPrefs = useLanguagePrefs() - const postLanguagesPref = - currentLanguages ?? toPostLanguages(langPrefs.postLanguage) - const [checkedLanguagesCode2, setCheckedLanguagesCode2] = useState( - postLanguagesPref || [langPrefs.primaryLanguage], + currentLanguages || [langPrefs.primaryLanguage], ) const [search, setSearch] = useState('') - const setLangPrefs = useLanguagePrefsApi() const t = useTheme() const {_} = useLingui() const handleClose = () => { control.close(() => { - let langsString = checkedLanguagesCode2.join(',') - if (!langsString) { - langsString = langPrefs.primaryLanguage - } - setLangPrefs.setPostLanguage(langsString) - onSelectLanguage?.(langsString) + onSelectLanguages?.(checkedLanguagesCode2) }) } @@ -181,18 +186,20 @@ export function DialogInner({ a.text_xl, a.mb_sm, ]}> - Choose Post Languages - - - Select up to 3 languages used in this post + {titleText ?? Choose languages} + {subtitleText && ( + + {subtitleText} + + )} {IS_WEB && ( @@ -244,7 +251,7 @@ export function DialogInner({ values={checkedLanguagesCode2} onChange={setCheckedLanguagesCode2} type="checkbox" - maxSelections={3} + maxSelections={maxLanguages} label={_(msg`Select languages`)} style={web([a.contents])}> { - openModal({name: 'content-languages-settings'}) - }, [openModal]) + const contentLanguagePrefsControl = useDialogControl() const onChangePrimaryLanguage = useCallback( (value: string) => { @@ -58,16 +55,21 @@ export function LanguageSettingsScreen({}: Props) { [langPrefs, setLangPrefs], ) - const myLanguages = useMemo(() => { - return ( - langPrefs.contentLanguages - .map(lang => LANGUAGES.find(l => l.code2 === lang)) - .filter(Boolean) - // @ts-ignore - .map(l => languageName(l, langPrefs.appLanguage)) - .join(', ') - ) - }, [langPrefs.appLanguage, langPrefs.contentLanguages]) + const [recentLanguages, setRecentLanguages] = useState( + langPrefs.contentLanguages, + ) + + const possibleLanguages = useMemo(() => { + return [ + ...new Set([ + ...recentLanguages, + ...langPrefs.contentLanguages, + ...langPrefs.primaryLanguage, + ]), + ] + .map(lang => LANGUAGES.find(l => l.code2 === lang)) + .filter(x => !!x) + }, [recentLanguages, langPrefs.contentLanguages, langPrefs.primaryLanguage]) return ( @@ -84,7 +86,7 @@ export function LanguageSettingsScreen({}: Props) { - App Language + App language @@ -118,7 +120,7 @@ export function LanguageSettingsScreen({}: Props) { - Primary Language + Primary language @@ -152,7 +154,7 @@ export function LanguageSettingsScreen({}: Props) { - Content Languages + Content languages @@ -162,24 +164,67 @@ export function LanguageSettingsScreen({}: Props) { - + {langPrefs.contentLanguages.length === 0 && ( + + All languages will be shown in your feeds. + + )} + + + + + {possibleLanguages.map((language, index) => { + const name = languageName(language, langPrefs.appLanguage) + return ( + + {({selected}) => ( + + + {name} + + )} + + ) + })} + + + + + + Select content languages} + subtitleText={ + + If none are selected, all languages will be shown in your + feeds. + + } + currentLanguages={langPrefs.contentLanguages} + onSelectLanguages={languages => { + setLangPrefs.setContentLanguages(languages) + setRecentLanguages(recent => [ + ...new Set([...recent, ...languages]), + ]) + }} + /> diff --git a/src/state/preferences/languages.tsx b/src/state/preferences/languages.tsx index 2bfb323f10..fe7dc2105d 100644 --- a/src/state/preferences/languages.tsx +++ b/src/state/preferences/languages.tsx @@ -11,9 +11,7 @@ type StateContext = persisted.Schema['languagePrefs'] type ApiContext = { setPrimaryLanguage: (code2: string) => void setPostLanguage: (commaSeparatedLangCodes: string) => void - setContentLanguage: (code2: string) => void - toggleContentLanguage: (code2: string) => void - togglePostLanguage: (code2: string) => void + setContentLanguages: (code2s: string[]) => void savePostLanguageToHistory: () => void setAppLanguage: (code2: AppLanguage) => void } @@ -25,16 +23,14 @@ stateContext.displayName = 'LanguagePrefsStateContext' const apiContext = React.createContext({ setPrimaryLanguage: (_: string) => {}, setPostLanguage: (_: string) => {}, - setContentLanguage: (_: string) => {}, - toggleContentLanguage: (_: string) => {}, - togglePostLanguage: (_: string) => {}, + setContentLanguages: (_: string[]) => {}, savePostLanguageToHistory: () => {}, setAppLanguage: (_: AppLanguage) => {}, }) apiContext.displayName = 'LanguagePrefsApiContext' export function Provider({children}: React.PropsWithChildren<{}>) { - const [state, setState] = React.useState(persisted.get('languagePrefs')) + const [state, setState] = React.useState(() => persisted.get('languagePrefs')) const setStateWrapped = React.useCallback( (fn: SetStateCb) => { @@ -59,43 +55,8 @@ export function Provider({children}: React.PropsWithChildren<{}>) { setPostLanguage(commaSeparatedLangCodes: string) { setStateWrapped(s => ({...s, postLanguage: commaSeparatedLangCodes})) }, - setContentLanguage(code2: string) { - setStateWrapped(s => ({...s, contentLanguages: [code2]})) - }, - toggleContentLanguage(code2: string) { - setStateWrapped(s => { - const exists = s.contentLanguages.includes(code2) - const next = exists - ? s.contentLanguages.filter(lang => lang !== code2) - : s.contentLanguages.concat(code2) - return { - ...s, - contentLanguages: next, - } - }) - }, - togglePostLanguage(code2: string) { - setStateWrapped(s => { - const exists = hasPostLanguage(state.postLanguage, code2) - let next = s.postLanguage - - if (exists) { - next = toPostLanguages(s.postLanguage) - .filter(lang => lang !== code2) - .join(',') - } else { - // sort alphabetically for deterministic comparison in context menu - next = toPostLanguages(s.postLanguage) - .concat([code2]) - .sort((a, b) => a.localeCompare(b)) - .join(',') - } - - return { - ...s, - postLanguage: next, - } - }) + setContentLanguages(code2s: string[]) { + setStateWrapped(s => ({...s, contentLanguages: code2s})) }, /** * Saves whatever language codes are currently selected into a history array, @@ -120,7 +81,7 @@ export function Provider({children}: React.PropsWithChildren<{}>) { setStateWrapped(s => ({...s, appLanguage: code2})) }, }), - [state, setStateWrapped], + [setStateWrapped], ) return ( diff --git a/src/state/shell/color-mode.tsx b/src/state/shell/color-mode.tsx index 14495f06d3..9fed6833aa 100644 --- a/src/state/shell/color-mode.tsx +++ b/src/state/shell/color-mode.tsx @@ -20,8 +20,12 @@ const setContext = React.createContext({} as SetContext) setContext.displayName = 'ColorModeSetContext' export function Provider({children}: React.PropsWithChildren<{}>) { - const [colorMode, setColorMode] = React.useState(persisted.get('colorMode')) - const [darkTheme, setDarkTheme] = React.useState(persisted.get('darkTheme')) + const [colorMode, setColorMode] = React.useState(() => + persisted.get('colorMode'), + ) + const [darkTheme, setDarkTheme] = React.useState(() => + persisted.get('darkTheme'), + ) const stateContextValue = React.useMemo( () => ({ diff --git a/src/view/com/composer/select-language/PostLanguageSelect.tsx b/src/view/com/composer/select-language/PostLanguageSelect.tsx index 7bfc9a4171..f1ed386852 100644 --- a/src/view/com/composer/select-language/PostLanguageSelect.tsx +++ b/src/view/com/composer/select-language/PostLanguageSelect.tsx @@ -11,11 +11,11 @@ import { import {atoms as a, useTheme} from '#/alf' import {Button, type ButtonProps} from '#/components/Button' import * as Dialog from '#/components/Dialog' +import {LanguageSelectDialog} from '#/components/dialogs/LanguageSelectDialog' import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRightIcon} from '#/components/icons/Chevron' import {Globe_Stroke2_Corner0_Rounded as GlobeIcon} from '#/components/icons/Globe' import * as Menu from '#/components/Menu' import {Text} from '#/components/Typography' -import {PostLanguageSelectDialog} from './PostLanguageSelectDialog' export function PostLanguageSelect({ currentLanguages: currentLanguagesProp, @@ -36,6 +36,15 @@ export function PostLanguageSelect({ const currentLanguages = currentLanguagesProp ?? toPostLanguages(langPrefs.postLanguage) + const onSelectLanguages = (languages: string[]) => { + let langsString = languages.join(',') + if (!langsString) { + langsString = langPrefs.primaryLanguage + } + setLangPrefs.setPostLanguage(langsString) + onSelectLanguage?.(langsString) + } + if ( dedupedHistory.length === 1 && dedupedHistory[0] === langPrefs.postLanguage @@ -43,9 +52,15 @@ export function PostLanguageSelect({ return ( <> - Choose post languages} + subtitleText={ + Select up to 3 languages used in this post + } control={languageDialogControl} currentLanguages={currentLanguages} + onSelectLanguages={onSelectLanguages} + maxLanguages={3} /> ) @@ -94,10 +109,13 @@ export function PostLanguageSelect({ - Choose post languages} + subtitleText={Select up to 3 languages used in this post} control={languageDialogControl} currentLanguages={currentLanguages} - onSelectLanguage={onSelectLanguage} + onSelectLanguages={onSelectLanguages} + maxLanguages={3} /> ) diff --git a/src/view/com/modals/Modal.tsx b/src/view/com/modals/Modal.tsx index a4ace3629f..fa95661d27 100644 --- a/src/view/com/modals/Modal.tsx +++ b/src/view/com/modals/Modal.tsx @@ -7,7 +7,6 @@ import {usePalette} from '#/lib/hooks/usePalette' import {useModalControls, useModals} from '#/state/modals' import {FullWindowOverlay} from '#/components/FullWindowOverlay' import {createCustomBackdrop} from '../util/BottomSheetCustomBackdrop' -import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings' import * as UserAddRemoveListsModal from './UserAddRemoveLists' const DEFAULT_SNAPPOINTS = ['90%'] @@ -44,9 +43,6 @@ export function ModalsContainer() { if (activeModal?.name === 'user-add-remove-lists') { snapPoints = UserAddRemoveListsModal.snapPoints element = - } else if (activeModal?.name === 'content-languages-settings') { - snapPoints = ContentLanguagesSettingsModal.snapPoints - element = } else { return null } diff --git a/src/view/com/modals/Modal.web.tsx b/src/view/com/modals/Modal.web.tsx index cb932f4530..dc080bae01 100644 --- a/src/view/com/modals/Modal.web.tsx +++ b/src/view/com/modals/Modal.web.tsx @@ -6,7 +6,6 @@ import {usePalette} from '#/lib/hooks/usePalette' import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' import {type Modal as ModalIface} from '#/state/modals' import {useModalControls, useModals} from '#/state/modals' -import * as ContentLanguagesSettingsModal from './lang-settings/ContentLanguagesSettings' import * as UserAddRemoveLists from './UserAddRemoveLists' export function ModalsContainer() { @@ -47,8 +46,6 @@ function Modal({modal}: {modal: ModalIface}) { let element if (modal.name === 'user-add-remove-lists') { element = - } else if (modal.name === 'content-languages-settings') { - element = } else { return null } diff --git a/src/view/com/modals/lang-settings/ConfirmLanguagesButton.tsx b/src/view/com/modals/lang-settings/ConfirmLanguagesButton.tsx deleted file mode 100644 index f61fe73fe9..0000000000 --- a/src/view/com/modals/lang-settings/ConfirmLanguagesButton.tsx +++ /dev/null @@ -1,64 +0,0 @@ -import {Pressable, StyleSheet, Text, View} from 'react-native' -import {LinearGradient} from 'expo-linear-gradient' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' - -import {usePalette} from '#/lib/hooks/usePalette' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' -import {colors, gradients, s} from '#/lib/styles' - -export const ConfirmLanguagesButton = ({ - onPress, - extraText, -}: { - onPress: () => void - extraText?: string -}) => { - const pal = usePalette('default') - const {_} = useLingui() - const {isMobile} = useWebMediaQueries() - return ( - - - - - Done{extraText} - - - - - ) -} - -const styles = StyleSheet.create({ - btnContainer: { - paddingTop: 10, - paddingHorizontal: 10, - }, - btn: { - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'center', - width: '100%', - borderRadius: 32, - padding: 14, - backgroundColor: colors.gray1, - }, -}) diff --git a/src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx b/src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx deleted file mode 100644 index eaa34e0ac7..0000000000 --- a/src/view/com/modals/lang-settings/ContentLanguagesSettings.tsx +++ /dev/null @@ -1,128 +0,0 @@ -import React from 'react' -import {StyleSheet, View} from 'react-native' -import {Trans} from '@lingui/macro' - -import {usePalette} from '#/lib/hooks/usePalette' -import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries' -import {deviceLanguageCodes} from '#/locale/deviceLocales' -import {languageName} from '#/locale/helpers' -import {useModalControls} from '#/state/modals' -import { - useLanguagePrefs, - useLanguagePrefsApi, -} from '#/state/preferences/languages' -import {LANGUAGES, LANGUAGES_MAP_CODE2} from '../../../../locale/languages' -import {Text} from '../../util/text/Text' -import {ScrollView} from '../util' -import {ConfirmLanguagesButton} from './ConfirmLanguagesButton' -import {LanguageToggle} from './LanguageToggle' - -export const snapPoints = ['100%'] - -export function Component({}: {}) { - const {closeModal} = useModalControls() - const langPrefs = useLanguagePrefs() - const setLangPrefs = useLanguagePrefsApi() - const pal = usePalette('default') - const {isMobile} = useWebMediaQueries() - const onPressDone = React.useCallback(() => { - closeModal() - }, [closeModal]) - - const languages = React.useMemo(() => { - const langs = LANGUAGES.filter( - lang => - !!lang.code2.trim() && - LANGUAGES_MAP_CODE2[lang.code2].code3 === lang.code3, - ) - // sort so that device & selected languages are on top, then alphabetically - langs.sort((a, b) => { - const hasA = - langPrefs.contentLanguages.includes(a.code2) || - deviceLanguageCodes.includes(a.code2) - const hasB = - langPrefs.contentLanguages.includes(b.code2) || - deviceLanguageCodes.includes(b.code2) - if (hasA === hasB) return a.name.localeCompare(b.name) - if (hasA) return -1 - return 1 - }) - return langs - }, [langPrefs]) - - const onPress = React.useCallback( - (code2: string) => { - setLangPrefs.toggleContentLanguage(code2) - }, - [setLangPrefs], - ) - - return ( - - - Content Languages - - - - Which languages would you like to see in your algorithmic feeds? - - - - Leave them all unselected to see any language. - - - {languages.map(lang => ( - { - onPress(lang.code2) - }} - /> - ))} - - - - - ) -} - -const styles = StyleSheet.create({ - container: { - flex: 1, - }, - title: { - textAlign: 'center', - fontWeight: '600', - fontSize: 24, - marginBottom: 12, - }, - description: { - textAlign: 'center', - paddingHorizontal: 16, - marginBottom: 10, - }, - scrollContainer: { - flex: 1, - paddingHorizontal: 10, - }, -}) diff --git a/src/view/com/modals/lang-settings/LanguageToggle.tsx b/src/view/com/modals/lang-settings/LanguageToggle.tsx deleted file mode 100644 index 165a70ba2c..0000000000 --- a/src/view/com/modals/lang-settings/LanguageToggle.tsx +++ /dev/null @@ -1,53 +0,0 @@ -import {StyleSheet} from 'react-native' - -import {usePalette} from '#/lib/hooks/usePalette' -import {toPostLanguages, useLanguagePrefs} from '#/state/preferences/languages' -import {ToggleButton} from '#/view/com/util/forms/ToggleButton' - -export function LanguageToggle({ - code2, - name, - onPress, - langType, -}: { - code2: string - name: string - onPress: () => void - langType: 'contentLanguages' | 'postLanguages' -}) { - const pal = usePalette('default') - const langPrefs = useLanguagePrefs() - - const values = - langType === 'contentLanguages' - ? langPrefs.contentLanguages - : toPostLanguages(langPrefs.postLanguage) - const isSelected = values.includes(code2) - - // enforce a max of 3 selections for post languages - let isDisabled = false - if (langType === 'postLanguages' && values.length >= 3 && !isSelected) { - isDisabled = true - } - - return ( - - ) -} - -const styles = StyleSheet.create({ - languageToggle: { - borderTopWidth: 1, - borderRadius: 0, - paddingHorizontal: 6, - paddingVertical: 12, - }, - dimmed: { - opacity: 0.5, - }, -}) diff --git a/src/view/com/util/forms/ToggleButton.tsx b/src/view/com/util/forms/ToggleButton.tsx deleted file mode 100644 index ca9d9fb493..0000000000 --- a/src/view/com/util/forms/ToggleButton.tsx +++ /dev/null @@ -1,193 +0,0 @@ -import { - type StyleProp, - StyleSheet, - type TextStyle, - View, - type ViewStyle, -} from 'react-native' - -import {choose} from '#/lib/functions' -import {colors} from '#/lib/styles' -import {useTheme} from '#/lib/ThemeContext' -import {type TypographyVariant} from '#/lib/ThemeContext' -import {Text} from '../text/Text' -import {Button, type ButtonType} from './Button' - -/** - * @deprecated use Toggle from `#/components/form/Toggle.tsx` instead - */ -export function ToggleButton({ - testID, - type = 'default-light', - label, - isSelected, - style, - labelType, - onPress, -}: { - testID?: string - type?: ButtonType - label: string - isSelected: boolean - style?: StyleProp - labelType?: TypographyVariant - onPress?: () => void -}) { - const theme = useTheme() - const circleStyle = choose>(type, { - primary: { - borderColor: theme.palette.primary.text, - }, - secondary: { - borderColor: theme.palette.secondary.text, - }, - inverted: { - borderColor: theme.palette.inverted.text, - }, - 'primary-outline': { - borderColor: theme.palette.primary.border, - }, - 'secondary-outline': { - borderColor: theme.palette.secondary.border, - }, - 'primary-light': { - borderColor: theme.palette.primary.border, - }, - 'secondary-light': { - borderColor: theme.palette.secondary.border, - }, - default: { - borderColor: theme.palette.default.border, - }, - 'default-light': { - borderColor: theme.palette.default.border, - }, - }) - const circleFillStyle = choose>( - type, - { - primary: { - backgroundColor: theme.palette.primary.text, - opacity: isSelected ? 1 : 0.33, - }, - secondary: { - backgroundColor: theme.palette.secondary.text, - opacity: isSelected ? 1 : 0.33, - }, - inverted: { - backgroundColor: theme.palette.inverted.text, - opacity: isSelected ? 1 : 0.33, - }, - 'primary-outline': { - backgroundColor: theme.palette.primary.background, - opacity: isSelected ? 1 : 0.5, - }, - 'secondary-outline': { - backgroundColor: theme.palette.secondary.background, - opacity: isSelected ? 1 : 0.5, - }, - 'primary-light': { - backgroundColor: theme.palette.primary.background, - opacity: isSelected ? 1 : 0.5, - }, - 'secondary-light': { - backgroundColor: theme.palette.secondary.background, - opacity: isSelected ? 1 : 0.5, - }, - default: { - backgroundColor: isSelected - ? theme.palette.primary.background - : colors.gray3, - }, - 'default-light': { - backgroundColor: isSelected - ? theme.palette.primary.background - : colors.gray3, - }, - }, - ) - const labelStyle = choose>(type, { - primary: { - color: theme.palette.primary.text, - fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined, - }, - secondary: { - color: theme.palette.secondary.text, - fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined, - }, - inverted: { - color: theme.palette.inverted.text, - fontWeight: theme.palette.inverted.isLowContrast ? '600' : undefined, - }, - 'primary-outline': { - color: theme.palette.primary.textInverted, - fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined, - }, - 'secondary-outline': { - color: theme.palette.secondary.textInverted, - fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined, - }, - 'primary-light': { - color: theme.palette.primary.textInverted, - fontWeight: theme.palette.primary.isLowContrast ? '600' : undefined, - }, - 'secondary-light': { - color: theme.palette.secondary.textInverted, - fontWeight: theme.palette.secondary.isLowContrast ? '600' : undefined, - }, - default: { - color: theme.palette.default.text, - fontWeight: theme.palette.default.isLowContrast ? '600' : undefined, - }, - 'default-light': { - color: theme.palette.default.text, - fontWeight: theme.palette.default.isLowContrast ? '600' : undefined, - }, - }) - return ( - - ) -} - -const styles = StyleSheet.create({ - outer: { - flexDirection: 'row', - alignItems: 'center', - gap: 10, - }, - circle: { - width: 42, - height: 26, - borderRadius: 15, - padding: 3, - borderWidth: 2, - }, - circleFill: { - width: 16, - height: 16, - borderRadius: 10, - }, - circleFillSelected: { - marginLeft: 16, - }, - label: { - flex: 1, - }, -}) diff --git a/src/view/screens/Debug.tsx b/src/view/screens/Debug.tsx index 127bdddd76..1df7b5c1f5 100644 --- a/src/view/screens/Debug.tsx +++ b/src/view/screens/Debug.tsx @@ -14,7 +14,6 @@ import {EmptyState} from '#/view/com/util/EmptyState' import {ErrorMessage} from '#/view/com/util/error/ErrorMessage' import {ErrorScreen} from '#/view/com/util/error/ErrorScreen' import {Button} from '#/view/com/util/forms/Button' -import {ToggleButton} from '#/view/com/util/forms/ToggleButton' import * as LoadingPlaceholder from '#/view/com/util/LoadingPlaceholder' import {Text} from '#/view/com/util/text/Text' import * as Toast from '#/view/com/util/Toast' @@ -47,10 +46,7 @@ export const DebugScreen = ({}: NativeStackScreenProps< ) } -function DebugInner({ - colorScheme, - onToggleColorScheme, -}: { +function DebugInner({}: { colorScheme: 'light' | 'dark' onToggleColorScheme: () => void }) { @@ -61,14 +57,6 @@ function DebugInner({ const renderItem = (item: any) => { return ( - - - {item.currentView === 3 ? ( ) : item.currentView === 2 ? ( @@ -134,8 +122,6 @@ function ControlsView() { - - ) @@ -401,70 +387,3 @@ function ButtonsView() { ) } - -function ToggleButtonsView() { - const defaultPal = usePalette('default') - const buttonStyles = s.mb5 - const [isSelected, setIsSelected] = React.useState(false) - const onToggle = () => setIsSelected(!isSelected) - return ( - - - - - - - - - - - ) -}