moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Refactor a bunch of components to use BigCard

This commit is contained in:
Alex Gleason 2023-09-20 14:10:54 -05:00
parent ffae3f89df
commit 59a32b1a0f
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
9 changed files with 279 additions and 371 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/features/auth-login/components/otp-auth-form.tsx
View File

@ -3,6 +3,7 @@ import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
import { Redirect } from 'react-router-dom'; import { Redirect } from 'react-router-dom';
import { otpVerify, verifyCredentials, switchAccount } from 'soapbox/actions/auth'; import { otpVerify, verifyCredentials, switchAccount } from 'soapbox/actions/auth';
import { BigCard } from 'soapbox/components/big-card';
import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui'; import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
import { useAppDispatch } from 'soapbox/hooks'; import { useAppDispatch } from 'soapbox/hooks';
@ -47,41 +48,33 @@ const OtpAuthForm: React.FC<IOtpAuthForm> = ({ mfa_token }) => {
if (shouldRedirect) return <Redirect to='/' />; if (shouldRedirect) return <Redirect to='/' />;
return ( return (
<div> <BigCard title={<FormattedMessage id='login.otp_log_in' defaultMessage='OTP Login' />}>
<div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-600 sm:-mx-10 sm:pb-10'> <Form onSubmit={handleSubmit}>
<h1 className='text-center text-2xl font-bold'> <FormGroup
<FormattedMessage id='login.otp_log_in' defaultMessage='OTP Login' /> labelText={intl.formatMessage(messages.otpCodeLabel)}
</h1> hintText={intl.formatMessage(messages.otpCodeHint)}
</div> errors={codeError ? [intl.formatMessage(messages.otpLoginFail)] : []}
>
<Input
name='code'
type='text'
autoComplete='off'
autoFocus
required
/>
</FormGroup>
<div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'> <FormActions>
<Form onSubmit={handleSubmit}> <Button
<FormGroup theme='primary'
labelText={intl.formatMessage(messages.otpCodeLabel)} type='submit'
hintText={intl.formatMessage(messages.otpCodeHint)} disabled={isLoading}
errors={codeError ? [intl.formatMessage(messages.otpLoginFail)] : []}
> >
<Input <FormattedMessage id='login.sign_in' defaultMessage='Sign in' />
name='code' </Button>
type='text' </FormActions>
autoComplete='off' </Form>
autoFocus </BigCard>
required
/>
</FormGroup>
<FormActions>
<Button
theme='primary'
type='submit'
disabled={isLoading}
>
<FormattedMessage id='login.sign_in' defaultMessage='Sign in' />
</Button>
</FormActions>
</Form>
</div>
</div>
); );
}; };

45
src/features/auth-login/components/password-reset-confirm.tsx
View File

@ -3,6 +3,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { Redirect } from 'react-router-dom'; import { Redirect } from 'react-router-dom';
import { resetPasswordConfirm } from 'soapbox/actions/security'; import { resetPasswordConfirm } from 'soapbox/actions/security';
import { BigCard } from 'soapbox/components/big-card';
import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui'; import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
import { useAppDispatch } from 'soapbox/hooks'; import { useAppDispatch } from 'soapbox/hooks';
@ -55,33 +56,25 @@ const PasswordResetConfirm = () => {
} }
return ( return (
<div> <BigCard title={<FormattedMessage id='reset_password.header' defaultMessage='Set New Password' />}>
<div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-600 sm:-mx-10 sm:pb-10'> <Form onSubmit={handleSubmit}>
<h1 className='text-center text-2xl font-bold'> <FormGroup labelText={<FormattedMessage id='reset_password.password.label' defaultMessage='Password' />} errors={renderErrors()}>
<FormattedMessage id='reset_password.header' defaultMessage='Set New Password' /> <Input
</h1> type='password'
</div> name='password'
placeholder={intl.formatMessage(messages.passwordPlaceholder)}
onChange={onChange}
required
/>
</FormGroup>
<div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'> <FormActions>
<Form onSubmit={handleSubmit}> <Button type='submit' theme='primary' disabled={isLoading}>
<FormGroup labelText={<FormattedMessage id='reset_password.password.label' defaultMessage='Password' />} errors={renderErrors()}> <FormattedMessage id='password_reset.reset' defaultMessage='Reset password' />
<Input </Button>
type='password' </FormActions>
name='password' </Form>
placeholder={intl.formatMessage(messages.passwordPlaceholder)} </BigCard>
onChange={onChange}
required
/>
</FormGroup>
<FormActions>
<Button type='submit' theme='primary' disabled={isLoading}>
<FormattedMessage id='password_reset.reset' defaultMessage='Reset password' />
</Button>
</FormActions>
</Form>
</div>
</div>
); );
}; };

43
src/features/auth-login/components/password-reset.tsx
View File

@ -3,6 +3,7 @@ import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { Redirect } from 'react-router-dom'; import { Redirect } from 'react-router-dom';
import { resetPassword } from 'soapbox/actions/security'; import { resetPassword } from 'soapbox/actions/security';
import { BigCard } from 'soapbox/components/big-card';
import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui'; import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
import { useAppDispatch, useFeatures } from 'soapbox/hooks'; import { useAppDispatch, useFeatures } from 'soapbox/hooks';
import toast from 'soapbox/toast'; import toast from 'soapbox/toast';
@ -36,32 +37,24 @@ const PasswordReset = () => {
if (success) return <Redirect to='/' />; if (success) return <Redirect to='/' />;
return ( return (
<div> <BigCard title={<FormattedMessage id='password_reset.header' defaultMessage='Reset Password' />}>
<div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-600 sm:-mx-10 sm:pb-10'> <Form onSubmit={handleSubmit}>
<h1 className='text-center text-2xl font-bold'> <FormGroup labelText={intl.formatMessage(features.logInWithUsername ? messages.nicknameOrEmail : messages.email)}>
<FormattedMessage id='password_reset.header' defaultMessage='Reset Password' /> <Input
</h1> type='text'
</div> name='nickname_or_email'
placeholder='me@example.com'
required
/>
</FormGroup>
<div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'> <FormActions>
<Form onSubmit={handleSubmit}> <Button type='submit' theme='primary' disabled={isLoading}>
<FormGroup labelText={intl.formatMessage(features.logInWithUsername ? messages.nicknameOrEmail : messages.email)}> <FormattedMessage id='password_reset.reset' defaultMessage='Reset password' />
<Input </Button>
type='text' </FormActions>
name='nickname_or_email' </Form>
placeholder='me@example.com' </BigCard>
required
/>
</FormGroup>
<FormActions>
<Button type='submit' theme='primary' disabled={isLoading}>
<FormattedMessage id='password_reset.reset' defaultMessage='Reset password' />
</Button>
</FormActions>
</Form>
</div>
</div>
); );
}; };

11
src/features/auth-login/components/registration-page.tsx
View File

@ -1,18 +1,15 @@
import React from 'react'; import React from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { Card, CardTitle, Stack } from 'soapbox/components/ui'; import { BigCard } from 'soapbox/components/big-card';
import RegistrationForm from './registration-form'; import RegistrationForm from './registration-form';
const RegistrationPage: React.FC = () => { const RegistrationPage: React.FC = () => {
return ( return (
<Card variant='rounded'> <BigCard title={<FormattedMessage id='column.registration' defaultMessage='Sign Up' />}>
<Stack space={2}> <RegistrationForm />
<CardTitle title={<FormattedMessage id='column.registration' defaultMessage='Sign Up' />} /> </BigCard>
<RegistrationForm />
</Stack>
</Card>
); );
}; };

106
src/features/onboarding/steps/avatar-selection-step.tsx
View File

@ -3,7 +3,8 @@ import React from 'react';
import { defineMessages, FormattedMessage } from 'react-intl'; import { defineMessages, FormattedMessage } from 'react-intl';
import { patchMe } from 'soapbox/actions/me'; import { patchMe } from 'soapbox/actions/me';
import { Avatar, Button, Card, CardBody, Icon, Spinner, Stack, Text } from 'soapbox/components/ui'; import { BigCard } from 'soapbox/components/big-card';
import { Avatar, Button, Icon, Spinner, Stack } from 'soapbox/components/ui';
import { useAppDispatch, useOwnAccount } from 'soapbox/hooks'; import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
import toast from 'soapbox/toast'; import toast from 'soapbox/toast';
import { isDefaultAvatar } from 'soapbox/utils/accounts'; import { isDefaultAvatar } from 'soapbox/utils/accounts';
@ -64,69 +65,54 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
}; };
return ( return (
<Card variant='rounded' size='xl'> <BigCard
<CardBody> title={<FormattedMessage id='onboarding.avatar.title' defaultMessage='Choose a profile picture' />}
<div> subtitle={<FormattedMessage id='onboarding.avatar.subtitle' defaultMessage='Just have fun with it.' />}
<div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-900/50 sm:-mx-10 sm:pb-10'> >
<Stack space={2}> <Stack space={10}>
<Text size='2xl' align='center' weight='bold'> <div className='relative mx-auto rounded-full bg-gray-200'>
<FormattedMessage id='onboarding.avatar.title' defaultMessage='Choose a profile picture' /> {account && (
</Text> <Avatar src={selectedFile || account.avatar} size={175} />
)}
<Text theme='muted' align='center'> {isSubmitting && (
<FormattedMessage id='onboarding.avatar.subtitle' defaultMessage='Just have fun with it.' /> <div className='absolute inset-0 flex items-center justify-center rounded-full bg-white/80 dark:bg-primary-900/80'>
</Text> <Spinner withText={false} />
</Stack> </div>
</div> )}
<div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'> <button
<Stack space={10}> onClick={openFilePicker}
<div className='relative mx-auto rounded-full bg-gray-200'> type='button'
{account && ( className={clsx({
<Avatar src={selectedFile || account.avatar} size={175} /> 'absolute bottom-3 right-2 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-primary-900 hover:bg-primary-700': true,
)} 'opacity-50 pointer-events-none': isSubmitting,
})}
disabled={isSubmitting}
>
<Icon src={require('@tabler/icons/plus.svg')} className='h-5 w-5 text-white' />
</button>
{isSubmitting && ( <input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
<div className='absolute inset-0 flex items-center justify-center rounded-full bg-white/80 dark:bg-primary-900/80'>
<Spinner withText={false} />
</div>
)}
<button
onClick={openFilePicker}
type='button'
className={clsx({
'absolute bottom-3 right-2 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-primary-900 hover:bg-primary-700': true,
'opacity-50 pointer-events-none': isSubmitting,
})}
disabled={isSubmitting}
>
<Icon src={require('@tabler/icons/plus.svg')} className='h-5 w-5 text-white' />
</button>
<input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
</div>
<Stack justifyContent='center' space={2}>
<Button block theme='primary' type='button' onClick={onNext} disabled={isDefault && isDisabled || isSubmitting}>
{isSubmitting ? (
<FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
) : (
<FormattedMessage id='onboarding.next' defaultMessage='Next' />
)}
</Button>
{isDisabled && (
<Button block theme='tertiary' type='button' onClick={onNext}>
<FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
</Button>
)}
</Stack>
</Stack>
</div>
</div> </div>
</CardBody>
</Card> <Stack justifyContent='center' space={2}>
<Button block theme='primary' type='button' onClick={onNext} disabled={isDefault && isDisabled || isSubmitting}>
{isSubmitting ? (
<FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
) : (
<FormattedMessage id='onboarding.next' defaultMessage='Next' />
)}
</Button>
{isDisabled && (
<Button block theme='tertiary' type='button' onClick={onNext}>
<FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
</Button>
)}
</Stack>
</Stack>
</BigCard>
); );
}; };

92
src/features/onboarding/steps/bio-step.tsx
View File

@ -2,7 +2,8 @@ import React from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { patchMe } from 'soapbox/actions/me'; import { patchMe } from 'soapbox/actions/me';
import { Button, Card, CardBody, FormGroup, Stack, Text, Textarea } from 'soapbox/components/ui'; import { BigCard } from 'soapbox/components/big-card';
import { Button, FormGroup, Stack, Textarea } from 'soapbox/components/ui';
import { useAppDispatch, useOwnAccount } from 'soapbox/hooks'; import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
import toast from 'soapbox/toast'; import toast from 'soapbox/toast';
@ -43,62 +44,49 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
}; };
return ( return (
<Card variant='rounded' size='xl'> <BigCard
<CardBody> title={<FormattedMessage id='onboarding.note.title' defaultMessage='Write a short bio' />}
subtitle={<FormattedMessage id='onboarding.note.subtitle' defaultMessage='You can always edit this later.' />}
>
<Stack space={5}>
<div> <div>
<div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'> <FormGroup
<Stack space={2}> hintText={<FormattedMessage id='onboarding.bio.hint' defaultMessage='Max 500 characters' />}
<Text size='2xl' align='center' weight='bold'> labelText={<FormattedMessage id='edit_profile.fields.bio_label' defaultMessage='Bio' />}
<FormattedMessage id='onboarding.note.title' defaultMessage='Write a short bio' /> errors={errors}
</Text> >
<Textarea
onChange={(event) => setValue(event.target.value)}
placeholder={intl.formatMessage(messages.bioPlaceholder)}
value={value}
maxLength={500}
/>
</FormGroup>
</div>
<Text theme='muted' align='center'> <div>
<FormattedMessage id='onboarding.note.subtitle' defaultMessage='You can always edit this later.' /> <Stack justifyContent='center' space={2}>
</Text> <Button
</Stack> block
</div> theme='primary'
type='submit'
disabled={isSubmitting}
onClick={handleSubmit}
>
{isSubmitting ? (
<FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
) : (
<FormattedMessage id='onboarding.next' defaultMessage='Next' />
)}
</Button>
<Stack space={5}> <Button block theme='tertiary' type='button' onClick={onNext}>
<div className='mx-auto sm:w-2/3 sm:pt-10'> <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
<FormGroup </Button>
hintText={<FormattedMessage id='onboarding.bio.hint' defaultMessage='Max 500 characters' />}
labelText={<FormattedMessage id='edit_profile.fields.bio_label' defaultMessage='Bio' />}
errors={errors}
>
<Textarea
onChange={(event) => setValue(event.target.value)}
placeholder={intl.formatMessage(messages.bioPlaceholder)}
value={value}
maxLength={500}
/>
</FormGroup>
</div>
<div className='mx-auto sm:w-2/3 md:w-1/2'>
<Stack justifyContent='center' space={2}>
<Button
block
theme='primary'
type='submit'
disabled={isSubmitting}
onClick={handleSubmit}
>
{isSubmitting ? (
<FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
) : (
<FormattedMessage id='onboarding.next' defaultMessage='Next' />
)}
</Button>
<Button block theme='tertiary' type='button' onClick={onNext}>
<FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
</Button>
</Stack>
</div>
</Stack> </Stack>
</div> </div>
</CardBody> </Stack>
</Card> </BigCard>
); );
}; };

142
src/features/onboarding/steps/cover-photo-selection-step.tsx
View File

@ -3,8 +3,9 @@ import React from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { patchMe } from 'soapbox/actions/me'; import { patchMe } from 'soapbox/actions/me';
import { BigCard } from 'soapbox/components/big-card';
import StillImage from 'soapbox/components/still-image'; import StillImage from 'soapbox/components/still-image';
import { Avatar, Button, Card, CardBody, Icon, Spinner, Stack, Text } from 'soapbox/components/ui'; import { Avatar, Button, Icon, Spinner, Stack, Text } from 'soapbox/components/ui';
import { useAppDispatch, useOwnAccount } from 'soapbox/hooks'; import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
import toast from 'soapbox/toast'; import toast from 'soapbox/toast';
import { isDefaultHeader } from 'soapbox/utils/accounts'; import { isDefaultHeader } from 'soapbox/utils/accounts';
@ -67,89 +68,74 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
}; };
return ( return (
<Card variant='rounded' size='xl'> <BigCard
<CardBody> title={<FormattedMessage id='onboarding.header.title' defaultMessage='Pick a cover image' />}
<div> subtitle={<FormattedMessage id='onboarding.header.subtitle' defaultMessage='This will be shown at the top of your profile.' />}
<div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'> >
<Stack space={2}> <Stack space={10}>
<Text size='2xl' align='center' weight='bold'> <div className='rounded-lg border border-solid border-gray-200 dark:border-gray-800'>
<FormattedMessage id='onboarding.header.title' defaultMessage='Pick a cover image' /> <div
</Text> role='button'
className='relative flex h-24 items-center justify-center rounded-t-md bg-gray-200 dark:bg-gray-800'
>
{selectedFile || account?.header && (
<StillImage
src={selectedFile || account.header}
alt={intl.formatMessage(messages.header)}
className='absolute inset-0 rounded-t-md object-cover'
/>
)}
<Text theme='muted' align='center'> {isSubmitting && (
<FormattedMessage id='onboarding.header.subtitle' defaultMessage='This will be shown at the top of your profile.' /> <div
</Text> className='absolute inset-0 flex items-center justify-center rounded-t-md bg-white/80 dark:bg-primary-900/80'
</Stack> >
<Spinner withText={false} />
</div>
)}
<button
onClick={openFilePicker}
type='button'
className={clsx({
'absolute -top-3 -right-3 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-primary-900 hover:bg-primary-700': true,
'opacity-50 pointer-events-none': isSubmitting,
})}
disabled={isSubmitting}
>
<Icon src={require('@tabler/icons/plus.svg')} className='h-5 w-5 text-white' />
</button>
<input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
</div> </div>
<div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'> <div className='flex flex-col px-4 pb-4'>
<Stack space={10}> {account && (
<div className='rounded-lg border border-solid border-gray-200 dark:border-gray-800'> <Avatar src={account.avatar} size={64} className='-mt-8 mb-2 ring-2 ring-white dark:ring-primary-800' />
<div )}
role='button'
className='relative flex h-24 items-center justify-center rounded-t-md bg-gray-200 dark:bg-gray-800'
>
{selectedFile || account?.header && (
<StillImage
src={selectedFile || account.header}
alt={intl.formatMessage(messages.header)}
className='absolute inset-0 rounded-t-md object-cover'
/>
)}
{isSubmitting && ( <Text weight='bold' size='sm'>{account?.display_name}</Text>
<div <Text theme='muted' size='sm'>@{account?.username}</Text>
className='absolute inset-0 flex items-center justify-center rounded-t-md bg-white/80 dark:bg-primary-900/80'
>
<Spinner withText={false} />
</div>
)}
<button
onClick={openFilePicker}
type='button'
className={clsx({
'absolute -top-3 -right-3 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-primary-900 hover:bg-primary-700': true,
'opacity-50 pointer-events-none': isSubmitting,
})}
disabled={isSubmitting}
>
<Icon src={require('@tabler/icons/plus.svg')} className='h-5 w-5 text-white' />
</button>
<input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
</div>
<div className='flex flex-col px-4 pb-4'>
{account && (
<Avatar src={account.avatar} size={64} className='-mt-8 mb-2 ring-2 ring-white dark:ring-primary-800' />
)}
<Text weight='bold' size='sm'>{account?.display_name}</Text>
<Text theme='muted' size='sm'>@{account?.username}</Text>
</div>
</div>
<Stack justifyContent='center' space={2}>
<Button block theme='primary' type='button' onClick={onNext} disabled={isDefault && isDisabled || isSubmitting}>
{isSubmitting ? (
<FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
) : (
<FormattedMessage id='onboarding.next' defaultMessage='Next' />
)}
</Button>
{isDisabled && (
<Button block theme='tertiary' type='button' onClick={onNext}>
<FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
</Button>
)}
</Stack>
</Stack>
</div> </div>
</div> </div>
</CardBody>
</Card> <Stack justifyContent='center' space={2}>
<Button block theme='primary' type='button' onClick={onNext} disabled={isDefault && isDisabled || isSubmitting}>
{isSubmitting ? (
<FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
) : (
<FormattedMessage id='onboarding.next' defaultMessage='Next' />
)}
</Button>
{isDisabled && (
<Button block theme='tertiary' type='button' onClick={onNext}>
<FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
</Button>
)}
</Stack>
</Stack>
</BigCard>
); );
}; };

94
src/features/onboarding/steps/display-name-step.tsx
View File

@ -2,7 +2,8 @@ import React from 'react';
import { defineMessages, FormattedMessage, useIntl } from 'react-intl'; import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
import { patchMe } from 'soapbox/actions/me'; import { patchMe } from 'soapbox/actions/me';
import { Button, Card, CardBody, FormGroup, Input, Stack, Text } from 'soapbox/components/ui'; import { BigCard } from 'soapbox/components/big-card';
import { Button, FormGroup, Input, Stack } from 'soapbox/components/ui';
import { useAppDispatch, useOwnAccount } from 'soapbox/hooks'; import { useAppDispatch, useOwnAccount } from 'soapbox/hooks';
import toast from 'soapbox/toast'; import toast from 'soapbox/toast';
@ -54,61 +55,46 @@ const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
}; };
return ( return (
<Card variant='rounded' size='xl'> <BigCard
<CardBody> title={<FormattedMessage id='onboarding.display_name.title' defaultMessage='Choose a display name' />}
<div> subtitle={<FormattedMessage id='onboarding.display_name.subtitle' defaultMessage='You can always edit this later.' />}
<div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'> >
<Stack space={2}> <Stack space={5}>
<Text size='2xl' align='center' weight='bold'> <FormGroup
<FormattedMessage id='onboarding.display_name.title' defaultMessage='Choose a display name' /> hintText={hintText}
</Text> labelText={<FormattedMessage id='onboarding.display_name.label' defaultMessage='Display name' />}
errors={errors}
>
<Input
onChange={(event) => setValue(event.target.value)}
placeholder={intl.formatMessage(messages.usernamePlaceholder)}
type='text'
value={value}
maxLength={30}
/>
</FormGroup>
<Text theme='muted' align='center'> <Stack justifyContent='center' space={2}>
<FormattedMessage id='onboarding.display_name.subtitle' defaultMessage='You can always edit this later.' /> <Button
</Text> block
</Stack> theme='primary'
</div> type='submit'
disabled={isDisabled || isSubmitting}
onClick={handleSubmit}
>
{isSubmitting ? (
<FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
) : (
<FormattedMessage id='onboarding.next' defaultMessage='Next' />
)}
</Button>
<div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'> <Button block theme='tertiary' type='button' onClick={onNext}>
<Stack space={5}> <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
<FormGroup </Button>
hintText={hintText} </Stack>
labelText={<FormattedMessage id='onboarding.display_name.label' defaultMessage='Display name' />} </Stack>
errors={errors} </BigCard>
>
<Input
onChange={(event) => setValue(event.target.value)}
placeholder={intl.formatMessage(messages.usernamePlaceholder)}
type='text'
value={value}
maxLength={30}
/>
</FormGroup>
<Stack justifyContent='center' space={2}>
<Button
block
theme='primary'
type='submit'
disabled={isDisabled || isSubmitting}
onClick={handleSubmit}
>
{isSubmitting ? (
<FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
) : (
<FormattedMessage id='onboarding.next' defaultMessage='Next' />
)}
</Button>
<Button block theme='tertiary' type='button' onClick={onNext}>
<FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
</Button>
</Stack>
</Stack>
</div>
</div>
</CardBody>
</Card>
); );
}; };

58
src/features/onboarding/steps/suggested-accounts-step.tsx
View File

@ -2,8 +2,9 @@ import debounce from 'lodash/debounce';
import React from 'react'; import React from 'react';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import { BigCard } from 'soapbox/components/big-card';
import ScrollableList from 'soapbox/components/scrollable-list'; import ScrollableList from 'soapbox/components/scrollable-list';
import { Button, Card, CardBody, Stack, Text } from 'soapbox/components/ui'; import { Button, Stack, Text } from 'soapbox/components/ui';
import AccountContainer from 'soapbox/containers/account-container'; import AccountContainer from 'soapbox/containers/account-container';
import { useOnboardingSuggestions } from 'soapbox/queries/suggestions'; import { useOnboardingSuggestions } from 'soapbox/queries/suggestions';
@ -66,43 +67,28 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
}; };
return ( return (
<Card variant='rounded' size='xl'> <BigCard
<CardBody> title={<FormattedMessage id='onboarding.suggestions.title' defaultMessage='Suggested accounts' />}
<div> subtitle={<FormattedMessage id='onboarding.suggestions.subtitle' defaultMessage='Here are a few of the most popular accounts you might like.' />}
<div className='-mx-4 mb-4 border-b border-solid border-gray-200 pb-4 dark:border-gray-800 sm:-mx-10 sm:pb-10'> >
<Stack space={2}> {renderBody()}
<Text size='2xl' align='center' weight='bold'>
<FormattedMessage id='onboarding.suggestions.title' defaultMessage='Suggested accounts' />
</Text>
<Text theme='muted' align='center'> <Stack>
<FormattedMessage id='onboarding.suggestions.subtitle' defaultMessage='Here are a few of the most popular accounts you might like.' /> <Stack justifyContent='center' space={2}>
</Text> <Button
</Stack> block
</div> theme='primary'
onClick={onNext}
>
<FormattedMessage id='onboarding.done' defaultMessage='Done' />
</Button>
{renderBody()} <Button block theme='tertiary' type='button' onClick={onNext}>
<FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
<div className='mx-auto sm:w-2/3 md:w-1/2'> </Button>
<Stack> </Stack>
<Stack justifyContent='center' space={2}> </Stack>
<Button </BigCard>
block
theme='primary'
onClick={onNext}
>
<FormattedMessage id='onboarding.done' defaultMessage='Done' />
</Button>
<Button block theme='tertiary' type='button' onClick={onNext}>
<FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
</Button>
</Stack>
</Stack>
</div>
</div>
</CardBody>
</Card>
); );
}; };