Merge branch 'icons' into 'develop'

Replace LineAwesome with Tabler in some places

See merge request soapbox-pub/soapbox-fe!1683

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>
   );
 };

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>
       );

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>
 );
 

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>
       );
     }

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>

app/soapbox/features/compose/components/upload.tsx

@@ -13,8 +13,8 @@ import Motion from '../../ui/util/optional_motion';
 import type { Map as ImmutableMap } from 'immutable';
 
 const bookIcon = require('@tabler/icons/book.svg');
-const fileAnalyticsIcon = require('@tabler/icons/file-analytics.svg');
 const fileCodeIcon = require('@tabler/icons/file-code.svg');
+const fileSpreadsheetIcon = require('@tabler/icons/file-spreadsheet.svg');
 const fileTextIcon = require('@tabler/icons/file-text.svg');
 const fileZipIcon = require('@tabler/icons/file-zip.svg');
 const defaultIcon = require('@tabler/icons/paperclip.svg');
@@ -39,9 +39,9 @@ export const MIMETYPE_ICONS: Record<string, string> = {
   'application/xhtml+xml': fileCodeIcon,
   'application/xml': fileCodeIcon,
   'application/epub+zip': bookIcon,
-  'application/vnd.oasis.opendocument.spreadsheet': fileAnalyticsIcon,
+  'application/vnd.oasis.opendocument.spreadsheet': fileSpreadsheetIcon,
-  'application/vnd.ms-excel': fileAnalyticsIcon,
+  'application/vnd.ms-excel': fileSpreadsheetIcon,
-  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': fileAnalyticsIcon,
+  'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet': fileSpreadsheetIcon,
   'application/pdf': fileTextIcon,
   'application/vnd.oasis.opendocument.presentation': presentationIcon,
   'application/vnd.ms-powerpoint': presentationIcon,

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}.'

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>

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>

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;
+    }
   }
 }
 

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;
       }
     }
   }

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 {
+    &__icons .svg-icon {
-      font-size: 30px;
+      @apply h-8 w-8;
     }
   }
 

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 {

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 {