RegisterInvite: use ui components

https://gitlab.com/soapbox-pub/soapbox-fe/-/issues/910#note_938469624
This commit is contained in:
Alex Gleason 2022-05-07 12:11:08 -05:00
parent e0cc331781
commit 0863a34bfc
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7

View file

@ -2,6 +2,7 @@ import React from 'react';
import { FormattedMessage } from 'react-intl';
import { useParams } from 'react-router-dom';
import { Stack, CardTitle, Text } from 'soapbox/components/ui';
import RegistrationForm from 'soapbox/features/auth_login/components/registration_form';
import { useAppSelector } from 'soapbox/hooks';
@ -14,27 +15,29 @@ const RegisterInvite: React.FC = () => {
const { token } = useParams<RegisterInviteParams>();
const siteTitle = useAppSelector(state => state.instance.title);
const title = (
<FormattedMessage
id='register_invite.title'
defaultMessage="You've been invited to join {siteTitle}!"
values={{ siteTitle }}
/>
);
return (
<div className='register-invite'>
<div className='register-invite__header'>
<h1 className='register-invite__title'>
<FormattedMessage
id='register_invite.title'
defaultMessage="You've been invited to join {siteTitle}!"
values={{ siteTitle }}
/>
</h1>
<p className='register-invite__lead'>
<Stack space={3}>
<Stack className='mb-4'>
<CardTitle title={title} />
<Text theme='muted'>
<FormattedMessage
id='register_invite.lead'
defaultMessage='Complete the form below to create an account.'
/>
</p>
</div>
<div className='register-invite__form'>
<RegistrationForm inviteToken={token} />
</div>
</div>
</Text>
</Stack>
<RegistrationForm inviteToken={token} />
</Stack>
);
};