120 lines
3.6 KiB
TypeScript
120 lines
3.6 KiB
TypeScript
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, {fontWeight: '900'}]}>
|
|
<Trans>Introducing new font settings ✨</Trans>
|
|
</Text>
|
|
<Text style={[a.text_lg, a.leading_snug]}>
|
|
<Trans>
|
|
To the ensure the best possible experience, we're introducing a
|
|
new theme font, along with adjustable font sizing settings.
|
|
</Trans>
|
|
</Text>
|
|
<Text
|
|
style={[a.text_sm, a.leading_snug, t.atoms.text_contrast_medium]}>
|
|
<Trans>
|
|
Defaults are shown below. You can edit 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>
|
|
)
|
|
}
|