bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Replace LineAwesome with Tabler icons in some more places

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2021-12-16 23:05:33 +01:00
parent efe74c3ddd
commit 99e3ec9ff9
8 changed files with 36 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
app/soapbox/features/account_timeline/components/moved_note.js
View file

@ -26,7 +26,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'><Icon id='suitcase' className='account__moved-note__icon' fixedWidth /></div> <div className='account__moved-note__icon-wrapper'><Icon src={require('@tabler/icons/icons/briefcase.svg')} className='account__moved-note__icon' fixedWidth /></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/soapbox/features/compose/components/poll_form.js
View file

@ -178,7 +178,7 @@ class PollForm extends ImmutablePureComponent {
<div className='poll__footer'> <div className='poll__footer'>
{options.size < maxOptions && ( {options.size < maxOptions && (
<button className='button button-secondary' onClick={this.handleAddOption}><Icon id='plus' /> <FormattedMessage {...messages.add_option} /></button> <button className='button button-secondary' onClick={this.handleAddOption}><Icon src={require('@tabler/icons/icons/plus.svg')} /> <FormattedMessage {...messages.add_option} /></button>
)} )}
<select value={expiresIn} onChange={this.handleSelectDuration}> <select value={expiresIn} onChange={this.handleSelectDuration}>

4
app/soapbox/features/edit_profile/index.js
View file

@ -338,7 +338,7 @@ class EditProfile extends ImmutablePureComponent {
onChange={this.handleFieldChange(i, 'value')} onChange={this.handleFieldChange(i, 'value')}
/> />
{ {
this.state.fields.size > 4 && <Icon id='times-circle' onClick={this.handleDeleteField(i)} /> this.state.fields.size > 4 && <Icon className='delete-field' src={require('@tabler/icons/icons/circle-x.svg')} onClick={this.handleDeleteField(i)} />
} }
</div> </div>
)) ))
@ -347,7 +347,7 @@ class EditProfile extends ImmutablePureComponent {
this.state.fields.size < maxFields && ( this.state.fields.size < maxFields && (
<div className='actions add-row'> <div className='actions add-row'>
<div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddField}> <div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddField}>
<Icon id='plus-circle' /> <Icon src={require('@tabler/icons/icons/circle-plus.svg')} />
<FormattedMessage id='edit_profile.meta_fields.add' defaultMessage='Add new item' /> <FormattedMessage id='edit_profile.meta_fields.add' defaultMessage='Add new item' />
</div> </div>
</div> </div>

2
app/soapbox/features/notifications/components/clear_column_button.js
View file

@ -11,7 +11,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}><Icon id='eraser' /> <FormattedMessage id='notifications.clear' defaultMessage='Clear notifications' /></button> <button className='text-btn column-header__setting-btn' tabIndex='0' onClick={this.props.onClick}><Icon src={require('@tabler/icons/icons/eraser.svg')} /> <FormattedMessage id='notifications.clear' defaultMessage='Clear notifications' /></button>
); );
} }

12
app/soapbox/features/soapbox_config/index.js
View file

@ -318,13 +318,13 @@ class SoapboxConfig extends ImmutablePureComponent {
value={field.get('url')} value={field.get('url')}
onChange={this.handlePromoItemChange(i, 'url', field)} onChange={this.handlePromoItemChange(i, 'url', field)}
/> />
<Icon id='times-circle' onClick={this.handleDeleteItem(['promoPanel', 'items', i])} /> <Icon className='delete-field' src={require('@tabler/icons/icons/circle-x.svg')} onClick={this.handleDeleteItem(['promoPanel', 'items', i])} />
</div> </div>
)) ))
} }
<div className='actions add-row'> <div className='actions add-row'>
<div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['promoPanel', 'items'], templates.promoPanelItem)}> <div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['promoPanel', 'items'], templates.promoPanelItem)}>
<Icon id='plus-circle' /> <Icon src={require('@tabler/icons/icons/circle-plus.svg')} />
<FormattedMessage id='soapbox_config.fields.promo_panel.add' defaultMessage='Add new Promo panel item' /> <FormattedMessage id='soapbox_config.fields.promo_panel.add' defaultMessage='Add new Promo panel item' />
</div> </div>
</div> </div>
@ -351,13 +351,13 @@ class SoapboxConfig extends ImmutablePureComponent {
value={field.get('url')} value={field.get('url')}
onChange={this.handleHomeFooterItemChange(i, 'url', field)} onChange={this.handleHomeFooterItemChange(i, 'url', field)}
/> />
<Icon id='times-circle' onClick={this.handleDeleteItem(['navlinks', 'homeFooter', i])} /> <Icon className='delete-field' src={require('@tabler/icons/icons/circle-x.svg')} onClick={this.handleDeleteItem(['navlinks', 'homeFooter', i])} />
</div> </div>
)) ))
} }
<div className='actions add-row'> <div className='actions add-row'>
<div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['navlinks', 'homeFooter'], templates.footerItem)}> <div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['navlinks', 'homeFooter'], templates.footerItem)}>
<Icon id='plus-circle' /> <Icon src={require('@tabler/icons/icons/circle-plus.svg')} />
<FormattedMessage id='soapbox_config.fields.home_footer.add' defaultMessage='Add new Home Footer Item' /> <FormattedMessage id='soapbox_config.fields.home_footer.add' defaultMessage='Add new Home Footer Item' />
</div> </div>
</div> </div>
@ -390,13 +390,13 @@ class SoapboxConfig extends ImmutablePureComponent {
value={address.get('note')} value={address.get('note')}
onChange={this.handleCryptoAdressItemChange(i, 'note', address)} onChange={this.handleCryptoAdressItemChange(i, 'note', address)}
/> />
<Icon id='times-circle' onClick={this.handleDeleteItem(['cryptoAddresses', i])} /> <Icon className='delete-field' src={require('@tabler/icons/icons/circle-x.svg')} onClick={this.handleDeleteItem(['cryptoAddresses', i])} />
</div> </div>
)) ))
} }
<div className='actions add-row'> <div className='actions add-row'>
<div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['cryptoAddresses'], templates.cryptoAddress)}> <div name='button' type='button' role='presentation' className='btn button button-secondary' onClick={this.handleAddItem(['cryptoAddresses'], templates.cryptoAddress)}>
<Icon id='plus-circle' /> <Icon src={require('@tabler/icons/icons/circle-plus.svg')} />
<FormattedMessage id='soapbox_config.fields.crypto_address.add' defaultMessage='Add new crypto address' /> <FormattedMessage id='soapbox_config.fields.crypto_address.add' defaultMessage='Add new crypto address' />
</div> </div>
</div> </div>

2
app/soapbox/features/ui/components/trends_panel.js
View file

@ -35,7 +35,7 @@ class TrendsPanel extends ImmutablePureComponent {
return ( return (
<div className='wtf-panel'> <div className='wtf-panel'>
<div className='wtf-panel-header'> <div className='wtf-panel-header'>
<Icon id='hashtag' className='wtf-panel-header__icon' /> <Icon src={require('@tabler/icons/icons/hash.svg')} className='wtf-panel-header__icon' />
<span className='wtf-panel-header__label'> <span className='wtf-panel-header__label'>
<FormattedMessage id='trends.title' defaultMessage='Trends' /> <FormattedMessage id='trends.title' defaultMessage='Trends' />
</span> </span>

9
app/styles/components/columns.scss
View file

@ -746,6 +746,15 @@
.column-settings__row { .column-settings__row {
.text-btn { .text-btn {
margin-bottom: 15px; margin-bottom: 15px;
&.column-header__setting-btn {
display: flex;
align-items: center;
.svg-icon {
margin-right: 10px;
}
}
} }
} }

21
app/styles/forms.scss
View file

@ -741,17 +741,19 @@ code {
} }
} }
.input .row > .fa-times-circle { .input .row > .svg-icon.delete-field {
height: 20px;
width: 20px;
position: absolute; position: absolute;
right: 15px; right: 13px;
cursor: pointer; cursor: pointer;
color: $error-red; color: $error-red;
transform: translateY(-9px); transform: translateY(-11px);
} }
.input .row > .input.with_label + .fa-times-circle { .input .row > .input.with_label + .svg-icon.delete-field {
right: 7px; right: 5px;
transform: translateY(9px); transform: translateY(7px);
} }
.site-preview { .site-preview {
@ -798,12 +800,19 @@ code {
margin: 10px 0 0; margin: 10px 0 0;
.button { .button {
display: flex;
align-items: center;
border: 0; border: 0;
background: transparent; background: transparent;
&:hover { &:hover {
color: var(--primary-text-color); color: var(--primary-text-color);
} }
.svg-icon {
height: 20px;
width: 20px;
}
} }
} }