diff options
Diffstat (limited to 'src/components/dialogs/nuxs/NeueTypography.tsx')
-rw-r--r-- | src/components/dialogs/nuxs/NeueTypography.tsx | 117 |
1 files changed, 0 insertions, 117 deletions
diff --git a/src/components/dialogs/nuxs/NeueTypography.tsx b/src/components/dialogs/nuxs/NeueTypography.tsx deleted file mode 100644 index f29dc356d..000000000 --- a/src/components/dialogs/nuxs/NeueTypography.tsx +++ /dev/null @@ -1,117 +0,0 @@ -import React from 'react' -import {View} from 'react-native' -import {msg, Trans} from '@lingui/macro' -import {useLingui} from '@lingui/react' - -import {AppearanceToggleButtonGroup} from '#/screens/Settings/AppearanceSettings' -import {atoms as a, useAlf, useTheme} from '#/alf' -import * as Dialog from '#/components/Dialog' -import {useNuxDialogContext} from '#/components/dialogs/nuxs' -import {Divider} from '#/components/Divider' -import {TextSize_Stroke2_Corner0_Rounded as TextSize} from '#/components/icons/TextSize' -import {TitleCase_Stroke2_Corner0_Rounded as Aa} from '#/components/icons/TitleCase' -import {Text} from '#/components/Typography' - -export function NeueTypography() { - const t = useTheme() - const {_} = useLingui() - const nuxDialogs = useNuxDialogContext() - const control = Dialog.useDialogControl() - const {fonts} = useAlf() - - Dialog.useAutoOpen(control, 3e3) - - const onClose = React.useCallback(() => { - nuxDialogs.dismissActiveNux() - }, [nuxDialogs]) - - const onChangeFontFamily = React.useCallback( - (values: string[]) => { - const next = values[0] === 'system' ? 'system' : 'theme' - fonts.setFontFamily(next) - }, - [fonts], - ) - - const onChangeFontScale = React.useCallback( - (values: string[]) => { - const next = values[0] || ('0' as any) - fonts.setFontScale(next) - }, - [fonts], - ) - - return ( - <Dialog.Outer control={control} onClose={onClose}> - <Dialog.Handle /> - <Dialog.ScrollableInner label={_(msg`Introducing new font settings`)}> - <View style={[a.gap_xl]}> - <View style={[a.gap_md]}> - <Text style={[a.text_3xl, a.font_heavy]}> - <Trans>New font settings ✨</Trans> - </Text> - <Text style={[a.text_lg, a.leading_snug, {maxWidth: 400}]}> - <Trans> - We're introducing a new theme font, along with adjustable font - sizing. - </Trans> - </Text> - <Text - style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}> - <Trans> - You can adjust these in your Appearance Settings later. - </Trans> - </Text> - </View> - - <Divider /> - - <View style={[a.gap_lg]}> - <AppearanceToggleButtonGroup - title={_(msg`Font`)} - description={_( - msg`For the best experience, we recommend using the theme font.`, - )} - icon={Aa} - items={[ - { - label: _(msg`System`), - name: 'system', - }, - { - label: _(msg`Theme`), - name: 'theme', - }, - ]} - values={[fonts.family]} - onChange={onChangeFontFamily} - /> - - <AppearanceToggleButtonGroup - title={_(msg`Font size`)} - icon={TextSize} - items={[ - { - label: _(msg`Smaller`), - name: '-1', - }, - { - label: _(msg`Default`), - name: '0', - }, - { - label: _(msg`Larger`), - name: '1', - }, - ]} - values={[fonts.scale]} - onChange={onChangeFontScale} - /> - </View> - </View> - - <Dialog.Close /> - </Dialog.ScrollableInner> - </Dialog.Outer> - ) -} |