diff --git a/app/javascript/__mocks__/svg.js b/app/javascript/__mocks__/svg.js new file mode 100644 index 00000000000000..e725dc2da6d8d3 --- /dev/null +++ b/app/javascript/__mocks__/svg.js @@ -0,0 +1,3 @@ +// eslint-disable-next-line import/no-anonymous-default-export +export default 'SvgrURL'; +export const ReactComponent = 'div'; diff --git a/app/javascript/mastodon/components/account.jsx b/app/javascript/mastodon/components/account.jsx index 69189a84b40fc1..e4e3c88b6f2fae 100644 --- a/app/javascript/mastodon/components/account.jsx +++ b/app/javascript/mastodon/components/account.jsx @@ -18,7 +18,6 @@ import { Avatar } from './avatar'; import { Button } from './button'; import { FollowersCounter } from './counters'; import { DisplayName } from './display_name'; -import { IconButton } from './icon_button'; import { RelativeTimestamp } from './relative_timestamp'; const messages = defineMessages({ @@ -45,10 +44,7 @@ class Account extends ImmutablePureComponent { intl: PropTypes.object.isRequired, hidden: PropTypes.bool, minimal: PropTypes.bool, - actionIcon: PropTypes.string, - actionTitle: PropTypes.string, defaultAction: PropTypes.string, - onActionClick: PropTypes.func, withBio: PropTypes.bool, }; @@ -76,12 +72,8 @@ class Account extends ImmutablePureComponent { this.props.onMuteNotifications(this.props.account, false); }; - handleAction = () => { - this.props.onActionClick(this.props.account); - }; - render () { - const { account, intl, hidden, withBio, onActionClick, actionIcon, actionTitle, defaultAction, size, minimal } = this.props; + const { account, intl, hidden, withBio, defaultAction, size, minimal } = this.props; if (!account) { return ; @@ -98,9 +90,7 @@ class Account extends ImmutablePureComponent { let buttons; - if (actionIcon && onActionClick) { - buttons = ; - } else if (!actionIcon && account.get('id') !== me && account.get('relationship', null) !== null) { + if (account.get('id') !== me && account.get('relationship', null) !== null) { const following = account.getIn(['relationship', 'following']); const requested = account.getIn(['relationship', 'requested']); const blocking = account.getIn(['relationship', 'blocking']); diff --git a/app/javascript/mastodon/components/attachment_list.jsx b/app/javascript/mastodon/components/attachment_list.jsx index 71cb645c5cba8d..ebf092b83df001 100644 --- a/app/javascript/mastodon/components/attachment_list.jsx +++ b/app/javascript/mastodon/components/attachment_list.jsx @@ -7,6 +7,8 @@ import classNames from 'classnames'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; +import { ReactComponent as LinkIcon } from '@material-symbols/svg-600/outlined/link.svg'; + import { Icon } from 'mastodon/components/icon'; const filename = url => url.split('/').pop().split('#')[0].split('?')[0]; @@ -25,7 +27,7 @@ export default class AttachmentList extends ImmutablePureComponent {
{!compact && (
- +
)} @@ -36,7 +38,7 @@ export default class AttachmentList extends ImmutablePureComponent { return (
  • - {compact && } + {compact && } {compact && ' ' } {displayUrl ? filename(displayUrl) : } diff --git a/app/javascript/mastodon/components/badge.jsx b/app/javascript/mastodon/components/badge.jsx index 235aef0c262467..2f762fed5fb80a 100644 --- a/app/javascript/mastodon/components/badge.jsx +++ b/app/javascript/mastodon/components/badge.jsx @@ -2,9 +2,9 @@ import PropTypes from 'prop-types'; import { FormattedMessage } from 'react-intl'; -import { ReactComponent as GroupsIcon } from '@material-design-icons/svg/outlined/group.svg'; -import { ReactComponent as PersonIcon } from '@material-design-icons/svg/outlined/person.svg'; -import { ReactComponent as SmartToyIcon } from '@material-design-icons/svg/outlined/smart_toy.svg'; +import { ReactComponent as GroupsIcon } from '@material-symbols/svg-600/outlined/group.svg'; +import { ReactComponent as PersonIcon } from '@material-symbols/svg-600/outlined/person.svg'; +import { ReactComponent as SmartToyIcon } from '@material-symbols/svg-600/outlined/smart_toy.svg'; export const Badge = ({ icon, label, domain }) => ( diff --git a/app/javascript/mastodon/components/check.tsx b/app/javascript/mastodon/components/check.tsx deleted file mode 100644 index 901f89fc5b2bfa..00000000000000 --- a/app/javascript/mastodon/components/check.tsx +++ /dev/null @@ -1,13 +0,0 @@ -export const Check: React.FC = () => ( - - - -); diff --git a/app/javascript/mastodon/components/column_back_button.jsx b/app/javascript/mastodon/components/column_back_button.jsx index b47718ed8924bd..fac6ed9814db46 100644 --- a/app/javascript/mastodon/components/column_back_button.jsx +++ b/app/javascript/mastodon/components/column_back_button.jsx @@ -6,6 +6,8 @@ import { FormattedMessage } from 'react-intl'; import { withRouter } from 'react-router-dom'; +import { ReactComponent as ArrowBackIcon } from '@material-symbols/svg-600/outlined/arrow_back.svg'; + import { Icon } from 'mastodon/components/icon'; import { WithRouterPropTypes } from 'mastodon/utils/react_router'; @@ -34,7 +36,7 @@ class ColumnBackButton extends PureComponent { const component = ( ); diff --git a/app/javascript/mastodon/components/column_back_button_slim.jsx b/app/javascript/mastodon/components/column_back_button_slim.jsx index f8060e5a5ba0ba..6d66041cdfcfa3 100644 --- a/app/javascript/mastodon/components/column_back_button_slim.jsx +++ b/app/javascript/mastodon/components/column_back_button_slim.jsx @@ -1,5 +1,7 @@ import { FormattedMessage } from 'react-intl'; +import { ReactComponent as ArrowBackIcon } from '@material-symbols/svg-600/outlined/arrow_back.svg'; + import { Icon } from 'mastodon/components/icon'; import ColumnBackButton from './column_back_button'; @@ -10,7 +12,7 @@ export default class ColumnBackButtonSlim extends ColumnBackButton { return (
    - +
    diff --git a/app/javascript/mastodon/components/column_header.jsx b/app/javascript/mastodon/components/column_header.jsx index 2896a501be7d70..f60b17d9b833e1 100644 --- a/app/javascript/mastodon/components/column_header.jsx +++ b/app/javascript/mastodon/components/column_header.jsx @@ -7,6 +7,13 @@ import { FormattedMessage, injectIntl, defineMessages } from 'react-intl'; import classNames from 'classnames'; import { withRouter } from 'react-router-dom'; +import { ReactComponent as AddIcon } from '@material-symbols/svg-600/outlined/add.svg'; +import { ReactComponent as ArrowBackIcon } from '@material-symbols/svg-600/outlined/arrow_back.svg'; +import { ReactComponent as ChevronLeftIcon } from '@material-symbols/svg-600/outlined/chevron_left.svg'; +import { ReactComponent as ChevronRightIcon } from '@material-symbols/svg-600/outlined/chevron_right.svg'; +import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg'; +import { ReactComponent as TuneIcon } from '@material-symbols/svg-600/outlined/tune.svg'; + import { Icon } from 'mastodon/components/icon'; import { WithRouterPropTypes } from 'mastodon/utils/react_router'; @@ -27,6 +34,7 @@ class ColumnHeader extends PureComponent { intl: PropTypes.object.isRequired, title: PropTypes.node, icon: PropTypes.string, + iconComponent: PropTypes.func, active: PropTypes.bool, multiColumn: PropTypes.bool, extraButton: PropTypes.node, @@ -87,7 +95,7 @@ class ColumnHeader extends PureComponent { }; render () { - const { title, icon, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent, collapseIssues, history } = this.props; + const { title, icon, iconComponent, active, children, pinned, multiColumn, extraButton, showBackButton, intl: { formatMessage }, placeholder, appendContent, collapseIssues, history } = this.props; const { collapsed, animating } = this.state; const wrapperClassName = classNames('column-header__wrapper', { @@ -118,22 +126,22 @@ class ColumnHeader extends PureComponent { } if (multiColumn && pinned) { - pinButton = ; + pinButton = ; moveButtons = (
    - - + +
    ); } else if (multiColumn && this.props.onPin) { - pinButton = ; + pinButton = ; } if (!pinned && ((multiColumn && history.location?.state?.fromMastodon) || showBackButton)) { backButton = ( ); @@ -157,21 +165,21 @@ class ColumnHeader extends PureComponent { onClick={this.handleToggleClick} > - + {collapseIssues && } ); } - const hasTitle = icon && title; + const hasTitle = (icon || iconComponent) && title; const component = (

    {hasTitle && ( )} diff --git a/app/javascript/mastodon/components/dismissable_banner.tsx b/app/javascript/mastodon/components/dismissable_banner.tsx index 04a28e3cbe7c65..4feb74a3a19ca6 100644 --- a/app/javascript/mastodon/components/dismissable_banner.tsx +++ b/app/javascript/mastodon/components/dismissable_banner.tsx @@ -3,6 +3,8 @@ import { useCallback, useState } from 'react'; import { defineMessages, useIntl } from 'react-intl'; +import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg'; + import { bannerSettings } from 'mastodon/settings'; import { IconButton } from './icon_button'; @@ -36,6 +38,7 @@ export const DismissableBanner: React.FC> = ({
    diff --git a/app/javascript/mastodon/components/domain.tsx b/app/javascript/mastodon/components/domain.tsx index f4a3b9d4b69d2a..34c376f530535b 100644 --- a/app/javascript/mastodon/components/domain.tsx +++ b/app/javascript/mastodon/components/domain.tsx @@ -2,6 +2,8 @@ import { useCallback } from 'react'; import { defineMessages, useIntl } from 'react-intl'; +import { ReactComponent as LockOpenIcon } from '@material-symbols/svg-600/outlined/lock_open.svg'; + import { IconButton } from './icon_button'; const messages = defineMessages({ @@ -34,6 +36,7 @@ export const Domain: React.FC = ({ domain, onUnblockDomain }) => { diff --git a/app/javascript/mastodon/components/dropdown_menu.jsx b/app/javascript/mastodon/components/dropdown_menu.jsx index 31a5ed31109a12..de540b392ba27b 100644 --- a/app/javascript/mastodon/components/dropdown_menu.jsx +++ b/app/javascript/mastodon/components/dropdown_menu.jsx @@ -6,6 +6,7 @@ import { withRouter } from 'react-router-dom'; import ImmutablePropTypes from 'react-immutable-proptypes'; +import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg'; import { supportsPassiveEvents } from 'detect-passive-events'; import Overlay from 'react-overlays/Overlay'; @@ -163,6 +164,7 @@ class Dropdown extends PureComponent { static propTypes = { children: PropTypes.node, icon: PropTypes.string, + iconComponent: PropTypes.func, items: PropTypes.oneOfType([PropTypes.array, ImmutablePropTypes.list]).isRequired, loading: PropTypes.bool, size: PropTypes.number, @@ -255,7 +257,7 @@ class Dropdown extends PureComponent { }; findTarget = () => { - return this.target; + return this.target?.buttonRef?.current; }; componentWillUnmount = () => { @@ -271,6 +273,7 @@ class Dropdown extends PureComponent { render () { const { icon, + iconComponent, items, size, title, @@ -291,9 +294,11 @@ class Dropdown extends PureComponent { onMouseDown: this.handleMouseDown, onKeyDown: this.handleButtonKeyDown, onKeyPress: this.handleKeyPress, + ref: this.setTargetRef, }) : ( ); return ( <> - - {button} - + {button} + {({ props, arrowProps, placement }) => (
    diff --git a/app/javascript/mastodon/components/edited_timestamp/index.jsx b/app/javascript/mastodon/components/edited_timestamp/index.jsx index 987b7c8272b1ba..4375166bcd4fbd 100644 --- a/app/javascript/mastodon/components/edited_timestamp/index.jsx +++ b/app/javascript/mastodon/components/edited_timestamp/index.jsx @@ -5,6 +5,8 @@ import { FormattedMessage, injectIntl } from 'react-intl'; import { connect } from 'react-redux'; +import { ReactComponent as ArrowDropDownIcon } from '@material-symbols/svg-600/outlined/arrow_drop_down.svg'; + import { openModal } from 'mastodon/actions/modal'; import { Icon } from 'mastodon/components/icon'; import InlineAccount from 'mastodon/components/inline_account'; @@ -66,7 +68,7 @@ class EditedTimestamp extends PureComponent { return ( ); diff --git a/app/javascript/mastodon/components/icon.tsx b/app/javascript/mastodon/components/icon.tsx index 3d091c7059e18c..d53675e4191880 100644 --- a/app/javascript/mastodon/components/icon.tsx +++ b/app/javascript/mastodon/components/icon.tsx @@ -1,20 +1,50 @@ import classNames from 'classnames'; -interface Props extends React.HTMLAttributes { - id: string; - className?: string; - fixedWidth?: boolean; +import { ReactComponent as CheckBoxOutlineBlankIcon } from '@material-symbols/svg-600/outlined/check_box_outline_blank.svg'; + +interface SVGPropsWithTitle extends React.SVGProps { + title?: string; +} + +export type IconProp = React.FC; + +interface Props extends React.SVGProps { children?: never; + id: string; + icon: IconProp; + title?: string; } export const Icon: React.FC = ({ id, + icon: IconComponent, className, - fixedWidth, + title: titleProp, ...other -}) => ( - -); +}) => { + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition + if (!IconComponent) { + if (process.env.NODE_ENV !== 'production') { + throw new Error(` is missing an "icon" prop.`); + } + + IconComponent = CheckBoxOutlineBlankIcon; + } + + const ariaHidden = titleProp ? undefined : true; + const role = !ariaHidden ? 'img' : undefined; + + // Set the title to an empty string to remove the built-in SVG one if any + // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing + const title = titleProp || ''; + + return ( + + ); +}; diff --git a/app/javascript/mastodon/components/icon_button.tsx b/app/javascript/mastodon/components/icon_button.tsx index da6f19e9eafc20..e38e387712800c 100644 --- a/app/javascript/mastodon/components/icon_button.tsx +++ b/app/javascript/mastodon/components/icon_button.tsx @@ -1,19 +1,20 @@ -import { PureComponent } from 'react'; +import { PureComponent, createRef } from 'react'; import classNames from 'classnames'; import { AnimatedNumber } from './animated_number'; +import type { IconProp } from './icon'; import { Icon } from './icon'; interface Props { className?: string; title: string; icon: string; + iconComponent: IconProp; onClick?: React.MouseEventHandler; onMouseDown?: React.MouseEventHandler; onKeyDown?: React.KeyboardEventHandler; onKeyPress?: React.KeyboardEventHandler; - size: number; active: boolean; expanded?: boolean; style?: React.CSSProperties; @@ -32,8 +33,9 @@ interface States { deactivate: boolean; } export class IconButton extends PureComponent { + buttonRef = createRef(); + static defaultProps = { - size: 18, active: false, disabled: false, animate: false, @@ -85,10 +87,6 @@ export class IconButton extends PureComponent { render() { const style = { - fontSize: `${this.props.size}px`, - width: `${this.props.size * 1.28571429}px`, - height: `${this.props.size * 1.28571429}px`, - lineHeight: `${this.props.size}px`, ...this.props.style, ...(this.props.active ? this.props.activeStyle : {}), }; @@ -99,6 +97,7 @@ export class IconButton extends PureComponent { disabled, expanded, icon, + iconComponent, inverted, overlay, tabIndex, @@ -120,13 +119,9 @@ export class IconButton extends PureComponent { 'icon-button--with-counter': typeof counter !== 'undefined', }); - if (typeof counter !== 'undefined') { - style.width = 'auto'; - } - let contents = ( <> -
    @@ -448,7 +454,7 @@ class Header extends ImmutablePureComponent {
    - {pair.get('verified_at') && } + {pair.get('verified_at') && }
    ))} diff --git a/app/javascript/mastodon/features/account_gallery/components/media_item.jsx b/app/javascript/mastodon/features/account_gallery/components/media_item.jsx index 63fbac67996adf..657b17d43d81b1 100644 --- a/app/javascript/mastodon/features/account_gallery/components/media_item.jsx +++ b/app/javascript/mastodon/features/account_gallery/components/media_item.jsx @@ -5,6 +5,10 @@ import classNames from 'classnames'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; +import { ReactComponent as AudiotrackIcon } from '@material-symbols/svg-600/outlined/music_note.svg'; +import { ReactComponent as PlayArrowIcon } from '@material-symbols/svg-600/outlined/play_arrow.svg'; +import { ReactComponent as VisibilityOffIcon } from '@material-symbols/svg-600/outlined/visibility_off.svg'; + import { Blurhash } from 'mastodon/components/blurhash'; import { Icon } from 'mastodon/components/icon'; import { autoPlayGif, displayMedia, useBlurhash } from 'mastodon/initial_state'; @@ -69,7 +73,7 @@ export default class MediaItem extends ImmutablePureComponent { if (!visible) { icon = ( - + ); } else { @@ -84,9 +88,9 @@ export default class MediaItem extends ImmutablePureComponent { ); if (attachment.get('type') === 'audio') { - label = ; + label = ; } else { - label = ; + label = ; } } else if (attachment.get('type') === 'image') { const focusX = attachment.getIn(['meta', 'focus', 'x']) || 0; diff --git a/app/javascript/mastodon/features/audio/index.jsx b/app/javascript/mastodon/features/audio/index.jsx index 103ef5782739c2..60d599b97a8d6b 100644 --- a/app/javascript/mastodon/features/audio/index.jsx +++ b/app/javascript/mastodon/features/audio/index.jsx @@ -7,6 +7,12 @@ import classNames from 'classnames'; import { is } from 'immutable'; +import { ReactComponent as DownloadIcon } from '@material-symbols/svg-600/outlined/download.svg'; +import { ReactComponent as PauseIcon } from '@material-symbols/svg-600/outlined/pause.svg'; +import { ReactComponent as PlayArrowIcon } from '@material-symbols/svg-600/outlined/play_arrow.svg'; +import { ReactComponent as VisibilityOffIcon } from '@material-symbols/svg-600/outlined/visibility_off.svg'; +import { ReactComponent as VolumeOffIcon } from '@material-symbols/svg-600/outlined/volume_off.svg'; +import { ReactComponent as VolumeUpIcon } from '@material-symbols/svg-600/outlined/volume_up.svg'; import { throttle, debounce } from 'lodash'; import { Icon } from 'mastodon/components/icon'; @@ -554,8 +560,8 @@ class Audio extends PureComponent {
    - - + +
    @@ -575,9 +581,9 @@ class Audio extends PureComponent {
    - {!editable && } + {!editable && } - +
    diff --git a/app/javascript/mastodon/features/bookmarked_statuses/index.jsx b/app/javascript/mastodon/features/bookmarked_statuses/index.jsx index b0c90a43026739..be6110b0da33e0 100644 --- a/app/javascript/mastodon/features/bookmarked_statuses/index.jsx +++ b/app/javascript/mastodon/features/bookmarked_statuses/index.jsx @@ -8,6 +8,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; +import { ReactComponent as BookmarksIcon } from '@material-symbols/svg-600/outlined/bookmarks-fill.svg'; import { debounce } from 'lodash'; import { fetchBookmarkedStatuses, expandBookmarkedStatuses } from 'mastodon/actions/bookmarks'; @@ -79,7 +80,8 @@ class Bookmarks extends ImmutablePureComponent { return (
    - +
    ); diff --git a/app/javascript/mastodon/features/compose/components/compose_form.jsx b/app/javascript/mastodon/features/compose/components/compose_form.jsx index 32b7c176d219a8..60fb6b7e1f43c0 100644 --- a/app/javascript/mastodon/features/compose/components/compose_form.jsx +++ b/app/javascript/mastodon/features/compose/components/compose_form.jsx @@ -7,6 +7,7 @@ import classNames from 'classnames'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; +import { ReactComponent as LockIcon } from '@material-symbols/svg-600/outlined/lock.svg'; import { length } from 'stringz'; import { Icon } from 'mastodon/components/icon'; @@ -229,7 +230,7 @@ class ComposeForm extends ImmutablePureComponent { if (this.props.isEditing) { publishText = intl.formatMessage(messages.saveChanges); } else if (this.props.privacy === 'private' || this.props.privacy === 'direct') { - publishText = {intl.formatMessage(messages.publish)}; + publishText = <> {intl.formatMessage(messages.publish)}; } else { publishText = this.props.privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish); } diff --git a/app/javascript/mastodon/features/compose/components/poll_button.jsx b/app/javascript/mastodon/features/compose/components/poll_button.jsx index daf48ba410011c..f722815b511706 100644 --- a/app/javascript/mastodon/features/compose/components/poll_button.jsx +++ b/app/javascript/mastodon/features/compose/components/poll_button.jsx @@ -3,8 +3,11 @@ import { PureComponent } from 'react'; import { defineMessages, injectIntl } from 'react-intl'; +import { ReactComponent as InsertChartIcon } from '@material-symbols/svg-600/outlined/insert_chart.svg'; + import { IconButton } from '../../../components/icon_button'; + const messages = defineMessages({ add_poll: { id: 'poll_button.add_poll', defaultMessage: 'Add a poll' }, remove_poll: { id: 'poll_button.remove_poll', defaultMessage: 'Remove poll' }, @@ -40,6 +43,7 @@ class PollButton extends PureComponent {
    - +

    • ); @@ -164,7 +167,7 @@ class PollForm extends ImmutablePureComponent {
    - + {/* eslint-disable-next-line jsx-a11y/no-onchange */}
    - +
    diff --git a/app/javascript/mastodon/features/compose/index.jsx b/app/javascript/mastodon/features/compose/index.jsx index 8997f1bc6c18ea..65650ffe022304 100644 --- a/app/javascript/mastodon/features/compose/index.jsx +++ b/app/javascript/mastodon/features/compose/index.jsx @@ -9,6 +9,13 @@ import { Link } from 'react-router-dom'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { connect } from 'react-redux'; +import { ReactComponent as PeopleIcon } from '@material-symbols/svg-600/outlined/group.svg'; +import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg'; +import { ReactComponent as LogoutIcon } from '@material-symbols/svg-600/outlined/logout.svg'; +import { ReactComponent as MenuIcon } from '@material-symbols/svg-600/outlined/menu.svg'; +import { ReactComponent as NotificationsIcon } from '@material-symbols/svg-600/outlined/notifications-fill.svg'; +import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg'; +import { ReactComponent as SettingsIcon } from '@material-symbols/svg-600/outlined/settings-fill.svg'; import spring from 'react-motion/lib/spring'; import { openModal } from 'mastodon/actions/modal'; @@ -101,21 +108,21 @@ class Compose extends PureComponent { return (
    {multiColumn && } diff --git a/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx b/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx index 9afad455c883c6..005edc5c2b1522 100644 --- a/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx +++ b/app/javascript/mastodon/features/direct_timeline/components/conversation.jsx @@ -8,6 +8,8 @@ import { Link, withRouter } from 'react-router-dom'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; +import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg'; +import { ReactComponent as ReplyIcon } from '@material-symbols/svg-600/outlined/reply.svg'; import { HotKeys } from 'react-hotkeys'; import AttachmentList from 'mastodon/components/attachment_list'; @@ -178,7 +180,7 @@ class Conversation extends ImmutablePureComponent { )}
    - +
    ; return ( - + 0 ? ( <> {accounts.size > 0 && ( - } onClickMore={this.handleLoadMoreAccounts}> + } onClickMore={this.handleLoadMoreAccounts}> {accounts.take(INITIAL_DISPLAY).map(id => )} )} {hashtags.size > 0 && ( - } onClickMore={this.handleLoadMoreHashtags}> + } onClickMore={this.handleLoadMoreHashtags}> {hashtags.take(INITIAL_DISPLAY).map(hashtag => )} )} {statuses.size > 0 && ( - } onClickMore={this.handleLoadMoreStatuses}> + } onClickMore={this.handleLoadMoreStatuses}> {statuses.take(INITIAL_DISPLAY).map(id => )} )} diff --git a/app/javascript/mastodon/features/favourited_statuses/index.jsx b/app/javascript/mastodon/features/favourited_statuses/index.jsx index 76cff7f8dfe754..d3c3cc9f091698 100644 --- a/app/javascript/mastodon/features/favourited_statuses/index.jsx +++ b/app/javascript/mastodon/features/favourited_statuses/index.jsx @@ -8,6 +8,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; +import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star-fill.svg'; import { debounce } from 'lodash'; import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns'; @@ -80,6 +81,7 @@ class Favourites extends ImmutablePureComponent { + )} /> diff --git a/app/javascript/mastodon/features/filters/select_filter.jsx b/app/javascript/mastodon/features/filters/select_filter.jsx index 79ada6f58632d2..9e8f87e0051a89 100644 --- a/app/javascript/mastodon/features/filters/select_filter.jsx +++ b/app/javascript/mastodon/features/filters/select_filter.jsx @@ -5,6 +5,7 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { connect } from 'react-redux'; +import { ReactComponent as AddIcon } from '@material-symbols/svg-600/outlined/add.svg'; import fuzzysort from 'fuzzysort'; import { Icon } from 'mastodon/components/icon'; @@ -78,7 +79,7 @@ class SelectFilter extends PureComponent { renderCreateNew (name) { return (
    - +
    ); } diff --git a/app/javascript/mastodon/features/firehose/index.jsx b/app/javascript/mastodon/features/firehose/index.jsx index 849ee38f5fc738..0ed8aa11aa6ad3 100644 --- a/app/javascript/mastodon/features/firehose/index.jsx +++ b/app/javascript/mastodon/features/firehose/index.jsx @@ -6,6 +6,8 @@ import { useIntl, defineMessages, FormattedMessage } from 'react-intl'; import { Helmet } from 'react-helmet'; import { NavLink } from 'react-router-dom'; +import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg'; + import { addColumn } from 'mastodon/actions/columns'; import { changeSetting } from 'mastodon/actions/settings'; import { connectPublicStream, connectCommunityStream } from 'mastodon/actions/streaming'; @@ -160,6 +162,7 @@ const Firehose = ({ feedType, multiColumn }) => {
    -
    -
    +
    +
    ); diff --git a/app/javascript/mastodon/features/followed_tags/index.jsx b/app/javascript/mastodon/features/followed_tags/index.jsx index 52414982a64974..7042f2438aa2cc 100644 --- a/app/javascript/mastodon/features/followed_tags/index.jsx +++ b/app/javascript/mastodon/features/followed_tags/index.jsx @@ -8,6 +8,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; +import { ReactComponent as TagIcon } from '@material-symbols/svg-600/outlined/tag.svg'; import { debounce } from 'lodash'; import { expandFollowedHashtags, fetchFollowedHashtags } from 'mastodon/actions/tags'; @@ -55,6 +56,7 @@ class FollowedTags extends ImmutablePureComponent { ))} - {visibleReactions.size < 8 && } />} + {visibleReactions.size < 8 && } />}
    )} @@ -440,9 +443,9 @@ class Announcements extends ImmutablePureComponent { {announcements.size > 1 && (
    - + {index + 1} / {announcements.size} - +
    )}
    diff --git a/app/javascript/mastodon/features/getting_started/index.jsx b/app/javascript/mastodon/features/getting_started/index.jsx index cfe7b0cee9f9ee..5994e88edf91bb 100644 --- a/app/javascript/mastodon/features/getting_started/index.jsx +++ b/app/javascript/mastodon/features/getting_started/index.jsx @@ -9,6 +9,18 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; +import { ReactComponent as AlternateEmailIcon } from '@material-symbols/svg-600/outlined/alternate_email.svg'; +import { ReactComponent as BookmarksIcon } from '@material-symbols/svg-600/outlined/bookmarks-fill.svg'; +import { ReactComponent as PeopleIcon } from '@material-symbols/svg-600/outlined/group.svg'; +import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg'; +import { ReactComponent as ListAltIcon } from '@material-symbols/svg-600/outlined/list_alt.svg'; +import { ReactComponent as MenuIcon } from '@material-symbols/svg-600/outlined/menu.svg'; +import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add.svg'; +import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg'; +import { ReactComponent as SettingsIcon } from '@material-symbols/svg-600/outlined/settings-fill.svg'; +import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star.svg'; +import { ReactComponent as TagIcon } from '@material-symbols/svg-600/outlined/tag.svg'; + import { fetchFollowRequests } from 'mastodon/actions/accounts'; import Column from 'mastodon/components/column'; import ColumnHeader from 'mastodon/components/column_header'; @@ -101,38 +113,38 @@ class GettingStarted extends ImmutablePureComponent { if (showTrends) { navItems.push( - , + , ); } navItems.push( - , - , + , + , ); if (signedIn) { navItems.push( , - , - , - , - , - , + , + , + , + , + , ); if (myAccount.get('locked') || unreadFollowRequests > 0) { - navItems.push(); + navItems.push(); } navItems.push( , - , + , ); } return ( - {(signedIn && !multiColumn) ? : } + {(signedIn && !multiColumn) ? : }
    diff --git a/app/javascript/mastodon/features/hashtag_timeline/index.jsx b/app/javascript/mastodon/features/hashtag_timeline/index.jsx index 7079f55e92e278..d39d550a1bef6d 100644 --- a/app/javascript/mastodon/features/hashtag_timeline/index.jsx +++ b/app/javascript/mastodon/features/hashtag_timeline/index.jsx @@ -8,6 +8,7 @@ import { Helmet } from 'react-helmet'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { connect } from 'react-redux'; +import { ReactComponent as TagIcon } from '@material-symbols/svg-600/outlined/tag.svg'; import { isEqual } from 'lodash'; import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns'; @@ -190,6 +191,7 @@ class HashtagTimeline extends PureComponent { - + ); } @@ -198,6 +201,7 @@ class HomeTimeline extends PureComponent { ; + icon = ; title = ; actionDescription = ; break; case 'reblog': - icon = ; + icon = ; title = ; actionDescription = ; break; case 'favourite': - icon = ; + icon = ; title = ; actionDescription = ; break; case 'follow': - icon = ; + icon = ; title = ; actionDescription = ; break; diff --git a/app/javascript/mastodon/features/keyboard_shortcuts/index.jsx b/app/javascript/mastodon/features/keyboard_shortcuts/index.jsx index 3dc21f7e8e73ec..7552e1799b4ec8 100644 --- a/app/javascript/mastodon/features/keyboard_shortcuts/index.jsx +++ b/app/javascript/mastodon/features/keyboard_shortcuts/index.jsx @@ -6,6 +6,8 @@ import { Helmet } from 'react-helmet'; import ImmutablePureComponent from 'react-immutable-pure-component'; +import { ReactComponent as InfoIcon } from '@material-symbols/svg-600/outlined/info.svg'; + import Column from 'mastodon/components/column'; import ColumnHeader from 'mastodon/components/column_header'; @@ -27,7 +29,8 @@ class KeyboardShortcuts extends ImmutablePureComponent { diff --git a/app/javascript/mastodon/features/list_adder/components/list.jsx b/app/javascript/mastodon/features/list_adder/components/list.jsx index faade6f61458b0..6c5aab85da7fff 100644 --- a/app/javascript/mastodon/features/list_adder/components/list.jsx +++ b/app/javascript/mastodon/features/list_adder/components/list.jsx @@ -6,6 +6,10 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; +import { ReactComponent as AddIcon } from '@material-symbols/svg-600/outlined/add.svg'; +import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg'; +import { ReactComponent as ListAltIcon } from '@material-symbols/svg-600/outlined/list_alt.svg'; + import { Icon } from 'mastodon/components/icon'; import { removeFromListAdder, addToListAdder } from '../../../actions/lists'; @@ -46,16 +50,16 @@ class List extends ImmutablePureComponent { let button; if (added) { - button = ; + button = ; } else { - button = ; + button = ; } return (
    - + {list.get('title')}
    diff --git a/app/javascript/mastodon/features/list_editor/components/account.jsx b/app/javascript/mastodon/features/list_editor/components/account.jsx index 4618bd1c167145..f38c7d93a7c8f6 100644 --- a/app/javascript/mastodon/features/list_editor/components/account.jsx +++ b/app/javascript/mastodon/features/list_editor/components/account.jsx @@ -6,6 +6,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; +import { ReactComponent as AddIcon } from '@material-symbols/svg-600/outlined/add.svg'; +import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg'; + import { removeFromListEditor, addToListEditor } from '../../../actions/lists'; import { Avatar } from '../../../components/avatar'; import { DisplayName } from '../../../components/display_name'; @@ -53,9 +56,9 @@ class Account extends ImmutablePureComponent { let button; if (added) { - button = ; + button = ; } else { - button = ; + button = ; } return ( diff --git a/app/javascript/mastodon/features/list_editor/components/edit_list_form.jsx b/app/javascript/mastodon/features/list_editor/components/edit_list_form.jsx index 9e087a97d714d9..1e2446f92b81fe 100644 --- a/app/javascript/mastodon/features/list_editor/components/edit_list_form.jsx +++ b/app/javascript/mastodon/features/list_editor/components/edit_list_form.jsx @@ -5,6 +5,8 @@ import { defineMessages, injectIntl } from 'react-intl'; import { connect } from 'react-redux'; +import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/check.svg'; + import { changeListEditorTitle, submitListEditor } from '../../../actions/lists'; import { IconButton } from '../../../components/icon_button'; @@ -61,6 +63,7 @@ class ListForm extends PureComponent { diff --git a/app/javascript/mastodon/features/list_editor/components/search.jsx b/app/javascript/mastodon/features/list_editor/components/search.jsx index 021bc450ad5767..093af5cd4e2ceb 100644 --- a/app/javascript/mastodon/features/list_editor/components/search.jsx +++ b/app/javascript/mastodon/features/list_editor/components/search.jsx @@ -7,6 +7,9 @@ import classNames from 'classnames'; import { connect } from 'react-redux'; +import { ReactComponent as CancelIcon } from '@material-symbols/svg-600/outlined/cancel.svg'; +import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg'; + import { Icon } from 'mastodon/components/icon'; import { fetchListSuggestions, clearListSuggestions, changeListSuggestions } from '../../../actions/lists'; @@ -69,8 +72,8 @@ class Search extends PureComponent {
    - - + +
    ); diff --git a/app/javascript/mastodon/features/list_timeline/index.jsx b/app/javascript/mastodon/features/list_timeline/index.jsx index d8fcb56165f475..aadb6ecd54b38f 100644 --- a/app/javascript/mastodon/features/list_timeline/index.jsx +++ b/app/javascript/mastodon/features/list_timeline/index.jsx @@ -9,6 +9,9 @@ import { withRouter } from 'react-router-dom'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { connect } from 'react-redux'; +import { ReactComponent as DeleteIcon } from '@material-symbols/svg-600/outlined/delete.svg'; +import { ReactComponent as EditIcon } from '@material-symbols/svg-600/outlined/edit.svg'; +import { ReactComponent as ListAltIcon } from '@material-symbols/svg-600/outlined/list_alt.svg'; import Toggle from 'react-toggle'; import { addColumn, removeColumn, moveColumn } from 'mastodon/actions/columns'; @@ -181,6 +184,7 @@ class ListTimeline extends PureComponent {
    diff --git a/app/javascript/mastodon/features/lists/index.jsx b/app/javascript/mastodon/features/lists/index.jsx index e947a40b83990d..58e85b4d288ca9 100644 --- a/app/javascript/mastodon/features/lists/index.jsx +++ b/app/javascript/mastodon/features/lists/index.jsx @@ -9,6 +9,8 @@ import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; import { createSelector } from 'reselect'; +import { ReactComponent as ListAltIcon } from '@material-symbols/svg-600/outlined/list_alt.svg'; + import { fetchLists } from 'mastodon/actions/lists'; import Column from 'mastodon/components/column'; import ColumnHeader from 'mastodon/components/column_header'; @@ -65,7 +67,7 @@ class Lists extends ImmutablePureComponent { return ( - + @@ -76,7 +78,7 @@ class Lists extends ImmutablePureComponent { bindToDocument={!multiColumn} > {lists.map(list => - , + , )} diff --git a/app/javascript/mastodon/features/mutes/index.jsx b/app/javascript/mastodon/features/mutes/index.jsx index 947fe4c9b2712d..da69bc547d2971 100644 --- a/app/javascript/mastodon/features/mutes/index.jsx +++ b/app/javascript/mastodon/features/mutes/index.jsx @@ -8,6 +8,7 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; +import { ReactComponent as VolumeOffIcon } from '@material-symbols/svg-600/outlined/volume_off.svg'; import { debounce } from 'lodash'; import { fetchMutes, expandMutes } from '../../actions/mutes'; @@ -61,7 +62,7 @@ class Mutes extends ImmutablePureComponent { const emptyMessage = ; return ( - + + ); } diff --git a/app/javascript/mastodon/features/notifications/components/filter_bar.jsx b/app/javascript/mastodon/features/notifications/components/filter_bar.jsx index 773fe9a8f85f38..84bd4791ca084a 100644 --- a/app/javascript/mastodon/features/notifications/components/filter_bar.jsx +++ b/app/javascript/mastodon/features/notifications/components/filter_bar.jsx @@ -3,6 +3,13 @@ import { PureComponent } from 'react'; import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; +import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg'; +import { ReactComponent as InsertChartIcon } from '@material-symbols/svg-600/outlined/insert_chart.svg'; +import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add.svg'; +import { ReactComponent as RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg'; +import { ReactComponent as ReplyAllIcon } from '@material-symbols/svg-600/outlined/reply_all.svg'; +import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star.svg'; + import { Icon } from 'mastodon/components/icon'; const tooltips = defineMessages({ @@ -66,42 +73,42 @@ class FilterBar extends PureComponent { onClick={this.onClick('mention')} title={intl.formatMessage(tooltips.mentions)} > - +
    ); diff --git a/app/javascript/mastodon/features/notifications/components/follow_request.jsx b/app/javascript/mastodon/features/notifications/components/follow_request.jsx index 8a5c997c6422a8..c10633beebcc76 100644 --- a/app/javascript/mastodon/features/notifications/components/follow_request.jsx +++ b/app/javascript/mastodon/features/notifications/components/follow_request.jsx @@ -7,6 +7,9 @@ import { Link } from 'react-router-dom'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; +import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/check.svg'; +import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg'; + import { Avatar } from 'mastodon/components/avatar'; import { DisplayName } from 'mastodon/components/display_name'; import { IconButton } from 'mastodon/components/icon_button'; @@ -50,8 +53,8 @@ class FollowRequest extends ImmutablePureComponent {
    - - + +
    diff --git a/app/javascript/mastodon/features/notifications/components/notification.jsx b/app/javascript/mastodon/features/notifications/components/notification.jsx index d19d17d9be1798..ad7308b26fc6f0 100644 --- a/app/javascript/mastodon/features/notifications/components/notification.jsx +++ b/app/javascript/mastodon/features/notifications/components/notification.jsx @@ -8,6 +8,14 @@ import { Link, withRouter } from 'react-router-dom'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; +import { ReactComponent as EditIcon } from '@material-symbols/svg-600/outlined/edit.svg'; +import { ReactComponent as FlagIcon } from '@material-symbols/svg-600/outlined/flag-fill.svg'; +import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home-fill.svg'; +import { ReactComponent as InsertChartIcon } from '@material-symbols/svg-600/outlined/insert_chart.svg'; +import { ReactComponent as PersonIcon } from '@material-symbols/svg-600/outlined/person-fill.svg'; +import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add-fill.svg'; +import { ReactComponent as RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg'; +import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star-fill.svg'; import { HotKeys } from 'react-hotkeys'; import { Icon } from 'mastodon/components/icon'; @@ -128,9 +136,7 @@ class Notification extends ImmutablePureComponent {
    -
    - -
    + @@ -150,9 +156,7 @@ class Notification extends ImmutablePureComponent {
    -
    - -
    + @@ -190,9 +194,7 @@ class Notification extends ImmutablePureComponent {
    -
    - -
    + @@ -222,9 +224,7 @@ class Notification extends ImmutablePureComponent {
    -
    - -
    + @@ -258,9 +258,7 @@ class Notification extends ImmutablePureComponent {
    -
    - -
    + @@ -295,9 +293,7 @@ class Notification extends ImmutablePureComponent {
    -
    - -
    + @@ -334,9 +330,7 @@ class Notification extends ImmutablePureComponent {
    -
    - -
    + {ownPoll ? ( @@ -371,9 +365,7 @@ class Notification extends ImmutablePureComponent {
    -
    - -
    + @@ -401,9 +393,7 @@ class Notification extends ImmutablePureComponent {
    -
    - -
    + diff --git a/app/javascript/mastodon/features/notifications/components/notifications_permission_banner.jsx b/app/javascript/mastodon/features/notifications/components/notifications_permission_banner.jsx index 9ce014d258d37b..b7ebb4c4675dcf 100644 --- a/app/javascript/mastodon/features/notifications/components/notifications_permission_banner.jsx +++ b/app/javascript/mastodon/features/notifications/components/notifications_permission_banner.jsx @@ -5,6 +5,9 @@ import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; import { connect } from 'react-redux'; +import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg'; +import { ReactComponent as TuneIcon } from '@material-symbols/svg-600/outlined/tune.svg'; + import { requestBrowserPermission } from 'mastodon/actions/notifications'; import { changeSetting } from 'mastodon/actions/settings'; import { Button } from 'mastodon/components/button'; @@ -36,11 +39,11 @@ class NotificationsPermissionBanner extends PureComponent { return (
    - +

    -

    }} />

    +

    }} />

    ); diff --git a/app/javascript/mastodon/features/notifications/index.jsx b/app/javascript/mastodon/features/notifications/index.jsx index 9fd2cf4b1852e2..379932b7b7feb1 100644 --- a/app/javascript/mastodon/features/notifications/index.jsx +++ b/app/javascript/mastodon/features/notifications/index.jsx @@ -10,6 +10,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import { connect } from 'react-redux'; import { createSelector } from 'reselect'; +import { ReactComponent as DoneAllIcon } from '@material-symbols/svg-600/outlined/done_all.svg'; +import { ReactComponent as NotificationsIcon } from '@material-symbols/svg-600/outlined/notifications-fill.svg'; import { debounce } from 'lodash'; import { compareId } from 'mastodon/compare_id'; @@ -260,7 +262,7 @@ class Notifications extends PureComponent { onClick={this.handleMarkAsRead} className='column-header__button' > - + ); } @@ -269,6 +271,7 @@ class Notifications extends PureComponent { ( - - - -); - -export default ArrowSmallRight; \ No newline at end of file diff --git a/app/javascript/mastodon/features/onboarding/components/progress_indicator.jsx b/app/javascript/mastodon/features/onboarding/components/progress_indicator.jsx index 32d1754ff61a5b..37288a286f57b1 100644 --- a/app/javascript/mastodon/features/onboarding/components/progress_indicator.jsx +++ b/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 }) => (
    @@ -12,7 +14,7 @@ const ProgressIndicator = ({ steps, completed }) => ( {i > 0 &&
    i })} />}
    i })}> - {completed > i && } + {completed > i && }
    ))} diff --git a/app/javascript/mastodon/features/onboarding/components/step.jsx b/app/javascript/mastodon/features/onboarding/components/step.jsx index 379f433040ea17..1f42d9d49906bb 100644 --- a/app/javascript/mastodon/features/onboarding/components/step.jsx +++ b/app/javascript/mastodon/features/onboarding/components/step.jsx @@ -1,15 +1,15 @@ import PropTypes from 'prop-types'; -import { Check } from 'mastodon/components/check'; -import { Icon } from 'mastodon/components/icon'; +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 ArrowSmallRight from './arrow_small_right'; +import { Icon } from 'mastodon/components/icon'; -const Step = ({ label, description, icon, completed, onClick, href }) => { +const Step = ({ label, description, icon, iconComponent, completed, onClick, href }) => { const content = ( <>
    - +
    @@ -18,7 +18,7 @@ const Step = ({ label, description, icon, completed, onClick, href }) => {
    - {completed ? : } + {completed ? : }
    ); @@ -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, diff --git a/app/javascript/mastodon/features/onboarding/index.jsx b/app/javascript/mastodon/features/onboarding/index.jsx index 78f2444dbe0aeb..0be1512ad88056 100644 --- a/app/javascript/mastodon/features/onboarding/index.jsx +++ b/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 {
    - 0 && account.get('note').length > 0)} icon='address-book-o' label={} description={} /> - = 7} icon='user-plus' label={} description={} /> - = 1} icon='pencil-square-o' label={} description={ }} />} /> - } description={} /> + 0 && account.get('note').length > 0)} icon='address-book-o' iconComponent={AccountCircleIcon} label={} description={} /> + = 7} icon='user-plus' iconComponent={PersonAddIcon} label={} description={} /> + = 1} icon='pencil-square-o' iconComponent={EditNoteIcon} label={} description={ }} />} /> + } description={} />

    @@ -126,12 +131,12 @@ class Onboarding extends ImmutablePureComponent {
    - + - +
    diff --git a/app/javascript/mastodon/features/onboarding/share.jsx b/app/javascript/mastodon/features/onboarding/share.jsx index c5b185a244fe8a..c9d58c4e651658 100644 --- a/app/javascript/mastodon/features/onboarding/share.jsx +++ b/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 {