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

13
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 { 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 { useAppDispatch } from 'soapbox/hooks';
@ -47,14 +48,7 @@ const OtpAuthForm: React.FC<IOtpAuthForm> = ({ mfa_token }) => {
if (shouldRedirect) return <Redirect to='/' />;
return (
<div>
<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'>
<h1 className='text-center text-2xl font-bold'>
<FormattedMessage id='login.otp_log_in' defaultMessage='OTP Login' />
</h1>
</div>
<div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
<BigCard title={<FormattedMessage id='login.otp_log_in' defaultMessage='OTP Login' />}>
<Form onSubmit={handleSubmit}>
<FormGroup
labelText={intl.formatMessage(messages.otpCodeLabel)}
@ -80,8 +74,7 @@ const OtpAuthForm: React.FC<IOtpAuthForm> = ({ mfa_token }) => {
</Button>
</FormActions>
</Form>
</div>
</div>
</BigCard>
);
};

13
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 { resetPasswordConfirm } from 'soapbox/actions/security';
import { BigCard } from 'soapbox/components/big-card';
import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
import { useAppDispatch } from 'soapbox/hooks';
@ -55,14 +56,7 @@ const PasswordResetConfirm = () => {
}
return (
<div>
<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'>
<h1 className='text-center text-2xl font-bold'>
<FormattedMessage id='reset_password.header' defaultMessage='Set New Password' />
</h1>
</div>
<div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
<BigCard title={<FormattedMessage id='reset_password.header' defaultMessage='Set New Password' />}>
<Form onSubmit={handleSubmit}>
<FormGroup labelText={<FormattedMessage id='reset_password.password.label' defaultMessage='Password' />} errors={renderErrors()}>
<Input
@ -80,8 +74,7 @@ const PasswordResetConfirm = () => {
</Button>
</FormActions>
</Form>
</div>
</div>
</BigCard>
);
};

13
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 { resetPassword } from 'soapbox/actions/security';
import { BigCard } from 'soapbox/components/big-card';
import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
import { useAppDispatch, useFeatures } from 'soapbox/hooks';
import toast from 'soapbox/toast';
@ -36,14 +37,7 @@ const PasswordReset = () => {
if (success) return <Redirect to='/' />;
return (
<div>
<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'>
<h1 className='text-center text-2xl font-bold'>
<FormattedMessage id='password_reset.header' defaultMessage='Reset Password' />
</h1>
</div>
<div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
<BigCard title={<FormattedMessage id='password_reset.header' defaultMessage='Reset Password' />}>
<Form onSubmit={handleSubmit}>
<FormGroup labelText={intl.formatMessage(features.logInWithUsername ? messages.nicknameOrEmail : messages.email)}>
<Input
@ -60,8 +54,7 @@ const PasswordReset = () => {
</Button>
</FormActions>
</Form>
</div>
</div>
</BigCard>
);
};

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

@ -1,18 +1,15 @@
import React from 'react';
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';
const RegistrationPage: React.FC = () => {
return (
<Card variant='rounded'>
<Stack space={2}>
<CardTitle title={<FormattedMessage id='column.registration' defaultMessage='Sign Up' />} />
<BigCard title={<FormattedMessage id='column.registration' defaultMessage='Sign Up' />}>
<RegistrationForm />
</Stack>
</Card>
</BigCard>
);
};

28
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 { 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 toast from 'soapbox/toast';
import { isDefaultAvatar } from 'soapbox/utils/accounts';
@ -64,22 +65,10 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
};
return (
<Card variant='rounded' size='xl'>
<CardBody>
<div>
<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}>
<Text size='2xl' align='center' weight='bold'>
<FormattedMessage id='onboarding.avatar.title' defaultMessage='Choose a profile picture' />
</Text>
<Text theme='muted' align='center'>
<FormattedMessage id='onboarding.avatar.subtitle' defaultMessage='Just have fun with it.' />
</Text>
</Stack>
</div>
<div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
<BigCard
title={<FormattedMessage id='onboarding.avatar.title' defaultMessage='Choose a profile picture' />}
subtitle={<FormattedMessage id='onboarding.avatar.subtitle' defaultMessage='Just have fun with it.' />}
>
<Stack space={10}>
<div className='relative mx-auto rounded-full bg-gray-200'>
{account && (
@ -123,10 +112,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
)}
</Stack>
</Stack>
</div>
</div>
</CardBody>
</Card>
</BigCard>
);
};

30
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 { 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 toast from 'soapbox/toast';
@ -43,23 +44,12 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
};
return (
<Card variant='rounded' size='xl'>
<CardBody>
<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'>
<Stack space={2}>
<Text size='2xl' align='center' weight='bold'>
<FormattedMessage id='onboarding.note.title' defaultMessage='Write a short bio' />
</Text>
<Text theme='muted' align='center'>
<FormattedMessage id='onboarding.note.subtitle' defaultMessage='You can always edit this later.' />
</Text>
</Stack>
</div>
<BigCard
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 className='mx-auto sm:w-2/3 sm:pt-10'>
<div>
<FormGroup
hintText={<FormattedMessage id='onboarding.bio.hint' defaultMessage='Max 500 characters' />}
labelText={<FormattedMessage id='edit_profile.fields.bio_label' defaultMessage='Bio' />}
@ -74,7 +64,7 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
</FormGroup>
</div>
<div className='mx-auto sm:w-2/3 md:w-1/2'>
<div>
<Stack justifyContent='center' space={2}>
<Button
block
@ -96,9 +86,7 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
</Stack>
</div>
</Stack>
</div>
</CardBody>
</Card>
</BigCard>
);
};

28
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 { patchMe } from 'soapbox/actions/me';
import { BigCard } from 'soapbox/components/big-card';
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 toast from 'soapbox/toast';
import { isDefaultHeader } from 'soapbox/utils/accounts';
@ -67,22 +68,10 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
};
return (
<Card variant='rounded' size='xl'>
<CardBody>
<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'>
<Stack space={2}>
<Text size='2xl' align='center' weight='bold'>
<FormattedMessage id='onboarding.header.title' defaultMessage='Pick a cover image' />
</Text>
<Text theme='muted' align='center'>
<FormattedMessage id='onboarding.header.subtitle' defaultMessage='This will be shown at the top of your profile.' />
</Text>
</Stack>
</div>
<div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
<BigCard
title={<FormattedMessage id='onboarding.header.title' defaultMessage='Pick a cover image' />}
subtitle={<FormattedMessage id='onboarding.header.subtitle' defaultMessage='This will be shown at the top of your profile.' />}
>
<Stack space={10}>
<div className='rounded-lg border border-solid border-gray-200 dark:border-gray-800'>
<div
@ -146,10 +135,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
)}
</Stack>
</Stack>
</div>
</div>
</CardBody>
</Card>
</BigCard>
);
};

28
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 { 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 toast from 'soapbox/toast';
@ -54,22 +55,10 @@ const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
};
return (
<Card variant='rounded' size='xl'>
<CardBody>
<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'>
<Stack space={2}>
<Text size='2xl' align='center' weight='bold'>
<FormattedMessage id='onboarding.display_name.title' defaultMessage='Choose a display name' />
</Text>
<Text theme='muted' align='center'>
<FormattedMessage id='onboarding.display_name.subtitle' defaultMessage='You can always edit this later.' />
</Text>
</Stack>
</div>
<div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
<BigCard
title={<FormattedMessage id='onboarding.display_name.title' defaultMessage='Choose a display name' />}
subtitle={<FormattedMessage id='onboarding.display_name.subtitle' defaultMessage='You can always edit this later.' />}
>
<Stack space={5}>
<FormGroup
hintText={hintText}
@ -105,10 +94,7 @@ const DisplayNameStep = ({ onNext }: { onNext: () => void }) => {
</Button>
</Stack>
</Stack>
</div>
</div>
</CardBody>
</Card>
</BigCard>
);
};

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

@ -2,8 +2,9 @@ import debounce from 'lodash/debounce';
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { BigCard } from 'soapbox/components/big-card';
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 { useOnboardingSuggestions } from 'soapbox/queries/suggestions';
@ -66,24 +67,12 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
};
return (
<Card variant='rounded' size='xl'>
<CardBody>
<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'>
<Stack space={2}>
<Text size='2xl' align='center' weight='bold'>
<FormattedMessage id='onboarding.suggestions.title' defaultMessage='Suggested accounts' />
</Text>
<Text theme='muted' align='center'>
<FormattedMessage id='onboarding.suggestions.subtitle' defaultMessage='Here are a few of the most popular accounts you might like.' />
</Text>
</Stack>
</div>
<BigCard
title={<FormattedMessage id='onboarding.suggestions.title' defaultMessage='Suggested accounts' />}
subtitle={<FormattedMessage id='onboarding.suggestions.subtitle' defaultMessage='Here are a few of the most popular accounts you might like.' />}
>
{renderBody()}
<div className='mx-auto sm:w-2/3 md:w-1/2'>
<Stack>
<Stack justifyContent='center' space={2}>
<Button
@ -99,10 +88,7 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
</Button>
</Stack>
</Stack>
</div>
</div>
</CardBody>
</Card>
</BigCard>
);
};