Replace a lot more icons with SVG icons

2021-09-27 20:47:44 -05:00 · 2021-09-27 20:47:44 -05:00 · f23a6b0890
parent 54ec139bfc
commit f23a6b0890
14 changed files with 81 additions and 31 deletions
--- a/app/soapbox/components/media_gallery.js
+++ b/app/soapbox/components/media_gallery.js
@ -582,7 +582,7 @@ class MediaGallery extends React.PureComponent {
    let spoilerButton;

    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 {
      spoilerButton = (
        <button type='button' onClick={this.handleOpen} className='spoiler-button__overlay'>
--- a/app/soapbox/features/chats/components/audio_toggle.js
+++ b/app/soapbox/features/chats/components/audio_toggle.js
@ -50,7 +50,7 @@ class AudioToggle extends React.PureComponent {
            id={id}
            checked={checked}
            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}
          />
          {showLabel && (<label htmlFor={id} className='setting-toggle__label'>{label}</label>)}
--- a/app/soapbox/features/chats/components/chat_window.js
+++ b/app/soapbox/features/chats/components/chat_window.js
@ -117,7 +117,7 @@ class ChatWindow extends ImmutablePureComponent {
            @{getAcct(account, displayFqn)}
          </button>
          <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 className='pane__content'>
--- a/app/soapbox/features/compose/components/search.js
+++ b/app/soapbox/features/compose/components/search.js
@ -5,6 +5,7 @@ import Overlay from 'react-overlays/lib/Overlay';
 import Motion from '../../ui/util/optional_motion';
 import spring from 'react-motion/lib/spring';
 import Icon from 'soapbox/components/icon';
+import classNames from 'classnames';

 const messages = defineMessages({
  placeholder: { id: 'search.placeholder', defaultMessage: 'Search' },
@ -119,8 +120,8 @@ class Search extends React.PureComponent {
          />
        </label>
        <div role='button' tabIndex='0' className='search__icon' onClick={this.handleClear}>
-          <Icon id='search' className={hasValue ? '' : 'active'} />
-          <Icon id='times-circle' className={hasValue ? 'active' : ''} aria-label={intl.formatMessage(messages.placeholder)} />
+          <Icon src={require('@tabler/icons/icons/search.svg')} className={classNames('svg-icon--search', { active: !hasValue })} />
+          <Icon src={require('@tabler/icons/icons/backspace.svg')} className={classNames('svg-icon--backspace', { active: hasValue })} aria-label={intl.formatMessage(messages.placeholder)} />
        </div>
        <Overlay show={expanded && !hasValue} placement='bottom' target={this}>
          <SearchPopout />
--- a/app/soapbox/features/ui/components/compose_modal.js
+++ b/app/soapbox/features/ui/components/compose_modal.js
@ -56,7 +56,12 @@ class ComposeModal extends ImmutablePureComponent {
          <h3 className='compose-modal__header__title'>
            <FormattedMessage id='navigation_bar.compose' defaultMessage='Compose new post' />
          </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 className='compose-modal__content compose-modal__content--scroll'>
          <ComposeFormContainer />
--- a/app/soapbox/features/ui/components/features_panel.js
+++ b/app/soapbox/features/ui/components/features_panel.js
@ -53,49 +53,49 @@ class FeaturesPanel extends React.PureComponent {
        <div className='promo-panel__container'>

          <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)}
          </NavLink>

          {(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)}
          </NavLink>}

          {features.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)}
            </NavLink>
          )}

          {features.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)}
            </NavLink>
          )}

          {features.securityAPI ? (
            <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)}
            </NavLink>
          ) : (
            <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)}
            </a>
          )}

          {features.settingsStore ? (
            <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)}
            </NavLink>
          ) : (
            <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)}
            </a>
          )}
--- a/app/soapbox/features/ui/components/funding_panel.js
+++ b/app/soapbox/features/ui/components/funding_panel.js
@ -5,6 +5,7 @@ import ImmutablePureComponent from 'react-immutable-pure-component';
 import ProgressBar from '../../../components/progress_bar';
 import { fetchPatronInstance } from 'soapbox/actions/patron';
 import { Map as ImmutableMap } from 'immutable';
+import Icon from 'soapbox/components/icon';

 const moneyFormat = amount => (
  new Intl
@ -41,7 +42,7 @@ class FundingPanel extends ImmutablePureComponent {
    return (
      <div className='wtf-panel funding-panel'>
        <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>Funding Goal</span>
          </span>
--- a/app/soapbox/features/ui/components/theme_toggle.js
+++ b/app/soapbox/features/ui/components/theme_toggle.js
@ -35,7 +35,7 @@ export default class ThemeToggle extends ImmutablePureComponent {
            id={id}
            checked={themeMode === 'light'}
            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}
          />
          {showLabel && (<label htmlFor={id} className='setting-toggle__label'>{label}</label>)}
--- a/app/styles/chats.scss
+++ b/app/styles/chats.scss
@ -55,17 +55,25 @@
    }

    .icon-button {
-      color: #fff;
+      opacity: 0.7;
+
+      &:hover {
+        opacity: 1;
+      }

      > div {
-        height: auto !important;
-        width: auto !important;
        margin-right: -6px;
      }
    }

    .pane__close {
      margin-left: auto;
+
+      .svg-icon {
+        width: 18px;
+        height: 18px;
+        transform: translateY(2px);
+      }
    }

    .icon-with-badge__badge {
@ -113,8 +121,8 @@
  }

  .audio-toggle .react-toggle-track-check {
-    left: 4px;
-    bottom: 4px;
+    left: 2px;
+    bottom: 5px;
  }

  .react-toggle--checked .react-toggle-thumb {
@ -122,8 +130,8 @@
  }

  .audio-toggle .react-toggle-track-x {
-    right: 4px;
-    bottom: 4px;
+    right: 8px;
+    bottom: 5px;
  }

  .fa {
--- a/app/styles/components/modal.scss
+++ b/app/styles/components/modal.scss
@ -708,6 +708,11 @@
    right: 10px;
    right: max(10px, env(safe-area-inset-right));
    color: var(--primary-text-color--faint);
+
+    .svg-icon {
+      width: 24px;
+      height: 24px;
+    }
  }

  &__content {
--- a/app/styles/components/promo-panel.scss
+++ b/app/styles/components/promo-panel.scss
@ -35,4 +35,13 @@
    margin-right: 12px;
    font-size: 20px;
  }
+
+  .svg-icon {
+    width: 24px;
+    height: 24px;
+
+    svg {
+      stroke-width: 1.3px;
+    }
+  }
 }
--- a/app/styles/components/search.scss
+++ b/app/styles/components/search.scss
@ -36,7 +36,6 @@
    outline: 0 !important;
  }

-  .fa,
  .svg-icon {
    @include font-size(16);
    cursor: default;
@ -56,13 +55,21 @@
      opacity: 1;
    }
  }
-  .fa-search.active { pointer-events: none; }

-  .fa-times-circle {
-    @include font-size(17);
+  .svg-icon--search.active {
+    pointer-events: none;
+  }
+
+  .svg-icon--backspace {
    cursor: pointer;
    color: var(--highlight-text-color);
-    &:hover { color: var(--brand-color); }
+    width: 22px;
+    height: 22px;
+    top: 5px;
+
+    &:hover {
+      color: var(--brand-color);
+    }
  }
 }

--- a/app/styles/components/spoiler-button.scss
+++ b/app/styles/components/spoiler-button.scss
@ -18,6 +18,11 @@
    display: none;
  }

+  .svg-icon {
+    width: 20px;
+    height: 20px;
+  }
+
  &__overlay {
    display: block;
    background: transparent;
--- a/app/styles/components/theme-toggle.scss
+++ b/app/styles/components/theme-toggle.scss
@ -13,13 +13,22 @@
        display: flex;
        align-items: center;
        justify-content: center;
-        height: 15px;
        color: #fff;
+        width: auto;
+      }
+
+      &-track-check {
+        left: 6px;
+      }
+
+      &-track-x {
+        right: 5px;
      }
    }
  }

-  i.fa {
-    font-size: 20px;
+  .svg-icon {
+    width: 18px;
+    height: 18px;
  }
 }