bigbuffet/pleroma
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Onboarding: i18n

Browse source
This commit is contained in:
Alex Gleason 2022-04-12 13:25:53 -05:00
parent 98c77006ce
commit 747af447c5
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
6 changed files with 47 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
View file

@ -1,6 +1,7 @@
import { AxiosError } from 'axios'; import { AxiosError } from 'axios';
import classNames from 'classnames'; import classNames from 'classnames';
import * as React from 'react'; import * as React from 'react';
import { FormattedMessage } from 'react-intl';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import { patchMe } from 'soapbox/actions/me'; import { patchMe } from 'soapbox/actions/me';
@ -61,11 +62,11 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
<div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'> <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
<Stack space={2}> <Stack space={2}>
<Text size='2xl' align='center' weight='bold'> <Text size='2xl' align='center' weight='bold'>
Choose a profile picture <FormattedMessage id='onboarding.avatar.title' defaultMessage='Choose a profile picture' />
</Text> </Text>
<Text theme='muted' align='center'> <Text theme='muted' align='center'>
Just have fun with it. <FormattedMessage id='onboarding.avatar.subtitle' defaultMessage='Just have fun with it.' />
</Text> </Text>
</Stack> </Stack>
</div> </div>
@ -100,11 +101,17 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
<Stack justifyContent='center' space={2}> <Stack justifyContent='center' space={2}>
<Button block theme='primary' type='submit' disabled={isDisabled || isSubmitting}> <Button block theme='primary' type='submit' disabled={isDisabled || isSubmitting}>
{isSubmitting ? 'Saving...' : 'Next'} {isSubmitting ? (
<FormattedMessage id='onboarding.saving' defaultMessage='Saving...' />
) : (
<FormattedMessage id='onboarding.next' defaultMessage='Next' />
)}
</Button> </Button>
{isDisabled && ( {isDisabled && (
<Button block theme='link' type='button' onClick={onNext}>Skip for now</Button> <Button block theme='link' type='button' onClick={onNext}>
<FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
</Button>
)} )}
</Stack> </Stack>
</Stack> </Stack>

15
app/soapbox/features/onboarding/steps/bio-step.tsx
View file

@ -1,5 +1,6 @@
import { AxiosError } from 'axios'; import { AxiosError } from 'axios';
import * as React from 'react'; import * as React from 'react';
import { FormattedMessage } from 'react-intl';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import { patchMe } from 'soapbox/actions/me'; import { patchMe } from 'soapbox/actions/me';
@ -44,11 +45,11 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
<div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'> <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
<Stack space={2}> <Stack space={2}>
<Text size='2xl' align='center' weight='bold'> <Text size='2xl' align='center' weight='bold'>
Write a short bio <FormattedMessage id='onboarding.note.title' defaultMessage='Write a short bio' />
</Text> </Text>
<Text theme='muted' align='center'> <Text theme='muted' align='center'>
You can always edit this later. <FormattedMessage id='onboarding.note.subtitle' defaultMessage='You can always edit this later.' />
</Text> </Text>
</Stack> </Stack>
</div> </div>
@ -78,10 +79,16 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
disabled={isDisabled || isSubmitting} disabled={isDisabled || isSubmitting}
onClick={handleSubmit} onClick={handleSubmit}
> >
{isSubmitting ? 'Saving...' : 'Next'} {isSubmitting ? (
<FormattedMessage id='onboarding.saving' defaultMessage='Saving...' />
) : (
<FormattedMessage id='onboarding.next' defaultMessage='Next' />
)}
</Button> </Button>
<Button block theme='link' type='button' onClick={onNext}>Skip for now</Button> <Button block theme='link' type='button' onClick={onNext}>
<FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
</Button>
</Stack> </Stack>
</div> </div>
</Stack> </Stack>

12
app/soapbox/features/onboarding/steps/completed-step.tsx
View file

@ -1,4 +1,5 @@
import * as React from 'react'; import * as React from 'react';
import { FormattedMessage } from'react-intl';
import { Button, Card, CardBody, Icon, Stack, Text } from 'soapbox/components/ui'; import { Button, Card, CardBody, Icon, Stack, Text } from 'soapbox/components/ui';
@ -9,13 +10,14 @@ const CompletedStep = ({ onComplete }: { onComplete: () => void }) => (
<Icon strokeWidth={1} src={require('@tabler/icons/icons/confetti.svg')} className='w-16 h-16 mx-auto text-primary-600' /> <Icon strokeWidth={1} src={require('@tabler/icons/icons/confetti.svg')} className='w-16 h-16 mx-auto text-primary-600' />
<Text size='2xl' align='center' weight='bold'> <Text size='2xl' align='center' weight='bold'>
Onboarding complete <FormattedMessage id='onboarding.finished.title' defaultMessage='Onboarding complete' />
</Text> </Text>
<Text theme='muted' align='center'> <Text theme='muted' align='center'>
We are very excited to welcome you to our Truth Seeking <FormattedMessage
community! Tap the button below to start enjoying id='onboarding.finished.message'
Truth Social. defaultMessage='We are very excited to welcome you to our Truth Seeking community! Tap the button below to start enjoying Truth Social.'
/>
</Text> </Text>
</Stack> </Stack>
@ -26,7 +28,7 @@ const CompletedStep = ({ onComplete }: { onComplete: () => void }) => (
theme='primary' theme='primary'
onClick={onComplete} onClick={onComplete}
> >
View Feed <FormattedMessage id='onboarding.view_feed' defaultMessage='View Feed' />
</Button> </Button>
</Stack> </Stack>
</div> </div>

9
app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
View file

@ -1,6 +1,7 @@
import { AxiosError } from 'axios'; import { AxiosError } from 'axios';
import classNames from 'classnames'; import classNames from 'classnames';
import * as React from 'react'; import * as React from 'react';
import { FormattedMessage } from 'react-intl';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import { patchMe } from 'soapbox/actions/me'; import { patchMe } from 'soapbox/actions/me';
@ -64,11 +65,11 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
<div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'> <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
<Stack space={2}> <Stack space={2}>
<Text size='2xl' align='center' weight='bold'> <Text size='2xl' align='center' weight='bold'>
Pick a cover image <FormattedMessage id='onboarding.header.title' defaultMessage='Pick a cover image' />
</Text> </Text>
<Text theme='muted' align='center'> <Text theme='muted' align='center'>
This will be shown at the top of your profile. <FormattedMessage id='onboarding.header.subtitle' defaultMessage='This will be shown at the top of your profile.' />
</Text> </Text>
</Stack> </Stack>
</div> </div>
@ -128,7 +129,9 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
</Button> </Button>
{isDisabled && ( {isDisabled && (
<Button block theme='link' type='button' onClick={onNext}>Skip for now</Button> <Button block theme='link' type='button' onClick={onNext}>
<FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
</Button>
)} )}
</Stack> </Stack>
</Stack> </Stack>

9
app/soapbox/features/onboarding/steps/display-name-step.tsx
View file

@ -1,5 +1,6 @@
import { AxiosError } from 'axios'; import { AxiosError } from 'axios';
import * as React from 'react'; import * as React from 'react';
import { FormattedMessage } from 'react-intl';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import { patchMe } from 'soapbox/actions/me'; import { patchMe } from 'soapbox/actions/me';
@ -51,11 +52,11 @@ const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
<div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'> <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
<Stack space={2}> <Stack space={2}>
<Text size='2xl' align='center' weight='bold'> <Text size='2xl' align='center' weight='bold'>
Choose a display name <FormattedMessage id='onboarding.display_name.title' defaultMessage='Choose a display name' />
</Text> </Text>
<Text theme='muted' align='center'> <Text theme='muted' align='center'>
You can always edit this later. <FormattedMessage id='onboarding.display_name.subtitle' defaultMessage='You can always edit this later.' />
</Text> </Text>
</Stack> </Stack>
</div> </div>
@ -87,7 +88,9 @@ const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
{isSubmitting ? 'Saving...' : 'Next'} {isSubmitting ? 'Saving...' : 'Next'}
</Button> </Button>
<Button block theme='link' type='button' onClick={onNext}>Skip for now</Button> <Button block theme='link' type='button' onClick={onNext}>
<FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
</Button>
</Stack> </Stack>
</Stack> </Stack>
</div> </div>

9
app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
View file

@ -1,5 +1,6 @@
import { Map as ImmutableMap } from 'immutable'; import { Map as ImmutableMap } from 'immutable';
import * as React from 'react'; import * as React from 'react';
import { FormattedMessage } from 'react-intl';
import { useDispatch } from 'react-redux'; import { useDispatch } from 'react-redux';
import { Button, Card, CardBody, Stack, Text } from 'soapbox/components/ui'; import { Button, Card, CardBody, Stack, Text } from 'soapbox/components/ui';
@ -29,11 +30,11 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
<div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'> <div className='pb-4 sm:pb-10 mb-4 border-b border-gray-200 border-solid -mx-4 sm:-mx-10'>
<Stack space={2}> <Stack space={2}>
<Text size='2xl' align='center' weight='bold'> <Text size='2xl' align='center' weight='bold'>
Suggested accounts <FormattedMessage id='onboarding.suggestions.title' defaultMessage='Suggested accounts' />
</Text> </Text>
<Text theme='muted' align='center'> <Text theme='muted' align='center'>
Here are a few of the most popular accounts you might like. <FormattedMessage id='onboarding.suggestions.subtitle' defaultMessage='Here are a few of the most popular accounts you might like.' />
</Text> </Text>
</Stack> </Stack>
</div> </div>
@ -63,7 +64,9 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
Done Done
</Button> </Button>
<Button block theme='link' type='button' onClick={onNext}>Skip for now</Button> <Button block theme='link' type='button' onClick={onNext}>
<FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
</Button>
</Stack> </Stack>
</Stack> </Stack>
</div> </div>