tarrien/Mastodon
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

[Glitch] Change design of e-mail subscription form

Browse Source 
Port 927c7d747f82fa10988f2675568567ca4c38a2bf to glitch-soc

Co-authored-by: diondiondion <mail@diondiondion.com>
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
This commit is contained in:
Eugen Rochko 2026-04-07 15:31:59 +02:00 committed by Claire
parent 4cb71b3d93
commit 701f285e3f
2 changed files with 22 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

45
app/javascript/flavours/glitch/features/account_timeline/components/account_subscription_form.tsx
View File

@ -12,13 +12,10 @@ import type {
ValidationErrorResponse, ValidationErrorResponse,
ValidationError, ValidationError,
} from 'flavours/glitch/api_types/errors'; } from 'flavours/glitch/api_types/errors';
import { A11yLiveRegion } from 'flavours/glitch/components/a11y_live_region';
import { Button } from 'flavours/glitch/components/button'; import { Button } from 'flavours/glitch/components/button';
import { CalloutInline } from 'flavours/glitch/components/callout_inline';
import { DisplayName } from 'flavours/glitch/components/display_name'; import { DisplayName } from 'flavours/glitch/components/display_name';
import type { FieldStatus } from 'flavours/glitch/components/form_fields'; import type { FieldStatus } from 'flavours/glitch/components/form_fields';
import formFieldClasses from 'flavours/glitch/components/form_fields/form_field_wrapper.module.scss'; import { TextInputField } from 'flavours/glitch/components/form_fields/text_input_field';
import { TextInput } from 'flavours/glitch/components/form_fields/text_input_field';
import { useAppSelector } from 'flavours/glitch/store'; import { useAppSelector } from 'flavours/glitch/store';
import classes from './redesign.module.scss'; import classes from './redesign.module.scss';
@ -34,7 +31,7 @@ const messages = defineMessages({
}, },
email: { email: {
id: 'email_subscriptions.email', id: 'email_subscriptions.email',
defaultMessage: 'Email address', defaultMessage: 'Email',
}, },
}); });
@ -159,33 +156,19 @@ export const AccountSubscriptionForm: React.FC<{ accountId: string }> = ({
}} }}
/> />
</h2> </h2>
<FormattedMessage
id='email_subscriptions.form.lead'
defaultMessage='Get posts in your inbox without creating a Mastodon account.'
/>
</div> </div>
<div className={classes.bannerInputButton}> <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}> <Button type='submit' loading={submitting}>
<FormattedMessage <FormattedMessage
@ -197,8 +180,8 @@ export const AccountSubscriptionForm: React.FC<{ accountId: string }> = ({
<div className={classes.bannerDisclaimer}> <div className={classes.bannerDisclaimer}>
<FormattedMessage <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> }} values={{ a: (str) => <Link to='/privacy-policy'>{str}</Link> }}
/> />
</div> </div>

11
app/javascript/flavours/glitch/features/account_timeline/components/redesign.module.scss
View File

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