Merge remote-tracking branch 'parent/main' into kb-upstream-20231026

app/javascript/mastodon/features/onboarding/components/arrow_small_right.jsx

@@ -1,7 +0,0 @@
-const ArrowSmallRight = () => (
-  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='currentColor'>
-    <path fillRule='evenodd' d='M5 10a.75.75 0 01.75-.75h6.638L10.23 7.29a.75.75 0 111.04-1.08l3.5 3.25a.75.75 0 010 1.08l-3.5 3.25a.75.75 0 11-1.04-1.08l2.158-1.96H5.75A.75.75 0 015 10z' clipRule='evenodd' />
-  </svg>
-);
-
-export default ArrowSmallRight;

app/javascript/mastodon/features/onboarding/components/progress_indicator.jsx

@@ -3,7 +3,9 @@ import { Fragment } from 'react';
 
 import classNames from 'classnames';
 
-import { Check } from 'mastodon/components/check';
+import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/done.svg';
+
+import { Icon }  from 'mastodon/components/icon';
 
 const ProgressIndicator = ({ steps, completed }) => (
   <div className='onboarding__progress-indicator'>
@@ -12,7 +14,7 @@ const ProgressIndicator = ({ steps, completed }) => (
         {i > 0 && <div className={classNames('onboarding__progress-indicator__line', { active: completed > i })} />}
 
         <div className={classNames('onboarding__progress-indicator__step', { active: completed > i })}>
-          {completed > i && <Check />}
+          {completed > i && <Icon icon={CheckIcon} />}
         </div>
       </Fragment>
     ))}

app/javascript/mastodon/features/onboarding/components/step.jsx

@@ -1,15 +1,15 @@
 import PropTypes from 'prop-types';
 
-import { Check } from 'mastodon/components/check';
+import { ReactComponent as ArrowRightAltIcon } from '@material-symbols/svg-600/outlined/arrow_right_alt.svg';
+import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/done.svg';
+
 import { Icon }  from 'mastodon/components/icon';
 
-import ArrowSmallRight from './arrow_small_right';
-
-const Step = ({ label, description, icon, completed, onClick, href }) => {
+const Step = ({ label, description, icon, iconComponent, completed, onClick, href }) => {
   const content = (
     <>
       <div className='onboarding__steps__item__icon'>
-        <Icon id={icon} />
+        <Icon id={icon} icon={iconComponent} />
       </div>
 
       <div className='onboarding__steps__item__description'>
@@ -18,7 +18,7 @@ const Step = ({ label, description, icon, completed, onClick, href }) => {
       </div>
 
       <div className={completed ? 'onboarding__steps__item__progress' : 'onboarding__steps__item__go'}>
-        {completed ? <Check /> : <ArrowSmallRight />}
+        {completed ? <Icon icon={CheckIcon} /> : <Icon icon={ArrowRightAltIcon} />}
       </div>
     </>
   );
@@ -42,6 +42,7 @@ Step.propTypes = {
   label: PropTypes.node,
   description: PropTypes.node,
   icon: PropTypes.string,
+  iconComponent: PropTypes.func,
   completed: PropTypes.bool,
   href: PropTypes.string,
   onClick: PropTypes.func,

app/javascript/mastodon/features/onboarding/index.jsx

@@ -9,19 +9,24 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { connect } from 'react-redux';
 
+import { ReactComponent as AccountCircleIcon } from '@material-symbols/svg-600/outlined/account_circle.svg';
+import { ReactComponent as ArrowRightAltIcon } from '@material-symbols/svg-600/outlined/arrow_right_alt.svg';
+import { ReactComponent as ContentCopyIcon } from '@material-symbols/svg-600/outlined/content_copy.svg';
+import { ReactComponent as EditNoteIcon } from '@material-symbols/svg-600/outlined/edit_note.svg';
+import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add.svg';
 import { debounce } from 'lodash';
 
 import illustration from 'mastodon/../images/elephant_ui_conversation.svg';
 import { fetchAccount } from 'mastodon/actions/accounts';
 import { focusCompose } from 'mastodon/actions/compose';
 import { closeOnboarding } from 'mastodon/actions/onboarding';
+import { Icon }  from 'mastodon/components/icon';
 import Column from 'mastodon/features/ui/components/column';
 import { me } from 'mastodon/initial_state';
 import { makeGetAccount } from 'mastodon/selectors';
 import { assetHost } from 'mastodon/utils/config';
 import { WithRouterPropTypes } from 'mastodon/utils/react_router';
 
-import ArrowSmallRight from './components/arrow_small_right';
 import Step from './components/step';
 import Follows from './follows';
 import Share from './share';
@@ -115,10 +120,10 @@ class Onboarding extends ImmutablePureComponent {
           </div>
 
           <div className='onboarding__steps'>
-            <Step onClick={this.handleProfileClick} href='/settings/profile' completed={(!account.get('avatar').endsWith('missing.png')) || (account.get('display_name').length > 0 && account.get('note').length > 0)} icon='address-book-o' label={<FormattedMessage id='onboarding.steps.setup_profile.title' defaultMessage='Customize your profile' />} description={<FormattedMessage id='onboarding.steps.setup_profile.body' defaultMessage='Others are more likely to interact with you with a filled out profile.' />} />
-            <Step onClick={this.handleFollowClick} completed={(account.get('following_count') * 1) >= 7} icon='user-plus' label={<FormattedMessage id='onboarding.steps.follow_people.title' defaultMessage='Find at least {count, plural, one {one person} other {# people}} to follow' values={{ count: 7 }} />} description={<FormattedMessage id='onboarding.steps.follow_people.body' defaultMessage="You curate your own home feed. Let's fill it with interesting people." />} />
-            <Step onClick={this.handleComposeClick} completed={(account.get('statuses_count') * 1) >= 1} icon='pencil-square-o' label={<FormattedMessage id='onboarding.steps.publish_status.title' defaultMessage='Make your first post' />} description={<FormattedMessage id='onboarding.steps.publish_status.body' defaultMessage='Say hello to the world.' values={{ emoji: <img className='emojione' alt='🐘' src={`${assetHost}/emoji/1f418.svg`} /> }} />} />
-            <Step onClick={this.handleShareClick} completed={shareClicked} icon='copy' label={<FormattedMessage id='onboarding.steps.share_profile.title' defaultMessage='Share your profile' />} description={<FormattedMessage id='onboarding.steps.share_profile.body' defaultMessage='Let your friends know how to find you on Mastodon!' />} />
+            <Step onClick={this.handleProfileClick} href='/settings/profile' completed={(!account.get('avatar').endsWith('missing.png')) || (account.get('display_name').length > 0 && account.get('note').length > 0)} icon='address-book-o' iconComponent={AccountCircleIcon} label={<FormattedMessage id='onboarding.steps.setup_profile.title' defaultMessage='Customize your profile' />} description={<FormattedMessage id='onboarding.steps.setup_profile.body' defaultMessage='Others are more likely to interact with you with a filled out profile.' />} />
+            <Step onClick={this.handleFollowClick} completed={(account.get('following_count') * 1) >= 7} icon='user-plus' iconComponent={PersonAddIcon} label={<FormattedMessage id='onboarding.steps.follow_people.title' defaultMessage='Find at least {count, plural, one {one person} other {# people}} to follow' values={{ count: 7 }} />} description={<FormattedMessage id='onboarding.steps.follow_people.body' defaultMessage="You curate your own home feed. Let's fill it with interesting people." />} />
+            <Step onClick={this.handleComposeClick} completed={(account.get('statuses_count') * 1) >= 1} icon='pencil-square-o' iconComponent={EditNoteIcon} label={<FormattedMessage id='onboarding.steps.publish_status.title' defaultMessage='Make your first post' />} description={<FormattedMessage id='onboarding.steps.publish_status.body' defaultMessage='Say hello to the world.' values={{ emoji: <img className='emojione' alt='🐘' src={`${assetHost}/emoji/1f418.svg`} /> }} />} />
+            <Step onClick={this.handleShareClick} completed={shareClicked} icon='copy' iconComponent={ContentCopyIcon} label={<FormattedMessage id='onboarding.steps.share_profile.title' defaultMessage='Share your profile' />} description={<FormattedMessage id='onboarding.steps.share_profile.body' defaultMessage='Let your friends know how to find you on Mastodon!' />} />
           </div>
 
           <p className='onboarding__lead'><FormattedMessage id='onboarding.start.skip' defaultMessage="Don't need help getting started?" /></p>
@@ -126,15 +131,14 @@ class Onboarding extends ImmutablePureComponent {
           <div className='onboarding__links'>
             <Link to='/explore' onClick={this.handleClose} className='onboarding__link'>
               <FormattedMessage id='onboarding.actions.go_to_explore' defaultMessage='Take me to trending' />
-              <ArrowSmallRight />
+              <Icon icon={ArrowRightAltIcon} />
             </Link>
             <Link to='/public/local' onClick={this.handleClose} className='onboarding__link'>
               <FormattedMessage id='onboarding.actions.go_to_local_timeline' defaultMessage='See posts from local' />
-              <ArrowSmallRight />
             </Link>
             <Link to='/home' onClick={this.handleClose} className='onboarding__link'>
               <FormattedMessage id='onboarding.actions.go_to_home' defaultMessage='Take me to my home feed' />
-              <ArrowSmallRight />
+              <Icon icon={ArrowRightAltIcon} />
             </Link>
           </div>
         </div>

app/javascript/mastodon/features/onboarding/share.jsx

@@ -9,6 +9,8 @@ import { Link } from 'react-router-dom';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { connect } from 'react-redux';
 
+import { ReactComponent as ArrowRightAltIcon } from '@material-symbols/svg-600/outlined/arrow_right_alt.svg';
+import { ReactComponent as ContentCopyIcon } from '@material-symbols/svg-600/outlined/content_copy.svg';
 import SwipeableViews from 'react-swipeable-views';
 
 import Column from 'mastodon/components/column';
@@ -16,8 +18,6 @@ import ColumnBackButton from 'mastodon/components/column_back_button';
 import { Icon }  from 'mastodon/components/icon';
 import { me, domain } from 'mastodon/initial_state';
 
-import ArrowSmallRight from './components/arrow_small_right';
-
 const messages = defineMessages({
   shareableMessage: { id: 'onboarding.share.message', defaultMessage: 'I\'m {username} on #Mastodon! Come follow me at {url}' },
 });
@@ -79,7 +79,7 @@ class CopyPasteText extends PureComponent {
         <textarea readOnly value={value} ref={this.setRef} onClick={this.handleInputClick} onFocus={this.handleFocus} onBlur={this.handleBlur} />
 
         <button className='button' onClick={this.handleButtonClick}>
-          <Icon id='copy' /> {copied ? <FormattedMessage id='copypaste.copied' defaultMessage='Copied' /> : <FormattedMessage id='copypaste.copy_to_clipboard' defaultMessage='Copy to clipboard' />}
+          <Icon id='copy' icon={ContentCopyIcon} /> {copied ? <FormattedMessage id='copypaste.copied' defaultMessage='Copied' /> : <FormattedMessage id='copypaste.copy_to_clipboard' defaultMessage='Copy to clipboard' />}
         </button>
       </div>
     );
@@ -178,12 +178,12 @@ class Share extends PureComponent {
           <div className='onboarding__links'>
             <Link to='/home' className='onboarding__link'>
               <FormattedMessage id='onboarding.actions.go_to_home' defaultMessage='Take me to my home feed' />
-              <ArrowSmallRight />
+              <Icon icon={ArrowRightAltIcon} />
             </Link>
 
             <Link to='/explore' className='onboarding__link'>
               <FormattedMessage id='onboarding.actions.go_to_explore' defaultMessage='Take me to trending' />
-              <ArrowSmallRight />
+              <Icon icon={ArrowRightAltIcon} />
             </Link>
           </div>