From 0863a34bfc277f1a8576e71fca2166df3a52133d Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Sat, 7 May 2022 12:11:08 -0500
Subject: [PATCH] RegisterInvite: use ui components
 https://gitlab.com/soapbox-pub/soapbox-fe/-/issues/910#note_938469624

---
 .../features/register_invite/index.tsx        | 35 ++++++++++---------
 1 file changed, 19 insertions(+), 16 deletions(-)

diff --git a/app/soapbox/features/register_invite/index.tsx b/app/soapbox/features/register_invite/index.tsx
index 870918220..e312c1126 100644
--- a/app/soapbox/features/register_invite/index.tsx
+++ b/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'>
-      <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>
   );
 };