mirror/mastodon
1
0
Fork 0
mirror of https://github.com/mastodon/mastodon synced 2024-11-27 22:38:27 +09:00
Code

Migrate to font-awesome 5.0. (#8799)

Browse Source
This commit is contained in:
Naoki Kosaka 2018-09-28 00:08:56 +09:00 committed by Eugen Rochko
parent 15fc2b76f9
commit 8bae14591b
47 changed files with 102 additions and 102 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/helpers/application_helper.rb
View File

@ -55,7 +55,7 @@ module ApplicationHelper
def fa_icon(icon, attributes = {}) def fa_icon(icon, attributes = {})
class_names = attributes[:class]&.split(' ') || [] class_names = attributes[:class]&.split(' ') || []
class_names << 'fa' class_names << 'fas'
class_names += icon.split(' ').map { |cl| "fa-#{cl}" } class_names += icon.split(' ').map { |cl| "fa-#{cl}" }
content_tag(:i, nil, attributes.merge(class: class_names.join(' '))) content_tag(:i, nil, attributes.merge(class: class_names.join(' ')))

4
app/javascript/mastodon/components/__tests__/__snapshots__/avatar-test.js.snap
View File

@ -15,7 +15,7 @@ exports[`<Avatar /> Autoplay renders a animated avatar 1`] = `
} }
> >
<i <i
className="fa fa-fw fa-robot bot-icon" className="fas fa-fw fa-robot bot-icon"
/> />
</div> </div>
`; `;
@ -35,7 +35,7 @@ exports[`<Avatar /> Still renders a still avatar 1`] = `
} }
> >
<i <i
className="fa fa-fw fa-robot bot-icon" className="fas fa-fw fa-robot bot-icon"
/> />
</div> </div>
`; `;

4
app/javascript/mastodon/components/attachment_list.js
View File

@ -24,7 +24,7 @@ export default class AttachmentList extends ImmutablePureComponent {
return ( return (
<li key={attachment.get('id')}> <li key={attachment.get('id')}>
<a href={displayUrl} target='_blank' rel='noopener'><i className='fa fa-link' /> {filename(displayUrl)}</a> <a href={displayUrl} target='_blank' rel='noopener'><i className='fas fa-link' /> {filename(displayUrl)}</a>
</li> </li>
); );
})} })}
@ -36,7 +36,7 @@ export default class AttachmentList extends ImmutablePureComponent {
return ( return (
<div className='attachment-list'> <div className='attachment-list'>
<div className='attachment-list__icon'> <div className='attachment-list__icon'>
<i className='fa fa-link' /> <i className='fas fa-link' />
</div> </div>
<ul className='attachment-list__list'> <ul className='attachment-list__list'>

2
app/javascript/mastodon/components/bot_icon.js
View File

@ -13,7 +13,7 @@ export default class BotIcon extends ImmutablePureComponent {
if (account.get('bot')) { if (account.get('bot')) {
return ( return (
<i className='fa fa-fw fa-robot bot-icon' /> <i className='fas fa-fw fa-robot bot-icon' />
); );
} }

2
app/javascript/mastodon/components/column_back_button.js
View File

@ -19,7 +19,7 @@ export default class ColumnBackButton extends React.PureComponent {
render () { render () {
return ( return (
<button onClick={this.handleClick} className='column-back-button'> <button onClick={this.handleClick} className='column-back-button'>
<i className='fa fa-fw fa-chevron-left column-back-button__icon' /> <i className='fas fa-fw fa-chevron-left column-back-button__icon' />
<FormattedMessage id='column_back_button.label' defaultMessage='Back' /> <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
</button> </button>
); );

2
app/javascript/mastodon/components/column_back_button_slim.js
View File

@ -8,7 +8,7 @@ export default class ColumnBackButtonSlim extends ColumnBackButton {
return ( return (
<div className='column-back-button--slim'> <div className='column-back-button--slim'>
<div role='button' tabIndex='0' onClick={this.handleClick} className='column-back-button column-back-button--slim-button'> <div role='button' tabIndex='0' onClick={this.handleClick} className='column-back-button column-back-button--slim-button'>
<i className='fa fa-fw fa-chevron-left column-back-button__icon' /> <i className='fas fa-fw fa-chevron-left column-back-button__icon' />
<FormattedMessage id='column_back_button.label' defaultMessage='Back' /> <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
</div> </div>
</div> </div>

14
app/javascript/mastodon/components/column_header.js
View File

@ -95,22 +95,22 @@ class ColumnHeader extends React.PureComponent {
} }
if (multiColumn && pinned) { if (multiColumn && pinned) {
pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={onPin}><i className='fa fa fa-times' /> <FormattedMessage id='column_header.unpin' defaultMessage='Unpin' /></button>; pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={onPin}><i className='fas fa-times' /> <FormattedMessage id='column_header.unpin' defaultMessage='Unpin' /></button>;
moveButtons = ( moveButtons = (
<div key='move-buttons' className='column-header__setting-arrows'> <div key='move-buttons' className='column-header__setting-arrows'>
<button title={formatMessage(messages.moveLeft)} aria-label={formatMessage(messages.moveLeft)} className='text-btn column-header__setting-btn' onClick={this.handleMoveLeft}><i className='fa fa-chevron-left' /></button> <button title={formatMessage(messages.moveLeft)} aria-label={formatMessage(messages.moveLeft)} className='text-btn column-header__setting-btn' onClick={this.handleMoveLeft}><i className='fas fa-chevron-left' /></button>
<button title={formatMessage(messages.moveRight)} aria-label={formatMessage(messages.moveRight)} className='text-btn column-header__setting-btn' onClick={this.handleMoveRight}><i className='fa fa-chevron-right' /></button> <button title={formatMessage(messages.moveRight)} aria-label={formatMessage(messages.moveRight)} className='text-btn column-header__setting-btn' onClick={this.handleMoveRight}><i className='fas fa-chevron-right' /></button>
</div> </div>
); );
} else if (multiColumn) { } else if (multiColumn) {
pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={onPin}><i className='fa fa fa-plus' /> <FormattedMessage id='column_header.pin' defaultMessage='Pin' /></button>; pinButton = <button key='pin-button' className='text-btn column-header__setting-btn' onClick={onPin}><i className='fas fa-plus' /> <FormattedMessage id='column_header.pin' defaultMessage='Pin' /></button>;
} }
if (!pinned && (multiColumn || showBackButton)) { if (!pinned && (multiColumn || showBackButton)) {
backButton = ( backButton = (
<button onClick={this.handleBackClick} className='column-header__back-button'> <button onClick={this.handleBackClick} className='column-header__back-button'>
<i className='fa fa-fw fa-chevron-left column-back-button__icon' /> <i className='fas fa-fw fa-chevron-left column-back-button__icon' />
<FormattedMessage id='column_back_button.label' defaultMessage='Back' /> <FormattedMessage id='column_back_button.label' defaultMessage='Back' />
</button> </button>
); );
@ -126,7 +126,7 @@ class ColumnHeader extends React.PureComponent {
} }
if (children || multiColumn) { if (children || multiColumn) {
collapseButton = <button className={collapsibleButtonClassName} title={formatMessage(collapsed ? messages.show : messages.hide)} aria-label={formatMessage(collapsed ? messages.show : messages.hide)} aria-pressed={collapsed ? 'false' : 'true'} onClick={this.handleToggleClick}><i className='fa fa-sliders-h' /></button>; collapseButton = <button className={collapsibleButtonClassName} title={formatMessage(collapsed ? messages.show : messages.hide)} aria-label={formatMessage(collapsed ? messages.show : messages.hide)} aria-pressed={collapsed ? 'false' : 'true'} onClick={this.handleToggleClick}><i className='fas fa-sliders-h' /></button>;
} }
const hasTitle = icon && title; const hasTitle = icon && title;
@ -136,7 +136,7 @@ class ColumnHeader extends React.PureComponent {
<h1 className={buttonClassName}> <h1 className={buttonClassName}>
{hasTitle && ( {hasTitle && (
<button onClick={this.handleTitleClick}> <button onClick={this.handleTitleClick}>
<i className={`fa fa-fw fa-${icon} column-header__icon`} /> <i className={`fas fa-fw fa-${icon} column-header__icon`} />
{title} {title}
</button> </button>
)} )}

4
app/javascript/mastodon/components/icon_button.js
View File

@ -86,7 +86,7 @@ export default class IconButton extends React.PureComponent {
style={style} style={style}
tabIndex={tabIndex} tabIndex={tabIndex}
> >
<i className={`fa fa-fw fa-${icon}`} aria-hidden='true' /> <i className={`fas fa-fw fa-${icon}`} aria-hidden='true' />
</button> </button>
); );
} }
@ -104,7 +104,7 @@ export default class IconButton extends React.PureComponent {
style={style} style={style}
tabIndex={tabIndex} tabIndex={tabIndex}
> >
<i style={{ transform: `rotate(${rotate}deg)` }} className={`fa fa-fw fa-${icon}`} aria-hidden='true' /> <i style={{ transform: `rotate(${rotate}deg)` }} className={`fas fa-fw fa-${icon}`} aria-hidden='true' />
</button> </button>
)} )}
</Motion> </Motion>

2
app/javascript/mastodon/components/load_gap.js
View File

@ -25,7 +25,7 @@ class LoadGap extends React.PureComponent {
return ( return (
<button className='load-more load-gap' disabled={disabled} onClick={this.handleClick} aria-label={intl.formatMessage(messages.load_more)}> <button className='load-more load-gap' disabled={disabled} onClick={this.handleClick} aria-label={intl.formatMessage(messages.load_more)}>
<i className='fa fa-ellipsis-h' /> <i className='fas fa-ellipsis-h' />
</button> </button>
); );
} }

4
app/javascript/mastodon/components/status.js
View File

@ -193,7 +193,7 @@ class Status extends ImmutablePureComponent {
if (featured) { if (featured) {
prepend = ( prepend = (
<div className='status__prepend'> <div className='status__prepend'>
<div className='status__prepend-icon-wrapper'><i className='fa fa-fw fa-thumb-tack status__prepend-icon' /></div> <div className='status__prepend-icon-wrapper'><i className='fas fa-fw fa-thumbtack status__prepend-icon' /></div>
<FormattedMessage id='status.pinned' defaultMessage='Pinned toot' /> <FormattedMessage id='status.pinned' defaultMessage='Pinned toot' />
</div> </div>
); );
@ -202,7 +202,7 @@ class Status extends ImmutablePureComponent {
prepend = ( prepend = (
<div className='status__prepend'> <div className='status__prepend'>
<div className='status__prepend-icon-wrapper'><i className='fa fa-fw fa-retweet status__prepend-icon' /></div> <div className='status__prepend-icon-wrapper'><i className='fas fa-fw fa-retweet status__prepend-icon' /></div>
<FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name: <a onClick={this.handleAccountClick} data-id={status.getIn(['account', 'id'])} href={status.getIn(['account', 'url'])} className='status__display-name muted'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></a> }} /> <FormattedMessage id='status.reblogged_by' defaultMessage='{name} boosted' values={{ name: <a onClick={this.handleAccountClick} data-id={status.getIn(['account', 'id'])} href={status.getIn(['account', 'url'])} className='status__display-name muted'><bdi><strong dangerouslySetInnerHTML={display_name_html} /></bdi></a> }} />
</div> </div>
); );

4
app/javascript/mastodon/features/account/components/header.js
View File

@ -150,7 +150,7 @@ class Header extends ImmutablePureComponent {
} }
if (account.get('locked')) { if (account.get('locked')) {
lockedIcon = <i className='fa fa-lock' />; lockedIcon = <i className='fas fa-lock' />;
} }
const content = { __html: account.get('note_emojified') }; const content = { __html: account.get('note_emojified') };
@ -177,7 +177,7 @@ class Header extends ImmutablePureComponent {
<dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} /> <dt dangerouslySetInnerHTML={{ __html: pair.get('name_emojified') }} title={pair.get('name')} />
<dd className={pair.get('verified_at') && 'verified'} title={pair.get('value_plain')}> <dd className={pair.get('verified_at') && 'verified'} title={pair.get('value_plain')}>
{pair.get('verified_at') && <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(pair.get('verified_at'), dateFormatOptions) })}><i className='fa fa-check verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} /> {pair.get('verified_at') && <span title={intl.formatMessage(messages.linkVerifiedOn, { date: intl.formatDate(pair.get('verified_at'), dateFormatOptions) })}><i className='fas fa-check verified__mark' /></span>} <span dangerouslySetInnerHTML={{ __html: pair.get('value_emojified') }} />
</dd> </dd>
</dl> </dl>
))} ))}

2
app/javascript/mastodon/features/account_timeline/components/moved_note.js
View File

@ -33,7 +33,7 @@ export default class MovedNote extends ImmutablePureComponent {
return ( return (
<div className='account__moved-note'> <div className='account__moved-note'>
<div className='account__moved-note__message'> <div className='account__moved-note__message'>
<div className='account__moved-note__icon-wrapper'><i className='fa fa-fw fa-suitcase account__moved-note__icon' /></div> <div className='account__moved-note__icon-wrapper'><i className='fas fa-fw fa-suitcase account__moved-note__icon' /></div>
<FormattedMessage id='account.moved_to' defaultMessage='{name} has moved to:' values={{ name: <bdi><strong dangerouslySetInnerHTML={displayNameHtml} /></bdi> }} /> <FormattedMessage id='account.moved_to' defaultMessage='{name} has moved to:' values={{ name: <bdi><strong dangerouslySetInnerHTML={displayNameHtml} /></bdi> }} />
</div> </div>

2
app/javascript/mastodon/features/compose/components/compose_form.js
View File

@ -160,7 +160,7 @@ class ComposeForm extends ImmutablePureComponent {
let publishText = ''; let publishText = '';
if (this.props.privacy === 'private' || this.props.privacy === 'direct') { if (this.props.privacy === 'private' || this.props.privacy === 'direct') {
publishText = <span className='compose-form__publish-private'><i className='fa fa-lock' /> {intl.formatMessage(messages.publish)}</span>; publishText = <span className='compose-form__publish-private'><i className='fas fa-lock' /> {intl.formatMessage(messages.publish)}</span>;
} else { } else {
publishText = this.props.privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish); publishText = this.props.privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
} }

2
app/javascript/mastodon/features/compose/components/privacy_dropdown.js
View File

@ -132,7 +132,7 @@ class PrivacyDropdownMenu extends React.PureComponent {
{items.map(item => ( {items.map(item => (
<div role='option' tabIndex='0' key={item.value} data-index={item.value} onKeyDown={this.handleKeyDown} onClick={this.handleClick} className={classNames('privacy-dropdown__option', { active: item.value === value })} aria-selected={item.value === value} ref={item.value === value ? this.setFocusRef : null}> <div role='option' tabIndex='0' key={item.value} data-index={item.value} onKeyDown={this.handleKeyDown} onClick={this.handleClick} className={classNames('privacy-dropdown__option', { active: item.value === value })} aria-selected={item.value === value} ref={item.value === value ? this.setFocusRef : null}>
<div className='privacy-dropdown__option__icon'> <div className='privacy-dropdown__option__icon'>
<i className={`fa fa-fw fa-${item.icon}`} /> <i className={`fas fa-fw fa-${item.icon}`} />
</div> </div>
<div className='privacy-dropdown__option__content'> <div className='privacy-dropdown__option__content'>

4
app/javascript/mastodon/features/compose/components/search.js
View File

@ -116,8 +116,8 @@ class Search extends React.PureComponent {
</label> </label>
<div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}> <div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}>
<i className={`fa fa-search ${hasValue ? '' : 'active'}`} /> <i className={`fas fa-search ${hasValue ? '' : 'active'}`} />
<i aria-label={intl.formatMessage(messages.placeholder)} className={`fa fa-times-circle ${hasValue ? 'active' : ''}`} /> <i aria-label={intl.formatMessage(messages.placeholder)} className={`fas fa-times-circle ${hasValue ? 'active' : ''}`} />
</div> </div>
<Overlay show={expanded && !hasValue} placement='bottom' target={this}> <Overlay show={expanded && !hasValue} placement='bottom' target={this}>

8
app/javascript/mastodon/features/compose/components/search_results.js
View File

@ -22,7 +22,7 @@ export default class SearchResults extends ImmutablePureComponent {
count += results.get('accounts').size; count += results.get('accounts').size;
accounts = ( accounts = (
<div className='search-results__section'> <div className='search-results__section'>
<h5><i className='fa fa-fw fa-users' /><FormattedMessage id='search_results.accounts' defaultMessage='People' /></h5> <h5><i className='fas fa-fw fa-users' /><FormattedMessage id='search_results.accounts' defaultMessage='People' /></h5>
{results.get('accounts').map(accountId => <AccountContainer key={accountId} id={accountId} />)} {results.get('accounts').map(accountId => <AccountContainer key={accountId} id={accountId} />)}
</div> </div>
@ -33,7 +33,7 @@ export default class SearchResults extends ImmutablePureComponent {
count += results.get('statuses').size; count += results.get('statuses').size;
statuses = ( statuses = (
<div className='search-results__section'> <div className='search-results__section'>
<h5><i className='fa fa-fw fa-quote-right' /><FormattedMessage id='search_results.statuses' defaultMessage='Toots' /></h5> <h5><i className='fas fa-fw fa-quote-right' /><FormattedMessage id='search_results.statuses' defaultMessage='Toots' /></h5>
{results.get('statuses').map(statusId => <StatusContainer key={statusId} id={statusId} />)} {results.get('statuses').map(statusId => <StatusContainer key={statusId} id={statusId} />)}
</div> </div>
@ -44,7 +44,7 @@ export default class SearchResults extends ImmutablePureComponent {
count += results.get('hashtags').size; count += results.get('hashtags').size;
hashtags = ( hashtags = (
<div className='search-results__section'> <div className='search-results__section'>
<h5><i className='fa fa-fw fa-hashtag' /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5> <h5><i className='fas fa-fw fa-hashtag' /><FormattedMessage id='search_results.hashtags' defaultMessage='Hashtags' /></h5>
{results.get('hashtags').map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)} {results.get('hashtags').map(hashtag => <Hashtag key={hashtag.get('name')} hashtag={hashtag} />)}
</div> </div>
@ -54,7 +54,7 @@ export default class SearchResults extends ImmutablePureComponent {
return ( return (
<div className='search-results'> <div className='search-results'>
<div className='search-results__header'> <div className='search-results__header'>
<i className='fa fa-search fa-fw' /> <i className='fas fa-search fa-fw' />
<FormattedMessage id='search_results.total' defaultMessage='{count, number} {count, plural, one {result} other {results}}' values={{ count }} /> <FormattedMessage id='search_results.total' defaultMessage='{count, number} {count, plural, one {result} other {results}}' values={{ count }} />
</div> </div>

4
app/javascript/mastodon/features/compose/components/upload.js
View File

@ -89,8 +89,8 @@ class Upload extends ImmutablePureComponent {
{({ scale }) => ( {({ scale }) => (
<div className='compose-form__upload-thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})`, backgroundPosition: `${x}% ${y}%` }}> <div className='compose-form__upload-thumbnail' style={{ transform: `scale(${scale})`, backgroundImage: `url(${media.get('preview_url')})`, backgroundPosition: `${x}% ${y}%` }}>
<div className={classNames('compose-form__upload__actions', { active })}> <div className={classNames('compose-form__upload__actions', { active })}>
<button className='icon-button' onClick={this.handleUndoClick}><i className='fa fa-times' /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button> <button className='icon-button' onClick={this.handleUndoClick}><i className='fas fa-times' /> <FormattedMessage id='upload_form.undo' defaultMessage='Delete' /></button>
{media.get('type') === 'image' && <button className='icon-button' onClick={this.handleFocalPointClick}><i className='fa fa-crosshairs' /> <FormattedMessage id='upload_form.focus' defaultMessage='Crop' /></button>} {media.get('type') === 'image' && <button className='icon-button' onClick={this.handleFocalPointClick}><i className='fas fa-crosshairs' /> <FormattedMessage id='upload_form.focus' defaultMessage='Crop' /></button>}
</div> </div>
<div className={classNames('compose-form__upload-description', { active })}> <div className={classNames('compose-form__upload-description', { active })}>

2
app/javascript/mastodon/features/compose/components/upload_progress.js
View File

@ -21,7 +21,7 @@ export default class UploadProgress extends React.PureComponent {
return ( return (
<div className='upload-progress'> <div className='upload-progress'>
<div className='upload-progress__icon'> <div className='upload-progress__icon'>
<i className='fa fa-upload' /> <i className='fas fa-upload' />
</div> </div>
<div className='upload-progress__message'> <div className='upload-progress__message'>

14
app/javascript/mastodon/features/compose/index.js
View File

@ -76,21 +76,21 @@ class Compose extends React.PureComponent {
const { columns } = this.props; const { columns } = this.props;
header = ( header = (
<nav className='drawer__header'> <nav className='drawer__header'>
<Link to='/getting-started' className='drawer__tab' title={intl.formatMessage(messages.start)} aria-label={intl.formatMessage(messages.start)}><i role='img' className='fa fa-fw fa-bars' /></Link> <Link to='/getting-started' className='drawer__tab' title={intl.formatMessage(messages.start)} aria-label={intl.formatMessage(messages.start)}><i role='img' className='fas fa-fw fa-bars' /></Link>
{!columns.some(column => column.get('id') === 'HOME') && ( {!columns.some(column => column.get('id') === 'HOME') && (
<Link to='/timelines/home' className='drawer__tab' title={intl.formatMessage(messages.home_timeline)} aria-label={intl.formatMessage(messages.home_timeline)}><i role='img' className='fa fa-fw fa-home' /></Link> <Link to='/timelines/home' className='drawer__tab' title={intl.formatMessage(messages.home_timeline)} aria-label={intl.formatMessage(messages.home_timeline)}><i role='img' className='fas fa-fw fa-home' /></Link>
)} )}
{!columns.some(column => column.get('id') === 'NOTIFICATIONS') && ( {!columns.some(column => column.get('id') === 'NOTIFICATIONS') && (
<Link to='/notifications' className='drawer__tab' title={intl.formatMessage(messages.notifications)} aria-label={intl.formatMessage(messages.notifications)}><i role='img' className='fa fa-fw fa-bell' /></Link> <Link to='/notifications' className='drawer__tab' title={intl.formatMessage(messages.notifications)} aria-label={intl.formatMessage(messages.notifications)}><i role='img' className='fas fa-fw fa-bell' /></Link>
)} )}
{!columns.some(column => column.get('id') === 'COMMUNITY') && ( {!columns.some(column => column.get('id') === 'COMMUNITY') && (
<Link to='/timelines/public/local' className='drawer__tab' title={intl.formatMessage(messages.community)} aria-label={intl.formatMessage(messages.community)}><i role='img' className='fa fa-fw fa-users' /></Link> <Link to='/timelines/public/local' className='drawer__tab' title={intl.formatMessage(messages.community)} aria-label={intl.formatMessage(messages.community)}><i role='img' className='fas fa-fw fa-users' /></Link>
)} )}
{!columns.some(column => column.get('id') === 'PUBLIC') && ( {!columns.some(column => column.get('id') === 'PUBLIC') && (
<Link to='/timelines/public' className='drawer__tab' title={intl.formatMessage(messages.public)} aria-label={intl.formatMessage(messages.public)}><i role='img' className='fa fa-fw fa-globe' /></Link> <Link to='/timelines/public' className='drawer__tab' title={intl.formatMessage(messages.public)} aria-label={intl.formatMessage(messages.public)}><i role='img' className='fas fa-fw fa-globe' /></Link>
)} )}
<a href='/settings/preferences' className='drawer__tab' title={intl.formatMessage(messages.preferences)} aria-label={intl.formatMessage(messages.preferences)}><i role='img' className='fa fa-fw fa-cog' /></a> <a href='/settings/preferences' className='drawer__tab' title={intl.formatMessage(messages.preferences)} aria-label={intl.formatMessage(messages.preferences)}><i role='img' className='fas fa-fw fa-cog' /></a>
<a href='/auth/sign_out' className='drawer__tab' data-method='delete' title={intl.formatMessage(messages.logout)} aria-label={intl.formatMessage(messages.logout)}><i role='img' className='fa fa-fw fa-sign-out-alt' /></a> <a href='/auth/sign_out' className='drawer__tab' data-method='delete' title={intl.formatMessage(messages.logout)} aria-label={intl.formatMessage(messages.logout)}><i role='img' className='fas fa-fw fa-sign-out-alt' /></a>
</nav> </nav>
); );
} }

2
app/javascript/mastodon/features/getting_started/index.js
View File

@ -120,7 +120,7 @@ class GettingStarted extends ImmutablePureComponent {
{multiColumn && <div className='column-header__wrapper'> {multiColumn && <div className='column-header__wrapper'>
<h1 className='column-header'> <h1 className='column-header'>
<button> <button>
<i className='fa fa-bars fa-fw column-header__icon' /> <i className='fas fa-bars fa-fw column-header__icon' />
<FormattedMessage id='getting_started.heading' defaultMessage='Getting started' /> <FormattedMessage id='getting_started.heading' defaultMessage='Getting started' />
</button> </button>
</h1> </h1>

4
app/javascript/mastodon/features/list_editor/components/search.js
View File

@ -65,8 +65,8 @@ class Search extends React.PureComponent {
</label> </label>
<div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}> <div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}>
<i className={classNames('fa fa-search', { active: !hasValue })} /> <i className={classNames('fas fa-search', { active: !hasValue })} />
<i aria-label={intl.formatMessage(messages.search)} className={classNames('fa fa-times-circle', { active: hasValue })} /> <i aria-label={intl.formatMessage(messages.search)} className={classNames('fas fa-times-circle', { active: hasValue })} />
</div> </div>
</div> </div>
); );

4
app/javascript/mastodon/features/list_timeline/index.js
View File

@ -150,11 +150,11 @@ class ListTimeline extends React.PureComponent {
> >
<div className='column-header__links'> <div className='column-header__links'>
<button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleEditClick}> <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleEditClick}>
<i className='fa fa-pencil-alt' /> <FormattedMessage id='lists.edit' defaultMessage='Edit list' /> <i className='fas fa-pencil-alt' /> <FormattedMessage id='lists.edit' defaultMessage='Edit list' />
</button> </button>
<button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleDeleteClick}> <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.handleDeleteClick}>
<i className='fa fa-trash' /> <FormattedMessage id='lists.delete' defaultMessage='Delete list' /> <i className='fas fa-trash' /> <FormattedMessage id='lists.delete' defaultMessage='Delete list' />
</button> </button>
</div> </div>

2
app/javascript/mastodon/features/notifications/components/clear_column_button.js
View File

@ -10,7 +10,7 @@ export default class ClearColumnButton extends React.PureComponent {
render () { render () {
return ( return (
<button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.props.onClick}><i className='fa fa-eraser' /> <FormattedMessage id='notifications.clear' defaultMessage='Clear notifications' /></button> <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.props.onClick}><i className='fas fa-eraser' /> <FormattedMessage id='notifications.clear' defaultMessage='Clear notifications' /></button>
); );
} }

6
app/javascript/mastodon/features/notifications/components/notification.js
View File

@ -83,7 +83,7 @@ class Notification extends ImmutablePureComponent {
<div className='notification notification-follow focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.follow', defaultMessage: '{name} followed you' }, { name: account.get('acct') }), notification.get('created_at'))}> <div className='notification notification-follow focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.follow', defaultMessage: '{name} followed you' }, { name: account.get('acct') }), notification.get('created_at'))}>
<div className='notification__message'> <div className='notification__message'>
<div className='notification__favourite-icon-wrapper'> <div className='notification__favourite-icon-wrapper'>
<i className='fa fa-fw fa-user-plus' /> <i className='fas fa-fw fa-user-plus' />
</div> </div>
<FormattedMessage id='notification.follow' defaultMessage='{name} followed you' values={{ name: link }} /> <FormattedMessage id='notification.follow' defaultMessage='{name} followed you' values={{ name: link }} />
@ -116,7 +116,7 @@ class Notification extends ImmutablePureComponent {
<div className='notification notification-favourite focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.favourite', defaultMessage: '{name} favourited your status' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}> <div className='notification notification-favourite focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.favourite', defaultMessage: '{name} favourited your status' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
<div className='notification__message'> <div className='notification__message'>
<div className='notification__favourite-icon-wrapper'> <div className='notification__favourite-icon-wrapper'>
<i className='fa fa-fw fa-star star-icon' /> <i className='fas fa-fw fa-star star-icon' />
</div> </div>
<FormattedMessage id='notification.favourite' defaultMessage='{name} favourited your status' values={{ name: link }} /> <FormattedMessage id='notification.favourite' defaultMessage='{name} favourited your status' values={{ name: link }} />
</div> </div>
@ -135,7 +135,7 @@ class Notification extends ImmutablePureComponent {
<div className='notification notification-reblog focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.reblog', defaultMessage: '{name} boosted your status' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}> <div className='notification notification-reblog focusable' tabIndex='0' aria-label={notificationForScreenReader(intl, intl.formatMessage({ id: 'notification.reblog', defaultMessage: '{name} boosted your status' }, { name: notification.getIn(['account', 'acct']) }), notification.get('created_at'))}>
<div className='notification__message'> <div className='notification__message'>
<div className='notification__favourite-icon-wrapper'> <div className='notification__favourite-icon-wrapper'>
<i className='fa fa-fw fa-retweet' /> <i className='fas fa-fw fa-retweet' />
</div> </div>
<FormattedMessage id='notification.reblog' defaultMessage='{name} boosted your status' values={{ name: link }} /> <FormattedMessage id='notification.reblog' defaultMessage='{name} boosted your status' values={{ name: link }} />
</div> </div>

2
app/javascript/mastodon/features/pinned_statuses/index.js
View File

@ -46,7 +46,7 @@ class PinnedStatuses extends ImmutablePureComponent {
const { intl, shouldUpdateScroll, statusIds, hasMore } = this.props; const { intl, shouldUpdateScroll, statusIds, hasMore } = this.props;
return ( return (
<Column icon='thumb-tack' heading={intl.formatMessage(messages.heading)} ref={this.setRef}> <Column icon='thumbtack' heading={intl.formatMessage(messages.heading)} ref={this.setRef}>
<ColumnBackButtonSlim /> <ColumnBackButtonSlim />
<StatusList <StatusList
statusIds={statusIds} statusIds={statusIds}

4
app/javascript/mastodon/features/status/components/card.js
View File

@ -173,8 +173,8 @@ export default class Card extends React.PureComponent {
<div className='status-card__actions'> <div className='status-card__actions'>
<div> <div>
<button onClick={this.handleEmbedClick}><i className={`fa fa-${iconVariant}`} /></button> <button onClick={this.handleEmbedClick}><i className={`fas fa-${iconVariant}`} /></button>
<a href={card.get('url')} target='_blank' rel='noopener'><i className='fa fa-external-link' /></a> <a href={card.get('url')} target='_blank' rel='noopener'><i className='fas fa-external-link-alt' /></a>
</div> </div>
</div> </div>
</div> </div>

6
app/javascript/mastodon/features/status/components/detailed_status.js
View File

@ -94,10 +94,10 @@ export default class DetailedStatus extends ImmutablePureComponent {
} }
if (status.get('visibility') === 'private') { if (status.get('visibility') === 'private') {
reblogLink = <i className={`fa fa-${reblogIcon}`} />; reblogLink = <i className={`fas fa-${reblogIcon}`} />;
} else { } else {
reblogLink = (<Link to={`/statuses/${status.get('id')}/reblogs`} className='detailed-status__link'> reblogLink = (<Link to={`/statuses/${status.get('id')}/reblogs`} className='detailed-status__link'>
<i className={`fa fa-${reblogIcon}`} /> <i className={`fas fa-${reblogIcon}`} />
<span className='detailed-status__reblogs'> <span className='detailed-status__reblogs'>
<FormattedNumber value={status.get('reblogs_count')} /> <FormattedNumber value={status.get('reblogs_count')} />
</span> </span>
@ -119,7 +119,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
<a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener'> <a className='detailed-status__datetime' href={status.get('url')} target='_blank' rel='noopener'>
<FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' /> <FormattedDate value={new Date(status.get('created_at'))} hour12={false} year='numeric' month='short' day='2-digit' hour='2-digit' minute='2-digit' />
</a>{applicationLink} · {reblogLink} · <Link to={`/statuses/${status.get('id')}/favourites`} className='detailed-status__link'> </a>{applicationLink} · {reblogLink} · <Link to={`/statuses/${status.get('id')}/favourites`} className='detailed-status__link'>
<i className='fa fa-star' /> <i className='fas fa-star' />
<span className='detailed-status__favorites'> <span className='detailed-status__favorites'>
<FormattedNumber value={status.get('favourites_count')} /> <FormattedNumber value={status.get('favourites_count')} />
</span> </span>

2
app/javascript/mastodon/features/status/index.js
View File

@ -410,7 +410,7 @@ class Status extends ImmutablePureComponent {
<ColumnHeader <ColumnHeader
showBackButton showBackButton
extraButton={( extraButton={(
<button className='column-header__button' title={intl.formatMessage(status.get('hidden') ? messages.revealAll : messages.hideAll)} aria-label={intl.formatMessage(status.get('hidden') ? messages.revealAll : messages.hideAll)} onClick={this.handleToggleAll} aria-pressed={status.get('hidden') ? 'false' : 'true'}><i className={`fa fa-${status.get('hidden') ? 'eye-slash' : 'eye'}`} /></button> <button className='column-header__button' title={intl.formatMessage(status.get('hidden') ? messages.revealAll : messages.hideAll)} aria-label={intl.formatMessage(status.get('hidden') ? messages.revealAll : messages.hideAll)} onClick={this.handleToggleAll} aria-pressed={status.get('hidden') ? 'false' : 'true'}><i className={`fas fa-${status.get('hidden') ? 'eye-slash' : 'eye'}`} /></button>
)} )}
/> />

2
app/javascript/mastodon/features/ui/components/boost_modal.js
View File

@ -74,7 +74,7 @@ class BoostModal extends ImmutablePureComponent {
</div> </div>
<div className='boost-modal__action-bar'> <div className='boost-modal__action-bar'>
<div><FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <i className='fa fa-retweet' /></span> }} /></div> <div><FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <i className='fas fa-retweet' /></span> }} /></div>
<Button text={intl.formatMessage(messages.reblog)} onClick={this.handleReblog} ref={this.setRef} /> <Button text={intl.formatMessage(messages.reblog)} onClick={this.handleReblog} ref={this.setRef} />
</div> </div>
</div> </div>

2
app/javascript/mastodon/features/ui/components/column_header.js
View File

@ -21,7 +21,7 @@ export default class ColumnHeader extends React.PureComponent {
let iconElement = ''; let iconElement = '';
if (icon) { if (icon) {
iconElement = <i className={`fa fa-fw fa-${icon} column-header__icon`} />; iconElement = <i className={`fas fa-fw fa-${icon} column-header__icon`} />;
} }
return ( return (

4
app/javascript/mastodon/features/ui/components/column_link.js
View File

@ -8,7 +8,7 @@ const ColumnLink = ({ icon, text, to, href, method, badge }) => {
if (href) { if (href) {
return ( return (
<a href={href} className='column-link' data-method={method}> <a href={href} className='column-link' data-method={method}>
<i className={`fa fa-fw fa-${icon} column-link__icon`} /> <i className={`fas fa-fw fa-${icon} column-link__icon`} />
{text} {text}
{badgeElement} {badgeElement}
</a> </a>
@ -16,7 +16,7 @@ const ColumnLink = ({ icon, text, to, href, method, badge }) => {
} else { } else {
return ( return (
<Link to={to} className='column-link'> <Link to={to} className='column-link'>
<i className={`fa fa-fw fa-${icon} column-link__icon`} /> <i className={`fas fa-fw fa-${icon} column-link__icon`} />
{text} {text}
{badgeElement} {badgeElement}
</Link> </Link>

2
app/javascript/mastodon/features/ui/components/columns_area.js
View File

@ -160,7 +160,7 @@ class ColumnsArea extends ImmutablePureComponent {
this.pendingIndex = null; this.pendingIndex = null;
if (singleColumn) { if (singleColumn) {
const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <Link key='floating-action-button' to='/statuses/new' className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}><i className='fa fa-pencil-alt' /></Link>; const floatingActionButton = shouldHideFAB(this.context.router.history.location.pathname) ? null : <Link key='floating-action-button' to='/statuses/new' className='floating-action-button' aria-label={intl.formatMessage(messages.publish)}><i className='fas fa-pencil-alt' /></Link>;
return columnIndex !== -1 ? [ return columnIndex !== -1 ? [
<ReactSwipeableViews key='content' index={columnIndex} onChangeIndex={this.handleSwipe} onTransitionEnd={this.handleAnimationEnd} animateTransitions={shouldAnimate} springConfig={{ duration: '400ms', delay: '0s', easeFunction: 'ease' }} style={{ height: '100%' }}> <ReactSwipeableViews key='content' index={columnIndex} onChangeIndex={this.handleSwipe} onTransitionEnd={this.handleAnimationEnd} animateTransitions={shouldAnimate} springConfig={{ duration: '400ms', delay: '0s', easeFunction: 'ease' }} style={{ height: '100%' }}>

4
app/javascript/mastodon/features/ui/components/media_modal.js
View File

@ -108,8 +108,8 @@ class MediaModal extends ImmutablePureComponent {
const index = this.getIndex(); const index = this.getIndex();
let pagination = []; let pagination = [];
const leftNav = media.size > 1 && <button tabIndex='0' className='media-modal__nav media-modal__nav--left' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><i className='fa fa-fw fa-chevron-left' /></button>; const leftNav = media.size > 1 && <button tabIndex='0' className='media-modal__nav media-modal__nav--left' onClick={this.handlePrevClick} aria-label={intl.formatMessage(messages.previous)}><i className='fas fa-fw fa-chevron-left' /></button>;
const rightNav = media.size > 1 && <button tabIndex='0' className='media-modal__nav media-modal__nav--right' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><i className='fa fa-fw fa-chevron-right' /></button>; const rightNav = media.size > 1 && <button tabIndex='0' className='media-modal__nav media-modal__nav--right' onClick={this.handleNextClick} aria-label={intl.formatMessage(messages.next)}><i className='fas fa-fw fa-chevron-right' /></button>;
if (media.size > 1) { if (media.size > 1) {
pagination = media.map((item, i) => { pagination = media.map((item, i) => {

4
app/javascript/mastodon/features/ui/components/onboarding_modal.js
View File

@ -262,11 +262,11 @@ class OnboardingModal extends React.PureComponent {
const nextOrDoneBtn = hasMore ? ( const nextOrDoneBtn = hasMore ? (
<button onClick={this.handleNext} className='onboarding-modal__nav onboarding-modal__next shake-bottom'> <button onClick={this.handleNext} className='onboarding-modal__nav onboarding-modal__next shake-bottom'>
<FormattedMessage id='onboarding.next' defaultMessage='Next' /> <i className='fa fa-fw fa-chevron-right' /> <FormattedMessage id='onboarding.next' defaultMessage='Next' /> <i className='fas fa-fw fa-chevron-right' />
</button> </button>
) : ( ) : (
<button onClick={this.handleClose} className='onboarding-modal__nav onboarding-modal__done shake-bottom'> <button onClick={this.handleClose} className='onboarding-modal__nav onboarding-modal__done shake-bottom'>
<FormattedMessage id='onboarding.done' defaultMessage='Done' /> <i className='fa fa-fw fa-check' /> <FormattedMessage id='onboarding.done' defaultMessage='Done' /> <i className='fas fa-fw fa-check' />
</button> </button>
); );

12
app/javascript/mastodon/features/ui/components/tabs_bar.js
View File

@ -6,14 +6,14 @@ import { debounce } from 'lodash';
import { isUserTouching } from '../../../is_mobile'; import { isUserTouching } from '../../../is_mobile';
export const links = [ export const links = [
<NavLink className='tabs-bar__link primary' to='/timelines/home' data-preview-title-id='column.home' data-preview-icon='home' ><i className='fa fa-fw fa-home' /><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></NavLink>, <NavLink className='tabs-bar__link primary' to='/timelines/home' data-preview-title-id='column.home' data-preview-icon='home' ><i className='fas fa-fw fa-home' /><FormattedMessage id='tabs_bar.home' defaultMessage='Home' /></NavLink>,
<NavLink className='tabs-bar__link primary' to='/notifications' data-preview-title-id='column.notifications' data-preview-icon='bell' ><i className='fa fa-fw fa-bell' /><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></NavLink>, <NavLink className='tabs-bar__link primary' to='/notifications' data-preview-title-id='column.notifications' data-preview-icon='bell' ><i className='fas fa-fw fa-bell' /><FormattedMessage id='tabs_bar.notifications' defaultMessage='Notifications' /></NavLink>,
<NavLink className='tabs-bar__link secondary' to='/timelines/public/local' data-preview-title-id='column.community' data-preview-icon='users' ><i className='fa fa-fw fa-users' /><FormattedMessage id='tabs_bar.local_timeline' defaultMessage='Local' /></NavLink>, <NavLink className='tabs-bar__link secondary' to='/timelines/public/local' data-preview-title-id='column.community' data-preview-icon='users' ><i className='fas fa-fw fa-users' /><FormattedMessage id='tabs_bar.local_timeline' defaultMessage='Local' /></NavLink>,
<NavLink className='tabs-bar__link secondary' exact to='/timelines/public' data-preview-title-id='column.public' data-preview-icon='globe' ><i className='fa fa-fw fa-globe' /><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></NavLink>, <NavLink className='tabs-bar__link secondary' exact to='/timelines/public' data-preview-title-id='column.public' data-preview-icon='globe' ><i className='fas fa-fw fa-globe' /><FormattedMessage id='tabs_bar.federated_timeline' defaultMessage='Federated' /></NavLink>,
<NavLink className='tabs-bar__link primary' to='/search' data-preview-title-id='tabs_bar.search' data-preview-icon='bell' ><i className='fa fa-fw fa-search' /><FormattedMessage id='tabs_bar.search' defaultMessage='Search' /></NavLink>, <NavLink className='tabs-bar__link primary' to='/search' data-preview-title-id='tabs_bar.search' data-preview-icon='bell' ><i className='fas fa-fw fa-search' /><FormattedMessage id='tabs_bar.search' defaultMessage='Search' /></NavLink>,
<NavLink className='tabs-bar__link primary' style={{ flexGrow: '0', flexBasis: '30px' }} to='/getting-started' data-preview-title-id='getting_started.heading' data-preview-icon='bars' ><i className='fa fa-fw fa-bars' /></NavLink>, <NavLink className='tabs-bar__link primary' style={{ flexGrow: '0', flexBasis: '30px' }} to='/getting-started' data-preview-title-id='getting_started.heading' data-preview-icon='bars' ><i className='fas fa-fw fa-bars' /></NavLink>,
]; ];
export function getIndex (path) { export function getIndex (path) {

12
app/javascript/mastodon/features/video/index.js
View File

@ -353,10 +353,10 @@ class Video extends React.PureComponent {
<div className='video-player__buttons-bar'> <div className='video-player__buttons-bar'>
<div className='video-player__buttons left'> <div className='video-player__buttons left'>
<button type='button' aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} onClick={this.togglePlay}><i className={classNames('fa fa-fw', { 'fa-play': paused, 'fa-pause': !paused })} /></button> <button type='button' aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} onClick={this.togglePlay}><i className={classNames('fas fa-fw', { 'fa-play': paused, 'fa-pause': !paused })} /></button>
<button type='button' aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} onClick={this.toggleMute}><i className={classNames('fa fa-fw', { 'fa-volume-off': muted, 'fa-volume-up': !muted })} /></button> <button type='button' aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} onClick={this.toggleMute}><i className={classNames('fas fa-fw', { 'fa-volume-off': muted, 'fa-volume-up': !muted })} /></button>
{!onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleReveal}><i className='fa fa-fw fa-eye' /></button>} {!onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleReveal}><i className='fas fa-fw fa-eye' /></button>}
{(detailed || fullscreen) && {(detailed || fullscreen) &&
<span> <span>
@ -368,9 +368,9 @@ class Video extends React.PureComponent {
</div> </div>
<div className='video-player__buttons right'> <div className='video-player__buttons right'>
{(!fullscreen && onOpenVideo) && <button type='button' aria-label={intl.formatMessage(messages.expand)} onClick={this.handleOpenVideo}><i className='fa fa-fw fa-expand' /></button>} {(!fullscreen && onOpenVideo) && <button type='button' aria-label={intl.formatMessage(messages.expand)} onClick={this.handleOpenVideo}><i className='fas fa-fw fa-expand' /></button>}
{onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.close)} onClick={this.handleCloseVideo}><i className='fa fa-fw fa-compress' /></button>} {onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.close)} onClick={this.handleCloseVideo}><i className='fas fa-fw fa-compress' /></button>}
<button type='button' aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} onClick={this.toggleFullscreen}><i className={classNames('fa fa-fw', { 'fa-arrows-alt': !fullscreen, 'fa-compress': fullscreen })} /></button> <button type='button' aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} onClick={this.toggleFullscreen}><i className={classNames('fas fa-fw', { 'fa-arrows-alt': !fullscreen, 'fa-compress': fullscreen })} /></button>
</div> </div>
</div> </div>
</div> </div>

2
app/javascript/styles/mastodon/about.scss
View File

@ -1113,7 +1113,7 @@ $small-breakpoint: 960px;
align-items: center; align-items: center;
margin-left: 15px; margin-left: 15px;
.fa { .fas {
display: block; display: block;
color: $darker-text-color; color: $darker-text-color;
font-size: 48px; font-size: 48px;

4
app/javascript/styles/mastodon/accounts.scss
View File

@ -136,7 +136,7 @@
float: left; float: left;
padding-left: 0; padding-left: 0;
.fa { .fas {
display: inline-block; display: inline-block;
margin-right: 5px; margin-right: 5px;
} }
@ -146,7 +146,7 @@
float: right; float: right;
padding-right: 0; padding-right: 0;
.fa { .fas {
display: inline-block; display: inline-block;
margin-left: 5px; margin-left: 5px;
} }

2
app/javascript/styles/mastodon/admin.scss
View File

@ -50,7 +50,7 @@ $no-columns-breakpoint: 600px;
transition: all 200ms linear; transition: all 200ms linear;
border-radius: 4px 0 0 4px; border-radius: 4px 0 0 4px;
i.fa { i.fas {
margin-right: 5px; margin-right: 5px;
} }

22
app/javascript/styles/mastodon/components.scss
View File

@ -675,7 +675,7 @@
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
.fa { .fas {
color: lighten($dark-text-color, 7%); color: lighten($dark-text-color, 7%);
} }
} }
@ -690,7 +690,7 @@
} }
} }
.fa { .fas {
color: $dark-text-color; color: $dark-text-color;
} }
} }
@ -1496,7 +1496,7 @@ a.account__display-name {
font-size: 15px; font-size: 15px;
position: relative; position: relative;
.fa { .fas {
color: $highlight-text-color; color: $highlight-text-color;
} }
@ -2044,7 +2044,7 @@ a.account__display-name {
border-bottom: 2px solid lighten($ui-base-color, 8%); border-bottom: 2px solid lighten($ui-base-color, 8%);
transition: all 50ms linear; transition: all 50ms linear;
.fa { .fas {
font-weight: 400; font-weight: 400;
font-size: 16px; font-size: 16px;
} }
@ -3274,7 +3274,7 @@ a.status-card {
overflow: hidden; overflow: hidden;
display: flex; display: flex;
.fa { .fas {
font-size: 34px; font-size: 34px;
margin-right: 10px; margin-right: 10px;
} }
@ -3491,7 +3491,7 @@ a.status-card {
outline: 0 !important; outline: 0 !important;
} }
.fa { .fas {
position: absolute; position: absolute;
top: 10px; top: 10px;
right: 10px; right: 10px;
@ -3545,7 +3545,7 @@ a.status-card {
font-size: 16px; font-size: 16px;
cursor: default; cursor: default;
.fa { .fas {
display: inline-block; display: inline-block;
margin-right: 5px; margin-right: 5px;
} }
@ -3564,7 +3564,7 @@ a.status-card {
font-size: 16px; font-size: 16px;
color: $dark-text-color; color: $dark-text-color;
.fa { .fas {
display: inline-block; display: inline-block;
margin-right: 5px; margin-right: 5px;
} }
@ -4462,7 +4462,7 @@ a.status-card {
justify-content: center; justify-content: center;
font-size: 26px; font-size: 26px;
.fa { .fas {
display: block; display: block;
} }
} }
@ -4500,7 +4500,7 @@ a.status-card {
display: block; display: block;
} }
.fa { .fas {
color: $dark-text-color; color: $dark-text-color;
} }
} }
@ -5447,7 +5447,7 @@ noscript {
font-size: 16px; font-size: 16px;
cursor: default; cursor: default;
.fa { .fas {
display: inline-block; display: inline-block;
margin-right: 5px; margin-right: 5px;
} }

2
app/javascript/styles/mastodon/forms.scss
View File

@ -656,7 +656,7 @@ code {
} }
} }
.fa { .fas {
font-weight: 400; font-weight: 400;
} }
} }

6
app/javascript/styles/mastodon/rtl.scss
View File

@ -38,7 +38,7 @@ body.rtl {
padding-left: 30px; padding-left: 30px;
} }
.search__icon .fa { .search__icon .fas {
right: auto; right: auto;
left: 10px; left: 10px;
} }
@ -197,7 +197,7 @@ body.rtl {
} }
.admin-wrapper .sidebar ul a i.fa, .admin-wrapper .sidebar ul a i.fa,
a.table-action-link i.fa { a.table-action-link i.fas {
margin-right: 0; margin-right: 0;
margin-left: 5px; margin-left: 5px;
} }
@ -264,7 +264,7 @@ body.rtl {
left: 0; left: 0;
} }
.landing-page .fa-external-link { .landing-page .fa-external-link-alt {
padding-right: 5px; padding-right: 5px;
padding-left: 0 !important; padding-left: 0 !important;
} }

2
app/javascript/styles/mastodon/tables.scss
View File

@ -112,7 +112,7 @@ a.table-action-link {
color: $primary-text-color; color: $primary-text-color;
} }
i.fa { i.fas {
font-weight: 400; font-weight: 400;
margin-right: 5px; margin-right: 5px;
} }

2
app/javascript/styles/mastodon/widgets.scss
View File

@ -196,7 +196,7 @@
&__message { &__message {
margin-bottom: 15px; margin-bottom: 15px;
.fa { .fas {
margin-right: 5px; margin-right: 5px;
color: $darker-text-color; color: $darker-text-color;
} }

2
app/views/about/_links.html.haml
View File

@ -13,4 +13,4 @@
%li %li
= link_to 'https://joinmastodon.org/' do = link_to 'https://joinmastodon.org/' do
= "#{t('about.other_instances')}" = "#{t('about.other_instances')}"
%i.fa.fa-external-link{ style: 'padding-left: 5px;' } %i.fa.fa-external-link-alt{ style: 'padding-left: 5px;' }

2
app/views/stream_entries/_status.html.haml
View File

@ -35,7 +35,7 @@
- elsif pinned - elsif pinned
.status__prepend .status__prepend
.status__prepend-icon-wrapper .status__prepend-icon-wrapper
%i.status__prepend-icon.fa.fa-fw.fa-thumb-tack %i.status__prepend-icon.fa.fa-fw.fa-thumbtack
%span %span
= t('stream_entries.pinned') = t('stream_entries.pinned')

2
spec/helpers/application_helper_spec.rb
View File

@ -55,7 +55,7 @@ describe ApplicationHelper do
describe 'fa_icon' do describe 'fa_icon' do
it 'returns a tag of fixed-width cog' do it 'returns a tag of fixed-width cog' do
expect(helper.fa_icon('cog fw')).to eq '<i class="fa fa-cog fa-fw"></i>' expect(helper.fa_icon('cog fw')).to eq '<i class="fas fa-cog fa-fw"></i>'
end end
end end