RegisterInvite: use ui components

https://gitlab.com/soapbox-pub/soapbox-fe/-/issues/910#note_938469624

app/soapbox/features/register_invite/index.tsx

@@ -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'>
+    <Stack space={3}>
-      <div className='register-invite__header'>
+      <Stack className='mb-4'>
-        <h1 className='register-invite__title'>
+        <CardTitle title={title} />
-          <FormattedMessage
+
-            id='register_invite.title'
+        <Text theme='muted'>
-            defaultMessage="You've been invited to join {siteTitle}!"
-            values={{ siteTitle }}
-          />
-        </h1>
-        <p className='register-invite__lead'>
           <FormattedMessage
             id='register_invite.lead'
             defaultMessage='Complete the form below to create an account.'
           />
-        </p>
+        </Text>
-      </div>
+      </Stack>
-      <div className='register-invite__form'>
+
-        <RegistrationForm inviteToken={token} />
+      <RegistrationForm inviteToken={token} />
-      </div>
+    </Stack>
-    </div>
   );
 };