From eb62ebfa52672689c36e94cb51066c5579441e2c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Tue, 26 Jul 2022 12:30:51 +0200
Subject: [PATCH] Replace LineAwesome with Tabler in some 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>
---
 app/soapbox/components/load_gap.tsx                      | 2 +-
 app/soapbox/components/media_gallery.js                  | 2 +-
 app/soapbox/components/status_content.tsx                | 2 +-
 .../features/account_gallery/components/media_item.js    | 4 ++--
 app/soapbox/features/aliases/index.tsx                   | 2 +-
 .../components/instance_restrictions.js                  | 6 +++---
 app/soapbox/features/filters/index.tsx                   | 2 +-
 app/soapbox/features/ui/components/boost_modal.tsx       | 2 +-
 app/styles/accounts.scss                                 | 5 ++++-
 app/styles/components/filters.scss                       | 4 ++--
 app/styles/components/media-gallery.scss                 | 9 ++++++---
 app/styles/components/status.scss                        | 2 +-
 app/styles/loading.scss                                  | 9 ++++-----
 13 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/app/soapbox/components/load_gap.tsx b/app/soapbox/components/load_gap.tsx
index b784c871d..c26da0281 100644
--- a/app/soapbox/components/load_gap.tsx
+++ b/app/soapbox/components/load_gap.tsx
@@ -20,7 +20,7 @@ const LoadGap: React.FC<ILoadGap> = ({ disabled, maxId, onClick }) => {
 
   return (
     <button className='load-more load-gap' disabled={disabled} onClick={handleClick} aria-label={intl.formatMessage(messages.load_more)}>
-      <Icon id='ellipsis-h' />
+      <Icon src={require('@tabler/icons/dots.svg')} />
     </button>
   );
 };
diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js
index 4f16f5a73..6d6882b9c 100644
--- a/app/soapbox/components/media_gallery.js
+++ b/app/soapbox/components/media_gallery.js
@@ -215,7 +215,7 @@ class Item extends React.PureComponent {
           alt={attachment.get('description')}
           title={attachment.get('description')}
         >
-          <span className='media-gallery__item__icons'><Icon id='volume-up' /></span>
+          <span className='media-gallery__item__icons'><Icon src={require('@tabler/icons/volume.svg')} /></span>
           <span className='media-gallery__file-extension__label'>{ext}</span>
         </a>
       );
diff --git a/app/soapbox/components/status_content.tsx b/app/soapbox/components/status_content.tsx
index 0d482672d..138654b3f 100644
--- a/app/soapbox/components/status_content.tsx
+++ b/app/soapbox/components/status_content.tsx
@@ -30,7 +30,7 @@ interface IReadMoreButton {
 const ReadMoreButton: React.FC<IReadMoreButton> = ({ onClick }) => (
   <button className='status__content__read-more-button' onClick={onClick}>
     <FormattedMessage id='status.read_more' defaultMessage='Read more' />
-    <Icon id='angle-right' fixedWidth />
+    <Icon className='inline-block h-5 w-5' src={require('@tabler/icons/chevron-right.svg')} fixedWidth />
   </button>
 );
 
diff --git a/app/soapbox/features/account_gallery/components/media_item.js b/app/soapbox/features/account_gallery/components/media_item.js
index 1cccfe070..fe8c6cc85 100644
--- a/app/soapbox/features/account_gallery/components/media_item.js
+++ b/app/soapbox/features/account_gallery/components/media_item.js
@@ -125,7 +125,7 @@ class MediaItem extends ImmutablePureComponent {
       const fileExtension = remoteURL.substr(fileExtensionLastIndex + 1).toUpperCase();
       thumbnail = (
         <div className='media-gallery__item-thumbnail'>
-          <span className='media-gallery__item__icons'><Icon id='volume-up' /></span>
+          <span className='media-gallery__item__icons'><Icon src={require('@tabler/icons/volume.svg')} /></span>
           <span className='media-gallery__file-extension__label'>{fileExtension}</span>
         </div>
       );
@@ -134,7 +134,7 @@ class MediaItem extends ImmutablePureComponent {
     if (!visible) {
       icon = (
         <span className='account-gallery__item__icons'>
-          <Icon id='eye-slash' />
+          <Icon src={require('@tabler/icons/eye-off.svg')} />
         </span>
       );
     }
diff --git a/app/soapbox/features/aliases/index.tsx b/app/soapbox/features/aliases/index.tsx
index 9dfb52c44..d76c7988d 100644
--- a/app/soapbox/features/aliases/index.tsx
+++ b/app/soapbox/features/aliases/index.tsx
@@ -84,7 +84,7 @@ const Aliases = () => {
                 <Text tag='span'>{alias}</Text>
               </div>
               <div className='flex items-center' role='button' tabIndex={0} onClick={handleFilterDelete} data-value={alias} aria-label={intl.formatMessage(messages.delete)}>
-                <Icon className='pr-1.5 text-lg' id='times' />
+                <Icon className='mr-1.5' src={require('@tabler/icons/x.svg')} />
                 <Text weight='bold' theme='muted'><FormattedMessage id='aliases.aliases_list_delete' defaultMessage='Unlink alias' /></Text>
               </div>
             </HStack>
diff --git a/app/soapbox/features/federation_restrictions/components/instance_restrictions.js b/app/soapbox/features/federation_restrictions/components/instance_restrictions.js
index 27c5756e2..fdb3cd328 100644
--- a/app/soapbox/features/federation_restrictions/components/instance_restrictions.js
+++ b/app/soapbox/features/federation_restrictions/components/instance_restrictions.js
@@ -95,7 +95,7 @@ class InstanceRestrictions extends ImmutablePureComponent {
     if (!fullMediaRemoval && media_nsfw) {
       items.push((
         <Text key='media_nsfw' className='flex items-center gap-2' theme='muted'>
-          <Icon id='eye-slash' />
+          <Icon src={require('@tabler/icons/eye-off.svg')} />
           <FormattedMessage
             id='federation_restriction.media_nsfw'
             defaultMessage='Attachments marked NSFW'
@@ -117,7 +117,7 @@ class InstanceRestrictions extends ImmutablePureComponent {
     if (remoteInstance.getIn(['federation', 'reject']) === true) {
       return (
         <Text className='flex items-center gap-2' theme='muted'>
-          <Icon id='times' />
+          <Icon src={require('@tabler/icons/x.svg')} />
           <FormattedMessage
             id='remote_instance.federation_panel.restricted_message'
             defaultMessage='{siteTitle} blocks all activities from {host}.'
@@ -141,7 +141,7 @@ class InstanceRestrictions extends ImmutablePureComponent {
     } else {
       return (
         <Text className='flex items-center gap-2' theme='muted'>
-          <Icon id='check' />
+          <Icon src={require('@tabler/icons/check.svg')} />
           <FormattedMessage
             id='remote_instance.federation_panel.no_restrictions_message'
             defaultMessage='{siteTitle} has placed no restrictions on {host}.'
diff --git a/app/soapbox/features/filters/index.tsx b/app/soapbox/features/filters/index.tsx
index e2d6f2050..ebf5943ac 100644
--- a/app/soapbox/features/filters/index.tsx
+++ b/app/soapbox/features/filters/index.tsx
@@ -216,7 +216,7 @@ const Filters = () => {
               </div>
             </div>
             <div className='filter__delete' role='button' tabIndex={0} onClick={handleFilterDelete} data-value={filter.id} aria-label={intl.formatMessage(messages.delete)}>
-              <Icon className='filter__delete-icon' id='times' />
+              <Icon className='filter__delete-icon' src={require('@tabler/icons/x.svg')} />
               <span className='filter__delete-label'><FormattedMessage id='filters.filters_list_delete' defaultMessage='Delete' /></span>
             </div>
           </div>
diff --git a/app/soapbox/features/ui/components/boost_modal.tsx b/app/soapbox/features/ui/components/boost_modal.tsx
index 1dcaaf63d..613fdaba2 100644
--- a/app/soapbox/features/ui/components/boost_modal.tsx
+++ b/app/soapbox/features/ui/components/boost_modal.tsx
@@ -38,7 +38,7 @@ const BoostModal: React.FC<IBoostModal> = ({ status, onReblog, onClose }) => {
         <ReplyIndicator status={status} hideActions />
 
         <Text>
-          <FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon id='retweet' /></span> }} />
+          <FormattedMessage id='boost_modal.combo' defaultMessage='You can press {combo} to skip this next time' values={{ combo: <span>Shift + <Icon className='inline-block align-middle' src={require('@tabler/icons/repeat.svg')} /></span> }} />
         </Text>
       </Stack>
     </Modal>
diff --git a/app/styles/accounts.scss b/app/styles/accounts.scss
index 0e1c47c3a..e0ccdc416 100644
--- a/app/styles/accounts.scss
+++ b/app/styles/accounts.scss
@@ -178,7 +178,10 @@ a .account__avatar {
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    font-size: 24px;
+
+    .svg-icon {
+      @apply h-6 w-6;
+    }
   }
 }
 
diff --git a/app/styles/components/filters.scss b/app/styles/components/filters.scss
index d978995ac..afa3555a5 100644
--- a/app/styles/components/filters.scss
+++ b/app/styles/components/filters.scss
@@ -87,14 +87,14 @@
     }
 
     .filter__delete {
-      @apply flex items-baseline h-5 m-2.5 cursor-pointer;
+      @apply flex items-center h-5 m-2.5 cursor-pointer;
 
       span.filter__delete-label {
         @apply text-gray-500 dark:text-gray-400 font-semibold;
       }
 
       .filter__delete-icon {
-        @apply px-1 mx-auto text-base text-gray-500 dark:text-gray-400;
+        @apply mx-1 text-gray-500 dark:text-gray-400;
       }
     }
   }
diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss
index ffa8e8854..1abb7fa5a 100644
--- a/app/styles/components/media-gallery.scss
+++ b/app/styles/components/media-gallery.scss
@@ -23,7 +23,10 @@
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
-    font-size: 100px;
+
+    .svg-icon {
+      @apply h-24 w-24;
+    }
   }
 
   &-overflow {
@@ -207,8 +210,8 @@ $media-compact-size: 50px;
       font-size: 20px;
     }
 
-    &__icons {
-      font-size: 30px;
+    &__icons .svg-icon {
+      @apply h-8 w-8;
     }
   }
 
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index b063e1d0a..3b05c9fdd 100644
--- a/app/styles/components/status.scss
+++ b/app/styles/components/status.scss
@@ -109,7 +109,7 @@
 }
 
 .status__content__read-more-button {
-  @apply block text-gray-900 dark:text-gray-300 border-0 bg-transparent p-0 pt-2 hover:underline active:underline;
+  @apply flex items-center text-gray-900 dark:text-gray-300 border-0 bg-transparent p-0 pt-2 hover:underline active:underline;
 }
 
 .status-link {
diff --git a/app/styles/loading.scss b/app/styles/loading.scss
index 78f640f6f..b6d86a686 100644
--- a/app/styles/loading.scss
+++ b/app/styles/loading.scss
@@ -132,20 +132,19 @@
   color: var(--primary-text-color);
   background-color: transparent;
   border: 0;
-  font-size: inherit;
-  text-align: center;
-  line-height: inherit;
   margin: 0;
   padding: 15px;
   box-sizing: border-box;
   width: 100%;
-  clear: both;
-  text-decoration: none;
 
   &:hover,
   &:focus {
     background: var(--brand-color--faint);
   }
+
+  .svg-icon {
+    @apply mx-auto;
+  }
 }
 
 .load-gap {