@@ -55,7 +55,7 @@ module ApplicationHelper | |||
def fa_icon(icon, attributes = {}) | |||
class_names = attributes[:class]&.split(' ') || [] | |||
class_names << 'fa' | |||
class_names << 'fas' | |||
class_names += icon.split(' ').map { |cl| "fa-#{cl}" } | |||
content_tag(:i, nil, attributes.merge(class: class_names.join(' '))) | |||
@@ -15,7 +15,7 @@ exports[`<Avatar /> Autoplay renders a animated avatar 1`] = ` | |||
} | |||
> | |||
<i | |||
className="fa fa-fw fa-robot bot-icon" | |||
className="fas fa-fw fa-robot bot-icon" | |||
/> | |||
</div> | |||
`; | |||
@@ -35,7 +35,7 @@ exports[`<Avatar /> Still renders a still avatar 1`] = ` | |||
} | |||
> | |||
<i | |||
className="fa fa-fw fa-robot bot-icon" | |||
className="fas fa-fw fa-robot bot-icon" | |||
/> | |||
</div> | |||
`; |
@@ -24,7 +24,7 @@ export default class AttachmentList extends ImmutablePureComponent { | |||
return ( | |||
<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> | |||
); | |||
})} | |||
@@ -36,7 +36,7 @@ export default class AttachmentList extends ImmutablePureComponent { | |||
return ( | |||
<div className='attachment-list'> | |||
<div className='attachment-list__icon'> | |||
<i className='fa fa-link' /> | |||
<i className='fas fa-link' /> | |||
</div> | |||
<ul className='attachment-list__list'> | |||
@@ -13,7 +13,7 @@ export default class BotIcon extends ImmutablePureComponent { | |||
if (account.get('bot')) { | |||
return ( | |||
<i className='fa fa-fw fa-robot bot-icon' /> | |||
<i className='fas fa-fw fa-robot bot-icon' /> | |||
); | |||
} | |||
@@ -19,7 +19,7 @@ export default class ColumnBackButton extends React.PureComponent { | |||
render () { | |||
return ( | |||
<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' /> | |||
</button> | |||
); | |||
@@ -8,7 +8,7 @@ export default class ColumnBackButtonSlim extends ColumnBackButton { | |||
return ( | |||
<div className='column-back-button--slim'> | |||
<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' /> | |||
</div> | |||
</div> | |||
@@ -95,22 +95,22 @@ class ColumnHeader extends React.PureComponent { | |||
} | |||
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 = ( | |||
<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.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.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='fas fa-chevron-right' /></button> | |||
</div> | |||
); | |||
} 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)) { | |||
backButton = ( | |||
<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' /> | |||
</button> | |||
); | |||
@@ -126,7 +126,7 @@ class ColumnHeader extends React.PureComponent { | |||
} | |||
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; | |||
@@ -136,7 +136,7 @@ class ColumnHeader extends React.PureComponent { | |||
<h1 className={buttonClassName}> | |||
{hasTitle && ( | |||
<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} | |||
</button> | |||
)} | |||
@@ -86,7 +86,7 @@ export default class IconButton extends React.PureComponent { | |||
style={style} | |||
tabIndex={tabIndex} | |||
> | |||
<i className={`fa fa-fw fa-${icon}`} aria-hidden='true' /> | |||
<i className={`fas fa-fw fa-${icon}`} aria-hidden='true' /> | |||
</button> | |||
); | |||
} | |||
@@ -104,7 +104,7 @@ export default class IconButton extends React.PureComponent { | |||
style={style} | |||
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> | |||
)} | |||
</Motion> | |||
@@ -25,7 +25,7 @@ class LoadGap extends React.PureComponent { | |||
return ( | |||
<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> | |||
); | |||
} | |||
@@ -193,7 +193,7 @@ class Status extends ImmutablePureComponent { | |||
if (featured) { | |||
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' /> | |||
</div> | |||
); | |||
@@ -202,7 +202,7 @@ class Status extends ImmutablePureComponent { | |||
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> }} /> | |||
</div> | |||
); | |||
@@ -150,7 +150,7 @@ class Header extends ImmutablePureComponent { | |||
} | |||
if (account.get('locked')) { | |||
lockedIcon = <i className='fa fa-lock' />; | |||
lockedIcon = <i className='fas fa-lock' />; | |||
} | |||
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')} /> | |||
<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> | |||
</dl> | |||
))} | |||
@@ -33,7 +33,7 @@ export default class MovedNote extends ImmutablePureComponent { | |||
return ( | |||
<div className='account__moved-note'> | |||
<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> }} /> | |||
</div> | |||
@@ -160,7 +160,7 @@ class ComposeForm extends ImmutablePureComponent { | |||
let publishText = ''; | |||
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 { | |||
publishText = this.props.privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish); | |||
} | |||
@@ -132,7 +132,7 @@ class PrivacyDropdownMenu extends React.PureComponent { | |||
{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 className='privacy-dropdown__option__icon'> | |||
<i className={`fa fa-fw fa-${item.icon}`} /> | |||
<i className={`fas fa-fw fa-${item.icon}`} /> | |||
</div> | |||
<div className='privacy-dropdown__option__content'> | |||
@@ -116,8 +116,8 @@ class Search extends React.PureComponent { | |||
</label> | |||
<div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}> | |||
<i className={`fa fa-search ${hasValue ? '' : 'active'}`} /> | |||
<i aria-label={intl.formatMessage(messages.placeholder)} className={`fa fa-times-circle ${hasValue ? 'active' : ''}`} /> | |||
<i className={`fas fa-search ${hasValue ? '' : 'active'}`} /> | |||
<i aria-label={intl.formatMessage(messages.placeholder)} className={`fas fa-times-circle ${hasValue ? 'active' : ''}`} /> | |||
</div> | |||
<Overlay show={expanded && !hasValue} placement='bottom' target={this}> | |||
@@ -22,7 +22,7 @@ export default class SearchResults extends ImmutablePureComponent { | |||
count += results.get('accounts').size; | |||
accounts = ( | |||
<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} />)} | |||
</div> | |||
@@ -33,7 +33,7 @@ export default class SearchResults extends ImmutablePureComponent { | |||
count += results.get('statuses').size; | |||
statuses = ( | |||
<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} />)} | |||
</div> | |||
@@ -44,7 +44,7 @@ export default class SearchResults extends ImmutablePureComponent { | |||
count += results.get('hashtags').size; | |||
hashtags = ( | |||
<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} />)} | |||
</div> | |||
@@ -54,7 +54,7 @@ export default class SearchResults extends ImmutablePureComponent { | |||
return ( | |||
<div className='search-results'> | |||
<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 }} /> | |||
</div> | |||
@@ -89,8 +89,8 @@ class Upload extends ImmutablePureComponent { | |||
{({ scale }) => ( | |||
<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 })}> | |||
<button className='icon-button' onClick={this.handleUndoClick}><i className='fa 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>} | |||
<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='fas fa-crosshairs' /> <FormattedMessage id='upload_form.focus' defaultMessage='Crop' /></button>} | |||
</div> | |||
<div className={classNames('compose-form__upload-description', { active })}> | |||
@@ -21,7 +21,7 @@ export default class UploadProgress extends React.PureComponent { | |||
return ( | |||
<div className='upload-progress'> | |||
<div className='upload-progress__icon'> | |||
<i className='fa fa-upload' /> | |||
<i className='fas fa-upload' /> | |||
</div> | |||
<div className='upload-progress__message'> | |||
@@ -76,21 +76,21 @@ class Compose extends React.PureComponent { | |||
const { columns } = this.props; | |||
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') && ( | |||
<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') && ( | |||
<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') && ( | |||
<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') && ( | |||
<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='/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='/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='fas fa-fw fa-sign-out-alt' /></a> | |||
</nav> | |||
); | |||
} | |||
@@ -120,7 +120,7 @@ class GettingStarted extends ImmutablePureComponent { | |||
{multiColumn && <div className='column-header__wrapper'> | |||
<h1 className='column-header'> | |||
<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' /> | |||
</button> | |||
</h1> | |||
@@ -65,8 +65,8 @@ class Search extends React.PureComponent { | |||
</label> | |||
<div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}> | |||
<i className={classNames('fa fa-search', { active: !hasValue })} /> | |||
<i aria-label={intl.formatMessage(messages.search)} className={classNames('fa fa-times-circle', { active: hasValue })} /> | |||
<i className={classNames('fas fa-search', { active: !hasValue })} /> | |||
<i aria-label={intl.formatMessage(messages.search)} className={classNames('fas fa-times-circle', { active: hasValue })} /> | |||
</div> | |||
</div> | |||
); | |||
@@ -150,11 +150,11 @@ class ListTimeline extends React.PureComponent { | |||
> | |||
<div className='column-header__links'> | |||
<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 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> | |||
</div> | |||
@@ -10,7 +10,7 @@ export default class ClearColumnButton extends React.PureComponent { | |||
render () { | |||
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> | |||
); | |||
} | |||
@@ -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__message'> | |||
<div className='notification__favourite-icon-wrapper'> | |||
<i className='fa fa-fw fa-user-plus' /> | |||
<i className='fas fa-fw fa-user-plus' /> | |||
</div> | |||
<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__message'> | |||
<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> | |||
<FormattedMessage id='notification.favourite' defaultMessage='{name} favourited your status' values={{ name: link }} /> | |||
</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__message'> | |||
<div className='notification__favourite-icon-wrapper'> | |||
<i className='fa fa-fw fa-retweet' /> | |||
<i className='fas fa-fw fa-retweet' /> | |||
</div> | |||
<FormattedMessage id='notification.reblog' defaultMessage='{name} boosted your status' values={{ name: link }} /> | |||
</div> | |||
@@ -46,7 +46,7 @@ class PinnedStatuses extends ImmutablePureComponent { | |||
const { intl, shouldUpdateScroll, statusIds, hasMore } = this.props; | |||
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 /> | |||
<StatusList | |||
statusIds={statusIds} | |||
@@ -173,8 +173,8 @@ export default class Card extends React.PureComponent { | |||
<div className='status-card__actions'> | |||
<div> | |||
<button onClick={this.handleEmbedClick}><i className={`fa fa-${iconVariant}`} /></button> | |||
<a href={card.get('url')} target='_blank' rel='noopener'><i className='fa fa-external-link' /></a> | |||
<button onClick={this.handleEmbedClick}><i className={`fas fa-${iconVariant}`} /></button> | |||
<a href={card.get('url')} target='_blank' rel='noopener'><i className='fas fa-external-link-alt' /></a> | |||
</div> | |||
</div> | |||
</div> | |||
@@ -94,10 +94,10 @@ export default class DetailedStatus extends ImmutablePureComponent { | |||
} | |||
if (status.get('visibility') === 'private') { | |||
reblogLink = <i className={`fa fa-${reblogIcon}`} />; | |||
reblogLink = <i className={`fas fa-${reblogIcon}`} />; | |||
} else { | |||
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'> | |||
<FormattedNumber value={status.get('reblogs_count')} /> | |||
</span> | |||
@@ -119,7 +119,7 @@ export default class DetailedStatus extends ImmutablePureComponent { | |||
<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' /> | |||
</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'> | |||
<FormattedNumber value={status.get('favourites_count')} /> | |||
</span> | |||
@@ -410,7 +410,7 @@ class Status extends ImmutablePureComponent { | |||
<ColumnHeader | |||
showBackButton | |||
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> | |||
)} | |||
/> | |||
@@ -74,7 +74,7 @@ class BoostModal extends ImmutablePureComponent { | |||
</div> | |||
<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} /> | |||
</div> | |||
</div> | |||
@@ -21,7 +21,7 @@ export default class ColumnHeader extends React.PureComponent { | |||
let iconElement = ''; | |||
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 ( | |||
@@ -8,7 +8,7 @@ const ColumnLink = ({ icon, text, to, href, method, badge }) => { | |||
if (href) { | |||
return ( | |||
<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} | |||
{badgeElement} | |||
</a> | |||
@@ -16,7 +16,7 @@ const ColumnLink = ({ icon, text, to, href, method, badge }) => { | |||
} else { | |||
return ( | |||
<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} | |||
{badgeElement} | |||
</Link> | |||
@@ -160,7 +160,7 @@ class ColumnsArea extends ImmutablePureComponent { | |||
this.pendingIndex = null; | |||
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 ? [ | |||
<ReactSwipeableViews key='content' index={columnIndex} onChangeIndex={this.handleSwipe} onTransitionEnd={this.handleAnimationEnd} animateTransitions={shouldAnimate} springConfig={{ duration: '400ms', delay: '0s', easeFunction: 'ease' }} style={{ height: '100%' }}> | |||
@@ -108,8 +108,8 @@ class MediaModal extends ImmutablePureComponent { | |||
const index = this.getIndex(); | |||
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 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 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='fas fa-fw fa-chevron-right' /></button>; | |||
if (media.size > 1) { | |||
pagination = media.map((item, i) => { | |||
@@ -262,11 +262,11 @@ class OnboardingModal extends React.PureComponent { | |||
const nextOrDoneBtn = hasMore ? ( | |||
<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 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> | |||
); | |||
@@ -6,14 +6,14 @@ import { debounce } from 'lodash'; | |||
import { isUserTouching } from '../../../is_mobile'; | |||
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='/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='/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='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' 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 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 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='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='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) { | |||
@@ -353,10 +353,10 @@ class Video extends React.PureComponent { | |||
<div className='video-player__buttons-bar'> | |||
<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(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(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('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) && | |||
<span> | |||
@@ -368,9 +368,9 @@ class Video extends React.PureComponent { | |||
</div> | |||
<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>} | |||
{onCloseVideo && <button type='button' aria-label={intl.formatMessage(messages.close)} onClick={this.handleCloseVideo}><i className='fa 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> | |||
{(!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='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('fas fa-fw', { 'fa-arrows-alt': !fullscreen, 'fa-compress': fullscreen })} /></button> | |||
</div> | |||
</div> | |||
</div> | |||
@@ -1113,7 +1113,7 @@ $small-breakpoint: 960px; | |||
align-items: center; | |||
margin-left: 15px; | |||
.fa { | |||
.fas { | |||
display: block; | |||
color: $darker-text-color; | |||
font-size: 48px; | |||
@@ -136,7 +136,7 @@ | |||
float: left; | |||
padding-left: 0; | |||
.fa { | |||
.fas { | |||
display: inline-block; | |||
margin-right: 5px; | |||
} | |||
@@ -146,7 +146,7 @@ | |||
float: right; | |||
padding-right: 0; | |||
.fa { | |||
.fas { | |||
display: inline-block; | |||
margin-left: 5px; | |||
} | |||
@@ -50,7 +50,7 @@ $no-columns-breakpoint: 600px; | |||
transition: all 200ms linear; | |||
border-radius: 4px 0 0 4px; | |||
i.fa { | |||
i.fas { | |||
margin-right: 5px; | |||
} | |||
@@ -675,7 +675,7 @@ | |||
&:hover { | |||
text-decoration: underline; | |||
.fa { | |||
.fas { | |||
color: lighten($dark-text-color, 7%); | |||
} | |||
} | |||
@@ -690,7 +690,7 @@ | |||
} | |||
} | |||
.fa { | |||
.fas { | |||
color: $dark-text-color; | |||
} | |||
} | |||
@@ -1496,7 +1496,7 @@ a.account__display-name { | |||
font-size: 15px; | |||
position: relative; | |||
.fa { | |||
.fas { | |||
color: $highlight-text-color; | |||
} | |||
@@ -2044,7 +2044,7 @@ a.account__display-name { | |||
border-bottom: 2px solid lighten($ui-base-color, 8%); | |||
transition: all 50ms linear; | |||
.fa { | |||
.fas { | |||
font-weight: 400; | |||
font-size: 16px; | |||
} | |||
@@ -3274,7 +3274,7 @@ a.status-card { | |||
overflow: hidden; | |||
display: flex; | |||
.fa { | |||
.fas { | |||
font-size: 34px; | |||
margin-right: 10px; | |||
} | |||
@@ -3491,7 +3491,7 @@ a.status-card { | |||
outline: 0 !important; | |||
} | |||
.fa { | |||
.fas { | |||
position: absolute; | |||
top: 10px; | |||
right: 10px; | |||
@@ -3545,7 +3545,7 @@ a.status-card { | |||
font-size: 16px; | |||
cursor: default; | |||
.fa { | |||
.fas { | |||
display: inline-block; | |||
margin-right: 5px; | |||
} | |||
@@ -3564,7 +3564,7 @@ a.status-card { | |||
font-size: 16px; | |||
color: $dark-text-color; | |||
.fa { | |||
.fas { | |||
display: inline-block; | |||
margin-right: 5px; | |||
} | |||
@@ -4462,7 +4462,7 @@ a.status-card { | |||
justify-content: center; | |||
font-size: 26px; | |||
.fa { | |||
.fas { | |||
display: block; | |||
} | |||
} | |||
@@ -4500,7 +4500,7 @@ a.status-card { | |||
display: block; | |||
} | |||
.fa { | |||
.fas { | |||
color: $dark-text-color; | |||
} | |||
} | |||
@@ -5447,7 +5447,7 @@ noscript { | |||
font-size: 16px; | |||
cursor: default; | |||
.fa { | |||
.fas { | |||
display: inline-block; | |||
margin-right: 5px; | |||
} | |||
@@ -656,7 +656,7 @@ code { | |||
} | |||
} | |||
.fa { | |||
.fas { | |||
font-weight: 400; | |||
} | |||
} | |||
@@ -38,7 +38,7 @@ body.rtl { | |||
padding-left: 30px; | |||
} | |||
.search__icon .fa { | |||
.search__icon .fas { | |||
right: auto; | |||
left: 10px; | |||
} | |||
@@ -197,7 +197,7 @@ body.rtl { | |||
} | |||
.admin-wrapper .sidebar ul a i.fa, | |||
a.table-action-link i.fa { | |||
a.table-action-link i.fas { | |||
margin-right: 0; | |||
margin-left: 5px; | |||
} | |||
@@ -264,7 +264,7 @@ body.rtl { | |||
left: 0; | |||
} | |||
.landing-page .fa-external-link { | |||
.landing-page .fa-external-link-alt { | |||
padding-right: 5px; | |||
padding-left: 0 !important; | |||
} | |||
@@ -112,7 +112,7 @@ a.table-action-link { | |||
color: $primary-text-color; | |||
} | |||
i.fa { | |||
i.fas { | |||
font-weight: 400; | |||
margin-right: 5px; | |||
} | |||
@@ -196,7 +196,7 @@ | |||
&__message { | |||
margin-bottom: 15px; | |||
.fa { | |||
.fas { | |||
margin-right: 5px; | |||
color: $darker-text-color; | |||
} | |||
@@ -13,4 +13,4 @@ | |||
%li | |||
= link_to 'https://joinmastodon.org/' do | |||
= "#{t('about.other_instances')}" | |||
%i.fa.fa-external-link{ style: 'padding-left: 5px;' } | |||
%i.fa.fa-external-link-alt{ style: 'padding-left: 5px;' } |
@@ -35,7 +35,7 @@ | |||
- elsif pinned | |||
.status__prepend | |||
.status__prepend-icon-wrapper | |||
%i.status__prepend-icon.fa.fa-fw.fa-thumb-tack | |||
%i.status__prepend-icon.fa.fa-fw.fa-thumbtack | |||
%span | |||
= t('stream_entries.pinned') | |||
@@ -55,7 +55,7 @@ describe ApplicationHelper do | |||
describe 'fa_icon' 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 | |||