Move invite signup into the UI

src/containers/soapbox.tsx

@@ -17,7 +17,6 @@ import GdprBanner from 'soapbox/components/gdpr-banner';
 import Helmet from 'soapbox/components/helmet';
 import LoadingScreen from 'soapbox/components/loading-screen';
 import { StatProvider } from 'soapbox/contexts/stat-context';
-import AuthLayout from 'soapbox/features/auth-layout';
 import EmbeddedStatus from 'soapbox/features/embedded-status';
 import PublicLayout from 'soapbox/features/public-layout';
 import BundleContainer from 'soapbox/features/ui/containers/bundle-container';
@@ -104,8 +103,6 @@ const SoapboxMount = () => {
         <Route exact path='/' component={PublicLayout} />
       )}
 
-      <Route path='/invite/:token' component={AuthLayout} />
-
       <Route path='/' component={UI} />
     </Switch>
   );

src/features/auth-layout/index.tsx

@@ -10,7 +10,6 @@ import { Button, Card, CardBody } from '../../components/ui';
 import LoginPage from '../auth-login/components/login-page';
 import ExternalLoginForm from '../external-login/components/external-login-form';
 import Footer from '../public-layout/components/footer';
-import RegisterInvite from '../register-invite';
 
 const messages = defineMessages({
   register: { id: 'auth_layout.register', defaultMessage: 'Create an account' },
@@ -61,7 +60,6 @@ const AuthLayout = () => {
 
                     <Route exact path='/login/external' component={ExternalLoginForm} />
                     <Route exact path='/login/add' component={LoginPage} />
-                    <Route path='/invite/:token' component={RegisterInvite} />
                   </Switch>
                 </CardBody>
               </Card>

src/features/register-invite/index.tsx

@@ -2,7 +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 { BigCard } from 'soapbox/components/big-card';
 import RegistrationForm from 'soapbox/features/auth-login/components/registration-form';
 import { useInstance } from 'soapbox/hooks';
 
@@ -23,21 +23,17 @@ const RegisterInvite: React.FC = () => {
     />
   );
 
+  const subtitle = (
+    <FormattedMessage
+      id='register_invite.lead'
+      defaultMessage='Complete the form below to create an account.'
+    />
+  );
+
   return (
-    <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.'
-          />
-        </Text>
-      </Stack>
-
+    <BigCard title={title} subtitle={subtitle}>
       <RegistrationForm inviteToken={token} />
-    </Stack>
+    </BigCard>
   );
 };
 

src/features/ui/index.tsx

@@ -137,6 +137,7 @@ import {
   LoginPage,
   PasswordReset,
   PasswordResetConfirm,
+  RegisterInvite,
 } from './util/async-components';
 import GlobalHotkeys from './util/global-hotkeys';
 import { WrappedRoute } from './util/react-router-helpers';
@@ -363,6 +364,7 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
       <WrappedRoute path='/login' page={DefaultPage} component={LoginPage} publicRoute exact />
       <WrappedRoute path='/reset-password' page={DefaultPage} component={PasswordReset} publicRoute exact />
       <WrappedRoute path='/edit-password' page={DefaultPage} component={PasswordResetConfirm} publicRoute exact />
+      <WrappedRoute path='/invite/:token' page={DefaultPage} component={RegisterInvite} publicRoute exact />
       <Redirect from='/auth/password/new' to='/reset-password' />
       <Redirect from='/auth/password/edit' to={`/edit-password${search}`} />