diff --git a/app/javascript/flavours/glitch/components/attachment_list.jsx b/app/javascript/flavours/glitch/components/attachment_list.jsx index 173157b0d5..e7b259b200 100644 --- a/app/javascript/flavours/glitch/components/attachment_list.jsx +++ b/app/javascript/flavours/glitch/components/attachment_list.jsx @@ -7,7 +7,9 @@ import classNames from 'classnames'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import { Icon } from 'flavours/glitch/components/icon'; +import { ReactComponent as LinkIcon } from '@material-symbols/svg-600/outlined/link.svg'; + +import { Icon } from 'flavours/glitch/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/flavours/glitch/components/check.tsx b/app/javascript/flavours/glitch/components/check.tsx deleted file mode 100644 index 901f89fc5b..0000000000 --- a/app/javascript/flavours/glitch/components/check.tsx +++ /dev/null @@ -1,13 +0,0 @@ -export const Check: React.FC = () => ( - - - -); diff --git a/app/javascript/flavours/glitch/components/column_back_button.jsx b/app/javascript/flavours/glitch/components/column_back_button.jsx index 5e705e05d7..8d9f541049 100644 --- a/app/javascript/flavours/glitch/components/column_back_button.jsx +++ b/app/javascript/flavours/glitch/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 'flavours/glitch/components/icon'; import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router'; @@ -34,7 +36,7 @@ export class ColumnBackButton extends PureComponent { const component = ( ); diff --git a/app/javascript/flavours/glitch/components/column_back_button_slim.jsx b/app/javascript/flavours/glitch/components/column_back_button_slim.jsx index 353a52cb30..7cd20c2237 100644 --- a/app/javascript/flavours/glitch/components/column_back_button_slim.jsx +++ b/app/javascript/flavours/glitch/components/column_back_button_slim.jsx @@ -4,6 +4,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 'flavours/glitch/components/icon'; import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router'; @@ -29,7 +31,7 @@ class ColumnBackButtonSlim extends PureComponent { return (
    - +
    diff --git a/app/javascript/flavours/glitch/components/column_header.jsx b/app/javascript/flavours/glitch/components/column_header.jsx index fa13f181d0..d44f284f9b 100644 --- a/app/javascript/flavours/glitch/components/column_header.jsx +++ b/app/javascript/flavours/glitch/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 'flavours/glitch/components/icon'; import { WithRouterPropTypes } from 'flavours/glitch/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/flavours/glitch/components/dismissable_banner.tsx b/app/javascript/flavours/glitch/components/dismissable_banner.tsx index 817f61df01..2edc4e8e66 100644 --- a/app/javascript/flavours/glitch/components/dismissable_banner.tsx +++ b/app/javascript/flavours/glitch/components/dismissable_banner.tsx @@ -8,6 +8,8 @@ import { useCallback, useState, useEffect } from 'react'; import { defineMessages, useIntl } from 'react-intl'; +import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg'; + import { changeSetting } from 'flavours/glitch/actions/settings'; import { bannerSettings } from 'flavours/glitch/settings'; import { useAppSelector, useAppDispatch } from 'flavours/glitch/store'; @@ -55,6 +57,7 @@ export const DismissableBanner: React.FC> = ({
    diff --git a/app/javascript/flavours/glitch/components/domain.tsx b/app/javascript/flavours/glitch/components/domain.tsx index f4a3b9d4b6..34c376f530 100644 --- a/app/javascript/flavours/glitch/components/domain.tsx +++ b/app/javascript/flavours/glitch/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/flavours/glitch/components/dropdown_menu.jsx b/app/javascript/flavours/glitch/components/dropdown_menu.jsx index 9d744cb495..8dfef907ae 100644 --- a/app/javascript/flavours/glitch/components/dropdown_menu.jsx +++ b/app/javascript/flavours/glitch/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/flavours/glitch/components/edited_timestamp/index.jsx b/app/javascript/flavours/glitch/components/edited_timestamp/index.jsx index 5aaaf3e357..f7186e1325 100644 --- a/app/javascript/flavours/glitch/components/edited_timestamp/index.jsx +++ b/app/javascript/flavours/glitch/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 'flavours/glitch/actions/modal'; import { Icon } from 'flavours/glitch/components/icon'; import InlineAccount from 'flavours/glitch/components/inline_account'; @@ -66,7 +68,7 @@ class EditedTimestamp extends PureComponent { return ( ); diff --git a/app/javascript/flavours/glitch/components/icon.tsx b/app/javascript/flavours/glitch/components/icon.tsx index 3d091c7059..d53675e419 100644 --- a/app/javascript/flavours/glitch/components/icon.tsx +++ b/app/javascript/flavours/glitch/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/flavours/glitch/components/icon_button.tsx b/app/javascript/flavours/glitch/components/icon_button.tsx index 8bca60fa97..6e5c7467e0 100644 --- a/app/javascript/flavours/glitch/components/icon_button.tsx +++ b/app/javascript/flavours/glitch/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; @@ -34,8 +35,9 @@ interface States { deactivate: boolean; } export class IconButton extends PureComponent { + buttonRef = createRef(); + static defaultProps = { - size: 18, active: false, disabled: false, animate: false, @@ -86,24 +88,10 @@ export class IconButton extends PureComponent { }; render() { - // Hack required for some icons which have an overriden size - let containerSize = '1.28571429em'; - if (this.props.style?.fontSize) { - containerSize = `${this.props.size * 1.28571429}px`; - } - const style = { - fontSize: `${this.props.size}px`, - height: containerSize, - lineHeight: `${this.props.size}px`, ...this.props.style, ...(this.props.active ? this.props.activeStyle : {}), }; - if (!this.props.label) { - style.width = containerSize; - } else { - style.textAlign = 'left'; - } const { active, @@ -111,6 +99,7 @@ export class IconButton extends PureComponent { disabled, expanded, icon, + iconComponent, inverted, overlay, tabIndex, @@ -133,13 +122,9 @@ export class IconButton extends PureComponent { 'icon-button--with-counter': typeof counter !== 'undefined', }); - if (typeof counter !== 'undefined') { - style.width = 'auto'; - } - let contents = ( <> -
    ); diff --git a/app/javascript/flavours/glitch/components/picture_in_picture_placeholder.jsx b/app/javascript/flavours/glitch/components/picture_in_picture_placeholder.jsx index 9a103bdb0c..685f3c2738 100644 --- a/app/javascript/flavours/glitch/components/picture_in_picture_placeholder.jsx +++ b/app/javascript/flavours/glitch/components/picture_in_picture_placeholder.jsx @@ -5,6 +5,8 @@ import { FormattedMessage } from 'react-intl'; import { connect } from 'react-redux'; +import { ReactComponent as CancelPresentationIcon } from '@material-symbols/svg-600/outlined/cancel_presentation.svg'; + import { removePictureInPicture } from 'flavours/glitch/actions/picture_in_picture'; import { Icon } from 'flavours/glitch/components/icon'; @@ -22,7 +24,7 @@ class PictureInPicturePlaceholder extends PureComponent { render () { return (
    - +
    ); diff --git a/app/javascript/flavours/glitch/components/poll.jsx b/app/javascript/flavours/glitch/components/poll.jsx index 7b69d302a7..4fcd56a0f3 100644 --- a/app/javascript/flavours/glitch/components/poll.jsx +++ b/app/javascript/flavours/glitch/components/poll.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 CheckIcon } from '@material-symbols/svg-600/outlined/check.svg'; import escapeTextContentForBrowser from 'escape-html'; import spring from 'react-motion/lib/spring'; @@ -192,7 +193,7 @@ class Poll extends ImmutablePureComponent { /> {!!voted && - + } diff --git a/app/javascript/flavours/glitch/components/status_action_bar.jsx b/app/javascript/flavours/glitch/components/status_action_bar.jsx index 9e401c593f..3c451d0153 100644 --- a/app/javascript/flavours/glitch/components/status_action_bar.jsx +++ b/app/javascript/flavours/glitch/components/status_action_bar.jsx @@ -8,6 +8,16 @@ import { withRouter } from 'react-router-dom'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; +import { ReactComponent as BookmarkIcon } from '@material-symbols/svg-600/outlined/bookmark-fill.svg'; +import { ReactComponent as BookmarkBorderIcon } from '@material-symbols/svg-600/outlined/bookmark.svg'; +import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg'; +import { ReactComponent as RepeatIcon } from '@material-symbols/svg-600/outlined/repeat.svg'; +import { ReactComponent as ReplyIcon } from '@material-symbols/svg-600/outlined/reply.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-fill.svg'; +import { ReactComponent as StarBorderIcon } from '@material-symbols/svg-600/outlined/star.svg'; +import { ReactComponent as VisibilityIcon } from '@material-symbols/svg-600/outlined/visibility.svg'; + import { PERMISSION_MANAGE_USERS, PERMISSION_MANAGE_FEDERATION } from 'flavours/glitch/permissions'; import { accountAdminLink, statusAdminLink } from 'flavours/glitch/utils/backend_links'; import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router'; @@ -208,6 +218,7 @@ class StatusActionBar extends ImmutablePureComponent { let menu = []; let reblogIcon = 'retweet'; let replyIcon; + let replyIconComponent; let replyTitle; menu.push({ text: intl.formatMessage(messages.open), action: this.handleOpen }); @@ -277,9 +288,11 @@ class StatusActionBar extends ImmutablePureComponent { if (status.get('in_reply_to_id', null) === null) { replyIcon = 'reply'; + replyIconComponent = ReplyIcon; replyTitle = intl.formatMessage(messages.reply); } else { replyIcon = 'reply-all'; + replyIconComponent = ReplyAllIcon; replyTitle = intl.formatMessage(messages.replyAll); } @@ -297,7 +310,7 @@ class StatusActionBar extends ImmutablePureComponent { } const filterButton = this.props.onFilter && ( - + ); return ( @@ -306,27 +319,27 @@ class StatusActionBar extends ImmutablePureComponent { className='status__action-bar-button' title={replyTitle} icon={replyIcon} + iconComponent={replyIconComponent} onClick={this.handleReplyClick} counter={showReplyCount ? status.get('replies_count') : undefined} obfuscateCount /> - - - + + + {filterButton} -
    - -
    +
    diff --git a/app/javascript/flavours/glitch/components/status_icons.jsx b/app/javascript/flavours/glitch/components/status_icons.jsx index a30f2c4df7..132d05c207 100644 --- a/app/javascript/flavours/glitch/components/status_icons.jsx +++ b/app/javascript/flavours/glitch/components/status_icons.jsx @@ -6,15 +6,16 @@ import { defineMessages, injectIntl } from 'react-intl'; import ImmutablePropTypes from 'react-immutable-proptypes'; +import { ReactComponent as ExpandLessIcon } from '@material-symbols/svg-600/outlined/expand_less.svg'; +import { ReactComponent as ForumIcon } from '@material-symbols/svg-600/outlined/forum.svg'; +import { ReactComponent as HomeIcon } from '@material-symbols/svg-600/outlined/home.svg'; -// Mastodon imports. import { Icon } from 'flavours/glitch/components/icon'; import { languages } from 'flavours/glitch/initial_state'; import { IconButton } from './icon_button'; -import VisibilityIcon from './status_visibility_icon'; +import { VisibilityIcon } from './visibility_icon'; -// Messages for use with internationalization stuff. const messages = defineMessages({ collapse: { id: 'status.collapse', defaultMessage: 'Collapse' }, uncollapse: { id: 'status.uncollapse', defaultMessage: 'Uncollapse' }, @@ -92,7 +93,6 @@ class StatusIcons extends PureComponent { ); } - // Rendering. render () { const { status, @@ -109,16 +109,16 @@ class StatusIcons extends PureComponent { {settings.get('reply') && status.get('in_reply_to_id', null) !== null ? (
    diff --git a/app/javascript/flavours/glitch/components/status_visibility_icon.jsx b/app/javascript/flavours/glitch/components/status_visibility_icon.jsx deleted file mode 100644 index ad84af4def..0000000000 --- a/app/javascript/flavours/glitch/components/status_visibility_icon.jsx +++ /dev/null @@ -1,54 +0,0 @@ -// Package imports // -import PropTypes from 'prop-types'; - -import { defineMessages, injectIntl } from 'react-intl'; - -import ImmutablePureComponent from 'react-immutable-pure-component'; - -import { Icon } from 'flavours/glitch/components/icon'; - -const messages = defineMessages({ - public: { id: 'privacy.public.short', defaultMessage: 'Public' }, - unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' }, - private: { id: 'privacy.private.short', defaultMessage: 'Followers only' }, - direct: { id: 'privacy.direct.short', defaultMessage: 'Mentioned people only' }, -}); - -class VisibilityIcon extends ImmutablePureComponent { - - static propTypes = { - visibility: PropTypes.string, - intl: PropTypes.object.isRequired, - withLabel: PropTypes.bool, - }; - - render() { - const { withLabel, visibility, intl } = this.props; - - const visibilityIcon = { - public: 'globe', - unlisted: 'unlock', - private: 'lock', - direct: 'envelope', - }[visibility]; - - const label = intl.formatMessage(messages[visibility]); - - const icon = (
    - {title} + {title}
    {!collapsed && ( diff --git a/app/javascript/flavours/glitch/features/account/components/action_bar.jsx b/app/javascript/flavours/glitch/features/account/components/action_bar.jsx index 46a766925a..96a5ec2712 100644 --- a/app/javascript/flavours/glitch/features/account/components/action_bar.jsx +++ b/app/javascript/flavours/glitch/features/account/components/action_bar.jsx @@ -6,6 +6,8 @@ import { NavLink } from 'react-router-dom'; import ImmutablePropTypes from 'react-immutable-proptypes'; +import { ReactComponent as InfoIcon } from '@material-symbols/svg-600/outlined/info.svg'; + import { Icon } from 'flavours/glitch/components/icon'; class ActionBar extends PureComponent { @@ -28,7 +30,7 @@ class ActionBar extends PureComponent { return (
    - @@ -42,7 +44,7 @@ class ActionBar extends PureComponent { if (account.get('acct') !== account.get('username')) { extraInfo = (
    - diff --git a/app/javascript/flavours/glitch/features/account/components/follow_request_note.jsx b/app/javascript/flavours/glitch/features/account/components/follow_request_note.jsx index 463499cbf8..da150ff8fb 100644 --- a/app/javascript/flavours/glitch/features/account/components/follow_request_note.jsx +++ b/app/javascript/flavours/glitch/features/account/components/follow_request_note.jsx @@ -3,7 +3,10 @@ import { FormattedMessage } from 'react-intl'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; -import { Icon } from 'flavours/glitch/components/icon'; +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 { Icon } from 'flavours/glitch/components/icon'; export default class FollowRequestNote extends ImmutablePureComponent { @@ -22,12 +25,12 @@ export default class FollowRequestNote extends ImmutablePureComponent {
    diff --git a/app/javascript/flavours/glitch/features/account/components/header.jsx b/app/javascript/flavours/glitch/features/account/components/header.jsx index 1da9cb4411..eefc1eabef 100644 --- a/app/javascript/flavours/glitch/features/account/components/header.jsx +++ b/app/javascript/flavours/glitch/features/account/components/header.jsx @@ -9,6 +9,12 @@ import { withRouter } 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 LockIcon } from '@material-symbols/svg-600/outlined/lock.svg'; +import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg'; +import { ReactComponent as NotificationsIcon } from '@material-symbols/svg-600/outlined/notifications-fill.svg'; +import { ReactComponent as NotificationsActiveIcon } from '@material-symbols/svg-600/outlined/notifications_active.svg'; + import { Avatar } from 'flavours/glitch/components/avatar'; import { Badge, AutomatedBadge, GroupBadge } from 'flavours/glitch/components/badge'; import { Button } from 'flavours/glitch/components/button'; @@ -189,7 +195,7 @@ class Header extends ImmutablePureComponent { } if (account.getIn(['relationship', 'requested']) || account.getIn(['relationship', 'following'])) { - bellBtn = ; + bellBtn = ; } if (me !== account.get('id')) { @@ -215,7 +221,7 @@ class Header extends ImmutablePureComponent { } if (account.get('locked')) { - lockedIcon = ; + lockedIcon = ; } if (signedIn && account.get('id') !== me && !account.get('suspended')) { @@ -347,7 +353,7 @@ class Header extends ImmutablePureComponent { )} - +
    @@ -378,7 +384,7 @@ class Header extends ImmutablePureComponent {
    - {pair.get('verified_at') && } + {pair.get('verified_at') && }
    ))} diff --git a/app/javascript/flavours/glitch/features/account/components/profile_column_header.jsx b/app/javascript/flavours/glitch/features/account/components/profile_column_header.jsx index 2dc4216bdd..b3b07f273f 100644 --- a/app/javascript/flavours/glitch/features/account/components/profile_column_header.jsx +++ b/app/javascript/flavours/glitch/features/account/components/profile_column_header.jsx @@ -3,6 +3,8 @@ import { PureComponent } from 'react'; import { injectIntl, defineMessages } from 'react-intl'; +import { ReactComponent as PersonIcon } from '@material-symbols/svg-600/outlined/person.svg'; + import ColumnHeader from '../../../components/column_header'; const messages = defineMessages({ @@ -23,6 +25,7 @@ class ProfileColumnHeader extends PureComponent { return ( - + ); } 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/flavours/glitch/features/account_timeline/components/moved_note.jsx b/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx index 9142399929..90048472a1 100644 --- a/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx +++ b/app/javascript/flavours/glitch/features/account_timeline/components/moved_note.jsx @@ -5,6 +5,8 @@ import { withRouter } from 'react-router-dom'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; +import { ReactComponent as TripIcon } from '@material-symbols/svg-600/outlined/trip.svg'; + import { Icon } from 'flavours/glitch/components/icon'; import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router'; @@ -35,7 +37,7 @@ class MovedNote extends ImmutablePureComponent { return (
    -
    +
    }} />
    diff --git a/app/javascript/flavours/glitch/features/audio/index.jsx b/app/javascript/flavours/glitch/features/audio/index.jsx index 881c545952..9e752cbfe0 100644 --- a/app/javascript/flavours/glitch/features/audio/index.jsx +++ b/app/javascript/flavours/glitch/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 'flavours/glitch/components/icon'; @@ -560,8 +566,8 @@ class Audio extends PureComponent {
    - - + + diff --git a/app/javascript/flavours/glitch/features/bookmarked_statuses/index.jsx b/app/javascript/flavours/glitch/features/bookmarked_statuses/index.jsx index 6f7aa00c68..2dc0a3b9c9 100644 --- a/app/javascript/flavours/glitch/features/bookmarked_statuses/index.jsx +++ b/app/javascript/flavours/glitch/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 'flavours/glitch/actions/bookmarks'; @@ -79,7 +80,8 @@ class Bookmarks extends ImmutablePureComponent { return (
    - +
    ); diff --git a/app/javascript/flavours/glitch/features/compose/components/dropdown.jsx b/app/javascript/flavours/glitch/features/compose/components/dropdown.jsx index a50413ebe6..4b9098835f 100644 --- a/app/javascript/flavours/glitch/features/compose/components/dropdown.jsx +++ b/app/javascript/flavours/glitch/features/compose/components/dropdown.jsx @@ -18,8 +18,10 @@ export default class ComposerOptionsDropdown extends PureComponent { isUserTouching: PropTypes.func, disabled: PropTypes.bool, icon: PropTypes.string, + iconComponent: PropTypes.func, items: PropTypes.arrayOf(PropTypes.shape({ icon: PropTypes.string, + iconComponent: PropTypes.func, meta: PropTypes.string, name: PropTypes.string.isRequired, text: PropTypes.string, @@ -174,6 +176,7 @@ export default class ComposerOptionsDropdown extends PureComponent { disabled, title, icon, + iconComponent, items, onChange, value, @@ -183,33 +186,30 @@ export default class ComposerOptionsDropdown extends PureComponent { } = this.props; const { open, placement } = this.state; - const active = value && items.findIndex(({ name }) => name === value) === (placement === 'bottom' ? 0 : (items.length - 1)); - return (
    -
    - -
    + { - const { name, icon, meta, text } = item; + const { name, icon, iconComponent, meta, text } = item; const active = (name === (this.props.value || this.state.value)); @@ -155,7 +156,7 @@ export default class ComposerOptionsDropdownContent extends PureComponent { if (!contents) { contents = ( <> - {icon && } + {icon && }
    {text} diff --git a/app/javascript/flavours/glitch/features/compose/components/header.jsx b/app/javascript/flavours/glitch/features/compose/components/header.jsx index ac6d4dce85..021fcb3bb2 100644 --- a/app/javascript/flavours/glitch/features/compose/components/header.jsx +++ b/app/javascript/flavours/glitch/features/compose/components/header.jsx @@ -7,6 +7,14 @@ import { Link } from 'react-router-dom'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; +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 ManufacturingIcon } from '@material-symbols/svg-600/outlined/manufacturing.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 { Icon } from 'flavours/glitch/components/icon'; import { signOutLink } from 'flavours/glitch/utils/backend_links'; import { conditionalRender } from 'flavours/glitch/utils/react_helpers'; @@ -79,22 +87,25 @@ class Header extends ImmutablePureComponent { aria-label={intl.formatMessage(messages.start)} title={intl.formatMessage(messages.start)} to='/getting-started' - > + className='drawer__tab' + > {renderForColumn('HOME', ( + className='drawer__tab' + > ))} {renderForColumn('NOTIFICATIONS', ( - + { showNotificationsBadge && unreadNotifications > 0 &&
    } @@ -104,27 +115,31 @@ class Header extends ImmutablePureComponent { aria-label={intl.formatMessage(messages.community)} title={intl.formatMessage(messages.community)} to='/public/local' - > + className='drawer__tab' + > ))} {renderForColumn('PUBLIC', ( + className='drawer__tab' + > ))} + className='drawer__tab' + > + className='drawer__tab' + > ); } diff --git a/app/javascript/flavours/glitch/features/compose/components/options.jsx b/app/javascript/flavours/glitch/features/compose/components/options.jsx index 11582d86aa..cdcc0dc1e7 100644 --- a/app/javascript/flavours/glitch/features/compose/components/options.jsx +++ b/app/javascript/flavours/glitch/features/compose/components/options.jsx @@ -6,6 +6,14 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; +import { ReactComponent as AttachFileIcon } from '@material-symbols/svg-600/outlined/attach_file.svg'; +import { ReactComponent as BrushIcon } from '@material-symbols/svg-600/outlined/brush.svg'; +import { ReactComponent as CodeIcon } from '@material-symbols/svg-600/outlined/code.svg'; +import { ReactComponent as DescriptionIcon } from '@material-symbols/svg-600/outlined/description.svg'; +import { ReactComponent as InsertChartIcon } from '@material-symbols/svg-600/outlined/insert_chart.svg'; +import { ReactComponent as MarkdownIcon } from '@material-symbols/svg-600/outlined/markdown.svg'; +import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg'; +import { ReactComponent as UploadFileIcon } from '@material-symbols/svg-600/outlined/upload_file.svg'; import Toggle from 'react-toggle'; import { IconButton } from 'flavours/glitch/components/icon_button'; @@ -195,16 +203,19 @@ class ComposerOptions extends ImmutablePureComponent { const contentTypeItems = { plain: { icon: 'file-text', + iconComponent: DescriptionIcon, name: 'text/plain', text: formatMessage(messages.plain), }, html: { icon: 'code', + iconComponent: CodeIcon, name: 'text/html', text: formatMessage(messages.html), }, markdown: { icon: 'arrow-circle-down', + iconComponent: MarkdownIcon, name: 'text/markdown', text: formatMessage(messages.markdown), }, @@ -226,14 +237,17 @@ class ComposerOptions extends ImmutablePureComponent { )} -
    {showContentTypeChoice && (
    - +

    • ); @@ -143,7 +146,7 @@ class PollForm extends ImmutablePureComponent { {options.size < pollLimits.max_options && ( )} diff --git a/app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.jsx b/app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.jsx index 06775230fe..c0bc4bf85e 100644 --- a/app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.jsx +++ b/app/javascript/flavours/glitch/features/compose/components/privacy_dropdown.jsx @@ -3,6 +3,11 @@ import { PureComponent } from 'react'; import { injectIntl, defineMessages } from 'react-intl'; +import { ReactComponent as LockIcon } from '@material-symbols/svg-600/outlined/lock.svg'; +import { ReactComponent as LockOpenIcon } from '@material-symbols/svg-600/outlined/lock_open.svg'; +import { ReactComponent as MailIcon } from '@material-symbols/svg-600/outlined/mail.svg'; +import { ReactComponent as PublicIcon } from '@material-symbols/svg-600/outlined/public.svg'; + import Dropdown from './dropdown'; const messages = defineMessages({ @@ -39,24 +44,28 @@ class PrivacyDropdown extends PureComponent { const privacyItems = { direct: { icon: 'envelope', + iconComponent: MailIcon, meta: formatMessage(messages.direct_long), name: 'direct', text: formatMessage(messages.direct_short), }, private: { icon: 'lock', + iconComponent: LockIcon, meta: formatMessage(messages.private_long), name: 'private', text: formatMessage(messages.private_short), }, public: { icon: 'globe', + iconComponent: PublicIcon, meta: formatMessage(messages.public_long), name: 'public', text: formatMessage(messages.public_short), }, unlisted: { icon: 'unlock', + iconComponent: LockOpenIcon, meta: formatMessage(messages.unlisted_long), name: 'unlisted', text: formatMessage(messages.unlisted_short), @@ -73,6 +82,7 @@ class PrivacyDropdown extends PureComponent { - {intl.formatMessage(messages.publish)} + {intl.formatMessage(messages.publish)} ); } else { @@ -69,7 +91,7 @@ class Publisher extends ImmutablePureComponent { disabled={disabled} onClick={onSecondarySubmit} style={{ padding: null }} - text={} + text={} title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage(privacyNames[sideArm])}`} />
    diff --git a/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx b/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx index 6a8bf6e882..48ded3dcd4 100644 --- a/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx +++ b/app/javascript/flavours/glitch/features/compose/components/reply_indicator.jsx @@ -5,6 +5,8 @@ import { defineMessages, injectIntl } from 'react-intl'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; +import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg'; + import AttachmentList from 'flavours/glitch/components/attachment_list'; import { WithOptionalRouterPropTypes, withOptionalRouter } from 'flavours/glitch/utils/react_router'; @@ -48,7 +50,7 @@ class ReplyIndicator extends ImmutablePureComponent { return (
    -
    +
    diff --git a/app/javascript/flavours/glitch/features/compose/components/search.jsx b/app/javascript/flavours/glitch/features/compose/components/search.jsx index 2944be798f..ccd56af365 100644 --- a/app/javascript/flavours/glitch/features/compose/components/search.jsx +++ b/app/javascript/flavours/glitch/features/compose/components/search.jsx @@ -8,6 +8,10 @@ import { withRouter } from 'react-router-dom'; import ImmutablePropTypes from 'react-immutable-proptypes'; +import { ReactComponent as CancelIcon } from '@material-symbols/svg-600/outlined/cancel-fill.svg'; +import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg'; +import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg'; + import { Icon } from 'flavours/glitch/components/icon'; import { domain, searchEnabled } from 'flavours/glitch/initial_state'; import { HASHTAG_REGEX } from 'flavours/glitch/utils/hashtags'; @@ -333,8 +337,8 @@ class Search extends PureComponent { />
    - - + +
    @@ -346,7 +350,7 @@ class Search extends PureComponent { {recent.size > 0 ? this._getOptions().map(({ label, action, forget }, i) => ( + )) : (
    diff --git a/app/javascript/flavours/glitch/features/compose/components/search_results.jsx b/app/javascript/flavours/glitch/features/compose/components/search_results.jsx index af7b8a6c7b..503afd432a 100644 --- a/app/javascript/flavours/glitch/features/compose/components/search_results.jsx +++ b/app/javascript/flavours/glitch/features/compose/components/search_results.jsx @@ -5,6 +5,11 @@ import { FormattedMessage } from 'react-intl'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; +import { ReactComponent as FindInPageIcon } from '@material-symbols/svg-600/outlined/find_in_page.svg'; +import { ReactComponent as PeopleIcon } from '@material-symbols/svg-600/outlined/group.svg'; +import { ReactComponent as SearchIcon } from '@material-symbols/svg-600/outlined/search.svg'; +import { ReactComponent as TagIcon } from '@material-symbols/svg-600/outlined/tag.svg'; + import { Icon } from 'flavours/glitch/components/icon'; import { LoadMore } from 'flavours/glitch/components/load_more'; import { SearchSection } from 'flavours/glitch/features/explore/components/search_section'; @@ -44,7 +49,7 @@ class SearchResults extends ImmutablePureComponent { if (results.get('accounts') && results.get('accounts').size > 0) { accounts = ( - }> + }> {withoutLastResult(results.get('accounts')).map(accountId => )} {(results.get('accounts').size > INITIAL_PAGE_LIMIT && results.get('accounts').size % INITIAL_PAGE_LIMIT === 1) && } @@ -53,7 +58,7 @@ class SearchResults extends ImmutablePureComponent { if (results.get('hashtags') && results.get('hashtags').size > 0) { hashtags = ( - }> + }> {withoutLastResult(results.get('hashtags')).map(hashtag => )} {(results.get('hashtags').size > INITIAL_PAGE_LIMIT && results.get('hashtags').size % INITIAL_PAGE_LIMIT === 1) && } @@ -62,7 +67,7 @@ class SearchResults extends ImmutablePureComponent { if (results.get('statuses') && results.get('statuses').size > 0) { statuses = ( - }> + }> {withoutLastResult(results.get('statuses')).map(statusId => )} {(results.get('statuses').size > INITIAL_PAGE_LIMIT && results.get('statuses').size % INITIAL_PAGE_LIMIT === 1) && } @@ -73,7 +78,7 @@ class SearchResults extends ImmutablePureComponent { return (
    - +
    diff --git a/app/javascript/flavours/glitch/features/compose/components/upload.jsx b/app/javascript/flavours/glitch/features/compose/components/upload.jsx index ca0b32e526..ac26fb1c6a 100644 --- a/app/javascript/flavours/glitch/features/compose/components/upload.jsx +++ b/app/javascript/flavours/glitch/features/compose/components/upload.jsx @@ -5,6 +5,9 @@ import { FormattedMessage } from 'react-intl'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; +import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg'; +import { ReactComponent as EditIcon } from '@material-symbols/svg-600/outlined/edit.svg'; +import { ReactComponent as InfoIcon } from '@material-symbols/svg-600/outlined/info.svg'; import spring from 'react-motion/lib/spring'; import { Icon } from 'flavours/glitch/components/icon'; @@ -47,13 +50,13 @@ export default class Upload extends ImmutablePureComponent { {({ scale }) => (
    - - + +
    {(media.get('description') || '').length === 0 && (
    - +
    )}
    diff --git a/app/javascript/flavours/glitch/features/compose/components/upload_progress.jsx b/app/javascript/flavours/glitch/features/compose/components/upload_progress.jsx index cda57d2d85..5169fbf783 100644 --- a/app/javascript/flavours/glitch/features/compose/components/upload_progress.jsx +++ b/app/javascript/flavours/glitch/features/compose/components/upload_progress.jsx @@ -3,6 +3,7 @@ import { PureComponent } from 'react'; import { FormattedMessage } from 'react-intl'; +import { ReactComponent as UploadFileIcon } from '@material-symbols/svg-600/outlined/upload_file.svg'; import spring from 'react-motion/lib/spring'; import { Icon } from 'flavours/glitch/components/icon'; @@ -35,7 +36,7 @@ export default class UploadProgress extends PureComponent { return (
    - +
    diff --git a/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx b/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx index 0fdd175560..5266a8012a 100644 --- a/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx +++ b/app/javascript/flavours/glitch/features/direct_timeline/components/conversation.jsx @@ -8,6 +8,8 @@ import { 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 'flavours/glitch/components/attachment_list'; @@ -208,7 +210,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/flavours/glitch/features/favourited_statuses/index.jsx b/app/javascript/flavours/glitch/features/favourited_statuses/index.jsx index 1a19a03afa..61f2faa2da 100644 --- a/app/javascript/flavours/glitch/features/favourited_statuses/index.jsx +++ b/app/javascript/flavours/glitch/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 'flavours/glitch/actions/columns'; @@ -80,6 +81,7 @@ class Favourites extends ImmutablePureComponent { + )} /> diff --git a/app/javascript/flavours/glitch/features/filters/select_filter.jsx b/app/javascript/flavours/glitch/features/filters/select_filter.jsx index de74fb240b..2cda219e48 100644 --- a/app/javascript/flavours/glitch/features/filters/select_filter.jsx +++ b/app/javascript/flavours/glitch/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 'flavours/glitch/components/icon'; @@ -78,7 +79,7 @@ class SelectFilter extends PureComponent { renderCreateNew (name) { return (
    - +
    ); } diff --git a/app/javascript/flavours/glitch/features/firehose/index.jsx b/app/javascript/flavours/glitch/features/firehose/index.jsx index c01c767b86..45e17939d2 100644 --- a/app/javascript/flavours/glitch/features/firehose/index.jsx +++ b/app/javascript/flavours/glitch/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 'flavours/glitch/actions/columns'; import { changeSetting } from 'flavours/glitch/actions/settings'; import { connectPublicStream, connectCommunityStream } from 'flavours/glitch/actions/streaming'; @@ -179,6 +181,7 @@ const Firehose = ({ feedType, multiColumn }) => {
    -
    -
    +
    +
    ); diff --git a/app/javascript/flavours/glitch/features/followed_tags/index.jsx b/app/javascript/flavours/glitch/features/followed_tags/index.jsx index 9acb77c25f..477a51d409 100644 --- a/app/javascript/flavours/glitch/features/followed_tags/index.jsx +++ b/app/javascript/flavours/glitch/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 'flavours/glitch/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/flavours/glitch/features/getting_started/index.jsx b/app/javascript/flavours/glitch/features/getting_started/index.jsx index 5c40963f2e..7abf26594e 100644 --- a/app/javascript/flavours/glitch/features/getting_started/index.jsx +++ b/app/javascript/flavours/glitch/features/getting_started/index.jsx @@ -10,6 +10,20 @@ 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 { 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 MailIcon } from '@material-symbols/svg-600/outlined/mail.svg'; +import { ReactComponent as ManufacturingIcon } from '@material-symbols/svg-600/outlined/manufacturing.svg'; +import { ReactComponent as MenuIcon } from '@material-symbols/svg-600/outlined/menu.svg'; +import { ReactComponent as MoreHorizIcon } from '@material-symbols/svg-600/outlined/more_horiz.svg'; +import { ReactComponent as NotificationsIcon } from '@material-symbols/svg-600/outlined/notifications.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 TagIcon } from '@material-symbols/svg-600/outlined/tag.svg'; + import { fetchFollowRequests } from 'flavours/glitch/actions/accounts'; import { fetchLists } from 'flavours/glitch/actions/lists'; import { openModal } from 'flavours/glitch/actions/modal'; @@ -127,53 +141,53 @@ class GettingStarted extends ImmutablePureComponent { if (multiColumn) { if (signedIn && !columns.find(item => item.get('id') === 'HOME')) { - navItems.push(); + navItems.push(); } if (!columns.find(item => item.get('id') === 'NOTIFICATIONS')) { - navItems.push(); + navItems.push(); } if (!columns.find(item => item.get('id') === 'COMMUNITY')) { - navItems.push(); + navItems.push(); } if (!columns.find(item => item.get('id') === 'PUBLIC')) { - navItems.push(); + navItems.push(); } } if (showTrends) { - navItems.push(); + navItems.push(); } if (signedIn) { if (!multiColumn || !columns.find(item => item.get('id') === 'DIRECT')) { - navItems.push(); + navItems.push(); } if (!multiColumn || !columns.find(item => item.get('id') === 'BOOKMARKS')) { - navItems.push(); + navItems.push(); } if (myAccount.get('locked') || unreadFollowRequests > 0) { - navItems.push(); + navItems.push(); } - navItems.push(); + navItems.push(); listItems = listItems.concat([
    - + {lists.filter(list => !columns.find(item => item.get('id') === 'LIST' && item.getIn(['params', 'id']) === list.get('id'))).map(list => - , + , )}
    , ]); } return ( - +
    {!multiColumn && signedIn && } @@ -184,8 +198,8 @@ class GettingStarted extends ImmutablePureComponent { {listItems} - { preferencesLink !== undefined && } - + { preferencesLink !== undefined && } + )}
    diff --git a/app/javascript/flavours/glitch/features/getting_started_misc/index.jsx b/app/javascript/flavours/glitch/features/getting_started_misc/index.jsx index 60b710afca..9c14f94b0e 100644 --- a/app/javascript/flavours/glitch/features/getting_started_misc/index.jsx +++ b/app/javascript/flavours/glitch/features/getting_started_misc/index.jsx @@ -5,6 +5,13 @@ import { defineMessages, injectIntl } from 'react-intl'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; +import { ReactComponent as BlockIcon } from '@material-symbols/svg-600/outlined/block.svg'; +import { ReactComponent as InfoIcon } from '@material-symbols/svg-600/outlined/info.svg'; +import { ReactComponent as PersonCheckIcon } from '@material-symbols/svg-600/outlined/person_check.svg'; +import { ReactComponent as PushPinIcon } from '@material-symbols/svg-600/outlined/push_pin.svg'; +import { ReactComponent as StarIcon } from '@material-symbols/svg-600/outlined/star-fill.svg'; +import { ReactComponent as VolumeOffIcon } from '@material-symbols/svg-600/outlined/volume_off.svg'; + import { openModal } from 'flavours/glitch/actions/modal'; import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim'; import Column from 'flavours/glitch/features/ui/components/column'; @@ -51,13 +58,13 @@ class GettingStartedMisc extends ImmutablePureComponent {
    - {signedIn && ()} - {signedIn && ()} - {signedIn && ()} - {signedIn && ()} - {signedIn && ()} - {signedIn && ()} - + {signedIn && ()} + {signedIn && ()} + {signedIn && ()} + {signedIn && ()} + {signedIn && ()} + {signedIn && ()} +
    ); diff --git a/app/javascript/flavours/glitch/features/hashtag_timeline/index.jsx b/app/javascript/flavours/glitch/features/hashtag_timeline/index.jsx index b2bf169da8..11f09ffdb2 100644 --- a/app/javascript/flavours/glitch/features/hashtag_timeline/index.jsx +++ b/app/javascript/flavours/glitch/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 'flavours/glitch/actions/columns'; @@ -190,6 +191,7 @@ class HashtagTimeline extends PureComponent { - + ); } @@ -199,6 +202,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/flavours/glitch/features/keyboard_shortcuts/index.jsx b/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.jsx index da5d334245..466f2cb561 100644 --- a/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.jsx +++ b/app/javascript/flavours/glitch/features/keyboard_shortcuts/index.jsx @@ -7,6 +7,8 @@ import { Helmet } from 'react-helmet'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; +import { ReactComponent as InfoIcon } from '@material-symbols/svg-600/outlined/info.svg'; + import Column from 'flavours/glitch/components/column'; import ColumnHeader from 'flavours/glitch/components/column_header'; @@ -33,7 +35,8 @@ class KeyboardShortcuts extends ImmutablePureComponent { diff --git a/app/javascript/flavours/glitch/features/list_adder/components/list.jsx b/app/javascript/flavours/glitch/features/list_adder/components/list.jsx index c7a7d9c513..8c0333b5ad 100644 --- a/app/javascript/flavours/glitch/features/list_adder/components/list.jsx +++ b/app/javascript/flavours/glitch/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 'flavours/glitch/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/flavours/glitch/features/list_editor/components/account.jsx b/app/javascript/flavours/glitch/features/list_editor/components/account.jsx index 96b5e96df8..18d5e905cb 100644 --- a/app/javascript/flavours/glitch/features/list_editor/components/account.jsx +++ b/app/javascript/flavours/glitch/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/flavours/glitch/features/list_editor/components/edit_list_form.jsx b/app/javascript/flavours/glitch/features/list_editor/components/edit_list_form.jsx index 9e087a97d7..1e2446f92b 100644 --- a/app/javascript/flavours/glitch/features/list_editor/components/edit_list_form.jsx +++ b/app/javascript/flavours/glitch/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/flavours/glitch/features/list_editor/components/search.jsx b/app/javascript/flavours/glitch/features/list_editor/components/search.jsx index 5434ba0dcb..58fb6566d6 100644 --- a/app/javascript/flavours/glitch/features/list_editor/components/search.jsx +++ b/app/javascript/flavours/glitch/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 'flavours/glitch/components/icon'; import { fetchListSuggestions, clearListSuggestions, changeListSuggestions } from '../../../actions/lists'; @@ -69,8 +72,8 @@ class Search extends PureComponent {
    - - + +
    ); diff --git a/app/javascript/flavours/glitch/features/list_timeline/index.jsx b/app/javascript/flavours/glitch/features/list_timeline/index.jsx index 75dacb301f..48100a0a4c 100644 --- a/app/javascript/flavours/glitch/features/list_timeline/index.jsx +++ b/app/javascript/flavours/glitch/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 'flavours/glitch/actions/columns'; @@ -181,6 +184,7 @@ class ListTimeline extends PureComponent {
    diff --git a/app/javascript/flavours/glitch/features/lists/components/new_list_form.jsx b/app/javascript/flavours/glitch/features/lists/components/new_list_form.jsx index 72602f1882..000ab3ad53 100644 --- a/app/javascript/flavours/glitch/features/lists/components/new_list_form.jsx +++ b/app/javascript/flavours/glitch/features/lists/components/new_list_form.jsx @@ -6,7 +6,7 @@ import { defineMessages, injectIntl } from 'react-intl'; import { connect } from 'react-redux'; import { changeListEditorTitle, submitListEditor } from 'flavours/glitch/actions/lists'; -import { IconButton } from 'flavours/glitch/components/icon_button'; +import { Button } from 'flavours/glitch/components/button'; const messages = defineMessages({ label: { id: 'lists.new.title_placeholder', defaultMessage: 'New list title' }, @@ -66,9 +66,8 @@ class NewListForm extends PureComponent { /> - diff --git a/app/javascript/flavours/glitch/features/lists/index.jsx b/app/javascript/flavours/glitch/features/lists/index.jsx index 2c393684ec..b47a8c07ce 100644 --- a/app/javascript/flavours/glitch/features/lists/index.jsx +++ b/app/javascript/flavours/glitch/features/lists/index.jsx @@ -9,6 +9,8 @@ import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; import { connect } from 'react-redux'; +import { ReactComponent as ListAltIcon } from '@material-symbols/svg-600/outlined/list_alt.svg'; + import { fetchLists } from 'flavours/glitch/actions/lists'; import ColumnBackButtonSlim from 'flavours/glitch/components/column_back_button_slim'; import { LoadingIndicator } from 'flavours/glitch/components/loading_indicator'; @@ -64,7 +66,7 @@ class Lists extends ImmutablePureComponent { const emptyMessage = ; return ( - + @@ -76,7 +78,7 @@ class Lists extends ImmutablePureComponent { bindToDocument={!multiColumn} > {lists.map(list => - , + , )} diff --git a/app/javascript/flavours/glitch/features/local_settings/navigation/index.jsx b/app/javascript/flavours/glitch/features/local_settings/navigation/index.jsx index 022d817126..32b25e0c07 100644 --- a/app/javascript/flavours/glitch/features/local_settings/navigation/index.jsx +++ b/app/javascript/flavours/glitch/features/local_settings/navigation/index.jsx @@ -4,13 +4,17 @@ import { PureComponent } from 'react'; import { injectIntl, defineMessages } from 'react-intl'; -// Our imports +import { ReactComponent as CloseIcon } from '@material-symbols/svg-600/outlined/close.svg'; +import { ReactComponent as EditIcon } from '@material-symbols/svg-600/outlined/edit.svg'; +import { ReactComponent as ExpandLessIcon } from '@material-symbols/svg-600/outlined/expand_less.svg'; +import { ReactComponent as ImageIcon } from '@material-symbols/svg-600/outlined/image.svg'; +import { ReactComponent as ManufacturingIcon } from '@material-symbols/svg-600/outlined/manufacturing.svg'; +import { ReactComponent as SettingsIcon } from '@material-symbols/svg-600/outlined/settings-fill.svg'; + import { preferencesLink } from 'flavours/glitch/utils/backend_links'; import LocalSettingsNavigationItem from './item'; -// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - const messages = defineMessages({ general: { id: 'settings.general', defaultMessage: 'General' }, compose: { id: 'settings.compose_box_opts', defaultMessage: 'Compose box' }, @@ -41,6 +45,7 @@ class LocalSettingsNavigation extends PureComponent { index={0} onNavigate={onNavigate} icon='cogs' + iconComponent={ManufacturingIcon} title={intl.formatMessage(messages.general)} /> diff --git a/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.jsx b/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.jsx index a708f4209c..54fd19311f 100644 --- a/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.jsx +++ b/app/javascript/flavours/glitch/features/local_settings/navigation/item/index.jsx @@ -6,8 +6,6 @@ import classNames from 'classnames'; import { Icon } from 'flavours/glitch/components/icon'; -// * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * - export default class LocalSettingsPage extends PureComponent { static propTypes = { @@ -16,6 +14,7 @@ export default class LocalSettingsPage extends PureComponent { href: PropTypes.string, icon: PropTypes.string, textIcon: PropTypes.string, + iconComponent: PropTypes.func, index: PropTypes.number.isRequired, onNavigate: PropTypes.func, title: PropTypes.string, @@ -36,6 +35,7 @@ export default class LocalSettingsPage extends PureComponent { className, href, icon, + iconComponent, textIcon, onNavigate, title, @@ -45,7 +45,7 @@ export default class LocalSettingsPage extends PureComponent { active, }, className); - const iconElem = icon ? : (textIcon ? {textIcon} : null); + const iconElem = icon ? : (textIcon ? {textIcon} : null); if (href) return (     ; return ( - +
    - +
    diff --git a/app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx b/app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx index 9d9a5f0c06..ee547e05b1 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx +++ b/app/javascript/flavours/glitch/features/notifications/components/admin_signup.jsx @@ -8,6 +8,7 @@ import { withRouter } from 'react-router-dom'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; +import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add-fill.svg'; import { HotKeys } from 'react-hotkeys'; import { Icon } from 'flavours/glitch/components/icon'; @@ -86,7 +87,7 @@ class NotificationAdminSignup extends ImmutablePureComponent {
    - +
    + ); } diff --git a/app/javascript/flavours/glitch/features/notifications/components/filter_bar.jsx b/app/javascript/flavours/glitch/features/notifications/components/filter_bar.jsx index 04247226ac..615a27dc4a 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/filter_bar.jsx +++ b/app/javascript/flavours/glitch/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 'flavours/glitch/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/flavours/glitch/features/notifications/components/follow.jsx b/app/javascript/flavours/glitch/features/notifications/components/follow.jsx index 06603d8e3e..981d14aaf3 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/follow.jsx +++ b/app/javascript/flavours/glitch/features/notifications/components/follow.jsx @@ -8,6 +8,7 @@ import { withRouter } from 'react-router-dom'; import ImmutablePropTypes from 'react-immutable-proptypes'; import ImmutablePureComponent from 'react-immutable-pure-component'; +import { ReactComponent as PersonAddIcon } from '@material-symbols/svg-600/outlined/person_add-fill.svg'; import { HotKeys } from 'react-hotkeys'; import { Icon } from 'flavours/glitch/components/icon'; @@ -86,7 +87,7 @@ class NotificationFollow extends ImmutablePureComponent {
    - +
    - +
    - - + +
    diff --git a/app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.jsx b/app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.jsx index 53bf1747a1..4dc8ca9f5c 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/notifications_permission_banner.jsx +++ b/app/javascript/flavours/glitch/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 'flavours/glitch/actions/notifications'; import { changeSetting } from 'flavours/glitch/actions/settings'; import { Button } from 'flavours/glitch/components/button'; @@ -36,11 +39,11 @@ class NotificationsPermissionBanner extends PureComponent { return (
    - +

    -

    }} />

    +

    }} />

    ); diff --git a/app/javascript/flavours/glitch/features/notifications/components/overlay.jsx b/app/javascript/flavours/glitch/features/notifications/components/overlay.jsx index 73fb698643..1ed052f83e 100644 --- a/app/javascript/flavours/glitch/features/notifications/components/overlay.jsx +++ b/app/javascript/flavours/glitch/features/notifications/components/overlay.jsx @@ -2,8 +2,6 @@ * Notification overlay */ - -// Package imports. import PropTypes from 'prop-types'; import { defineMessages, injectIntl } from 'react-intl'; @@ -11,6 +9,8 @@ import { defineMessages, injectIntl } from 'react-intl'; 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 { Icon } from 'flavours/glitch/components/icon'; const messages = defineMessages({ @@ -49,7 +49,7 @@ class NotificationOverlay extends ImmutablePureComponent { >
    diff --git a/app/javascript/flavours/glitch/features/notifications/index.jsx b/app/javascript/flavours/glitch/features/notifications/index.jsx index dc923fbdf5..38544676d9 100644 --- a/app/javascript/flavours/glitch/features/notifications/index.jsx +++ b/app/javascript/flavours/glitch/features/notifications/index.jsx @@ -11,6 +11,9 @@ import { List as ImmutableList } from 'immutable'; import ImmutablePropTypes from 'react-immutable-proptypes'; import { connect } from 'react-redux'; +import { ReactComponent as DeleteForeverIcon } from '@material-symbols/svg-600/outlined/delete_forever.svg'; +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 'flavours/glitch/compare_id'; @@ -293,7 +296,7 @@ class Notifications extends PureComponent { onClick={this.handleMarkAsRead} className='column-header__button' > - + , ); } @@ -317,7 +320,7 @@ class Notifications extends PureComponent { onClick={this.onEnterCleaningMode} className={notifCleaningButtonClassName} > - + , ); @@ -338,6 +341,7 @@ class Notifications extends PureComponent { > ( - - - -); - -export default ArrowSmallRight; \ No newline at end of file diff --git a/app/javascript/flavours/glitch/features/onboarding/components/progress_indicator.jsx b/app/javascript/flavours/glitch/features/onboarding/components/progress_indicator.jsx index f7d54ae37d..451423908d 100644 --- a/app/javascript/flavours/glitch/features/onboarding/components/progress_indicator.jsx +++ b/app/javascript/flavours/glitch/features/onboarding/components/progress_indicator.jsx @@ -3,7 +3,9 @@ import { Fragment } from 'react'; import classNames from 'classnames'; -import { Check } from 'flavours/glitch/components/check'; +import { ReactComponent as CheckIcon } from '@material-symbols/svg-600/outlined/done.svg'; + +import { Icon } from 'flavours/glitch/components/icon'; const ProgressIndicator = ({ steps, completed }) => ( @@ -13,7 +15,7 @@ const ProgressIndicator = ({ steps, completed }) => ( {i > 0 &&
    i })} />}
    i })}> - {completed > i && } + {completed > i && }
    ))} diff --git a/app/javascript/flavours/glitch/features/onboarding/components/step.jsx b/app/javascript/flavours/glitch/features/onboarding/components/step.jsx index b5bb8e727f..b406b8785f 100644 --- a/app/javascript/flavours/glitch/features/onboarding/components/step.jsx +++ b/app/javascript/flavours/glitch/features/onboarding/components/step.jsx @@ -1,15 +1,15 @@ import PropTypes from 'prop-types'; -import { Check } from 'flavours/glitch/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 'flavours/glitch/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 = ( <>
    - +
    @@ -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/flavours/glitch/features/onboarding/index.jsx b/app/javascript/flavours/glitch/features/onboarding/index.jsx index 3bce573a1d..129dd0da3e 100644 --- a/app/javascript/flavours/glitch/features/onboarding/index.jsx +++ b/app/javascript/flavours/glitch/features/onboarding/index.jsx @@ -10,11 +10,17 @@ 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 { fetchAccount } from 'flavours/glitch/actions/accounts'; import { focusCompose } from 'flavours/glitch/actions/compose'; import { closeOnboarding } from 'flavours/glitch/actions/onboarding'; +import { Icon } from 'flavours/glitch/components/icon'; import Column from 'flavours/glitch/features/ui/components/column'; import { me } from 'flavours/glitch/initial_state'; import { makeGetAccount } from 'flavours/glitch/selectors'; @@ -22,7 +28,6 @@ import { assetHost } from 'flavours/glitch/utils/config'; import { WithRouterPropTypes } from 'flavours/glitch/utils/react_router'; import illustration from 'mastodon/../images/elephant_ui_conversation.svg'; -import ArrowSmallRight from './components/arrow_small_right'; import Step from './components/step'; import Follows from './follows'; import Share from './share'; @@ -116,10 +121,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={} />

    @@ -127,12 +132,12 @@ class Onboarding extends ImmutablePureComponent {
    - + - +
    diff --git a/app/javascript/flavours/glitch/features/onboarding/share.jsx b/app/javascript/flavours/glitch/features/onboarding/share.jsx index 84dc6d8e65..66c95b8c9b 100644 --- a/app/javascript/flavours/glitch/features/onboarding/share.jsx +++ b/app/javascript/flavours/glitch/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 'flavours/glitch/components/column'; @@ -16,8 +18,6 @@ import ColumnBackButton from 'flavours/glitch/components/column_back_button'; import { Icon } from 'flavours/glitch/components/icon'; import { me, domain } from 'flavours/glitch/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 {