Replace LineAwesome with Tabler Icons in some places

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

app/soapbox/components/domain.js

@@ -32,7 +32,7 @@ class Account extends ImmutablePureComponent {
           </span>
 
           <div className='domain__buttons'>
-            <IconButton active icon='unlock' title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={this.handleDomainUnblock} />
+            <IconButton active src={require('@tabler/icons/icons/lock-open.svg')} title={intl.formatMessage(messages.unblockDomain, { domain })} onClick={this.handleDomainUnblock} />
           </div>
         </div>
       </div>

app/soapbox/features/admin/components/report.js

@@ -115,7 +115,7 @@ class Report extends ImmutablePureComponent {
           <Button className='button-alternative' size={30} onClick={this.handleCloseReport}>
             <FormattedMessage id='admin.reports.actions.close' defaultMessage='Close' />
           </Button>
-          <DropdownMenu items={menu} icon='ellipsis-v' size={24} direction='right' />
+          <DropdownMenu className='admin-report__dropdown' items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} size={24} direction='right' />
         </div>
       </div>
     );

app/soapbox/features/admin/components/report_status.js

@@ -119,7 +119,7 @@ class ReportStatus extends ImmutablePureComponent {
           {media}
         </div>
         <div className='admin-report__status-actions'>
-          <DropdownMenu items={menu} icon='ellipsis-v' size={18} direction='right' />
+          <DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} size={18} direction='right' />
         </div>
       </div>
     );

app/soapbox/features/aliases/components/account.js

@@ -65,7 +65,7 @@ class Account extends ImmutablePureComponent {
     if (!added && accountId !== me) {
       button = (
         <div className='account__relationship'>
-          <IconButton icon='plus' title={intl.formatMessage(messages.add)} onClick={this.handleOnAdd} />
+          <IconButton src={require('@tabler/icons/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={this.handleOnAdd} />
         </div>
       );
     }

app/soapbox/features/chats/components/chat_box.js

@@ -158,7 +158,10 @@ class ChatBox extends ImmutablePureComponent {
           {truncateFilename(attachment.preview_url, 20)}
         </div>
         <div class='chat-box__remove-attachment'>
-          <IconButton icon='remove' onClick={this.handleRemoveFile} />
+          <IconButton
+            src={require('@tabler/icons/icons/x.svg')}
+            onClick={this.handleRemoveFile}
+          />
         </div>
       </div>
     );

app/soapbox/features/chats/components/chat_message_list.js

@@ -296,8 +296,7 @@ class ChatMessageList extends ImmutablePureComponent {
           <div className='chat-message__menu'>
             <DropdownMenuContainer
               items={menu}
-              icon='ellipsis-h'
-              size={18}
+              src={require('@tabler/icons/icons/dots.svg')}
               direction='top'
               title={intl.formatMessage(messages.more)}
             />

app/soapbox/features/compose/components/poll_form.js

@@ -109,7 +109,7 @@ class Option extends React.PureComponent {
         </label>
 
         <div className='poll__cancel'>
-          <IconButton title={intl.formatMessage(messages.remove_option)} icon='times' onClick={this.handleOptionRemove} />
+          <IconButton title={intl.formatMessage(messages.remove_option)} src={require('@tabler/icons/icons/x.svg')} onClick={this.handleOptionRemove} />
         </div>
       </li>
     );

app/soapbox/features/compose/components/reply_indicator.js

@@ -46,7 +46,9 @@ class ReplyIndicator extends ImmutablePureComponent {
     return (
       <div className='reply-indicator'>
         <div className='reply-indicator__header'>
-          <div className='reply-indicator__cancel'><IconButton title={intl.formatMessage(messages.cancel)} icon='times' onClick={this.handleClick} inverted /></div>
+          <div className='reply-indicator__cancel'>
+            <IconButton title={intl.formatMessage(messages.cancel)} src={require('@tabler/icons/icons/x.svg')} onClick={this.handleClick} inverted />
+          </div>
 
           <NavLink to={`/@${status.getIn(['account', 'acct'])}`} className='reply-indicator__display-name'>
             <div className='reply-indicator__display-avatar'><Avatar account={status.get('account')} size={24} /></div>

app/soapbox/features/compose/components/schedule_form.js

@@ -115,7 +115,7 @@ class ScheduleForm extends React.Component {
             ref={this.setRef}
           />
           <div className='datepicker__cancel'>
-            <IconButton size={20} title={intl.formatMessage(messages.remove)} icon='times' onClick={this.handleRemove} />
+            <IconButton title={intl.formatMessage(messages.remove)} src={require('@tabler/icons/icons/x.svg')} onClick={this.handleRemove} />
           </div>
         </div>
       </div>

app/soapbox/features/follow_requests/components/account_authorize.js

@@ -39,8 +39,8 @@ class AccountAuthorize extends ImmutablePureComponent {
         </div>
 
         <div className='account--panel'>
-          <div className='account--panel__button'><IconButton title={intl.formatMessage(messages.authorize)} icon='check' onClick={onAuthorize} /></div>
-          <div className='account--panel__button'><IconButton title={intl.formatMessage(messages.reject)} icon='times' onClick={onReject} /></div>
+          <div className='account--panel__button'><IconButton title={intl.formatMessage(messages.authorize)} src={require('@tabler/icons/icons/check.svg')} onClick={onAuthorize} /></div>
+          <div className='account--panel__button'><IconButton title={intl.formatMessage(messages.reject)} src={require('@tabler/icons/icons/x.svg')} onClick={onReject} /></div>
         </div>
       </div>
     );

app/soapbox/features/groups/timeline/components/header.js

@@ -63,7 +63,7 @@ class Header extends ImmutablePureComponent {
       },
     ];
 
-    return <DropdownMenuContainer items={menu} icon='ellipsis-v' size={24} direction='right' />;
+    return <DropdownMenuContainer items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} size={24} direction='right' />;
   }
 
   render() {

app/soapbox/features/list_adder/components/list.js

@@ -45,9 +45,9 @@ class List extends ImmutablePureComponent {
     let button;
 
     if (added) {
-      button = <IconButton icon='times' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+      button = <IconButton src={require('@tabler/icons/icons/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
     } else {
-      button = <IconButton icon='plus' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
+      button = <IconButton src={require('@tabler/icons/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
     }
 
     return (

app/soapbox/features/list_adder/index.js

@@ -74,7 +74,7 @@ class ListAdder extends ImmutablePureComponent {
           <h3 className='compose-modal__header__title'>
             <FormattedMessage id='list_adder.header_title' defaultMessage='Add or Remove from Lists' />
           </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} />
         </div>
         <div className='compose-modal__content'>
           <div className='list-adder'>

app/soapbox/features/list_editor/components/account.js

@@ -53,9 +53,9 @@ class Account extends ImmutablePureComponent {
     let button;
 
     if (added) {
-      button = <IconButton icon='times' title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
+      button = <IconButton src={require('@tabler/icons/icons/x.svg')} title={intl.formatMessage(messages.remove)} onClick={onRemove} />;
     } else {
-      button = <IconButton icon='plus' title={intl.formatMessage(messages.add)} onClick={onAdd} />;
+      button = <IconButton src={require('@tabler/icons/icons/plus.svg')} title={intl.formatMessage(messages.add)} onClick={onAdd} />;
     }
 
     return (

app/soapbox/features/list_editor/index.js

@@ -68,7 +68,7 @@ class ListEditor extends ImmutablePureComponent {
           <h3 className='compose-modal__header__title'>
             {intl.formatMessage(messages.editList)}
           </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} />
         </div>
         <div className='compose-modal__content'>
           <div className='list-editor'>

app/soapbox/features/lists/index.js

@@ -71,7 +71,7 @@ class Lists extends ImmutablePureComponent {
           emptyMessage={emptyMessage}
         >
           {lists.map(list =>
-            <ColumnLink key={list.get('id')} to={`/list/${list.get('id')}`} icon='list-ul' text={list.get('title')} />,
+            <ColumnLink key={list.get('id')} to={`/list/${list.get('id')}`} src={require('@tabler/icons/icons/list.svg')} text={list.get('title')} />,
           )}
         </ScrollableList>
       </Column>

app/soapbox/features/notifications/components/follow_request.js

@@ -48,8 +48,8 @@ class FollowRequest extends ImmutablePureComponent {
           </Permalink>
 
           <div className='account__relationship'>
-            <IconButton title={intl.formatMessage(messages.authorize)} icon='check' onClick={onAuthorize} />
-            <IconButton title={intl.formatMessage(messages.reject)} icon='times' onClick={onReject} />
+            <IconButton title={intl.formatMessage(messages.authorize)} src={require('@tabler/icons/icons/check.svg')} onClick={onAuthorize} />
+            <IconButton title={intl.formatMessage(messages.reject)} src={require('@tabler/icons/icons/x.svg')} onClick={onReject} />
           </div>
         </div>
       </div>

app/soapbox/features/public_layout/components/header.js

@@ -88,7 +88,7 @@ class Header extends ImmutablePureComponent {
         { mfa_auth_needed &&
           <div className='otp-form-overlay__container'>
             <div className='otp-form-overlay__form'>
-              <IconButton className='otp-form-overlay__close' title={intl.formatMessage(messages.close)} icon='times' onClick={this.onClickClose} size={20} />
+              <IconButton className='otp-form-overlay__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={this.onClickClose} size={20} />
               <OtpAuthForm mfa_token={mfa_token} />
             </div>
           </div>

app/soapbox/features/remote_timeline/index.js

@@ -87,7 +87,7 @@ class RemoteTimeline extends React.PureComponent {
       <Column label={intl.formatMessage(messages.title)} heading={instance} transparent>
         <PinnedHostsPicker host={instance} />
         {!pinned && <div className='timeline-filter-message'>
-          <IconButton icon='times' onClick={this.handleCloseClick} />
+          <IconButton src={require('@tabler/icons/icons/x.svg')} onClick={this.handleCloseClick} />
           <FormattedMessage
             id='remote_timeline.filter_message'
             defaultMessage='You are viewing the timeline of {instance}.'

app/soapbox/features/scheduled_statuses/components/scheduled_status_action_bar.js

@@ -47,7 +47,7 @@ class ScheduledStatusActionBar extends ImmutablePureComponent {
           <IconButton
             title={intl.formatMessage(messages.cancel)}
             text={intl.formatMessage(messages.cancel)}
-            icon='times'
+            src={require('@tabler/icons/icons/x.svg')}
             onClick={this.handleCancelClick}
           />
         </div>

app/soapbox/features/status/components/action_bar.js

@@ -525,7 +525,7 @@ class ActionBar extends React.PureComponent {
             className='emoji-picker-expand'
             animate
             title={intl.formatMessage(messages.emojiPickerExpand)}
-            icon='caret-down'
+            src={require('@tabler/icons/icons/caret-down.svg')}
             onKeyUp={handleEmojiSelectorExpand}
             onHover
           />

app/soapbox/features/ui/components/accordion.js

@@ -37,7 +37,7 @@ export default @injectIntl class Accordion extends React.PureComponent {
       <div className={classNames('accordion', { 'accordion--expanded': expanded })}>
         {menu && (
           <div className='accordion__menu'>
-            <DropdownMenu items={menu} icon='ellipsis-v' size={18} direction='right' />
+            <DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} direction='right' />
           </div>
         )}
         <button

app/soapbox/features/ui/components/column_link.js

@@ -3,13 +3,13 @@ import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import Icon from 'soapbox/components/icon';
 
-const ColumnLink = ({ icon, text, to, href, method, badge }) => {
+const ColumnLink = ({ icon, src, text, to, href, method, badge }) => {
   const badgeElement = typeof badge !== 'undefined' ? <span className='column-link__badge'>{badge}</span> : null;
 
   if (href) {
     return (
       <a href={href} className='column-link' data-method={method}>
-        <Icon id={icon} fixedWidth className='column-link__icon' />
+        <Icon id={icon} src={src} fixedWidth className='column-link__icon' />
         {text}
         {badgeElement}
       </a>
@@ -17,7 +17,7 @@ const ColumnLink = ({ icon, text, to, href, method, badge }) => {
   } else {
     return (
       <Link to={to} className='column-link'>
-        <Icon id={icon} fixedWidth className='column-link__icon' />
+        <Icon id={icon} src={src} fixedWidth className='column-link__icon' />
         {text}
         {badgeElement}
       </Link>
@@ -26,7 +26,8 @@ const ColumnLink = ({ icon, text, to, href, method, badge }) => {
 };
 
 ColumnLink.propTypes = {
-  icon: PropTypes.string.isRequired,
+  icon: PropTypes.string,
+  src: PropTypes.string,
   text: PropTypes.string.isRequired,
   to: PropTypes.string,
   href: PropTypes.string,

app/soapbox/features/ui/components/hotkeys_modal.js

@@ -23,7 +23,7 @@ class HotkeysModal extends ImmutablePureComponent {
       <div className='modal-root__modal hotkeys-modal'>
         <div className='compose-modal__header'>
           <h3 className='compose-modal__header__title'><FormattedMessage id='keyboard_shortcuts.heading' defaultMessage='Keyboard shortcuts' /></h3>
-          <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={20} />
+          <IconButton className='compose-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} size={20} />
         </div>
         <div className='compose-modal__content'>
           <table>

app/soapbox/features/ui/components/instance_info_panel.js

@@ -73,7 +73,7 @@ class InstanceInfoPanel extends ImmutablePureComponent {
             <span>{remoteInstance.get('host')}</span>
           </span>
           <div className='wtf-panel__menu'>
-            <DropdownMenu items={menu} icon='ellipsis-v' size={18} direction='right' />
+            <DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} direction='right' />
           </div>
         </div>
       </div>

app/soapbox/features/ui/components/instance_moderation_panel.js

@@ -68,7 +68,7 @@ class InstanceModerationPanel extends ImmutablePureComponent {
             <span><FormattedMessage id='remote_instance.federation_panel.heading' defaultMessage='Federation Restrictions' /></span>
           </span>
           {isAdmin && <div className='wtf-panel__menu'>
-            <DropdownMenu items={menu} icon='ellipsis-v' size={18} direction='right' />
+            <DropdownMenu items={menu} src={require('@tabler/icons/icons/dots-vertical.svg')} size={18} direction='right' />
           </div>}
         </div>
         <div className='wtf-panel__content'>

app/soapbox/features/ui/components/media_modal.js

@@ -271,7 +271,7 @@ class MediaModal extends ImmutablePureComponent {
         </div>
 
         <div className={navigationClassName}>
-          <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={40} />
+          <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
 
           {leftNav}
           {rightNav}

app/soapbox/features/ui/components/report_modal.js

@@ -107,7 +107,7 @@ class ReportModal extends ImmutablePureComponent {
     return (
       <div className='modal-root__modal report-modal'>
         <div className='report-modal__target'>
-          <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} icon='times' onClick={onClose} size={16} />
+          <IconButton className='media-modal__close' title={intl.formatMessage(messages.close)} src={require('@tabler/icons/icons/x.svg')} onClick={onClose} />
           <FormattedMessage id='report.target' defaultMessage='Reporting {target}' values={{ target: <strong>{account.get('acct')}</strong> }} />
         </div>
 

app/soapbox/features/ui/components/unauthorized_modal.js

@@ -36,7 +36,7 @@ class UnauthorizedModal extends ImmutablePureComponent {
       <div className='modal-root__modal compose-modal unauthorized-modal'>
         <div className='compose-modal__header'>
           <h3 className='compose-modal__header__title'><FormattedMessage id='unauthorized_modal.title' defaultMessage='Sign up for {site_title}' values={{ site_title: siteTitle }} /></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'>
           <div className='unauthorized-modal__content'>

app/styles/about.scss

@@ -690,6 +690,11 @@ $fluid-breakpoint: $maximum-width + 20px;
 
       .otp-form-overlay__close {
         align-self: flex-end;
+
+        .svg-icon {
+          height: 20px;
+          width: 20px;
+        }
       }
     }
   }

app/styles/accounts.scss

@@ -456,6 +456,11 @@ a .account__avatar {
   display: flex;
   flex-direction: row;
   padding: 10px 0;
+
+  &__button .svg-icon {
+    height: 20px;
+    width: 20px;
+  }
 }
 
 .account__section-headline {

app/styles/chats.scss

@@ -210,11 +210,18 @@
     position: absolute;
     top: -8px;
     right: -8px;
+    height: 20px;
+    padding: 1px;
     background: var(--background-color);
     border-radius: 999px;
     opacity: 0;
     pointer-events: none;
     transition: 0.2s;
+
+    .svg-icon {
+      height: 20px;
+      width: 20px;
+    }
   }
 }
 

app/styles/components/admin.scss

@@ -183,8 +183,10 @@
   }
 
   &__actions {
-    margin-left: auto;
     display: flex;
+    align-items: center;
+    height: fit-content;
+    margin-left: auto;
 
     .icon-button {
       padding-left: 10px;
@@ -193,6 +195,11 @@
         display: flex;
         align-items: center;
         justify-content: center;
+
+        > .svg-icon {
+          height: 20px;
+          width: 20px;
+        }
       }
     }
   }

app/styles/components/columns.scss

@@ -286,7 +286,8 @@
 .column-link {
   background: var(--brand-color--med);
   color: var(--primary-text-color);
-  display: block;
+  display: flex;
+  align-items: center;
   font-size: 16px;
   padding: 15px;
   text-decoration: none;
@@ -318,7 +319,7 @@
   }
 }
 
-.column-link__icon {
+.svg-icon.column-link__icon {
   display: inline-block;
   margin-right: 5px;
 }
@@ -814,12 +815,19 @@
 }
 
 .timeline-filter-message {
+  display: flex;
+  align-items: center;
   background-color: var(--brand-color--faint);
   color: var(--primary-text-color);
   padding: 15px 20px;
 
   .icon-button {
-    margin-right: 8px;
+    margin: 2px 8px 2px 0;
+
+    .svg-icon {
+      height: 20px;
+      width: 20px;
+    }
   }
 }
 

app/styles/components/datepicker.scss

@@ -19,6 +19,11 @@
 
   &__cancel {
     padding-left: 10px;
+
+    .svg-icon {
+      height: 24px;
+      width: 24px;
+    }
   }
 
   &--error .react-datepicker__input-container {

app/styles/components/modal.scss

@@ -199,6 +199,8 @@
   position: absolute;
   right: 8px;
   top: 8px;
+  height: 48px;
+  width: 48px;
   z-index: 100;
   color: #fff;
 }
@@ -693,6 +695,8 @@
   .media-modal__close {
     top: 19px;
     right: 15px;
+    height: 20px;
+    width: 20px;
   }
 }
 

app/styles/components/reply-indicator.scss

@@ -18,7 +18,11 @@
 
 .reply-indicator__cancel {
   float: right;
-  line-height: 24px;
+
+  .svg-icon {
+    height: 20px;
+    width: 20px;
+  }
 }
 
 .reply-indicator__display-name {

app/styles/components/wtf-panel.scss

@@ -159,6 +159,10 @@
 
   &__menu {
     margin-left: auto;
+
+    > div {
+      height: 18px;
+    }
   }
 }
 

app/styles/polls.scss

@@ -167,6 +167,15 @@
     margin-right: 10px;
     font-size: 14px;
   }
+
+  &__cancel {
+    height: 20px;
+
+    .svg-icon {
+      height: 20px;
+      width: 20px;
+    }
+  }
 }
 
 .compose-form__poll-wrapper {

app/styles/ui.scss

@@ -239,6 +239,11 @@
     font-size: 14px;
     font-weight: 500;
   }
+
+  &__buttons .svg-icon {
+    height: 18px;
+    width: 18px;
+  }
 }
 
 .domain__wrapper {