Change design of e-mail subscription form (#38582)

Co-authored-by: diondiondion <mail@diondiondion.com>

app/javascript/mastodon/features/account_timeline/components/account_subscription_form.tsx

@@ -12,13 +12,10 @@ import type {
   ValidationErrorResponse,
   ValidationError,
 } from 'mastodon/api_types/errors';
-import { A11yLiveRegion } from 'mastodon/components/a11y_live_region';
 import { Button } from 'mastodon/components/button';
-import { CalloutInline } from 'mastodon/components/callout_inline';
 import { DisplayName } from 'mastodon/components/display_name';
 import type { FieldStatus } from 'mastodon/components/form_fields';
-import formFieldClasses from 'mastodon/components/form_fields/form_field_wrapper.module.scss';
+import { TextInputField } from 'mastodon/components/form_fields/text_input_field';
-import { TextInput } from 'mastodon/components/form_fields/text_input_field';
 import { useAppSelector } from 'mastodon/store';
 
 import classes from './redesign.module.scss';
@@ -34,7 +31,7 @@ const messages = defineMessages({
   },
   email: {
     id: 'email_subscriptions.email',
-    defaultMessage: 'Email address',
+    defaultMessage: 'Email',
   },
 });
 
@@ -159,33 +156,19 @@ export const AccountSubscriptionForm: React.FC<{ accountId: string }> = ({
             }}
           />
         </h2>
-        <FormattedMessage
-          id='email_subscriptions.form.lead'
-          defaultMessage='Get posts in your inbox without creating a Mastodon account.'
-        />
       </div>
 
       <div className={classes.bannerInputButton}>
-        <div className={formFieldClasses.wrapper}>
+        <TextInputField
-          <TextInput
+          id={`${accessibilityId}-input`}
-            id={`${accessibilityId}-input`}
+          type='email'
-            type='email'
+          value={email}
-            value={email}
+          onChange={handleChange}
-            onChange={handleChange}
+          label={intl.formatMessage(messages.email)}
-            placeholder='name@email.com'
+          status={
-            aria-label={intl.formatMessage(messages.email)}
+            errors.email ? fieldStatusFromErrors(intl, errors.email) : undefined
-            aria-describedby={errors.email ? `${accessibilityId}-status` : ''}
+          }
-          />
+        />
-
-          <A11yLiveRegion
-            className={formFieldClasses.status}
-            id={`${accessibilityId}-status`}
-          >
-            {errors.email && (
-              <CalloutInline {...fieldStatusFromErrors(intl, errors.email)} />
-            )}
-          </A11yLiveRegion>
-        </div>
 
         <Button type='submit' loading={submitting}>
           <FormattedMessage
@@ -197,8 +180,8 @@ export const AccountSubscriptionForm: React.FC<{ accountId: string }> = ({
 
       <div className={classes.bannerDisclaimer}>
         <FormattedMessage
-          id='email_subscriptions.form.disclaimer'
+          id='email_subscriptions.form.bottom'
-          defaultMessage='You can unsubscribe at any time. For more information, refer to the <a>Privacy Policy</a>.'
+          defaultMessage='Get posts in your inbox without creating a Mastodon account. Unsubscribe at any time. For more information, refer to the <a>Privacy Policy</a>.'
           values={{ a: (str) => <Link to='/privacy-policy'>{str}</Link> }}
         />
       </div>

app/javascript/mastodon/features/account_timeline/components/redesign.module.scss

@@ -417,9 +417,6 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
 }
 
 .bannerDisclaimer {
-  color: var(--color-text-secondary);
-  font-size: 11px;
-
   a {
     color: inherit;
   }
@@ -445,6 +442,14 @@ $button-fallback-breakpoint: $button-breakpoint + 55px;
     flex-grow: 1;
   }
 
+  label {
+    font-weight: 400;
+  }
+
+  :global(.button) {
+    margin-top: 24px; // To align with input under label
+  }
+
   input[type='email'] {
     padding: 7px 8px; // To align size with button
     background: var(--color-bg-primary);

app/javascript/mastodon/locales/en.json

@@ -581,10 +581,9 @@
   "domain_pill.your_server": "Your digital home, where all of your posts live. Don’t like this one? Transfer servers at any time and bring your followers, too.",
   "domain_pill.your_username": "Your unique identifier on this server. It’s possible to find users with the same username on different servers.",
   "dropdown.empty": "Select an option",
-  "email_subscriptions.email": "Email address",
+  "email_subscriptions.email": "Email",
   "email_subscriptions.form.action": "Subscribe",
-  "email_subscriptions.form.disclaimer": "You can unsubscribe at any time. For more information, refer to the <a>Privacy Policy</a>.",
+  "email_subscriptions.form.bottom": "Get posts in your inbox without creating a Mastodon account. Unsubscribe at any time. For more information, refer to the <a>Privacy Policy</a>.",
-  "email_subscriptions.form.lead": "Get posts in your inbox without creating a Mastodon account.",
   "email_subscriptions.form.title": "Sign up for email updates from {name}",
   "email_subscriptions.submitted.lead": "Check your inbox for an email to finish signing up for email updates.",
   "email_subscriptions.submitted.title": "One more step",