Redesign: Update design for "next"/"finish" buttons during onboarding (#40635)

This commit is contained in:
diondiondion
2026-09-22 18:14:45 +00:00
committed by GitHub
parent a32a3973db
commit c99beb2e25
2 changed files with 40 additions and 13 deletions

View File

@@ -2,11 +2,13 @@ import { useEffect, useState, useCallback, useRef } from 'react';
import { FormattedMessage, useIntl, defineMessages } from 'react-intl';
import classNames from 'classnames';
import { Link } from 'react-router-dom';
import { Helmet } from '@unhead/react/helmet';
import { useDebouncedCallback } from 'use-debounce';
import { Button } from '@/mastodon/components/button/redesign';
import { Column } from '@/mastodon/components/column';
import { ColumnHeader as LegacyColumnHeader } from '@/mastodon/components/column/header';
import { ColumnSearchHeader } from '@/mastodon/components/column/search_header';
@@ -154,12 +156,27 @@ export const Follows: React.FC<{
{displayedAccountIds.length > 0 && <div className='spacer' />}
<div className='column-footer'>
<Link className='button button--block' to='/start/profile'>
<FormattedMessage
id='onboarding.follows.next'
defaultMessage='Next: Setup your profile'
/>
</Link>
{isRedesignEnabled() ? (
<Button variant='solid' as='link' to='/start/profile'>
<FormattedMessage
id='onboarding.follows.next'
defaultMessage='Next: Setup your profile'
/>
</Button>
) : (
<Link
className={classNames(
'button',
!isRedesignEnabled() && 'button--block',
)}
to='/start/profile'
>
<FormattedMessage
id='onboarding.follows.next'
defaultMessage='Next: Setup your profile'
/>
</Link>
)}
</div>
</>
}

View File

@@ -7,6 +7,7 @@ import { useHistory } from 'react-router-dom';
import { Helmet } from '@unhead/react/helmet';
import { Button } from '@/mastodon/components/button/redesign';
import { Column } from '@/mastodon/components/column';
import { ColumnHeader as LegacyColumnHeader } from '@/mastodon/components/column/header';
import { ColumnHeader } from '@/mastodon/components/column_header';
@@ -16,7 +17,7 @@ import EditIcon from '@/material-icons/400-24px/edit.svg?react';
import PersonIcon from '@/material-icons/400-24px/person.svg?react';
import { updateAccount } from 'mastodon/actions/accounts';
import { closeOnboarding } from 'mastodon/actions/onboarding';
import { Button } from 'mastodon/components/button';
import { Button as LegacyButton } from 'mastodon/components/button';
import {
TextAreaField,
TextInputField,
@@ -310,16 +311,25 @@ export const Profile: React.FC<{
<div className='spacer' />
<div className='column-footer'>
<Button block onClick={handleSubmit} disabled={isSaving}>
{isSaving ? (
<LoadingIndicator />
) : (
{isRedesignEnabled() ? (
<Button variant='solid' onClick={handleSubmit} loading={isSaving}>
<FormattedMessage
id='onboarding.profile.finish'
defaultMessage='Finish'
/>
)}
</Button>
</Button>
) : (
<LegacyButton block onClick={handleSubmit} disabled={isSaving}>
{isSaving ? (
<LoadingIndicator />
) : (
<FormattedMessage
id='onboarding.profile.finish'
defaultMessage='Finish'
/>
)}
</LegacyButton>
)}
</div>
</div>