RegistrationForm: improve layout

app/soapbox/features/auth_login/components/registration_form.tsx

@@ -10,7 +10,7 @@ import { accountLookup } from 'soapbox/actions/accounts';
 import { register, verifyCredentials } from 'soapbox/actions/auth';
 import { openModal } from 'soapbox/actions/modals';
 import BirthdayInput from 'soapbox/components/birthday_input';
-import { Form, FormGroup, Input, Textarea } from 'soapbox/components/ui';
+import { Form, FormGroup, FormActions, Button, Input, Textarea } from 'soapbox/components/ui';
 import CaptchaField from 'soapbox/features/auth_login/components/captcha';
 import { Checkbox } from 'soapbox/features/forms';
 import { useAppSelector, useAppDispatch, useSettings, useFeatures } from 'soapbox/hooks';
@@ -228,13 +228,12 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
   return (
     <Form onSubmit={onSubmit} data-testid='registrations-open'>
       <fieldset disabled={isLoading} className='space-y-3'>
-        <div className='simple_form__overlay-area'>
-          <div className='fields-group'>
         {usernameUnavailable && (
           <div className='error'>
             <FormattedMessage id='registration.username_unavailable' defaultMessage='Username is already taken.' />
           </div>
         )}
+
         <FormGroup hintText={intl.formatMessage(messages.username_hint)}>
           <Input
             type='text'
@@ -250,6 +249,7 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
             required
           />
         </FormGroup>
+
         <Input
           type='email'
           name='email'
@@ -261,11 +261,13 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
           value={params.get('email', '')}
           required
         />
+
         {passwordMismatch && (
           <div className='error'>
             <FormattedMessage id='registration.password_mismatch' defaultMessage="Passwords don't match." />
           </div>
         )}
+
         <Input
           type='password'
           name='password'
@@ -278,6 +280,7 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
           hasError={passwordMismatch === true}
           required
         />
+
         <Input
           type='password'
           name='password_confirmation'
@@ -291,12 +294,15 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
           hasError={passwordMismatch === true}
           required
         />
-            {birthdayRequired &&
+
+        {birthdayRequired && (
           <BirthdayInput
             value={birthday}
             onChange={onBirthdayChange}
             required
-              />}
+          />
+        )}
+
         {needsApproval && (
           <FormGroup
             labelText={<FormattedMessage id='registration.reason' defaultMessage='Why do you want to join?' />}
@@ -311,7 +317,7 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
             />
           </FormGroup>
         )}
-          </div>
+
         <CaptchaField
           onFetch={onFetchCaptcha}
           onFetchFail={onFetchCaptchaFail}
@@ -321,7 +327,8 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
           name='captcha_solution'
           value={params.get('captcha_solution', '')}
         />
-          <div className='fields-group'>
+
+        <div className='simple_form space-y-3'>
           <Checkbox
             label={intl.formatMessage(messages.agreement, { tos: <Link to='/about/tos' target='_blank' key={0}>{intl.formatMessage(messages.tos)}</Link> })}
             name='agreement'
@@ -329,19 +336,22 @@ const RegistrationForm: React.FC<IRegistrationForm> = ({ inviteToken }) => {
             checked={params.get('agreement', false)}
             required
           />
-            {supportsEmailList && <Checkbox
+
+          {supportsEmailList && (
+            <Checkbox
               label={intl.formatMessage(messages.newsletter)}
               name='accepts_email_list'
               onChange={onCheckboxChange}
               checked={params.get('accepts_email_list', false)}
-            />}
+            />
+          )}
         </div>
-          <div className='actions'>
+
-            <button name='button' type='submit' className='btn button button-primary'>
+        <FormActions>
+          <Button>
             <FormattedMessage id='registration.sign_up' defaultMessage='Sign up' />
-            </button>
+          </Button>
-          </div>
+        </FormActions>
-        </div>
       </fieldset>
     </Form>
   );