From ffae3f89df6e26243c493f849719bf317fab735b Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 20 Sep 2023 13:57:33 -0500
Subject: [PATCH 1/8] Move Login page to UI

---
 src/components/big-card.tsx                   |  32 ++++++
 src/containers/soapbox.tsx                    |   1 -
 src/features/auth-layout/index.tsx            |   1 -
 .../auth-login/components/login-form.tsx      | 100 ++++++++----------
 .../auth-login/components/login-page.tsx      |  10 +-
 src/features/ui/index.tsx                     |   3 +
 6 files changed, 88 insertions(+), 59 deletions(-)
 create mode 100644 src/components/big-card.tsx

diff --git a/src/components/big-card.tsx b/src/components/big-card.tsx
new file mode 100644
index 000000000..2fcb7078a
--- /dev/null
+++ b/src/components/big-card.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { Card, CardBody, Stack, Text } from 'soapbox/components/ui';
+
+interface IBigCard {
+  title: React.ReactNode
+  subtitle?: React.ReactNode
+  children: React.ReactNode
+}
+
+const BigCard: React.FC<IBigCard> = ({ title, subtitle, children }) => {
+  return (
+    <Card variant='rounded' size='xl'>
+      <CardBody>
+        <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'>{title}</Text>
+            {subtitle && <Text theme='muted' align='center'>{subtitle}</Text>}
+          </Stack>
+        </div>
+
+        <Stack space={5}>
+          <div className='mx-auto sm:w-2/3 sm:pt-10'>
+            {children}
+          </div>
+        </Stack>
+      </CardBody>
+    </Card>
+  );
+};
+
+export { BigCard };
\ No newline at end of file
diff --git a/src/containers/soapbox.tsx b/src/containers/soapbox.tsx
index deebda4ee..8f0015b87 100644
--- a/src/containers/soapbox.tsx
+++ b/src/containers/soapbox.tsx
@@ -104,7 +104,6 @@ const SoapboxMount = () => {
         <Route exact path='/' component={PublicLayout} />
       )}
 
-      <Route path='/login' component={AuthLayout} />
       <Route path='/reset-password' component={AuthLayout} />
       <Route path='/edit-password' component={AuthLayout} />
       <Route path='/invite/:token' component={AuthLayout} />
diff --git a/src/features/auth-layout/index.tsx b/src/features/auth-layout/index.tsx
index df1d0dd4b..42cc1ba50 100644
--- a/src/features/auth-layout/index.tsx
+++ b/src/features/auth-layout/index.tsx
@@ -64,7 +64,6 @@ const AuthLayout = () => {
 
                     <Route exact path='/login/external' component={ExternalLoginForm} />
                     <Route exact path='/login/add' component={LoginPage} />
-                    <Route exact path='/login' component={LoginPage} />
                     <Route exact path='/reset-password' component={PasswordReset} />
                     <Route exact path='/edit-password' component={PasswordResetConfirm} />
                     <Route path='/invite/:token' component={RegisterInvite} />
diff --git a/src/features/auth-login/components/login-form.tsx b/src/features/auth-login/components/login-form.tsx
index d7871fc75..19f9e76bb 100644
--- a/src/features/auth-login/components/login-form.tsx
+++ b/src/features/auth-login/components/login-form.tsx
@@ -2,11 +2,9 @@ import React from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
 
-import { Button, Form, FormActions, FormGroup, Input, Stack } from 'soapbox/components/ui';
+import { Button, Form, FormActions, FormGroup, Input } from 'soapbox/components/ui';
 import { useFeatures } from 'soapbox/hooks';
 
-import ConsumersList from './consumers-list';
-
 const messages = defineMessages({
   username: {
     id: 'login.fields.username_label',
@@ -35,62 +33,52 @@ const LoginForm: React.FC<ILoginForm> = ({ isLoading, handleSubmit }) => {
   const passwordLabel = intl.formatMessage(messages.password);
 
   return (
-    <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'>
-        <h1 className='text-center text-2xl font-bold'><FormattedMessage id='login_form.header' defaultMessage='Sign In' /></h1>
-      </div>
+    <Form onSubmit={handleSubmit}>
+      <FormGroup labelText={usernameLabel}>
+        <Input
+          aria-label={usernameLabel}
+          placeholder={usernameLabel}
+          type='text'
+          name='username'
+          autoCorrect='off'
+          autoCapitalize='off'
+          required
+        />
+      </FormGroup>
 
-      <Stack className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2' space={5}>
-        <Form onSubmit={handleSubmit}>
-          <FormGroup labelText={usernameLabel}>
-            <Input
-              aria-label={usernameLabel}
-              placeholder={usernameLabel}
-              type='text'
-              name='username'
-              autoCorrect='off'
-              autoCapitalize='off'
-              required
+      <FormGroup
+        labelText={passwordLabel}
+        hintText={
+          <Link to='/reset-password' className='hover:underline' tabIndex={-1}>
+            <FormattedMessage
+              id='login.reset_password_hint'
+              defaultMessage='Trouble logging in?'
             />
-          </FormGroup>
+          </Link>
+        }
+      >
+        <Input
+          aria-label={passwordLabel}
+          placeholder={passwordLabel}
+          type='password'
+          name='password'
+          autoComplete='off'
+          autoCorrect='off'
+          autoCapitalize='off'
+          required
+        />
+      </FormGroup>
 
-          <FormGroup
-            labelText={passwordLabel}
-            hintText={
-              <Link to='/reset-password' className='hover:underline' tabIndex={-1}>
-                <FormattedMessage
-                  id='login.reset_password_hint'
-                  defaultMessage='Trouble logging in?'
-                />
-              </Link>
-            }
-          >
-            <Input
-              aria-label={passwordLabel}
-              placeholder={passwordLabel}
-              type='password'
-              name='password'
-              autoComplete='off'
-              autoCorrect='off'
-              autoCapitalize='off'
-              required
-            />
-          </FormGroup>
-
-          <FormActions>
-            <Button
-              theme='primary'
-              type='submit'
-              disabled={isLoading}
-            >
-              <FormattedMessage id='login.sign_in' defaultMessage='Sign in' />
-            </Button>
-          </FormActions>
-        </Form>
-
-        <ConsumersList />
-      </Stack>
-    </div>
+      <FormActions>
+        <Button
+          theme='primary'
+          type='submit'
+          disabled={isLoading}
+        >
+          <FormattedMessage id='login.sign_in' defaultMessage='Sign in' />
+        </Button>
+      </FormActions>
+    </Form>
   );
 };
 
diff --git a/src/features/auth-login/components/login-page.tsx b/src/features/auth-login/components/login-page.tsx
index 609af73a4..8817b6d39 100644
--- a/src/features/auth-login/components/login-page.tsx
+++ b/src/features/auth-login/components/login-page.tsx
@@ -1,13 +1,16 @@
 import React, { useState } from 'react';
+import { FormattedMessage } from 'react-intl';
 import { Redirect } from 'react-router-dom';
 
 import { logIn, verifyCredentials, switchAccount } from 'soapbox/actions/auth';
 import { fetchInstance } from 'soapbox/actions/instance';
 import { closeModal } from 'soapbox/actions/modals';
+import { BigCard } from 'soapbox/components/big-card';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 import { getRedirectUrl } from 'soapbox/utils/redirect';
 import { isStandalone } from 'soapbox/utils/state';
 
+import ConsumersList from './consumers-list';
 import LoginForm from './login-form';
 import OtpAuthForm from './otp-auth-form';
 
@@ -68,7 +71,12 @@ const LoginPage = () => {
 
   if (mfaAuthNeeded) return <OtpAuthForm mfa_token={mfaToken} />;
 
-  return <LoginForm handleSubmit={handleSubmit} isLoading={isLoading} />;
+  return (
+    <BigCard title={<FormattedMessage id='login_form.header' defaultMessage='Sign In' />}>
+      <LoginForm handleSubmit={handleSubmit} isLoading={isLoading} />
+      <ConsumersList />
+    </BigCard>
+  );
 };
 
 export default LoginPage;
diff --git a/src/features/ui/index.tsx b/src/features/ui/index.tsx
index 77520d0a5..e8672be8d 100644
--- a/src/features/ui/index.tsx
+++ b/src/features/ui/index.tsx
@@ -134,6 +134,7 @@ import {
   FollowedTags,
   AboutPage,
   RegistrationPage,
+  LoginPage,
 } from './util/async-components';
 import GlobalHotkeys from './util/global-hotkeys';
 import { WrappedRoute } from './util/react-router-helpers';
@@ -357,6 +358,8 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
         <WrappedRoute path='/signup' page={DefaultPage} component={RegistrationPage} publicRoute exact />
       )}
 
+      <WrappedRoute path='/login' page={DefaultPage} component={LoginPage} publicRoute exact />
+
       <WrappedRoute page={EmptyPage} component={GenericNotFound} content={children} />
     </Switch>
   );

From 59a32b1a0f9954e3ba492b1a6f3e3d0fdec13674 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 20 Sep 2023 14:10:54 -0500
Subject: [PATCH 2/8] Refactor a bunch of components to use BigCard

---
 .../auth-login/components/otp-auth-form.tsx   |  59 ++++----
 .../components/password-reset-confirm.tsx     |  45 +++---
 .../auth-login/components/password-reset.tsx  |  43 +++---
 .../components/registration-page.tsx          |  11 +-
 .../steps/avatar-selection-step.tsx           | 106 ++++++-------
 src/features/onboarding/steps/bio-step.tsx    |  92 +++++-------
 .../steps/cover-photo-selection-step.tsx      | 142 ++++++++----------
 .../onboarding/steps/display-name-step.tsx    |  94 +++++-------
 .../steps/suggested-accounts-step.tsx         |  58 +++----
 9 files changed, 279 insertions(+), 371 deletions(-)

diff --git a/src/features/auth-login/components/otp-auth-form.tsx b/src/features/auth-login/components/otp-auth-form.tsx
index 06423e5e6..a7b55d21d 100644
--- a/src/features/auth-login/components/otp-auth-form.tsx
+++ b/src/features/auth-login/components/otp-auth-form.tsx
@@ -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,41 +48,33 @@ 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>
+    <BigCard title={<FormattedMessage id='login.otp_log_in' defaultMessage='OTP Login' />}>
+      <Form onSubmit={handleSubmit}>
+        <FormGroup
+          labelText={intl.formatMessage(messages.otpCodeLabel)}
+          hintText={intl.formatMessage(messages.otpCodeHint)}
+          errors={codeError ? [intl.formatMessage(messages.otpLoginFail)] : []}
+        >
+          <Input
+            name='code'
+            type='text'
+            autoComplete='off'
+            autoFocus
+            required
+          />
+        </FormGroup>
 
-      <div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
-        <Form onSubmit={handleSubmit}>
-          <FormGroup
-            labelText={intl.formatMessage(messages.otpCodeLabel)}
-            hintText={intl.formatMessage(messages.otpCodeHint)}
-            errors={codeError ? [intl.formatMessage(messages.otpLoginFail)] : []}
+        <FormActions>
+          <Button
+            theme='primary'
+            type='submit'
+            disabled={isLoading}
           >
-            <Input
-              name='code'
-              type='text'
-              autoComplete='off'
-              autoFocus
-              required
-            />
-          </FormGroup>
-
-          <FormActions>
-            <Button
-              theme='primary'
-              type='submit'
-              disabled={isLoading}
-            >
-              <FormattedMessage id='login.sign_in' defaultMessage='Sign in' />
-            </Button>
-          </FormActions>
-        </Form>
-      </div>
-    </div>
+            <FormattedMessage id='login.sign_in' defaultMessage='Sign in' />
+          </Button>
+        </FormActions>
+      </Form>
+    </BigCard>
   );
 };
 
diff --git a/src/features/auth-login/components/password-reset-confirm.tsx b/src/features/auth-login/components/password-reset-confirm.tsx
index 78ef26fd7..c079b418d 100644
--- a/src/features/auth-login/components/password-reset-confirm.tsx
+++ b/src/features/auth-login/components/password-reset-confirm.tsx
@@ -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,33 +56,25 @@ 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>
+    <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
+            type='password'
+            name='password'
+            placeholder={intl.formatMessage(messages.passwordPlaceholder)}
+            onChange={onChange}
+            required
+          />
+        </FormGroup>
 
-      <div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
-        <Form onSubmit={handleSubmit}>
-          <FormGroup labelText={<FormattedMessage id='reset_password.password.label' defaultMessage='Password' />} errors={renderErrors()}>
-            <Input
-              type='password'
-              name='password'
-              placeholder={intl.formatMessage(messages.passwordPlaceholder)}
-              onChange={onChange}
-              required
-            />
-          </FormGroup>
-
-          <FormActions>
-            <Button type='submit' theme='primary' disabled={isLoading}>
-              <FormattedMessage id='password_reset.reset' defaultMessage='Reset password' />
-            </Button>
-          </FormActions>
-        </Form>
-      </div>
-    </div>
+        <FormActions>
+          <Button type='submit' theme='primary' disabled={isLoading}>
+            <FormattedMessage id='password_reset.reset' defaultMessage='Reset password' />
+          </Button>
+        </FormActions>
+      </Form>
+    </BigCard>
   );
 };
 
diff --git a/src/features/auth-login/components/password-reset.tsx b/src/features/auth-login/components/password-reset.tsx
index 6cc9109d3..11d1f42f0 100644
--- a/src/features/auth-login/components/password-reset.tsx
+++ b/src/features/auth-login/components/password-reset.tsx
@@ -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,32 +37,24 @@ 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>
+    <BigCard title={<FormattedMessage id='password_reset.header' defaultMessage='Reset Password' />}>
+      <Form onSubmit={handleSubmit}>
+        <FormGroup labelText={intl.formatMessage(features.logInWithUsername ? messages.nicknameOrEmail : messages.email)}>
+          <Input
+            type='text'
+            name='nickname_or_email'
+            placeholder='me@example.com'
+            required
+          />
+        </FormGroup>
 
-      <div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
-        <Form onSubmit={handleSubmit}>
-          <FormGroup labelText={intl.formatMessage(features.logInWithUsername ? messages.nicknameOrEmail : messages.email)}>
-            <Input
-              type='text'
-              name='nickname_or_email'
-              placeholder='me@example.com'
-              required
-            />
-          </FormGroup>
-
-          <FormActions>
-            <Button type='submit' theme='primary' disabled={isLoading}>
-              <FormattedMessage id='password_reset.reset' defaultMessage='Reset password' />
-            </Button>
-          </FormActions>
-        </Form>
-      </div>
-    </div>
+        <FormActions>
+          <Button type='submit' theme='primary' disabled={isLoading}>
+            <FormattedMessage id='password_reset.reset' defaultMessage='Reset password' />
+          </Button>
+        </FormActions>
+      </Form>
+    </BigCard>
   );
 };
 
diff --git a/src/features/auth-login/components/registration-page.tsx b/src/features/auth-login/components/registration-page.tsx
index c58633fa6..7f1e81ce5 100644
--- a/src/features/auth-login/components/registration-page.tsx
+++ b/src/features/auth-login/components/registration-page.tsx
@@ -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' />} />
-        <RegistrationForm />
-      </Stack>
-    </Card>
+    <BigCard title={<FormattedMessage id='column.registration' defaultMessage='Sign Up' />}>
+      <RegistrationForm />
+    </BigCard>
   );
 };
 
diff --git a/src/features/onboarding/steps/avatar-selection-step.tsx b/src/features/onboarding/steps/avatar-selection-step.tsx
index 55a54c514..149d5e3e3 100644
--- a/src/features/onboarding/steps/avatar-selection-step.tsx
+++ b/src/features/onboarding/steps/avatar-selection-step.tsx
@@ -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,69 +65,54 @@ 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>
+    <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 && (
+            <Avatar src={selectedFile || account.avatar} size={175} />
+          )}
 
-              <Text theme='muted' align='center'>
-                <FormattedMessage id='onboarding.avatar.subtitle' defaultMessage='Just have fun with it.' />
-              </Text>
-            </Stack>
-          </div>
+          {isSubmitting && (
+            <div className='absolute inset-0 flex items-center justify-center rounded-full bg-white/80 dark:bg-primary-900/80'>
+              <Spinner withText={false} />
+            </div>
+          )}
 
-          <div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
-            <Stack space={10}>
-              <div className='relative mx-auto rounded-full bg-gray-200'>
-                {account && (
-                  <Avatar src={selectedFile || account.avatar} size={175} />
-                )}
+          <button
+            onClick={openFilePicker}
+            type='button'
+            className={clsx({
+              'absolute bottom-3 right-2 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-primary-900 hover:bg-primary-700': true,
+              'opacity-50 pointer-events-none': isSubmitting,
+            })}
+            disabled={isSubmitting}
+          >
+            <Icon src={require('@tabler/icons/plus.svg')} className='h-5 w-5 text-white' />
+          </button>
 
-                {isSubmitting && (
-                  <div className='absolute inset-0 flex items-center justify-center rounded-full bg-white/80 dark:bg-primary-900/80'>
-                    <Spinner withText={false} />
-                  </div>
-                )}
-
-                <button
-                  onClick={openFilePicker}
-                  type='button'
-                  className={clsx({
-                    'absolute bottom-3 right-2 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-primary-900 hover:bg-primary-700': true,
-                    'opacity-50 pointer-events-none': isSubmitting,
-                  })}
-                  disabled={isSubmitting}
-                >
-                  <Icon src={require('@tabler/icons/plus.svg')} className='h-5 w-5 text-white' />
-                </button>
-
-                <input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
-              </div>
-
-              <Stack justifyContent='center' space={2}>
-                <Button block theme='primary' type='button' onClick={onNext} disabled={isDefault && isDisabled || isSubmitting}>
-                  {isSubmitting ? (
-                    <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
-                  ) : (
-                    <FormattedMessage id='onboarding.next' defaultMessage='Next' />
-                  )}
-                </Button>
-
-                {isDisabled && (
-                  <Button block theme='tertiary' type='button' onClick={onNext}>
-                    <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
-                  </Button>
-                )}
-              </Stack>
-            </Stack>
-          </div>
+          <input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
         </div>
-      </CardBody>
-    </Card>
+
+        <Stack justifyContent='center' space={2}>
+          <Button block theme='primary' type='button' onClick={onNext} disabled={isDefault && isDisabled || isSubmitting}>
+            {isSubmitting ? (
+              <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
+            ) : (
+              <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+            )}
+          </Button>
+
+          {isDisabled && (
+            <Button block theme='tertiary' type='button' onClick={onNext}>
+              <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
+            </Button>
+          )}
+        </Stack>
+      </Stack>
+    </BigCard>
   );
 };
 
diff --git a/src/features/onboarding/steps/bio-step.tsx b/src/features/onboarding/steps/bio-step.tsx
index c0a029d80..6b2862bbb 100644
--- a/src/features/onboarding/steps/bio-step.tsx
+++ b/src/features/onboarding/steps/bio-step.tsx
@@ -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,62 +44,49 @@ const BioStep = ({ onNext }: { onNext: () => void }) => {
   };
 
   return (
-    <Card variant='rounded' size='xl'>
-      <CardBody>
+    <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>
-          <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>
+          <FormGroup
+            hintText={<FormattedMessage id='onboarding.bio.hint' defaultMessage='Max 500 characters' />}
+            labelText={<FormattedMessage id='edit_profile.fields.bio_label' defaultMessage='Bio' />}
+            errors={errors}
+          >
+            <Textarea
+              onChange={(event) => setValue(event.target.value)}
+              placeholder={intl.formatMessage(messages.bioPlaceholder)}
+              value={value}
+              maxLength={500}
+            />
+          </FormGroup>
+        </div>
 
-              <Text theme='muted' align='center'>
-                <FormattedMessage id='onboarding.note.subtitle' defaultMessage='You can always edit this later.' />
-              </Text>
-            </Stack>
-          </div>
+        <div>
+          <Stack justifyContent='center' space={2}>
+            <Button
+              block
+              theme='primary'
+              type='submit'
+              disabled={isSubmitting}
+              onClick={handleSubmit}
+            >
+              {isSubmitting ? (
+                <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
+              ) : (
+                <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+              )}
+            </Button>
 
-          <Stack space={5}>
-            <div className='mx-auto sm:w-2/3 sm:pt-10'>
-              <FormGroup
-                hintText={<FormattedMessage id='onboarding.bio.hint' defaultMessage='Max 500 characters' />}
-                labelText={<FormattedMessage id='edit_profile.fields.bio_label' defaultMessage='Bio' />}
-                errors={errors}
-              >
-                <Textarea
-                  onChange={(event) => setValue(event.target.value)}
-                  placeholder={intl.formatMessage(messages.bioPlaceholder)}
-                  value={value}
-                  maxLength={500}
-                />
-              </FormGroup>
-            </div>
-
-            <div className='mx-auto sm:w-2/3 md:w-1/2'>
-              <Stack justifyContent='center' space={2}>
-                <Button
-                  block
-                  theme='primary'
-                  type='submit'
-                  disabled={isSubmitting}
-                  onClick={handleSubmit}
-                >
-                  {isSubmitting ? (
-                    <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
-                  ) : (
-                    <FormattedMessage id='onboarding.next' defaultMessage='Next' />
-                  )}
-                </Button>
-
-                <Button block theme='tertiary' type='button' onClick={onNext}>
-                  <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
-                </Button>
-              </Stack>
-            </div>
+            <Button block theme='tertiary' type='button' onClick={onNext}>
+              <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
+            </Button>
           </Stack>
         </div>
-      </CardBody>
-    </Card>
+      </Stack>
+    </BigCard>
   );
 };
 
diff --git a/src/features/onboarding/steps/cover-photo-selection-step.tsx b/src/features/onboarding/steps/cover-photo-selection-step.tsx
index 5e9c314f8..1e1c0107b 100644
--- a/src/features/onboarding/steps/cover-photo-selection-step.tsx
+++ b/src/features/onboarding/steps/cover-photo-selection-step.tsx
@@ -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,89 +68,74 @@ 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>
+    <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
+            role='button'
+            className='relative flex h-24 items-center justify-center rounded-t-md bg-gray-200 dark:bg-gray-800'
+          >
+            {selectedFile || account?.header && (
+              <StillImage
+                src={selectedFile || account.header}
+                alt={intl.formatMessage(messages.header)}
+                className='absolute inset-0 rounded-t-md object-cover'
+              />
+            )}
 
-              <Text theme='muted' align='center'>
-                <FormattedMessage id='onboarding.header.subtitle' defaultMessage='This will be shown at the top of your profile.' />
-              </Text>
-            </Stack>
+            {isSubmitting && (
+              <div
+                className='absolute inset-0 flex items-center justify-center rounded-t-md bg-white/80 dark:bg-primary-900/80'
+              >
+                <Spinner withText={false} />
+              </div>
+            )}
+
+            <button
+              onClick={openFilePicker}
+              type='button'
+              className={clsx({
+                'absolute -top-3 -right-3 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-primary-900 hover:bg-primary-700': true,
+                'opacity-50 pointer-events-none': isSubmitting,
+              })}
+              disabled={isSubmitting}
+            >
+              <Icon src={require('@tabler/icons/plus.svg')} className='h-5 w-5 text-white' />
+            </button>
+
+            <input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
           </div>
 
-          <div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
-            <Stack space={10}>
-              <div className='rounded-lg border border-solid border-gray-200 dark:border-gray-800'>
-                <div
-                  role='button'
-                  className='relative flex h-24 items-center justify-center rounded-t-md bg-gray-200 dark:bg-gray-800'
-                >
-                  {selectedFile || account?.header && (
-                    <StillImage
-                      src={selectedFile || account.header}
-                      alt={intl.formatMessage(messages.header)}
-                      className='absolute inset-0 rounded-t-md object-cover'
-                    />
-                  )}
+          <div className='flex flex-col px-4 pb-4'>
+            {account && (
+              <Avatar src={account.avatar} size={64} className='-mt-8 mb-2 ring-2 ring-white dark:ring-primary-800' />
+            )}
 
-                  {isSubmitting && (
-                    <div
-                      className='absolute inset-0 flex items-center justify-center rounded-t-md bg-white/80 dark:bg-primary-900/80'
-                    >
-                      <Spinner withText={false} />
-                    </div>
-                  )}
-
-                  <button
-                    onClick={openFilePicker}
-                    type='button'
-                    className={clsx({
-                      'absolute -top-3 -right-3 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-primary-900 hover:bg-primary-700': true,
-                      'opacity-50 pointer-events-none': isSubmitting,
-                    })}
-                    disabled={isSubmitting}
-                  >
-                    <Icon src={require('@tabler/icons/plus.svg')} className='h-5 w-5 text-white' />
-                  </button>
-
-                  <input type='file' className='hidden' ref={fileInput} onChange={handleFileChange} />
-                </div>
-
-                <div className='flex flex-col px-4 pb-4'>
-                  {account && (
-                    <Avatar src={account.avatar} size={64} className='-mt-8 mb-2 ring-2 ring-white dark:ring-primary-800' />
-                  )}
-
-                  <Text weight='bold' size='sm'>{account?.display_name}</Text>
-                  <Text theme='muted' size='sm'>@{account?.username}</Text>
-                </div>
-              </div>
-
-              <Stack justifyContent='center' space={2}>
-                <Button block theme='primary' type='button' onClick={onNext} disabled={isDefault && isDisabled || isSubmitting}>
-                  {isSubmitting ? (
-                    <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
-                  ) : (
-                    <FormattedMessage id='onboarding.next' defaultMessage='Next' />
-                  )}
-                </Button>
-
-                {isDisabled && (
-                  <Button block theme='tertiary' type='button' onClick={onNext}>
-                    <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
-                  </Button>
-                )}
-              </Stack>
-            </Stack>
+            <Text weight='bold' size='sm'>{account?.display_name}</Text>
+            <Text theme='muted' size='sm'>@{account?.username}</Text>
           </div>
         </div>
-      </CardBody>
-    </Card>
+
+        <Stack justifyContent='center' space={2}>
+          <Button block theme='primary' type='button' onClick={onNext} disabled={isDefault && isDisabled || isSubmitting}>
+            {isSubmitting ? (
+              <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
+            ) : (
+              <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+            )}
+          </Button>
+
+          {isDisabled && (
+            <Button block theme='tertiary' type='button' onClick={onNext}>
+              <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
+            </Button>
+          )}
+        </Stack>
+      </Stack>
+    </BigCard>
   );
 };
 
diff --git a/src/features/onboarding/steps/display-name-step.tsx b/src/features/onboarding/steps/display-name-step.tsx
index f9916396f..161963942 100644
--- a/src/features/onboarding/steps/display-name-step.tsx
+++ b/src/features/onboarding/steps/display-name-step.tsx
@@ -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,61 +55,46 @@ 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>
+    <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}
+          labelText={<FormattedMessage id='onboarding.display_name.label' defaultMessage='Display name' />}
+          errors={errors}
+        >
+          <Input
+            onChange={(event) => setValue(event.target.value)}
+            placeholder={intl.formatMessage(messages.usernamePlaceholder)}
+            type='text'
+            value={value}
+            maxLength={30}
+          />
+        </FormGroup>
 
-              <Text theme='muted' align='center'>
-                <FormattedMessage id='onboarding.display_name.subtitle' defaultMessage='You can always edit this later.' />
-              </Text>
-            </Stack>
-          </div>
+        <Stack justifyContent='center' space={2}>
+          <Button
+            block
+            theme='primary'
+            type='submit'
+            disabled={isDisabled || isSubmitting}
+            onClick={handleSubmit}
+          >
+            {isSubmitting ? (
+              <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
+            ) : (
+              <FormattedMessage id='onboarding.next' defaultMessage='Next' />
+            )}
+          </Button>
 
-          <div className='mx-auto sm:w-2/3 sm:pt-10 md:w-1/2'>
-            <Stack space={5}>
-              <FormGroup
-                hintText={hintText}
-                labelText={<FormattedMessage id='onboarding.display_name.label' defaultMessage='Display name' />}
-                errors={errors}
-              >
-                <Input
-                  onChange={(event) => setValue(event.target.value)}
-                  placeholder={intl.formatMessage(messages.usernamePlaceholder)}
-                  type='text'
-                  value={value}
-                  maxLength={30}
-                />
-              </FormGroup>
-
-              <Stack justifyContent='center' space={2}>
-                <Button
-                  block
-                  theme='primary'
-                  type='submit'
-                  disabled={isDisabled || isSubmitting}
-                  onClick={handleSubmit}
-                >
-                  {isSubmitting ? (
-                    <FormattedMessage id='onboarding.saving' defaultMessage='Saving…' />
-                  ) : (
-                    <FormattedMessage id='onboarding.next' defaultMessage='Next' />
-                  )}
-                </Button>
-
-                <Button block theme='tertiary' type='button' onClick={onNext}>
-                  <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
-                </Button>
-              </Stack>
-            </Stack>
-          </div>
-        </div>
-      </CardBody>
-    </Card>
+          <Button block theme='tertiary' type='button' onClick={onNext}>
+            <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
+          </Button>
+        </Stack>
+      </Stack>
+    </BigCard>
   );
 };
 
diff --git a/src/features/onboarding/steps/suggested-accounts-step.tsx b/src/features/onboarding/steps/suggested-accounts-step.tsx
index aac120d06..40259faef 100644
--- a/src/features/onboarding/steps/suggested-accounts-step.tsx
+++ b/src/features/onboarding/steps/suggested-accounts-step.tsx
@@ -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,43 +67,28 @@ 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>
+    <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()}
 
-              <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>
+      <Stack>
+        <Stack justifyContent='center' space={2}>
+          <Button
+            block
+            theme='primary'
+            onClick={onNext}
+          >
+            <FormattedMessage id='onboarding.done' defaultMessage='Done' />
+          </Button>
 
-          {renderBody()}
-
-          <div className='mx-auto sm:w-2/3 md:w-1/2'>
-            <Stack>
-              <Stack justifyContent='center' space={2}>
-                <Button
-                  block
-                  theme='primary'
-                  onClick={onNext}
-                >
-                  <FormattedMessage id='onboarding.done' defaultMessage='Done' />
-                </Button>
-
-                <Button block theme='tertiary' type='button' onClick={onNext}>
-                  <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
-                </Button>
-              </Stack>
-            </Stack>
-          </div>
-        </div>
-      </CardBody>
-    </Card>
+          <Button block theme='tertiary' type='button' onClick={onNext}>
+            <FormattedMessage id='onboarding.skip' defaultMessage='Skip for now' />
+          </Button>
+        </Stack>
+      </Stack>
+    </BigCard>
   );
 };
 

From 68bdcd30de456c40a922227e4f32de36ade71828 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 20 Sep 2023 14:17:09 -0500
Subject: [PATCH 3/8] Move Reset Password into the UI

---
 src/containers/soapbox.tsx         | 1 -
 src/features/auth-layout/index.tsx | 2 --
 src/features/ui/index.tsx          | 2 ++
 3 files changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/containers/soapbox.tsx b/src/containers/soapbox.tsx
index 8f0015b87..79af39c48 100644
--- a/src/containers/soapbox.tsx
+++ b/src/containers/soapbox.tsx
@@ -104,7 +104,6 @@ const SoapboxMount = () => {
         <Route exact path='/' component={PublicLayout} />
       )}
 
-      <Route path='/reset-password' component={AuthLayout} />
       <Route path='/edit-password' component={AuthLayout} />
       <Route path='/invite/:token' component={AuthLayout} />
 
diff --git a/src/features/auth-layout/index.tsx b/src/features/auth-layout/index.tsx
index 42cc1ba50..988996aed 100644
--- a/src/features/auth-layout/index.tsx
+++ b/src/features/auth-layout/index.tsx
@@ -8,7 +8,6 @@ import { useOwnAccount, useInstance, useRegistrationStatus } from 'soapbox/hooks
 
 import { Button, Card, CardBody } from '../../components/ui';
 import LoginPage from '../auth-login/components/login-page';
-import PasswordReset from '../auth-login/components/password-reset';
 import PasswordResetConfirm from '../auth-login/components/password-reset-confirm';
 import ExternalLoginForm from '../external-login/components/external-login-form';
 import Footer from '../public-layout/components/footer';
@@ -64,7 +63,6 @@ const AuthLayout = () => {
 
                     <Route exact path='/login/external' component={ExternalLoginForm} />
                     <Route exact path='/login/add' component={LoginPage} />
-                    <Route exact path='/reset-password' component={PasswordReset} />
                     <Route exact path='/edit-password' component={PasswordResetConfirm} />
                     <Route path='/invite/:token' component={RegisterInvite} />
 
diff --git a/src/features/ui/index.tsx b/src/features/ui/index.tsx
index e8672be8d..e2fa00423 100644
--- a/src/features/ui/index.tsx
+++ b/src/features/ui/index.tsx
@@ -135,6 +135,7 @@ import {
   AboutPage,
   RegistrationPage,
   LoginPage,
+  PasswordReset,
 } from './util/async-components';
 import GlobalHotkeys from './util/global-hotkeys';
 import { WrappedRoute } from './util/react-router-helpers';
@@ -359,6 +360,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 page={EmptyPage} component={GenericNotFound} content={children} />
     </Switch>

From 977d908db08e1c3b05c071f71b71bc05b0a057c6 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 20 Sep 2023 14:19:03 -0500
Subject: [PATCH 4/8] Move Edit Password into the UI

---
 src/containers/soapbox.tsx         | 1 -
 src/features/auth-layout/index.tsx | 8 +-------
 src/features/ui/index.tsx          | 4 ++++
 3 files changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/containers/soapbox.tsx b/src/containers/soapbox.tsx
index 79af39c48..38614bba6 100644
--- a/src/containers/soapbox.tsx
+++ b/src/containers/soapbox.tsx
@@ -104,7 +104,6 @@ const SoapboxMount = () => {
         <Route exact path='/' component={PublicLayout} />
       )}
 
-      <Route path='/edit-password' component={AuthLayout} />
       <Route path='/invite/:token' component={AuthLayout} />
 
       <Route path='/' component={UI} />
diff --git a/src/features/auth-layout/index.tsx b/src/features/auth-layout/index.tsx
index 988996aed..fec9d4d3b 100644
--- a/src/features/auth-layout/index.tsx
+++ b/src/features/auth-layout/index.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
-import { Link, Redirect, Route, Switch, useHistory, useLocation } from 'react-router-dom';
+import { Link, Redirect, Route, Switch, useHistory } from 'react-router-dom';
 
 import LandingGradient from 'soapbox/components/landing-gradient';
 import SiteLogo from 'soapbox/components/site-logo';
@@ -8,7 +8,6 @@ import { useOwnAccount, useInstance, useRegistrationStatus } from 'soapbox/hooks
 
 import { Button, Card, CardBody } from '../../components/ui';
 import LoginPage from '../auth-login/components/login-page';
-import PasswordResetConfirm from '../auth-login/components/password-reset-confirm';
 import ExternalLoginForm from '../external-login/components/external-login-form';
 import Footer from '../public-layout/components/footer';
 import RegisterInvite from '../register-invite';
@@ -20,7 +19,6 @@ const messages = defineMessages({
 const AuthLayout = () => {
   const intl = useIntl();
   const history = useHistory();
-  const { search } = useLocation();
 
   const { account } = useOwnAccount();
   const instance = useInstance();
@@ -63,11 +61,7 @@ const AuthLayout = () => {
 
                     <Route exact path='/login/external' component={ExternalLoginForm} />
                     <Route exact path='/login/add' component={LoginPage} />
-                    <Route exact path='/edit-password' component={PasswordResetConfirm} />
                     <Route path='/invite/:token' component={RegisterInvite} />
-
-                    <Redirect from='/auth/password/new' to='/reset-password' />
-                    <Redirect from='/auth/password/edit' to={`/edit-password${search}`} />
                   </Switch>
                 </CardBody>
               </Card>
diff --git a/src/features/ui/index.tsx b/src/features/ui/index.tsx
index e2fa00423..bcb4e1b79 100644
--- a/src/features/ui/index.tsx
+++ b/src/features/ui/index.tsx
@@ -136,6 +136,7 @@ import {
   RegistrationPage,
   LoginPage,
   PasswordReset,
+  PasswordResetConfirm,
 } from './util/async-components';
 import GlobalHotkeys from './util/global-hotkeys';
 import { WrappedRoute } from './util/react-router-helpers';
@@ -361,6 +362,9 @@ 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 />
+      <Redirect from='/auth/password/new' to='/reset-password' />
+      <Redirect from='/auth/password/edit' to={`/edit-password${search}`} />
 
       <WrappedRoute page={EmptyPage} component={GenericNotFound} content={children} />
     </Switch>

From df2c2288fbcbd60f888b84ed103acb5baaefa798 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 20 Sep 2023 14:26:08 -0500
Subject: [PATCH 5/8] Move invite signup into the UI

---
 src/containers/soapbox.tsx             |  3 ---
 src/features/auth-layout/index.tsx     |  2 --
 src/features/register-invite/index.tsx | 24 ++++++++++--------------
 src/features/ui/index.tsx              |  2 ++
 4 files changed, 12 insertions(+), 19 deletions(-)

diff --git a/src/containers/soapbox.tsx b/src/containers/soapbox.tsx
index 38614bba6..fb5a15971 100644
--- a/src/containers/soapbox.tsx
+++ b/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>
   );
diff --git a/src/features/auth-layout/index.tsx b/src/features/auth-layout/index.tsx
index fec9d4d3b..a2fa504dd 100644
--- a/src/features/auth-layout/index.tsx
+++ b/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>
diff --git a/src/features/register-invite/index.tsx b/src/features/register-invite/index.tsx
index 763749bc8..56e4c0278 100644
--- a/src/features/register-invite/index.tsx
+++ b/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>
   );
 };
 
diff --git a/src/features/ui/index.tsx b/src/features/ui/index.tsx
index bcb4e1b79..a1e9b699b 100644
--- a/src/features/ui/index.tsx
+++ b/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}`} />
 

From bdb5f4a2cf11a188d794fd7276bfd1263e9de1ac Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 20 Sep 2023 14:32:20 -0500
Subject: [PATCH 6/8] Thread: fix position of ThreadLoginCta

---
 src/features/status/components/thread.tsx |  6 +----
 src/features/status/index.tsx             | 28 ++++++++++++++---------
 2 files changed, 18 insertions(+), 16 deletions(-)

diff --git a/src/features/status/components/thread.tsx b/src/features/status/components/thread.tsx
index 84d71d446..b77b10e41 100644
--- a/src/features/status/components/thread.tsx
+++ b/src/features/status/components/thread.tsx
@@ -18,13 +18,12 @@ import { Stack } from 'soapbox/components/ui';
 import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status';
 import { HotKeys } from 'soapbox/features/ui/components/hotkeys';
 import PendingStatus from 'soapbox/features/ui/components/pending-status';
-import { useAppDispatch, useAppSelector, useOwnAccount, useSettings } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useSettings } from 'soapbox/hooks';
 import { RootState } from 'soapbox/store';
 import { type Account, type Status } from 'soapbox/types/entities';
 import { defaultMediaVisibility, textForScreenReader } from 'soapbox/utils/status';
 
 import DetailedStatus from './detailed-status';
-import ThreadLoginCta from './thread-login-cta';
 import ThreadStatus from './thread-status';
 
 type DisplayMedia = 'default' | 'hide_all' | 'show_all';
@@ -97,7 +96,6 @@ const Thread = (props: IThread) => {
   const dispatch = useAppDispatch();
   const history = useHistory();
   const intl = useIntl();
-  const { account: me } = useOwnAccount();
   const settings = useSettings();
 
   const displayMedia = settings.get('displayMedia') as DisplayMedia;
@@ -459,8 +457,6 @@ const Thread = (props: IThread) => {
           {children}
         </ScrollableList>
       </div>
-
-      {!me && <ThreadLoginCta />}
     </Stack>
   );
 };
diff --git a/src/features/status/index.tsx b/src/features/status/index.tsx
index f2b882e0a..c49d51b31 100644
--- a/src/features/status/index.tsx
+++ b/src/features/status/index.tsx
@@ -9,12 +9,13 @@ import {
 } from 'soapbox/actions/statuses';
 import MissingIndicator from 'soapbox/components/missing-indicator';
 import PullToRefresh from 'soapbox/components/pull-to-refresh';
-import { Column } from 'soapbox/components/ui';
+import { Column, Stack } from 'soapbox/components/ui';
 import PlaceholderStatus from 'soapbox/features/placeholder/components/placeholder-status';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
+import { useAppDispatch, useAppSelector, useLoggedIn } from 'soapbox/hooks';
 import { makeGetStatus } from 'soapbox/selectors';
 
 import Thread from './components/thread';
+import ThreadLoginCta from './components/thread-login-cta';
 
 const messages = defineMessages({
   title: { id: 'status.title', defaultMessage: 'Post Details' },
@@ -47,6 +48,7 @@ interface IStatusDetails {
 const StatusDetails: React.FC<IStatusDetails> = (props) => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
+  const { isLoggedIn } = useLoggedIn();
 
   const getStatus = useCallback(makeGetStatus(), []);
   const status = useAppSelector((state) => getStatus(state, { id: props.params.statusId }));
@@ -113,15 +115,19 @@ const StatusDetails: React.FC<IStatusDetails> = (props) => {
   };
 
   return (
-    <Column label={intl.formatMessage(titleMessage())}>
-      <PullToRefresh onRefresh={handleRefresh}>
-        <Thread
-          status={status}
-          next={next}
-          handleLoadMore={handleLoadMore}
-        />
-      </PullToRefresh>
-    </Column>
+    <Stack space={4}>
+      <Column label={intl.formatMessage(titleMessage())}>
+        <PullToRefresh onRefresh={handleRefresh}>
+          <Thread
+            status={status}
+            next={next}
+            handleLoadMore={handleLoadMore}
+          />
+        </PullToRefresh>
+      </Column>
+
+      {!isLoggedIn && <ThreadLoginCta />}
+    </Stack>
   );
 };
 

From 0664484ba9988ade4f90f7f4950036328e150410 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 20 Sep 2023 14:40:52 -0500
Subject: [PATCH 7/8] Move External Login form into the UI

---
 src/features/external-login/index.tsx | 9 ++++++++-
 src/features/ui/index.tsx             | 3 +++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/src/features/external-login/index.tsx b/src/features/external-login/index.tsx
index 510014dc2..507797f9a 100644
--- a/src/features/external-login/index.tsx
+++ b/src/features/external-login/index.tsx
@@ -1,10 +1,17 @@
 import React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import { BigCard } from 'soapbox/components/big-card';
 
 import ExternalLoginForm from './components/external-login-form';
 
 /** Page for logging into a remote instance */
 const ExternalLoginPage: React.FC = () => {
-  return <ExternalLoginForm />;
+  return (
+    <BigCard title={<FormattedMessage id='login_form.header' defaultMessage='Sign In' />}>
+      <ExternalLoginForm />
+    </BigCard>
+  );
 };
 
 export default ExternalLoginPage;
diff --git a/src/features/ui/index.tsx b/src/features/ui/index.tsx
index a1e9b699b..5ff06223e 100644
--- a/src/features/ui/index.tsx
+++ b/src/features/ui/index.tsx
@@ -138,6 +138,7 @@ import {
   PasswordReset,
   PasswordResetConfirm,
   RegisterInvite,
+  ExternalLogin,
 } from './util/async-components';
 import GlobalHotkeys from './util/global-hotkeys';
 import { WrappedRoute } from './util/react-router-helpers';
@@ -361,6 +362,8 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
         <WrappedRoute path='/signup' page={DefaultPage} component={RegistrationPage} publicRoute exact />
       )}
 
+      <WrappedRoute path='/login/external' page={DefaultPage} component={ExternalLogin} publicRoute exact />
+      <WrappedRoute path='/login/add' page={DefaultPage} component={LoginPage} publicRoute exact />
       <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 />

From 7137edad37214ce7de40c0332335dfc1c2d68d21 Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 20 Sep 2023 14:41:34 -0500
Subject: [PATCH 8/8] Delete AuthLayout

---
 src/features/auth-layout/index.tsx | 78 ------------------------------
 1 file changed, 78 deletions(-)
 delete mode 100644 src/features/auth-layout/index.tsx

diff --git a/src/features/auth-layout/index.tsx b/src/features/auth-layout/index.tsx
deleted file mode 100644
index a2fa504dd..000000000
--- a/src/features/auth-layout/index.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-import { Link, Redirect, Route, Switch, useHistory } from 'react-router-dom';
-
-import LandingGradient from 'soapbox/components/landing-gradient';
-import SiteLogo from 'soapbox/components/site-logo';
-import { useOwnAccount, useInstance, useRegistrationStatus } from 'soapbox/hooks';
-
-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';
-
-const messages = defineMessages({
-  register: { id: 'auth_layout.register', defaultMessage: 'Create an account' },
-});
-
-const AuthLayout = () => {
-  const intl = useIntl();
-  const history = useHistory();
-
-  const { account } = useOwnAccount();
-  const instance = useInstance();
-  const { isOpen } = useRegistrationStatus();
-  const isLoginPage = history.location.pathname === '/login';
-
-  return (
-    <div className='h-full'>
-      <LandingGradient />
-
-      <main className='relative h-full sm:flex sm:justify-center'>
-        <div className='flex h-full w-full flex-col sm:max-w-lg md:max-w-2xl lg:max-w-6xl'>
-          <header className='relative mb-auto flex justify-between px-2 py-12'>
-            <div className='relative z-0 flex-1 px-2 lg:absolute lg:inset-0 lg:flex lg:items-center lg:justify-center'>
-              <Link to='/' className='cursor-pointer'>
-                <SiteLogo alt={instance.title} className='h-7' />
-              </Link>
-            </div>
-
-            {(isLoginPage && isOpen) && (
-              <div className='relative z-10 ml-auto flex items-center'>
-                <Button
-                  theme='tertiary'
-                  icon={require('@tabler/icons/user.svg')}
-                  to='/signup'
-                >
-                  {intl.formatMessage(messages.register)}
-                </Button>
-              </div>
-            )}
-          </header>
-
-          <div className='flex flex-col items-center justify-center'>
-            <div className='w-full pb-10 sm:mx-auto sm:max-w-lg md:max-w-2xl'>
-              <Card variant='rounded' size='xl'>
-                <CardBody>
-                  <Switch>
-                    {/* If already logged in, redirect home. */}
-                    {account && <Redirect from='/login' to='/' exact />}
-
-                    <Route exact path='/login/external' component={ExternalLoginForm} />
-                    <Route exact path='/login/add' component={LoginPage} />
-                  </Switch>
-                </CardBody>
-              </Card>
-            </div>
-          </div>
-
-          <div className='mt-auto'>
-            <Footer />
-          </div>
-        </div>
-      </main>
-    </div>
-  );
-};
-
-export default AuthLayout;