Styles cleanup, I guess

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

src/components/attachment-thumbs.tsx

@@ -21,7 +21,7 @@ const AttachmentThumbs = (props: IAttachmentThumbs) => {
   const onOpenMedia = (media: ImmutableList<Attachment>, index: number) => dispatch(openModal('MEDIA', { media, index }));
 
   return (
-    <div className='attachment-thumbs'>
+    <div className='relative'>
       <Suspense fallback={fallback}>
         <MediaGallery
           media={media}
@@ -34,7 +34,7 @@ const AttachmentThumbs = (props: IAttachmentThumbs) => {
       </Suspense>
 
       {onClick && (
-        <div className='attachment-thumbs__clickable-region' onClick={onClick} />
+        <div className='absolute inset-0 h-full w-full cursor-pointer' onClick={onClick} />
       )}
     </div>
   );

src/components/autosuggest-emoji.tsx

@@ -28,9 +28,9 @@ const AutosuggestEmoji: React.FC<IAutosuggestEmoji> = ({ emoji }) => {
   }
 
   return (
-    <div className='autosuggest-emoji' data-testid='emoji'>
+    <div className='flex flex-row items-center justify-start text-sm leading-[18px]' data-testid='emoji'>
       <img
-        className='emojione'
+        className='emojione mr-2 block h-4 w-4'
         src={url}
         alt={alt}
       />

src/components/load-gap.tsx

@@ -19,8 +19,8 @@ const LoadGap: React.FC<ILoadGap> = ({ disabled, maxId, onClick }) => {
   const handleClick = () => onClick(maxId);
 
   return (
-    <button className='load-more load-gap' disabled={disabled} onClick={handleClick} aria-label={intl.formatMessage(messages.load_more)}>
-      <Icon src={require('@tabler/icons/outline/dots.svg')} />
+    <button className='m-0 box-border block w-full border-0 bg-transparent p-4 text-gray-900' disabled={disabled} onClick={handleClick} aria-label={intl.formatMessage(messages.load_more)}>
+      <Icon className='mx-auto' src={require('@tabler/icons/outline/dots.svg')} />
     </button>
   );
 };

src/components/status-list.tsx

@@ -11,6 +11,8 @@ import PlaceholderStatus from 'soapbox/features/placeholder/components/placehold
 import PendingStatus from 'soapbox/features/ui/components/pending-status';
 import { useSoapboxConfig } from 'soapbox/hooks';
 
+import { Stack, Text } from './ui';
+
 import type { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import type { VirtuosoHandle } from 'react-virtuoso';
 import type { IScrollableList } from 'soapbox/components/scrollable-list';
@@ -212,14 +214,15 @@ const StatusList: React.FC<IStatusList> = ({
 
   if (isPartial) {
     return (
-      <div className='regeneration-indicator'>
-        <div>
-          <div className='regeneration-indicator__label'>
-            <FormattedMessage id='regeneration_indicator.label' tagName='strong' defaultMessage='Loading…' />
-            <FormattedMessage id='regeneration_indicator.sublabel' defaultMessage='Your home feed is being prepared!' />
-          </div>
-        </div>
-      </div>
+      <Stack className='py-2' space={2}>
+        <Text size='2xl' weight='bold' tag='h2' align='center'>
+          <FormattedMessage id='regeneration_indicator.label' tagName='strong' defaultMessage='Loading…' />
+        </Text>
+
+        <Text size='sm' theme='muted' align='center'>
+          <FormattedMessage id='regeneration_indicator.sublabel' defaultMessage='Your home feed is being prepared!' />
+        </Text>
+      </Stack>
     );
   }
 

src/components/status-media.tsx

@@ -44,11 +44,11 @@ const StatusMedia: React.FC<IStatusMedia> = ({
   };
 
   const renderLoadingVideoPlayer = (): JSX.Element => {
-    return <div className='media-spoiler-video' style={{ height: '285px' }} />;
+    return <div className='relative mt-2 block cursor-pointer border-0 bg-cover bg-center bg-no-repeat' style={{ height: '285px' }} />;
   };
 
   const renderLoadingAudioPlayer = (): JSX.Element => {
-    return <div className='media-spoiler-audio' style={{ height: '285px' }} />;
+    return <div className='relative mt-2 block cursor-pointer border-0 bg-cover bg-center bg-no-repeat' style={{ height: '285px' }} />;
   };
 
   const openMedia = (media: ImmutableList<Attachment>, index: number) => {
@@ -93,7 +93,7 @@ const StatusMedia: React.FC<IStatusMedia> = ({
             backgroundColor={attachment.meta.getIn(['colors', 'background']) as string | undefined}
             foregroundColor={attachment.meta.getIn(['colors', 'foreground']) as string | undefined}
             accentColor={attachment.meta.getIn(['colors', 'accent']) as string | undefined}
-            duration={attachment.meta.getIn(['original', 'duration'], 0)  as number | undefined}
+            duration={attachment.meta.getIn(['original', 'duration'], 0) as number | undefined}
             height={263}
           />
         </Suspense>

src/components/status-reply-mentions.tsx

@@ -39,7 +39,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
   // Rare, but it can happen.
   if (to.size === 0) {
     return (
-      <div className='reply-mentions'>
+      <div className='mb-1 block text-sm text-gray-700 dark:text-gray-600'>
         <FormattedMessage
           id='reply_mentions.reply_empty'
           defaultMessage='Replying to post'
@@ -54,7 +54,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
       <Link
         key={account.id}
         to={`/@${account.acct}`}
-        className='reply-mentions__account max-w-[200px] truncate align-bottom'
+        className='inline-block max-w-[200px] truncate align-bottom text-primary-600 no-underline [direction:ltr] hover:text-primary-700 hover:underline dark:text-accent-blue dark:hover:text-accent-blue'
         onClick={(e) => e.stopPropagation()}
       >
         @{isPubkey(account.username) ? account.username.slice(0, 8) : account.username}
@@ -81,7 +81,7 @@ const StatusReplyMentions: React.FC<IStatusReplyMentions> = ({ status, hoverable
   }
 
   return (
-    <div className='reply-mentions'>
+    <div className='mb-1 block text-sm text-gray-700 dark:text-gray-600'>
       <FormattedMessage
         id='reply_mentions.reply.hoverable'
         defaultMessage='<hover>Replying to</hover> {accounts}'

src/components/thumb-navigation-link.tsx

@@ -34,7 +34,7 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax,
   const icon = (active && activeSrc) || src;
 
   return (
-    <NavLink to={to} exact={exact} className='thumb-navigation__link'>
+    <NavLink to={to} exact={exact} className='flex flex-1 flex-col items-center space-y-1 px-2 py-2.5 text-lg text-gray-600'>
       {!demetricator && count !== undefined ? (
         <IconWithCounter
           src={icon}

src/components/thumb-navigation.tsx

@@ -45,7 +45,7 @@ const ThumbNavigation: React.FC = (): JSX.Element => {
   };
 
   return (
-    <div className='thumb-navigation'>
+    <div className='fixed inset-x-0 bottom-0 z-50 flex w-full overflow-x-auto border-t border-solid border-gray-200 bg-white/90 shadow-2xl backdrop-blur-md black:bg-black/90 lg:hidden dark:border-gray-800 dark:bg-primary-900/90'>
       <ThumbNavigationLink
         src={require('@tabler/icons/outline/home.svg')}
         activeSrc={require('@tabler/icons/filled/home.svg')}