From 99e3ec9ff9ab5dcea54e3745c623dbff8c008d77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Thu, 16 Dec 2021 23:05:33 +0100
Subject: [PATCH] Replace LineAwesome with Tabler icons in some more places
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../account_timeline/components/moved_note.js |  2 +-
 .../features/compose/components/poll_form.js  |  2 +-
 app/soapbox/features/edit_profile/index.js    |  4 ++--
 .../components/clear_column_button.js         |  2 +-
 app/soapbox/features/soapbox_config/index.js  | 12 +++++------
 .../features/ui/components/trends_panel.js    |  2 +-
 app/styles/components/columns.scss            |  9 ++++++++
 app/styles/forms.scss                         | 21 +++++++++++++------
 8 files changed, 36 insertions(+), 18 deletions(-)

diff --git a/app/soapbox/features/account_timeline/components/moved_note.js b/app/soapbox/features/account_timeline/components/moved_note.js
index b3c2cae13..44a68040c 100644
--- a/app/soapbox/features/account_timeline/components/moved_note.js
+++ b/app/soapbox/features/account_timeline/components/moved_note.js
@@ -26,7 +26,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'><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> }} />
         </div>
 
diff --git a/app/soapbox/features/compose/components/poll_form.js b/app/soapbox/features/compose/components/poll_form.js
index 81a5a37e3..8b8edc9fa 100644
--- a/app/soapbox/features/compose/components/poll_form.js
+++ b/app/soapbox/features/compose/components/poll_form.js
@@ -178,7 +178,7 @@ class PollForm extends ImmutablePureComponent {
 
         <div className='poll__footer'>
           {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}>
diff --git a/app/soapbox/features/edit_profile/index.js b/app/soapbox/features/edit_profile/index.js
index 762614f04..a0154b3ba 100644
--- a/app/soapbox/features/edit_profile/index.js
+++ b/app/soapbox/features/edit_profile/index.js
@@ -338,7 +338,7 @@ class EditProfile extends ImmutablePureComponent {
                           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>
                     ))
@@ -347,7 +347,7 @@ class EditProfile extends ImmutablePureComponent {
                     this.state.fields.size < maxFields && (
                       <div className='actions add-row'>
                         <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' />
                         </div>
                       </div>
diff --git a/app/soapbox/features/notifications/components/clear_column_button.js b/app/soapbox/features/notifications/components/clear_column_button.js
index 4218f662d..bbf0e99bf 100644
--- a/app/soapbox/features/notifications/components/clear_column_button.js
+++ b/app/soapbox/features/notifications/components/clear_column_button.js
@@ -11,7 +11,7 @@ export default class ClearColumnButton extends React.PureComponent {
 
   render() {
     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>
     );
   }
 
diff --git a/app/soapbox/features/soapbox_config/index.js b/app/soapbox/features/soapbox_config/index.js
index b3537e488..e3e8d93b6 100644
--- a/app/soapbox/features/soapbox_config/index.js
+++ b/app/soapbox/features/soapbox_config/index.js
@@ -318,13 +318,13 @@ class SoapboxConfig extends ImmutablePureComponent {
                         value={field.get('url')}
                         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 className='actions add-row'>
                   <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' />
                   </div>
                 </div>
@@ -351,13 +351,13 @@ class SoapboxConfig extends ImmutablePureComponent {
                         value={field.get('url')}
                         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 className='actions add-row'>
                   <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' />
                   </div>
                 </div>
@@ -390,13 +390,13 @@ class SoapboxConfig extends ImmutablePureComponent {
                         value={address.get('note')}
                         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 className='actions add-row'>
                   <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' />
                   </div>
                 </div>
diff --git a/app/soapbox/features/ui/components/trends_panel.js b/app/soapbox/features/ui/components/trends_panel.js
index 9a45977cb..72af6480a 100644
--- a/app/soapbox/features/ui/components/trends_panel.js
+++ b/app/soapbox/features/ui/components/trends_panel.js
@@ -35,7 +35,7 @@ class TrendsPanel extends ImmutablePureComponent {
     return (
       <div className='wtf-panel'>
         <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'>
             <FormattedMessage id='trends.title' defaultMessage='Trends' />
           </span>
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index ca9cc1d00..233e61e64 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -746,6 +746,15 @@
 .column-settings__row {
   .text-btn {
     margin-bottom: 15px;
+
+    &.column-header__setting-btn {
+      display: flex;
+      align-items: center;
+
+      .svg-icon {
+        margin-right: 10px;
+      }
+    }
   }
 }
 
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index b28676a32..09386a6b3 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -741,17 +741,19 @@ code {
   }
 }
 
-.input .row > .fa-times-circle {
+.input .row > .svg-icon.delete-field {
+  height: 20px;
+  width: 20px;
   position: absolute;
-  right: 15px;
+  right: 13px;
   cursor: pointer;
   color: $error-red;
-  transform: translateY(-9px);
+  transform: translateY(-11px);
 }
 
-.input .row > .input.with_label + .fa-times-circle {
-  right: 7px;
-  transform: translateY(9px);
+.input .row > .input.with_label + .svg-icon.delete-field {
+  right: 5px;
+  transform: translateY(7px);
 }
 
 .site-preview {
@@ -798,12 +800,19 @@ code {
   margin: 10px 0 0;
 
   .button {
+    display: flex;
+    align-items: center;
     border: 0;
     background: transparent;
 
     &:hover {
       color: var(--primary-text-color);
     }
+
+    .svg-icon {
+      height: 20px;
+      width: 20px;
+    }
   }
 }