moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Replace a lot more icons with SVG icons

This commit is contained in:
Alex Gleason 2021-09-27 20:47:44 -05:00
parent 54ec139bfc
commit f23a6b0890
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
14 changed files with 81 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/soapbox/components/media_gallery.js
View File

@ -582,7 +582,7 @@ class MediaGallery extends React.PureComponent {
let spoilerButton; let spoilerButton;
if (visible) { if (visible) {
spoilerButton = <IconButton title={intl.formatMessage(messages.toggle_visible)} icon='eye-slash' overlay onClick={this.handleOpen} />; spoilerButton = <IconButton title={intl.formatMessage(messages.toggle_visible)} src={require('@tabler/icons/icons/eye-off.svg')} overlay onClick={this.handleOpen} />;
} else { } else {
spoilerButton = ( spoilerButton = (
<button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'> <button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'>

2
app/soapbox/features/chats/components/audio_toggle.js
View File

@ -50,7 +50,7 @@ class AudioToggle extends React.PureComponent {
id={id} id={id}
checked={checked} checked={checked}
onChange={this.handleToggleAudio} onChange={this.handleToggleAudio}
icons={{ checked: <Icon id='volume-up' />, unchecked: <Icon id='volume-off' /> }} icons={{ checked: <Icon src={require('@tabler/icons/icons/volume.svg')} />, unchecked: <Icon src={require('@tabler/icons/icons/volume-3.svg')} /> }}
onKeyDown={this.onKeyDown} onKeyDown={this.onKeyDown}
/> />
{showLabel && (<label htmlFor={id} className='setting-toggle__label'>{label}</label>)} {showLabel && (<label htmlFor={id} className='setting-toggle__label'>{label}</label>)}

2
app/soapbox/features/chats/components/chat_window.js
View File

@ -117,7 +117,7 @@ class ChatWindow extends ImmutablePureComponent {
@{getAcct(account, displayFqn)} @{getAcct(account, displayFqn)}
</button> </button>
<div className='pane__close'> <div className='pane__close'>
<IconButton icon='times' title='Close chat' onClick={this.handleChatClose(chat.get('id'))} /> <IconButton src={require('@tabler/icons/icons/x.svg')} title='Close chat' onClick={this.handleChatClose(chat.get('id'))} />
</div> </div>
</div> </div>
<div className='pane__content'> <div className='pane__content'>

5
app/soapbox/features/compose/components/search.js
View File

@ -5,6 +5,7 @@ import Overlay from 'react-overlays/lib/Overlay';
import Motion from '../../ui/util/optional_motion'; import Motion from '../../ui/util/optional_motion';
import spring from 'react-motion/lib/spring'; import spring from 'react-motion/lib/spring';
import Icon from 'soapbox/components/icon'; import Icon from 'soapbox/components/icon';
import classNames from 'classnames';
const messages = defineMessages({ const messages = defineMessages({
placeholder: { id: 'search.placeholder', defaultMessage: 'Search' }, placeholder: { id: 'search.placeholder', defaultMessage: 'Search' },
@ -119,8 +120,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}>
<Icon id='search' className={hasValue ? '' : 'active'} /> <Icon src={require('@tabler/icons/icons/search.svg')} className={classNames('svg-icon--search', { active: !hasValue })} />
<Icon id='times-circle' className={hasValue ? 'active' : ''} aria-label={intl.formatMessage(messages.placeholder)} /> <Icon src={require('@tabler/icons/icons/backspace.svg')} className={classNames('svg-icon--backspace', { active: hasValue })} aria-label={intl.formatMessage(messages.placeholder)} />
</div> </div>
<Overlay show={expanded && !hasValue} placement='bottom' target={this}> <Overlay show={expanded && !hasValue} placement='bottom' target={this}>
<SearchPopout /> <SearchPopout />

7
app/soapbox/features/ui/components/compose_modal.js
View File

@ -56,7 +56,12 @@ class ComposeModal extends ImmutablePureComponent {
<h3 className='compose-modal__header__title'> <h3 className='compose-modal__header__title'>
<FormattedMessage id='navigation_bar.compose' defaultMessage='Compose new post' /> <FormattedMessage id='navigation_bar.compose' defaultMessage='Compose new post' />
</h3> </h3>
<IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} /> <IconButton
className='compose-modal__close'
title={intl.formatMessage(messages.close)}
src={require('@tabler/icons/icons/x.svg')}
onClick={this.onClickClose} size={20}
/>
</div> </div>
<div className='compose-modal__content compose-modal__content--scroll'> <div className='compose-modal__content compose-modal__content--scroll'>
<ComposeFormContainer /> <ComposeFormContainer />

16
app/soapbox/features/ui/components/features_panel.js
View File

@ -53,49 +53,49 @@ class FeaturesPanel extends React.PureComponent {
<div className='promo-panel__container'> <div className='promo-panel__container'>
<NavLink className='promo-panel-item' to='/settings/profile'> <NavLink className='promo-panel-item' to='/settings/profile'>
<Icon id='user' className='promo-panel-item__icon' fixedWidth /> <Icon src={require('@tabler/icons/icons/user.svg')} className='promo-panel-item__icon' />
{intl.formatMessage(messages.edit_profile)} {intl.formatMessage(messages.edit_profile)}
</NavLink> </NavLink>
{(isLocked || followRequestsCount > 0) && <NavLink className='promo-panel-item' to='/follow_requests'> {(isLocked || followRequestsCount > 0) && <NavLink className='promo-panel-item' to='/follow_requests'>
<IconWithCounter icon='user-plus' count={followRequestsCount} fixedWidth /> <IconWithCounter src={require('@tabler/icons/icons/user-plus.svg')} count={followRequestsCount} className='promo-panel-item__icon' />
{intl.formatMessage(messages.follow_requests)} {intl.formatMessage(messages.follow_requests)}
</NavLink>} </NavLink>}
{features.bookmarks && ( {features.bookmarks && (
<NavLink className='promo-panel-item' to='/bookmarks'> <NavLink className='promo-panel-item' to='/bookmarks'>
<Icon id='bookmark' className='promo-panel-item__icon' fixedWidth /> <Icon src={require('@tabler/icons/icons/bookmark.svg')} className='promo-panel-item__icon' />
{intl.formatMessage(messages.bookmarks)} {intl.formatMessage(messages.bookmarks)}
</NavLink> </NavLink>
)} )}
{features.lists && ( {features.lists && (
<NavLink className='promo-panel-item' to='/lists'> <NavLink className='promo-panel-item' to='/lists'>
<Icon id='list' className='promo-panel-item__icon' fixedWidth /> <Icon src={require('@tabler/icons/icons/list.svg')} className='promo-panel-item__icon' />
{intl.formatMessage(messages.lists)} {intl.formatMessage(messages.lists)}
</NavLink> </NavLink>
)} )}
{features.securityAPI ? ( {features.securityAPI ? (
<NavLink className='promo-panel-item' to='/auth/edit'> <NavLink className='promo-panel-item' to='/auth/edit'>
<Icon id='lock' className='promo-panel-item__icon' fixedWidth /> <Icon src={require('@tabler/icons/icons/lock.svg')} className='promo-panel-item__icon' />
{intl.formatMessage(messages.security)} {intl.formatMessage(messages.security)}
</NavLink> </NavLink>
) : ( ) : (
<a className='promo-panel-item' href={`${baseURL}/auth/edit`}> <a className='promo-panel-item' href={`${baseURL}/auth/edit`}>
<Icon id='lock' className='promo-panel-item__icon' fixedWidth /> <Icon src={require('@tabler/icons/icons/lock.svg')} className='promo-panel-item__icon' />
{intl.formatMessage(messages.security)} {intl.formatMessage(messages.security)}
</a> </a>
)} )}
{features.settingsStore ? ( {features.settingsStore ? (
<NavLink className='promo-panel-item' to='/settings/preferences'> <NavLink className='promo-panel-item' to='/settings/preferences'>
<Icon id='cog' className='promo-panel-item__icon' fixedWidth /> <Icon src={require('@tabler/icons/icons/settings.svg')} className='promo-panel-item__icon' />
{intl.formatMessage(messages.preferences)} {intl.formatMessage(messages.preferences)}
</NavLink> </NavLink>
) : ( ) : (
<a className='promo-panel-item' href={`${baseURL}/settings/preferences`}> <a className='promo-panel-item' href={`${baseURL}/settings/preferences`}>
<Icon id='cog' className='promo-panel-item__icon' fixedWidth /> <Icon src={require('@tabler/icons/icons/settings.svg')} className='promo-panel-item__icon' />
{intl.formatMessage(messages.preferences)} {intl.formatMessage(messages.preferences)}
</a> </a>
)} )}

3
app/soapbox/features/ui/components/funding_panel.js
View File

@ -5,6 +5,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
import ProgressBar from '../../../components/progress_bar'; import ProgressBar from '../../../components/progress_bar';
import { fetchPatronInstance } from 'soapbox/actions/patron'; import { fetchPatronInstance } from 'soapbox/actions/patron';
import { Map as ImmutableMap } from 'immutable'; import { Map as ImmutableMap } from 'immutable';
import Icon from 'soapbox/components/icon';
const moneyFormat = amount => ( const moneyFormat = amount => (
new Intl new Intl
@ -41,7 +42,7 @@ class FundingPanel extends ImmutablePureComponent {
return ( return (
<div className='wtf-panel funding-panel'> <div className='wtf-panel funding-panel'>
<div className='wtf-panel-header'> <div className='wtf-panel-header'>
<i role='img' alt='users' className='fa fa-chart-line wtf-panel-header__icon' /> <Icon src={require('@tabler/icons/icons/chart-line.svg')} className='wtf-panel-header__icon' />
<span className='wtf-panel-header__label'> <span className='wtf-panel-header__label'>
<span>Funding Goal</span> <span>Funding Goal</span>
</span> </span>

2
app/soapbox/features/ui/components/theme_toggle.js
View File

@ -35,7 +35,7 @@ export default class ThemeToggle extends ImmutablePureComponent {
id={id} id={id}
checked={themeMode === 'light'} checked={themeMode === 'light'}
onChange={this.handleToggleTheme} onChange={this.handleToggleTheme}
icons={{ checked: <Icon id='sun' />, unchecked: <Icon id='moon' /> }} icons={{ checked: <Icon src={require('@tabler/icons/icons/sun.svg')} />, unchecked: <Icon src={require('@tabler/icons/icons/moon.svg')} /> }}
onKeyDown={this.onKeyDown} onKeyDown={this.onKeyDown}
/> />
{showLabel && (<label htmlFor={id} className='setting-toggle__label'>{label}</label>)} {showLabel && (<label htmlFor={id} className='setting-toggle__label'>{label}</label>)}

22
app/styles/chats.scss
View File

@ -55,17 +55,25 @@
} }
.icon-button { .icon-button {
color: #fff; opacity: 0.7;
&:hover {
opacity: 1;
}
> div { > div {
height: auto !important;
width: auto !important;
margin-right: -6px; margin-right: -6px;
} }
} }
.pane__close { .pane__close {
margin-left: auto; margin-left: auto;
.svg-icon {
width: 18px;
height: 18px;
transform: translateY(2px);
}
} }
.icon-with-badge__badge { .icon-with-badge__badge {
@ -113,8 +121,8 @@
} }
.audio-toggle .react-toggle-track-check { .audio-toggle .react-toggle-track-check {
left: 4px; left: 2px;
bottom: 4px; bottom: 5px;
} }
.react-toggle--checked .react-toggle-thumb { .react-toggle--checked .react-toggle-thumb {
@ -122,8 +130,8 @@
} }
.audio-toggle .react-toggle-track-x { .audio-toggle .react-toggle-track-x {
right: 4px; right: 8px;
bottom: 4px; bottom: 5px;
} }
.fa { .fa {

5
app/styles/components/modal.scss
View File

@ -708,6 +708,11 @@
right: 10px; right: 10px;
right: max(10px, env(safe-area-inset-right)); right: max(10px, env(safe-area-inset-right));
color: var(--primary-text-color--faint); color: var(--primary-text-color--faint);
.svg-icon {
width: 24px;
height: 24px;
}
} }
&__content { &__content {

9
app/styles/components/promo-panel.scss
View File

@ -35,4 +35,13 @@
margin-right: 12px; margin-right: 12px;
font-size: 20px; font-size: 20px;
} }
.svg-icon {
width: 24px;
height: 24px;
svg {
stroke-width: 1.3px;
}
}
} }

17
app/styles/components/search.scss
View File

@ -36,7 +36,6 @@
outline: 0 !important; outline: 0 !important;
} }
.fa,
.svg-icon { .svg-icon {
@include font-size(16); @include font-size(16);
cursor: default; cursor: default;
@ -56,13 +55,21 @@
opacity: 1; opacity: 1;
} }
} }
.fa-search.active { pointer-events: none; }
.fa-times-circle { .svg-icon--search.active {
@include font-size(17); pointer-events: none;
}
.svg-icon--backspace {
cursor: pointer; cursor: pointer;
color: var(--highlight-text-color); color: var(--highlight-text-color);
&:hover { color: var(--brand-color); } width: 22px;
height: 22px;
top: 5px;
&:hover {
color: var(--brand-color);
}
} }
} }

5
app/styles/components/spoiler-button.scss
View File

@ -18,6 +18,11 @@
display: none; display: none;
} }
.svg-icon {
width: 20px;
height: 20px;
}
&__overlay { &__overlay {
display: block; display: block;
background: transparent; background: transparent;

15
app/styles/components/theme-toggle.scss
View File

@ -13,13 +13,22 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
height: 15px;
color: #fff; color: #fff;
width: auto;
}
&-track-check {
left: 6px;
}
&-track-x {
right: 5px;
} }
} }
} }
i.fa { .svg-icon {
font-size: 20px; width: 18px;
height: 18px;
} }
} }