From 49ba4c7a9d811b6d5ca7f04e9ad38bc8b3c830c4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 6 Feb 2023 18:18:49 +0100
Subject: [PATCH] Fixes, styles improvements, cleanup, enforce classes order
 for classNames
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .eslintrc.cjs                                 |   5 +-
 app/soapbox/components/account.tsx            |   2 +-
 .../components/announcements/reaction.tsx     |   4 +-
 app/soapbox/components/autosuggest-input.tsx  |   2 +-
 .../components/autosuggest-textarea.tsx       |   2 +-
 app/soapbox/components/badge.tsx              |   2 +-
 .../components/emoji-button-wrapper.tsx       |   9 +-
 app/soapbox/components/emoji-selector.tsx     |  91 +---
 app/soapbox/components/error-boundary.tsx     |   8 +-
 app/soapbox/components/event-preview.tsx      |   4 +-
 app/soapbox/components/group-card.tsx         |   6 +-
 app/soapbox/components/landing-gradient.tsx   |   2 +-
 app/soapbox/components/link.tsx               |   2 +-
 app/soapbox/components/list.tsx               |   2 +-
 app/soapbox/components/outline-box.tsx        |   2 +-
 app/soapbox/components/polls/poll-option.tsx  |  12 +-
 app/soapbox/components/radio.tsx              |   2 +-
 app/soapbox/components/scroll-top-button.tsx  |   4 +-
 app/soapbox/components/sidebar-menu.tsx       |   8 +-
 .../components/status-action-button.tsx       |   4 +-
 app/soapbox/components/still-image.tsx        |   4 +-
 .../components/ui/accordion/accordion.tsx     |   2 +-
 app/soapbox/components/ui/banner/banner.tsx   |   2 +-
 .../components/ui/button/useButtonStyles.ts   |   2 +-
 app/soapbox/components/ui/card/card.tsx       |   2 +-
 .../components/ui/checkbox/checkbox.tsx       |   2 +-
 app/soapbox/components/ui/counter/counter.tsx |   2 +-
 .../ui/emoji-selector/emoji-selector.tsx      |  71 ++-
 .../components/ui/form-group/form-group.tsx   |   4 +-
 .../components/ui/icon-button/icon-button.tsx |   2 +-
 app/soapbox/components/ui/input/input.tsx     |   2 +-
 app/soapbox/components/ui/menu/menu.tsx       |   2 +-
 app/soapbox/components/ui/modal/modal.tsx     |   4 +-
 .../ui/phone-input/country-code-dropdown.tsx  |   2 +-
 .../ui/progress-bar/progress-bar.tsx          |   4 +-
 .../ui/radio-button/radio-button.tsx          |   2 +-
 app/soapbox/components/ui/select/select.tsx   |   2 +-
 app/soapbox/components/ui/slider/slider.tsx   |   6 +-
 app/soapbox/components/ui/tabs/tabs.tsx       |   4 +-
 .../components/ui/tag-input/tag-input.tsx     |   2 +-
 app/soapbox/components/ui/tag-input/tag.tsx   |   2 +-
 app/soapbox/components/ui/toast/toast.tsx     |   8 +-
 app/soapbox/components/upload-progress.tsx    |   2 +-
 app/soapbox/components/verification-badge.tsx |   2 +-
 app/soapbox/containers/soapbox.tsx            |   2 +-
 app/soapbox/features/about/index.tsx          |   2 +-
 .../components/moved-note.tsx                 |   2 +-
 .../features/account/components/header.tsx    |   2 +-
 .../features/admin/components/report.tsx      |   2 +-
 app/soapbox/features/admin/user-index.tsx     |  23 +-
 app/soapbox/features/ads/components/ad.tsx    |   2 +-
 .../features/aliases/components/search.tsx    |   2 +-
 app/soapbox/features/audio/index.tsx          |   2 +-
 .../auth-login/components/consumers-list.tsx  |   2 +-
 .../features/auth-token-list/index.tsx        |   2 +-
 .../chats/components/chat-composer.tsx        |   4 +-
 .../chats/components/chat-list-item.tsx       |   4 +-
 .../features/chats/components/chat-list.tsx   |   4 +-
 .../chats/components/chat-message-list.tsx    |   4 +-
 .../chats/components/chat-page/chat-page.tsx  |   6 +-
 .../chat-page/components/chat-page-main.tsx   |   4 +-
 .../chats/components/chat-search/results.tsx  |   4 +-
 .../chat-widget/chat-pane-header.tsx          |   2 +-
 .../components/chat-widget/chat-settings.tsx  |   4 +-
 .../features/chats/components/chat.tsx        |   2 +-
 .../features/chats/components/ui/pane.tsx     |   2 +-
 .../compose/components/privacy-dropdown.tsx   |   5 +-
 .../compose/components/reply-indicator.tsx    |   6 +-
 .../directory/components/account-card.tsx     |   2 +-
 .../features/embedded-status/index.tsx        |   2 +-
 .../features/event/event-information.tsx      |   4 +-
 .../features/feed-filtering/feed-carousel.tsx |  10 +-
 .../feed-suggestions/feed-suggestions.tsx     |   2 +-
 app/soapbox/features/forms/index.tsx          |  57 ---
 .../group/components/group-header.tsx         |   2 +-
 app/soapbox/features/home-timeline/index.tsx  |   2 +-
 app/soapbox/features/landing-page/index.tsx   |   2 +-
 app/soapbox/features/migration/index.tsx      |   2 +-
 .../components/clear-column-button.tsx        |  18 -
 .../notifications/components/notification.tsx |   2 +-
 .../steps/avatar-selection-step.tsx           |   2 +-
 .../onboarding/steps/completed-step.tsx       |   2 +-
 .../steps/cover-photo-selection-step.tsx      |   4 +-
 .../onboarding/steps/fediverse-step.tsx       |   4 +-
 .../steps/suggested-accounts-step.tsx         |   2 +-
 .../components/placeholder-avatar.tsx         |   4 +-
 .../components/placeholder-card.tsx           |   2 +-
 .../components/placeholder-chat-message.tsx   |   4 +-
 .../components/placeholder-display-name.tsx   |   2 +-
 .../components/placeholder-event-header.tsx   |   2 +-
 .../components/placeholder-event-preview.tsx  |   4 +-
 .../components/placeholder-group-card.tsx     |   6 +-
 .../components/placeholder-hashtag.tsx        |   2 +-
 .../components/placeholder-media-gallery.tsx  |   2 +-
 .../components/placeholder-notification.tsx   |   2 +-
 .../placeholder-sidebar-suggestions.tsx       |   2 +-
 .../components/placeholder-sidebar-trends.tsx |   2 +-
 .../components/placeholder-status-content.tsx |   2 +-
 .../public-layout/components/footer.tsx       |   2 +-
 .../public-layout/components/sonar.tsx        |  10 +-
 .../features/settings/media-display.tsx       |  58 ---
 .../components/site-preview.tsx               |   8 +-
 .../features/status/components/card.tsx       |   6 +-
 app/soapbox/features/status/index.tsx         |   4 +-
 .../ui/components/background-shapes.tsx       |   2 +-
 .../ui/components/floating-action-button.tsx  |   8 +-
 .../features/ui/components/link-footer.tsx    |   2 +-
 .../ui/components/modals/actions-modal.tsx    |  16 +-
 .../modals/compare-history-modal.tsx          |   2 +-
 .../compose-event-modal.tsx                   |   2 +-
 .../compose-event-modal/upload-button.tsx     |   2 +-
 .../ui/components/modals/hotkeys-modal.tsx    |   2 +-
 .../components/modals/landing-page-modal.tsx  |   2 +-
 .../manage-group-modal/steps/details-step.tsx |   8 +-
 .../ui/components/modals/policy-modal.tsx     |  12 +-
 .../modals/report-modal/report-modal.tsx      |   2 +-
 .../report-modal/steps/confirmation-step.tsx  |   2 +-
 .../modals/report-modal/steps/reason-step.tsx |   6 +-
 .../components/modals/unauthorized-modal.tsx  |   9 +-
 app/soapbox/features/ui/components/navbar.tsx |   4 +-
 .../ui/components/profile-info-panel.tsx      |   2 +-
 app/soapbox/features/ui/index.tsx             |   2 -
 .../features/ui/util/async-components.ts      |   4 -
 .../features/verification/email-passthru.tsx  |   8 +-
 .../features/verification/registration.tsx    |   4 +-
 .../verification/steps/email-verification.tsx |   2 +-
 app/styles/_mixins.scss                       |   8 -
 app/styles/application.scss                   |   3 -
 app/styles/basics.scss                        |  12 +-
 app/styles/components/audio-player.scss       |  40 +-
 app/styles/components/columns.scss            |  50 --
 app/styles/components/compose-form.scss       |  25 +-
 app/styles/components/emoji-reacts.scss       |  98 ----
 app/styles/components/icon.scss               |  40 --
 app/styles/components/media-gallery.scss      |  14 +-
 app/styles/components/modal.scss              | 311 ++++++-------
 app/styles/components/react-toggle.scss       |   2 +-
 app/styles/components/search.scss             |  17 -
 app/styles/components/status.scss             |   1 -
 app/styles/components/video-player.scss       |  16 +-
 app/styles/forms.scss                         | 430 +-----------------
 app/styles/loading.scss                       |  12 +-
 app/styles/placeholder.scss                   |  40 --
 app/styles/rtl.scss                           |  50 --
 app/styles/themes.scss                        |  77 ----
 app/styles/ui.scss                            |  12 +-
 app/styles/variables.scss                     |  16 -
 147 files changed, 459 insertions(+), 1565 deletions(-)
 delete mode 100644 app/soapbox/features/notifications/components/clear-column-button.tsx
 delete mode 100644 app/soapbox/features/settings/media-display.tsx
 delete mode 100644 app/styles/components/emoji-reacts.scss
 delete mode 100644 app/styles/placeholder.scss
 delete mode 100644 app/styles/themes.scss

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 51cc6e833..590653361 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -265,8 +265,11 @@ module.exports = {
 
     'react-hooks/rules-of-hooks': 'error',
 
-    'tailwindcss/classnames-order': 'error',
+    'tailwindcss/classnames-order': ['error', {
+      callees: ['classNames'],
+    }],
     'tailwindcss/migration-from-tailwind-2': 'error',
+    'tailwindcss/no-custom-classname': 'off',
   },
   overrides: [
     {
diff --git a/app/soapbox/components/account.tsx b/app/soapbox/components/account.tsx
index 2901433ec..710737963 100644
--- a/app/soapbox/components/account.tsx
+++ b/app/soapbox/components/account.tsx
@@ -43,7 +43,7 @@ const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account, disabled }) => {
 
   return (
     <button
-      className='h-4 w-4 flex-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2'
+      className='focus:ring-primary-500 h-4 w-4 flex-none focus:ring-2 focus:ring-offset-2'
       onClick={handleClick}
       disabled={disabled}
     >
diff --git a/app/soapbox/components/announcements/reaction.tsx b/app/soapbox/components/announcements/reaction.tsx
index 230613701..a39942c32 100644
--- a/app/soapbox/components/announcements/reaction.tsx
+++ b/app/soapbox/components/announcements/reaction.tsx
@@ -43,7 +43,7 @@ const Reaction: React.FC<IReaction> = ({ announcementId, reaction, addReaction,
 
   return (
     <button
-      className={classNames('flex shrink-0 items-center gap-1.5 bg-gray-100 dark:bg-primary-900 rounded-sm px-1.5 py-1 transition-colors', {
+      className={classNames('dark:bg-primary-900 flex shrink-0 items-center gap-1.5 rounded-sm bg-gray-100 px-1.5 py-1 transition-colors', {
         'bg-gray-200 dark:bg-primary-800': hovered,
         'bg-primary-200 dark:bg-primary-500': reaction.me,
       })}
@@ -56,7 +56,7 @@ const Reaction: React.FC<IReaction> = ({ announcementId, reaction, addReaction,
       <span className='block h-4 w-4'>
         <Emoji hovered={hovered} emoji={reaction.name} emojiMap={emojiMap} />
       </span>
-      <span className='block min-w-[9px] text-center text-xs font-medium text-primary-600 dark:text-white'>
+      <span className='text-primary-600 block min-w-[9px] text-center text-xs font-medium dark:text-white'>
         <AnimatedNumber value={reaction.count} />
       </span>
     </button>
diff --git a/app/soapbox/components/autosuggest-input.tsx b/app/soapbox/components/autosuggest-input.tsx
index 122890112..dcc2e78d7 100644
--- a/app/soapbox/components/autosuggest-input.tsx
+++ b/app/soapbox/components/autosuggest-input.tsx
@@ -235,7 +235,7 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
 
     return menu.map((item, i) => (
       <a
-        className={classNames('flex items-center space-x-2 px-4 py-2.5 text-sm cursor-pointer text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800', { selected: suggestions.size - selectedSuggestion === i })}
+        className={classNames('dark:focus:bg-primary-800 flex cursor-pointer items-center space-x-2 px-4 py-2.5 text-sm text-gray-700 hover:bg-gray-100 focus:bg-gray-100 dark:text-gray-500 dark:hover:bg-gray-800', { selected: suggestions.size - selectedSuggestion === i })}
         href='#'
         role='button'
         tabIndex={0}
diff --git a/app/soapbox/components/autosuggest-textarea.tsx b/app/soapbox/components/autosuggest-textarea.tsx
index 9736e5950..9b97d69dd 100644
--- a/app/soapbox/components/autosuggest-textarea.tsx
+++ b/app/soapbox/components/autosuggest-textarea.tsx
@@ -244,7 +244,7 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
 
             <Textarea
               ref={this.setTextarea}
-              className={classNames('transition-[min-height] motion-reduce:transition-none dark:bg-transparent px-0 border-0 text-gray-800 dark:text-white placeholder:text-gray-600 dark:placeholder:text-gray-600 resize-none w-full focus:shadow-none focus:border-0 focus:ring-0', {
+              className={classNames('w-full resize-none border-0 px-0 text-gray-800 transition-[min-height] placeholder:text-gray-600 focus:border-0 focus:shadow-none focus:ring-0 motion-reduce:transition-none dark:bg-transparent dark:text-white dark:placeholder:text-gray-600', {
                 'min-h-[40px]': condensed,
                 'min-h-[100px]': !condensed,
               })}
diff --git a/app/soapbox/components/badge.tsx b/app/soapbox/components/badge.tsx
index 01b792bd0..3914381de 100644
--- a/app/soapbox/components/badge.tsx
+++ b/app/soapbox/components/badge.tsx
@@ -12,7 +12,7 @@ const Badge: React.FC<IBadge> = ({ title, slug }) => {
   return (
     <span
       data-testid='badge'
-      className={classNames('inline-flex items-center px-2 py-0.5 rounded text-xs font-medium', {
+      className={classNames('inline-flex items-center rounded px-2 py-0.5 text-xs font-medium', {
         'bg-fuchsia-700 text-white': slug === 'patron',
         'bg-emerald-800 text-white': slug === 'badge:donor',
         'bg-black text-white': slug === 'admin',
diff --git a/app/soapbox/components/emoji-button-wrapper.tsx b/app/soapbox/components/emoji-button-wrapper.tsx
index f0d287aa6..9cd826c36 100644
--- a/app/soapbox/components/emoji-button-wrapper.tsx
+++ b/app/soapbox/components/emoji-button-wrapper.tsx
@@ -116,9 +116,9 @@ const EmojiButtonWrapper: React.FC<IEmojiButtonWrapper> = ({ statusId, children
     }));
   };
 
-  // const handleUnfocus: React.EventHandler<React.KeyboardEvent> = () => {
-  //   setFocused(false);
-  // };
+  const handleUnfocus: React.EventHandler<React.KeyboardEvent> = () => {
+    setVisible(false);
+  };
 
   const selector = (
     <div
@@ -132,8 +132,9 @@ const EmojiButtonWrapper: React.FC<IEmojiButtonWrapper> = ({ statusId, children
       <EmojiSelector
         emojis={soapboxConfig.allowedEmoji}
         onReact={handleReact}
+        visible={visible}
         // focused={focused}
-        // onUnfocus={handleUnfocus}
+        onUnfocus={handleUnfocus}
       />
     </div>
   );
diff --git a/app/soapbox/components/emoji-selector.tsx b/app/soapbox/components/emoji-selector.tsx
index be0ca3a51..39efc1153 100644
--- a/app/soapbox/components/emoji-selector.tsx
+++ b/app/soapbox/components/emoji-selector.tsx
@@ -30,108 +30,21 @@ class EmojiSelector extends ImmutablePureComponent<IEmojiSelector> {
     visible: false,
   };
 
-  node?: HTMLDivElement = undefined;
-
-  handleBlur: React.FocusEventHandler<HTMLDivElement> = e => {
-    const { focused, onUnfocus } = this.props;
-
-    if (focused && (!e.currentTarget || !e.currentTarget.classList.contains('emoji-react-selector__emoji'))) {
-      onUnfocus();
-    }
-  };
-
-  _selectPreviousEmoji = (i: number): void => {
-    if (!this.node) return;
-
-    if (i !== 0) {
-      const button: HTMLButtonElement | null = this.node.querySelector(`.emoji-react-selector__emoji:nth-child(${i})`);
-      button?.focus();
-    } else {
-      const button: HTMLButtonElement | null = this.node.querySelector('.emoji-react-selector__emoji:last-child');
-      button?.focus();
-    }
-  };
-
-  _selectNextEmoji = (i: number) => {
-    if (!this.node) return;
-
-    if (i !== this.props.allowedEmoji.size - 1) {
-      const button: HTMLButtonElement | null = this.node.querySelector(`.emoji-react-selector__emoji:nth-child(${i + 2})`);
-      button?.focus();
-    } else {
-      const button: HTMLButtonElement | null = this.node.querySelector('.emoji-react-selector__emoji:first-child');
-      button?.focus();
-    }
-  };
-
-  handleKeyDown = (i: number): React.KeyboardEventHandler => e => {
-    const { onUnfocus } = this.props;
-
-    switch (e.key) {
-      case 'Tab':
-        e.preventDefault();
-        if (e.shiftKey) this._selectPreviousEmoji(i);
-        else this._selectNextEmoji(i);
-        break;
-      case 'Left':
-      case 'ArrowLeft':
-        this._selectPreviousEmoji(i);
-        break;
-      case 'Right':
-      case 'ArrowRight':
-        this._selectNextEmoji(i);
-        break;
-      case 'Escape':
-        onUnfocus();
-        break;
-    }
-  };
-
-  handleReact = (emoji: string) => (): void => {
-    const { onReact, focused, onUnfocus } = this.props;
-
-    onReact(emoji);
-
-    if (focused) {
-      onUnfocus();
-    }
-  };
-
   handlers = {
     open: () => { },
   };
 
-  setRef = (c: HTMLDivElement): void => {
-    this.node = c;
-  };
-
   render() {
-    const { visible, focused, allowedEmoji, onReact } = this.props;
+    const { visible, focused, allowedEmoji, onReact, onUnfocus } = this.props;
 
     return (
       <HotKeys handlers={this.handlers}>
-        {/*<div
-          className={classNames('flex absolute bg-white dark:bg-gray-500 px-2 py-3 rounded-full shadow-md opacity-0 pointer-events-none duration-100 w-max', { 'opacity-100 pointer-events-auto z-[999]': visible || focused })}
-          onBlur={this.handleBlur}
-          ref={this.setRef}
-        >
-          {allowedEmoji.map((emoji, i) => (
-            <button
-              key={i}
-              className='emoji-react-selector__emoji'
-              onClick={this.handleReact(emoji)}
-              onKeyDown={this.handleKeyDown(i)}
-              tabIndex={(visible || focused) ? 0 : -1}
-            >
-              <Emoji emoji={emoji} />
-            </button>
-          ))}
-        </div>*/}
         <RealEmojiSelector
           emojis={allowedEmoji.toArray()}
           onReact={onReact}
           visible={visible}
           focused={focused}
+          onUnfocus={onUnfocus}
         />
       </HotKeys>
     );
diff --git a/app/soapbox/components/error-boundary.tsx b/app/soapbox/components/error-boundary.tsx
index 3a6b4ac0b..4285c31d5 100644
--- a/app/soapbox/components/error-boundary.tsx
+++ b/app/soapbox/components/error-boundary.tsx
@@ -113,7 +113,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
     const errorText = this.getErrorText();
 
     return (
-      <div className='flex h-screen flex-col bg-white pt-16 pb-12 dark:bg-primary-900'>
+      <div className='dark:bg-primary-900 flex h-screen flex-col bg-white pt-16 pb-12'>
         <main className='mx-auto flex w-full max-w-7xl grow flex-col justify-center px-4 sm:px-6 lg:px-8'>
           <div className='flex shrink-0 justify-center'>
             <a href='/' className='inline-flex'>
@@ -132,7 +132,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
                   defaultMessage="We're sorry for the interruption. If the problem persists, please reach out to our support team. You may also try to {clearCookies} (this will log you out)."
                   values={{
                     clearCookies: (
-                      <a href='/' onClick={this.clearCookies} className='text-primary-600 hover:underline dark:text-accent-blue'>
+                      <a href='/' onClick={this.clearCookies} className='text-primary-600 dark:text-accent-blue hover:underline'>
                         <FormattedMessage
                           id='alert.unexpected.clear_cookies'
                           defaultMessage='clear cookies and browser data'
@@ -150,7 +150,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
               </Text>
 
               <div className='mt-10'>
-                <a href='/' className='text-base font-medium text-primary-600 hover:underline dark:text-accent-blue'>
+                <a href='/' className='text-primary-600 dark:text-accent-blue text-base font-medium hover:underline'>
                   <FormattedMessage id='alert.unexpected.return_home' defaultMessage='Return Home' />
                   <span aria-hidden='true'> &rarr;</span>
                 </a>
@@ -162,7 +162,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
                 {errorText && (
                   <textarea
                     ref={this.setTextareaRef}
-                    className='block h-48 w-full rounded-md border-gray-300 bg-gray-100 p-4 font-mono text-gray-900 shadow-sm focus:border-primary-500 focus:ring-2 focus:ring-primary-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 sm:text-sm'
+                    className='focus:border-primary-500 focus:ring-primary-500 block h-48 w-full rounded-md border-gray-300 bg-gray-100 p-4 font-mono text-gray-900 shadow-sm focus:ring-2 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 sm:text-sm'
                     value={errorText}
                     onClick={this.handleCopy}
                     readOnly
diff --git a/app/soapbox/components/event-preview.tsx b/app/soapbox/components/event-preview.tsx
index e0585e01b..5c12799ff 100644
--- a/app/soapbox/components/event-preview.tsx
+++ b/app/soapbox/components/event-preview.tsx
@@ -51,11 +51,11 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
   ));
 
   return (
-    <div className={classNames('w-full rounded-lg bg-gray-100 dark:bg-primary-800 relative overflow-hidden', className)}>
+    <div className={classNames('dark:bg-primary-800 relative w-full overflow-hidden rounded-lg bg-gray-100', className)}>
       <div className='absolute top-28 right-3'>
         {floatingAction && action}
       </div>
-      <div className='h-40 bg-primary-200 dark:bg-gray-600'>
+      <div className='bg-primary-200 h-40 dark:bg-gray-600'>
         {banner && <img className='h-full w-full object-cover' src={banner.url} alt={intl.formatMessage(messages.eventBanner)} />}
       </div>
       <Stack className='p-2.5' space={2}>
diff --git a/app/soapbox/components/group-card.tsx b/app/soapbox/components/group-card.tsx
index 15d8cf497..edb95a285 100644
--- a/app/soapbox/components/group-card.tsx
+++ b/app/soapbox/components/group-card.tsx
@@ -18,11 +18,11 @@ const GroupCard: React.FC<IGroupCard> = ({ group }) => {
 
   return (
     <div className='overflow-hidden'>
-      <Stack className='rounded-lg border border-solid border-gray-300 bg-white dark:border-primary-800 dark:bg-primary-900 sm:rounded-xl'>
-        <div className='relative -m-[1px] mb-0 h-[120px] rounded-t-lg bg-primary-100 dark:bg-gray-800 sm:rounded-t-xl'>
+      <Stack className='dark:border-primary-800 dark:bg-primary-900 rounded-lg border border-solid border-gray-300 bg-white sm:rounded-xl'>
+        <div className='bg-primary-100 relative -m-[1px] mb-0 h-[120px] rounded-t-lg dark:bg-gray-800 sm:rounded-t-xl'>
           {group.header && <img className='h-full w-full rounded-t-lg object-cover sm:rounded-t-xl' src={group.header} alt={intl.formatMessage(messages.groupHeader)} />}
           <div className='absolute left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2'>
-            <Avatar className='ring-2 ring-white dark:ring-primary-900' src={group.avatar} size={64} />
+            <Avatar className='dark:ring-primary-900 ring-2 ring-white' src={group.avatar} size={64} />
           </div>
         </div>
         <Stack className='p-3 pt-9' alignItems='center' space={3}>
diff --git a/app/soapbox/components/landing-gradient.tsx b/app/soapbox/components/landing-gradient.tsx
index 1cef99843..6f923de27 100644
--- a/app/soapbox/components/landing-gradient.tsx
+++ b/app/soapbox/components/landing-gradient.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 /** Fullscreen gradient used as a backdrop to public pages. */
 const LandingGradient: React.FC = () => (
-  <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 via-white to-gradient-end/10 dark:from-primary-900/50 dark:via-primary-900 dark:to-primary-800/50' />
+  <div className='from-primary-50 to-gradient-end/10 dark:from-primary-900/50 dark:via-primary-900 dark:to-primary-800/50 fixed h-screen w-full bg-gradient-to-tr via-white' />
 );
 
 export default LandingGradient;
diff --git a/app/soapbox/components/link.tsx b/app/soapbox/components/link.tsx
index 51bb91300..7455547e6 100644
--- a/app/soapbox/components/link.tsx
+++ b/app/soapbox/components/link.tsx
@@ -4,7 +4,7 @@ import { Link as Comp, LinkProps } from 'react-router-dom';
 const Link = (props: LinkProps) => (
   <Comp
     {...props}
-    className='text-primary-600 hover:underline dark:text-accent-blue'
+    className='text-primary-600 dark:text-accent-blue hover:underline'
   />
 );
 
diff --git a/app/soapbox/components/list.tsx b/app/soapbox/components/list.tsx
index b135fdf36..14c23a54d 100644
--- a/app/soapbox/components/list.tsx
+++ b/app/soapbox/components/list.tsx
@@ -84,7 +84,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick, onSelec
           {children}
 
           {isSelected ? (
-            <Icon src={require('@tabler/icons/check.svg')} className='ml-1 text-primary-500 dark:text-primary-400' />
+            <Icon src={require('@tabler/icons/check.svg')} className='text-primary-500 dark:text-primary-400 ml-1' />
           ) : null}
         </div>
       ) : null}
diff --git a/app/soapbox/components/outline-box.tsx b/app/soapbox/components/outline-box.tsx
index 41a13bf49..163ba6dd4 100644
--- a/app/soapbox/components/outline-box.tsx
+++ b/app/soapbox/components/outline-box.tsx
@@ -10,7 +10,7 @@ interface IOutlineBox extends React.HTMLAttributes<HTMLDivElement> {
 const OutlineBox: React.FC<IOutlineBox> = ({ children, className, ...rest }) => {
   return (
     <div
-      className={classNames('p-4 rounded-lg border border-solid border-gray-300 dark:border-gray-800', className)}
+      className={classNames('rounded-lg border border-solid border-gray-300 p-4 dark:border-gray-800', className)}
       {...rest}
     >
       {children}
diff --git a/app/soapbox/components/polls/poll-option.tsx b/app/soapbox/components/polls/poll-option.tsx
index 5c99e1186..5079ef2ad 100644
--- a/app/soapbox/components/polls/poll-option.tsx
+++ b/app/soapbox/components/polls/poll-option.tsx
@@ -20,7 +20,7 @@ const PollPercentageBar: React.FC<{ percent: number, leading: boolean }> = ({ pe
     <Motion defaultStyle={{ width: 0 }} style={{ width: spring(percent, { ...presets.gentle, precision: 0.1 }) }}>
       {({ width }) => (
         <span
-          className='absolute inset-0 inline-block h-full rounded-l-md bg-primary-100 dark:bg-primary-500'
+          className='bg-primary-100 dark:bg-primary-500 absolute inset-0 inline-block h-full rounded-l-md'
           style={{ width: `${width}%` }}
         />
       )}
@@ -46,7 +46,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
   return (
     <label
       className={
-        classNames('flex relative p-2 bg-white dark:bg-primary-900 cursor-pointer rounded-3xl border border-solid hover:bg-primary-50 dark:hover:bg-primary-800/50', {
+        classNames('dark:bg-primary-900 hover:bg-primary-50 dark:hover:bg-primary-800/50 relative flex cursor-pointer rounded-3xl border border-solid bg-white p-2', {
           'border-primary-600 ring-1 ring-primary-600 bg-primary-50 dark:bg-primary-800/50 dark:border-primary-300 dark:ring-primary-300': active,
           'border-primary-300 dark:border-primary-500': !active,
         })
@@ -74,7 +74,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
 
         <div className='col-start-1 row-start-1 flex items-center justify-self-end'>
           <span
-            className={classNames('flex items-center justify-center w-6 h-6 flex-none border border-solid rounded-full', {
+            className={classNames('flex h-6 w-6 flex-none items-center justify-center rounded-full border border-solid', {
               'bg-primary-600 border-primary-600 dark:bg-primary-300 dark:border-primary-300': active,
               'border-primary-300 bg-white dark:bg-primary-900 dark:border-primary-500': !active,
             })}
@@ -85,7 +85,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
             aria-label={option.title}
           >
             {active && (
-              <Icon src={require('@tabler/icons/check.svg')} className='h-4 w-4 text-white dark:text-primary-900' />
+              <Icon src={require('@tabler/icons/check.svg')} className='dark:text-primary-900 h-4 w-4 text-white' />
             )}
           </span>
         </div>
@@ -123,7 +123,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
           <HStack
             justifyContent='between'
             alignItems='center'
-            className='relative w-full overflow-hidden rounded-md bg-white p-2 dark:bg-primary-800'
+            className='dark:bg-primary-800 relative w-full overflow-hidden rounded-md bg-white p-2'
           >
             <PollPercentageBar percent={percent} leading={leading} />
 
@@ -141,7 +141,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
                 <Icon
                   src={require('@tabler/icons/circle-check.svg')}
                   alt={intl.formatMessage(messages.voted)}
-                  className='h-4 w-4 text-primary-600 dark:fill-white dark:text-primary-800'
+                  className='text-primary-600 dark:text-primary-800 h-4 w-4 dark:fill-white'
                 />
               ) : (
                 <div className='svg-icon' />
diff --git a/app/soapbox/components/radio.tsx b/app/soapbox/components/radio.tsx
index ef204b06f..f122e3ea8 100644
--- a/app/soapbox/components/radio.tsx
+++ b/app/soapbox/components/radio.tsx
@@ -31,7 +31,7 @@ const RadioItem: React.FC<IRadioItem> = ({ label, hint, checked = false, onChang
         checked={checked}
         onChange={onChange}
         value={value}
-        className='h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500'
+        className='text-primary-600 focus:ring-primary-500 h-4 w-4 border-gray-300'
       />
     </ListItem>
   );
diff --git a/app/soapbox/components/scroll-top-button.tsx b/app/soapbox/components/scroll-top-button.tsx
index 7a0fb71de..ec826bc23 100644
--- a/app/soapbox/components/scroll-top-button.tsx
+++ b/app/soapbox/components/scroll-top-button.tsx
@@ -36,7 +36,7 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
 
   const visible = count > 0 && scrolled;
 
-  const classes = classNames('left-1/2 -translate-x-1/2 fixed top-20 z-50', {
+  const classes = classNames('fixed left-1/2 top-20 z-50 -translate-x-1/2', {
     'hidden': !visible,
   });
 
@@ -83,7 +83,7 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
 
   return (
     <div className={classes}>
-      <a className='flex cursor-pointer items-center space-x-1.5 whitespace-nowrap rounded-full bg-primary-600 px-4 py-2 text-white transition-transform hover:scale-105 hover:bg-primary-700 active:scale-100' onClick={handleClick}>
+      <a className='bg-primary-600 hover:bg-primary-700 flex cursor-pointer items-center space-x-1.5 whitespace-nowrap rounded-full px-4 py-2 text-white transition-transform hover:scale-105 active:scale-100' onClick={handleClick}>
         <Icon src={require('@tabler/icons/arrow-bar-to-up.svg')} />
 
         {(count > 0) && (
diff --git a/app/soapbox/components/sidebar-menu.tsx b/app/soapbox/components/sidebar-menu.tsx
index 51640d40e..fff42ea5d 100644
--- a/app/soapbox/components/sidebar-menu.tsx
+++ b/app/soapbox/components/sidebar-menu.tsx
@@ -53,8 +53,8 @@ interface ISidebarLink {
 const SidebarLink: React.FC<ISidebarLink> = ({ href, to, icon, text, onClick }) => {
   const body = (
     <HStack space={2} alignItems='center'>
-      <div className='relative inline-flex rounded-full bg-primary-50 p-2 dark:bg-gray-800'>
-        <Icon src={icon} className='h-5 w-5 text-primary-500' />
+      <div className='bg-primary-50 relative inline-flex rounded-full p-2 dark:bg-gray-800'>
+        <Icon src={icon} className='text-primary-500 h-5 w-5' />
       </div>
 
       <Text tag='span' weight='medium' theme='inherit'>{text}</Text>
@@ -334,7 +334,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                         <Icon
                           src={require('@tabler/icons/chevron-down.svg')}
-                          className={classNames('w-4 h-4 text-gray-900 dark:text-gray-100 transition-transform', {
+                          className={classNames('h-4 w-4 text-gray-900 transition-transform dark:text-gray-100', {
                             'rotate-180': switcher,
                           })}
                         />
@@ -346,7 +346,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                         {otherAccounts.map(account => renderAccount(account))}
 
                         <NavLink className='flex items-center space-x-1 py-2' to='/login/add' onClick={handleClose}>
-                          <Icon className='h-4 w-4 text-primary-500' src={require('@tabler/icons/plus.svg')} />
+                          <Icon className='text-primary-500 h-4 w-4' src={require('@tabler/icons/plus.svg')} />
                           <Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text>
                         </NavLink>
                       </div>
diff --git a/app/soapbox/components/status-action-button.tsx b/app/soapbox/components/status-action-button.tsx
index 2ac9e259d..d526dd211 100644
--- a/app/soapbox/components/status-action-button.tsx
+++ b/app/soapbox/components/status-action-button.tsx
@@ -79,10 +79,10 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
       ref={ref}
       type='button'
       className={classNames(
-        'flex items-center p-1 rounded-full rtl:space-x-reverse',
+        'flex items-center rounded-full p-1 rtl:space-x-reverse',
         'text-gray-600 hover:text-gray-600 dark:hover:text-white',
         'bg-white dark:bg-transparent',
-        'focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:ring-offset-0',
+        'focus:ring-primary-500 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-0',
         {
           'text-black dark:text-white': active && emoji,
           'hover:text-gray-600 dark:hover:text-white': !filteredProps.disabled,
diff --git a/app/soapbox/components/still-image.tsx b/app/soapbox/components/still-image.tsx
index 0f6ee9659..7b6b55182 100644
--- a/app/soapbox/components/still-image.tsx
+++ b/app/soapbox/components/still-image.tsx
@@ -39,7 +39,7 @@ const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterb
   };
 
   /** ClassNames shared between the `<img>` and `<canvas>` elements. */
-  const baseClassName = classNames('w-full h-full block', {
+  const baseClassName = classNames('block h-full w-full', {
     'object-contain': letterboxed,
     'object-cover': !letterboxed,
   });
@@ -47,7 +47,7 @@ const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterb
   return (
     <div
       data-testid='still-image-container'
-      className={classNames(className, 'relative group overflow-hidden isolate')}
+      className={classNames(className, 'group relative isolate overflow-hidden')}
       style={style}
     >
       <img
diff --git a/app/soapbox/components/ui/accordion/accordion.tsx b/app/soapbox/components/ui/accordion/accordion.tsx
index cb9e66497..4554d641a 100644
--- a/app/soapbox/components/ui/accordion/accordion.tsx
+++ b/app/soapbox/components/ui/accordion/accordion.tsx
@@ -36,7 +36,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
   };
 
   return (
-    <div className='rounded-lg bg-white text-gray-900 shadow dark:bg-primary-800 dark:text-gray-100 dark:shadow-none'>
+    <div className='dark:bg-primary-800 rounded-lg bg-white text-gray-900 shadow dark:text-gray-100 dark:shadow-none'>
       <button
         type='button'
         onClick={handleToggle}
diff --git a/app/soapbox/components/ui/banner/banner.tsx b/app/soapbox/components/ui/banner/banner.tsx
index d58804db7..44e3cf162 100644
--- a/app/soapbox/components/ui/banner/banner.tsx
+++ b/app/soapbox/components/ui/banner/banner.tsx
@@ -12,7 +12,7 @@ const Banner: React.FC<IBanner> = ({ theme, children, className }) => {
   return (
     <div
       data-testid='banner'
-      className={classNames('fixed bottom-0 left-0 right-0 py-8 z-50', {
+      className={classNames('fixed bottom-0 left-0 right-0 z-50 py-8', {
         'backdrop-blur bg-primary-800/80 dark:bg-primary-900/80': theme === 'frosted',
         'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-3xl dark:shadow-inset': theme === 'opaque',
       }, className)}
diff --git a/app/soapbox/components/ui/button/useButtonStyles.ts b/app/soapbox/components/ui/button/useButtonStyles.ts
index 176334939..898b313cd 100644
--- a/app/soapbox/components/ui/button/useButtonStyles.ts
+++ b/app/soapbox/components/ui/button/useButtonStyles.ts
@@ -8,7 +8,7 @@ const themes = {
   tertiary:
     'bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500',
   accent: 'border-transparent bg-secondary-500 hover:bg-secondary-400 focus:bg-secondary-500 text-gray-100 focus:ring-secondary-300',
-  danger: 'border-transparent bg-danger-100 dark:bg-danger-900 text-danger-600 dark:text-danger-200 hover:bg-danger-600 hover:text-gray-100 dark:hover:text-gray-100 dark:hover:bg-danger-500 focus:bg-danger-800 dark:focus:bg-danger-600',
+  danger: 'border-transparent bg-danger-100 dark:bg-danger-900 text-danger-600 dark:text-danger-200 hover:bg-danger-600 hover:text-gray-100 dark:hover:text-gray-100 dark:hover:bg-danger-500 focus:bg-danger-800 focus:text-gray-200 dark:focus:bg-danger-600 dark:focus:text-gray-100',
   transparent: 'border-transparent text-gray-800 backdrop-blur-sm bg-white/75 hover:bg-white/80',
   outline: 'border-gray-100 border-2 bg-transparent text-gray-100 hover:bg-white/10',
   muted: 'border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500',
diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx
index 88c9df2d2..3520fe823 100644
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/app/soapbox/components/ui/card/card.tsx
@@ -64,7 +64,7 @@ const CardHeader: React.FC<ICardHeader> = ({ className, children, backHref, onBa
     const backAttributes = backHref ? { to: backHref } : { onClick: onBackClick };
 
     return (
-      <Comp {...backAttributes} className='text-gray-900 focus:ring-2 focus:ring-primary-500 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
+      <Comp {...backAttributes} className='focus:ring-primary-500 text-gray-900 focus:ring-2 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
         <SvgIcon src={require('@tabler/icons/arrow-left.svg')} className='h-6 w-6 rtl:rotate-180' />
         <span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
       </Comp>
diff --git a/app/soapbox/components/ui/checkbox/checkbox.tsx b/app/soapbox/components/ui/checkbox/checkbox.tsx
index fe31e8089..dfd32acf7 100644
--- a/app/soapbox/components/ui/checkbox/checkbox.tsx
+++ b/app/soapbox/components/ui/checkbox/checkbox.tsx
@@ -9,7 +9,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, ICheckbox>((props, ref) => {
       {...props}
       ref={ref}
       type='checkbox'
-      className='h-4 w-4 rounded border-2 border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-800 dark:bg-gray-900'
+      className='text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-2 border-gray-300 dark:border-gray-800 dark:bg-gray-900'
     />
   );
 });
diff --git a/app/soapbox/components/ui/counter/counter.tsx b/app/soapbox/components/ui/counter/counter.tsx
index e0fbb6004..18b7122f9 100644
--- a/app/soapbox/components/ui/counter/counter.tsx
+++ b/app/soapbox/components/ui/counter/counter.tsx
@@ -12,7 +12,7 @@ interface ICounter {
 /** A simple counter for notifications, etc. */
 const Counter: React.FC<ICounter> = ({ count, countMax }) => {
   return (
-    <span className='flex h-5 min-w-[20px] max-w-[26px] items-center justify-center rounded-full bg-secondary-500 text-xs font-medium text-white ring-2 ring-white dark:ring-gray-800'>
+    <span className='bg-secondary-500 flex h-5 min-w-[20px] max-w-[26px] items-center justify-center rounded-full text-xs font-medium text-white ring-2 ring-white dark:ring-gray-800'>
       {shortNumberFormat(count, countMax)}
     </span>
   );
diff --git a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
index f8187fa98..371afb6eb 100644
--- a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
+++ b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
@@ -1,5 +1,5 @@
 import classNames from 'clsx';
-import React from 'react';
+import React, { useRef } from 'react';
 
 import { Emoji, HStack } from 'soapbox/components/ui';
 
@@ -8,6 +8,8 @@ interface IEmojiButton {
   emoji: string,
   /** Event handler when the emoji is clicked. */
   onClick: React.EventHandler<React.MouseEvent>,
+  /** Keyboard event handler. */
+  onKeyDown?: React.EventHandler<React.KeyboardEvent>,
   /** Extra class name on the <button> element. */
   className?: string,
   /** Tab order of the button. */
@@ -15,10 +17,10 @@ interface IEmojiButton {
 }
 
 /** Clickable emoji button that scales when hovered. */
-const EmojiButton: React.FC<IEmojiButton> = ({ emoji, className, onClick, tabIndex }): JSX.Element => {
+const EmojiButton: React.FC<IEmojiButton> = ({ emoji, className, onClick, onKeyDown, tabIndex }): JSX.Element => {
   return (
-    <button className={classNames(className)} onClick={onClick} tabIndex={tabIndex}>
-      <Emoji className='h-8 w-8 duration-100 hover:scale-125' emoji={emoji} />
+    <button className={classNames(className)} onClick={onClick} onKeyDown={onKeyDown} tabIndex={tabIndex}>
+      <Emoji className='h-8 w-8 duration-100' emoji={emoji} />
     </button>
   );
 };
@@ -28,6 +30,8 @@ interface IEmojiSelector {
   emojis: Iterable<string>,
   /** Event handler when an emoji is clicked. */
   onReact: (emoji: string) => void,
+  /** Event handler when selector is escaped. */
+  onUnfocus: React.KeyboardEventHandler<HTMLDivElement>,
   /** Whether the selector should be visible. */
   visible?: boolean,
   /** Whether the selector should be focused. */
@@ -35,7 +39,9 @@ interface IEmojiSelector {
 }
 
 /** Panel with a row of emoji buttons. */
-const EmojiSelector: React.FC<IEmojiSelector> = ({ emojis, onReact, visible = false, focused = false }): JSX.Element => {
+const EmojiSelector: React.FC<IEmojiSelector> = ({ emojis, onReact, onUnfocus, visible = false, focused = false }): JSX.Element => {
+  const emojiList = Array.from(emojis);
+  const node = useRef<HTMLDivElement>(null);
 
   const handleReact = (emoji: string): React.EventHandler<React.MouseEvent> => {
     return (e) => {
@@ -45,15 +51,66 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({ emojis, onReact, visible = fa
     };
   };
 
+  const selectPreviousEmoji = (i: number): void => {
+    if (!node.current) return;
+
+    if (i !== 0) {
+      const button: HTMLButtonElement | null = node.current.querySelector(`.emoji-react-selector__emoji:nth-child(${i})`);
+      button?.focus();
+    } else {
+      const button: HTMLButtonElement | null = node.current.querySelector('.emoji-react-selector__emoji:last-child');
+      button?.focus();
+    }
+  };
+
+  const selectNextEmoji = (i: number) => {
+    if (!node.current) return;
+
+    if (i !== emojiList.length - 1) {
+      const button: HTMLButtonElement | null = node.current.querySelector(`.emoji-react-selector__emoji:nth-child(${i + 2})`);
+      button?.focus();
+    } else {
+      const button: HTMLButtonElement | null = node.current.querySelector('.emoji-react-selector__emoji:first-child');
+      button?.focus();
+    }
+  };
+
+  const handleKeyDown = (i: number): React.KeyboardEventHandler<HTMLDivElement> => e => {
+    switch (e.key) {
+      case 'Enter':
+        handleReact(emojiList[i])(e as any);
+        break;
+      case 'Tab':
+        e.preventDefault();
+        if (e.shiftKey) selectPreviousEmoji(i);
+        else selectNextEmoji(i);
+        break;
+      case 'Left':
+      case 'ArrowLeft':
+        selectPreviousEmoji(i);
+        break;
+      case 'Right':
+      case 'ArrowRight':
+        selectNextEmoji(i);
+        break;
+      case 'Escape':
+        onUnfocus(e);
+        break;
+    }
+  };
+
   return (
     <HStack
-      className={classNames('gap-2 bg-white dark:bg-gray-900 p-3 rounded-full shadow-md z-[999] w-max max-w-[100vw] flex-wrap')}
+      className={classNames('emoji-react-selector z-[999] w-max max-w-[100vw] flex-wrap gap-2 rounded-full bg-white p-3 shadow-md dark:bg-gray-900')}
+      ref={node}
     >
-      {Array.from(emojis).map((emoji, i) => (
+      {emojiList.map((emoji, i) => (
         <EmojiButton
+          className='emoji-react-selector__emoji hover:scale-125 focus:scale-125'
           key={i}
           emoji={emoji}
           onClick={handleReact(emoji)}
+          onKeyDown={handleKeyDown(i)}
           tabIndex={(visible || focused) ? 0 : -1}
         />
       ))}
diff --git a/app/soapbox/components/ui/form-group/form-group.tsx b/app/soapbox/components/ui/form-group/form-group.tsx
index bbd094d2e..5e119f2de 100644
--- a/app/soapbox/components/ui/form-group/form-group.tsx
+++ b/app/soapbox/components/ui/form-group/form-group.tsx
@@ -55,7 +55,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
             <div>
               <p
                 data-testid='form-group-error'
-                className='form-error relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
+                className='form-error bg-danger-200 text-danger-900 relative mt-0.5 inline-block rounded-md px-2 py-1 text-xs'
               >
                 {errors.join(', ')}
               </p>
@@ -92,7 +92,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
         {hasError && (
           <p
             data-testid='form-group-error'
-            className='form-error relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
+            className='form-error bg-danger-200 text-danger-900 relative mt-0.5 inline-block rounded-md px-2 py-1 text-xs'
           >
             {errors.join(', ')}
           </p>
diff --git a/app/soapbox/components/ui/icon-button/icon-button.tsx b/app/soapbox/components/ui/icon-button/icon-button.tsx
index 0e0ad25e2..a8c05af47 100644
--- a/app/soapbox/components/ui/icon-button/icon-button.tsx
+++ b/app/soapbox/components/ui/icon-button/icon-button.tsx
@@ -25,7 +25,7 @@ const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef
     <button
       ref={ref}
       type='button'
-      className={classNames('flex items-center space-x-2 p-1 rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-0 focus:ring-primary-500', {
+      className={classNames('focus:ring-primary-500 flex items-center space-x-2 rounded-full p-1 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:ring-offset-0', {
         'bg-white dark:bg-transparent': !transparent,
         'border border-solid bg-transparent border-gray-400 dark:border-gray-800 hover:border-primary-300 dark:hover:border-primary-700 focus:border-primary-500 text-gray-900 dark:text-gray-100 focus:ring-primary-500': theme === 'outlined',
         'opacity-50': filteredProps.disabled,
diff --git a/app/soapbox/components/ui/input/input.tsx b/app/soapbox/components/ui/input/input.tsx
index c16c59a6a..a225c2a45 100644
--- a/app/soapbox/components/ui/input/input.tsx
+++ b/app/soapbox/components/ui/input/input.tsx
@@ -113,7 +113,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
                 type='button'
                 onClick={togglePassword}
                 tabIndex={-1}
-                className='h-full px-2 text-gray-700 hover:text-gray-500 focus:ring-2 focus:ring-primary-500 dark:text-gray-600 dark:hover:text-gray-400'
+                className='focus:ring-primary-500 h-full px-2 text-gray-700 hover:text-gray-500 focus:ring-2 dark:text-gray-600 dark:hover:text-gray-400'
               >
                 <SvgIcon
                   src={revealed ? require('@tabler/icons/eye-off.svg') : require('@tabler/icons/eye.svg')}
diff --git a/app/soapbox/components/ui/menu/menu.tsx b/app/soapbox/components/ui/menu/menu.tsx
index 7965039ef..a4208d6c8 100644
--- a/app/soapbox/components/ui/menu/menu.tsx
+++ b/app/soapbox/components/ui/menu/menu.tsx
@@ -28,7 +28,7 @@ const MenuList: React.FC<IMenuList> = (props) => {
       <MenuItems
         onKeyDown={(event) => event.nativeEvent.stopImmediatePropagation()}
         className={
-          classNames(className, 'py-1 bg-white dark:bg-primary-900 rounded-lg shadow-menu')
+          classNames(className, 'dark:bg-primary-900 shadow-menu rounded-lg bg-white py-1')
         }
         {...filteredProps}
       />
diff --git a/app/soapbox/components/ui/modal/modal.tsx b/app/soapbox/components/ui/modal/modal.tsx
index cfb5f11e3..f890385d0 100644
--- a/app/soapbox/components/ui/modal/modal.tsx
+++ b/app/soapbox/components/ui/modal/modal.tsx
@@ -87,12 +87,12 @@ const Modal: React.FC<IModal> = ({
   }, [skipFocus, buttonRef]);
 
   return (
-    <div data-testid='modal' className={classNames('block w-full p-6 mx-auto text-start align-middle transition-all transform bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-xl rounded-2xl pointer-events-auto', widths[width])}>
+    <div data-testid='modal' className={classNames('dark:bg-primary-900 pointer-events-auto mx-auto block w-full transform rounded-2xl bg-white p-6 text-start align-middle text-gray-900 shadow-xl transition-all dark:text-gray-100', widths[width])}>
       <div className='w-full justify-between sm:flex sm:items-start'>
         <div className='w-full'>
           {title && (
             <div
-              className={classNames('w-full flex items-center gap-2', {
+              className={classNames('flex w-full items-center gap-2', {
                 'flex-row-reverse': closePosition === 'left',
               })}
             >
diff --git a/app/soapbox/components/ui/phone-input/country-code-dropdown.tsx b/app/soapbox/components/ui/phone-input/country-code-dropdown.tsx
index e420b733f..9264dcf87 100644
--- a/app/soapbox/components/ui/phone-input/country-code-dropdown.tsx
+++ b/app/soapbox/components/ui/phone-input/country-code-dropdown.tsx
@@ -12,7 +12,7 @@ const CountryCodeDropdown: React.FC<ICountryCodeDropdown> = ({ countryCode, onCh
   return (
     <select
       value={countryCode}
-      className='h-full rounded-md border-transparent bg-transparent py-0 pl-3 pr-7 text-base focus:outline-none focus:ring-primary-500 dark:text-white sm:text-sm'
+      className='focus:ring-primary-500 h-full rounded-md border-transparent bg-transparent py-0 pl-3 pr-7 text-base focus:outline-none dark:text-white sm:text-sm'
       onChange={(event) => onChange(event.target.value as any)}
     >
       {COUNTRY_CODES.map((code) => (
diff --git a/app/soapbox/components/ui/progress-bar/progress-bar.tsx b/app/soapbox/components/ui/progress-bar/progress-bar.tsx
index c0161ae34..0ac4e8ab1 100644
--- a/app/soapbox/components/ui/progress-bar/progress-bar.tsx
+++ b/app/soapbox/components/ui/progress-bar/progress-bar.tsx
@@ -6,8 +6,8 @@ interface IProgressBar {
 
 /** A horizontal meter filled to the given percentage. */
 const ProgressBar: React.FC<IProgressBar> = ({ progress }) => (
-  <div className='h-2.5 w-full overflow-hidden rounded-full bg-gray-300 dark:bg-primary-800'>
-    <div className='h-full bg-secondary-500' style={{ width: `${Math.floor(progress * 100)}%` }} />
+  <div className='dark:bg-primary-800 h-2.5 w-full overflow-hidden rounded-full bg-gray-300'>
+    <div className='bg-secondary-500 h-full' style={{ width: `${Math.floor(progress * 100)}%` }} />
   </div>
 );
 
diff --git a/app/soapbox/components/ui/radio-button/radio-button.tsx b/app/soapbox/components/ui/radio-button/radio-button.tsx
index 96f2c2ec4..b956dd077 100644
--- a/app/soapbox/components/ui/radio-button/radio-button.tsx
+++ b/app/soapbox/components/ui/radio-button/radio-button.tsx
@@ -26,7 +26,7 @@ const RadioButton: React.FC<IRadioButton> = ({ name, value, checked, onChange, l
         value={value}
         checked={checked}
         onChange={onChange}
-        className='h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500'
+        className='text-primary-600 focus:ring-primary-500 h-4 w-4 border-gray-300'
       />
 
       <label htmlFor={formFieldId} className='block text-sm font-medium text-gray-700'>
diff --git a/app/soapbox/components/ui/select/select.tsx b/app/soapbox/components/ui/select/select.tsx
index 4c88ae5bd..63070085a 100644
--- a/app/soapbox/components/ui/select/select.tsx
+++ b/app/soapbox/components/ui/select/select.tsx
@@ -11,7 +11,7 @@ const Select = React.forwardRef<HTMLSelectElement, ISelect>((props, ref) => {
   return (
     <select
       ref={ref}
-      className={`w-full truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:opacity-50 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm ${className}`}
+      className={`focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 w-full truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:outline-none disabled:opacity-50 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 sm:text-sm ${className}`}
       {...filteredProps}
     >
       {children}
diff --git a/app/soapbox/components/ui/slider/slider.tsx b/app/soapbox/components/ui/slider/slider.tsx
index 4449f7f5b..1ed7e96be 100644
--- a/app/soapbox/components/ui/slider/slider.tsx
+++ b/app/soapbox/components/ui/slider/slider.tsx
@@ -57,10 +57,10 @@ const Slider: React.FC<ISlider> = ({ value, onChange }) => {
       onMouseDown={handleMouseDown}
       ref={node}
     >
-      <div className='absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full bg-primary-200 dark:bg-primary-700' />
-      <div className='absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-accent-500' style={{ width: `${value * 100}%` }} />
+      <div className='bg-primary-200 dark:bg-primary-700 absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full' />
+      <div className='bg-accent-500 absolute top-1/2 h-1 -translate-y-1/2 rounded-full' style={{ width: `${value * 100}%` }} />
       <span
-        className='absolute top-1/2 z-10 -ml-1.5 h-3 w-3 -translate-y-1/2 rounded-full bg-accent-500 shadow'
+        className='bg-accent-500 absolute top-1/2 z-10 -ml-1.5 h-3 w-3 -translate-y-1/2 rounded-full shadow'
         tabIndex={0}
         style={{ left: `${value * 100}%` }}
       />
diff --git a/app/soapbox/components/ui/tabs/tabs.tsx b/app/soapbox/components/ui/tabs/tabs.tsx
index 60e89d25f..7febd332a 100644
--- a/app/soapbox/components/ui/tabs/tabs.tsx
+++ b/app/soapbox/components/ui/tabs/tabs.tsx
@@ -46,11 +46,11 @@ const AnimatedTabs: React.FC<IAnimatedInterface> = ({ children, ...rest }) => {
         ref={ref}
       >
         <div
-          className='absolute h-[3px] w-full bg-primary-200 dark:bg-primary-700'
+          className='bg-primary-200 dark:bg-primary-700 absolute h-[3px] w-full'
           style={{ top }}
         />
         <div
-          className={classNames('absolute h-[3px] bg-primary-500 transition-all duration-200', {
+          className={classNames('bg-primary-500 absolute h-[3px] transition-all duration-200', {
             'hidden': top <= 0,
           })}
           style={{ left, top, width }}
diff --git a/app/soapbox/components/ui/tag-input/tag-input.tsx b/app/soapbox/components/ui/tag-input/tag-input.tsx
index fe09bf0ee..c45c01d61 100644
--- a/app/soapbox/components/ui/tag-input/tag-input.tsx
+++ b/app/soapbox/components/ui/tag-input/tag-input.tsx
@@ -45,7 +45,7 @@ const TagInput: React.FC<ITagInput> = ({ tags, onChange, placeholder }) => {
   return (
     <div className='relative mt-1 grow shadow-sm'>
       <HStack
-        className='block w-full rounded-md border-gray-400 bg-white p-2 pb-0 text-gray-900 placeholder:text-gray-600 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:placeholder:text-gray-600 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm'
+        className='focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 block w-full rounded-md border-gray-400 bg-white p-2 pb-0 text-gray-900 placeholder:text-gray-600 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:placeholder:text-gray-600 sm:text-sm'
         space={2}
         wrap
       >
diff --git a/app/soapbox/components/ui/tag-input/tag.tsx b/app/soapbox/components/ui/tag-input/tag.tsx
index 94ce5bbfb..1c0672127 100644
--- a/app/soapbox/components/ui/tag-input/tag.tsx
+++ b/app/soapbox/components/ui/tag-input/tag.tsx
@@ -13,7 +13,7 @@ interface ITag {
 /** A single editable Tag (used by TagInput). */
 const Tag: React.FC<ITag> = ({ tag, onDelete }) => {
   return (
-    <div className='inline-flex items-center whitespace-nowrap rounded bg-primary-500 p-1'>
+    <div className='bg-primary-500 inline-flex items-center whitespace-nowrap rounded p-1'>
       <Text theme='white'>{tag}</Text>
 
       <IconButton
diff --git a/app/soapbox/components/ui/toast/toast.tsx b/app/soapbox/components/ui/toast/toast.tsx
index 981df1132..341db8309 100644
--- a/app/soapbox/components/ui/toast/toast.tsx
+++ b/app/soapbox/components/ui/toast/toast.tsx
@@ -40,7 +40,7 @@ const Toast = (props: IToast) => {
         return (
           <Icon
             src={require('@tabler/icons/circle-check.svg')}
-            className='h-6 w-6 text-success-500 dark:text-success-400'
+            className='text-success-500 dark:text-success-400 h-6 w-6'
             aria-hidden
           />
         );
@@ -48,7 +48,7 @@ const Toast = (props: IToast) => {
         return (
           <Icon
             src={require('@tabler/icons/info-circle.svg')}
-            className='h-6 w-6 text-primary-600 dark:text-accent-blue'
+            className='text-primary-600 dark:text-accent-blue h-6 w-6'
             aria-hidden
           />
         );
@@ -56,7 +56,7 @@ const Toast = (props: IToast) => {
         return (
           <Icon
             src={require('@tabler/icons/alert-circle.svg')}
-            className='h-6 w-6 text-danger-600'
+            className='text-danger-600 h-6 w-6'
             aria-hidden
           />
         );
@@ -129,7 +129,7 @@ const Toast = (props: IToast) => {
         <div className='flex shrink-0 pt-0.5'>
           <button
             type='button'
-            className='inline-flex rounded-md text-gray-600 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:text-gray-600 dark:hover:text-gray-500'
+            className='focus:ring-primary-500 inline-flex rounded-md text-gray-600 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:text-gray-600 dark:hover:text-gray-500'
             onClick={dismissToast}
             data-testid='toast-dismiss'
           >
diff --git a/app/soapbox/components/upload-progress.tsx b/app/soapbox/components/upload-progress.tsx
index 5cbb4e1b3..f65129b16 100644
--- a/app/soapbox/components/upload-progress.tsx
+++ b/app/soapbox/components/upload-progress.tsx
@@ -28,7 +28,7 @@ const UploadProgress: React.FC<IUploadProgress> = ({ progress }) => {
           <Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}>
             {({ width }) =>
               (<div
-                className='absolute left-0 top-0 h-1.5 rounded-lg bg-primary-600'
+                className='bg-primary-600 absolute left-0 top-0 h-1.5 rounded-lg'
                 style={{ width: `${width}%` }}
               />)
             }
diff --git a/app/soapbox/components/verification-badge.tsx b/app/soapbox/components/verification-badge.tsx
index aea2f5f81..1abe6ed72 100644
--- a/app/soapbox/components/verification-badge.tsx
+++ b/app/soapbox/components/verification-badge.tsx
@@ -25,7 +25,7 @@ const VerificationBadge: React.FC<IVerificationBadge> = ({ className }) => {
 
   return (
     <span className='verified-icon' data-testid='verified-badge'>
-      <Element className={classNames('w-4 text-accent-500', className)} src={icon} alt={intl.formatMessage(messages.verified)} />
+      <Element className={classNames('text-accent-500 w-4', className)} src={icon} alt={intl.formatMessage(messages.verified)} />
     </span>
   );
 };
diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index 6d39ddab0..8e96b963e 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/app/soapbox/containers/soapbox.tsx
@@ -271,7 +271,7 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
   const darkMode = useTheme() === 'dark';
   const themeCss = generateThemeCss(demo ? normalizeSoapboxConfig({ brandColor: '#0482d8' }) : soapboxConfig);
 
-  const bodyClass = classNames('bg-white dark:bg-gray-800 text-base h-full', {
+  const bodyClass = classNames('h-full bg-white text-base dark:bg-gray-800', {
     'no-reduce-motion': !settings.get('reduceMotion'),
     'underline-links': settings.get('underlineLinks'),
     'demetricator': settings.get('demetricator'),
diff --git a/app/soapbox/features/about/index.tsx b/app/soapbox/features/about/index.tsx
index 8d1be5c2e..d528d71c4 100644
--- a/app/soapbox/features/about/index.tsx
+++ b/app/soapbox/features/about/index.tsx
@@ -60,7 +60,7 @@ const AboutPage: React.FC = () => {
   );
 
   return (
-    <div className='prose mx-auto py-20 dark:prose-invert'>
+    <div className='prose dark:prose-invert mx-auto py-20'>
       <div dangerouslySetInnerHTML={{ __html: pageHtml }} />
 
       {alsoAvailable}
diff --git a/app/soapbox/features/account-timeline/components/moved-note.tsx b/app/soapbox/features/account-timeline/components/moved-note.tsx
index a41e241d1..7cc64f5ca 100644
--- a/app/soapbox/features/account-timeline/components/moved-note.tsx
+++ b/app/soapbox/features/account-timeline/components/moved-note.tsx
@@ -17,7 +17,7 @@ const MovedNote: React.FC<IMovedNote> = ({ from, to }) => (
     <HStack className='mb-2' alignItems='center' space={1.5}>
       <Icon
         src={require('@tabler/icons/briefcase.svg')}
-        className='flex-none text-primary-600 dark:text-primary-400'
+        className='text-primary-600 dark:text-primary-400 flex-none'
       />
 
       <div className='truncate'>
diff --git a/app/soapbox/features/account/components/header.tsx b/app/soapbox/features/account/components/header.tsx
index 368dce1b1..99d42c0a3 100644
--- a/app/soapbox/features/account/components/header.tsx
+++ b/app/soapbox/features/account/components/header.tsx
@@ -610,7 +610,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
               <Avatar
                 src={account.avatar}
                 size={96}
-                className='relative h-24 w-24 rounded-full bg-white ring-4 ring-white dark:bg-primary-900 dark:ring-primary-900'
+                className='dark:bg-primary-900 dark:ring-primary-900 relative h-24 w-24 rounded-full bg-white ring-4 ring-white'
               />
             </a>
           </div>
diff --git a/app/soapbox/features/admin/components/report.tsx b/app/soapbox/features/admin/components/report.tsx
index 2d961d095..210288fdc 100644
--- a/app/soapbox/features/admin/components/report.tsx
+++ b/app/soapbox/features/admin/components/report.tsx
@@ -135,7 +135,7 @@ const Report: React.FC<IReport> = ({ id }) => {
               <Link
                 to={`/@${reporterAcct}`}
                 title={reporterAcct}
-                className='text-primary-600 hover:underline dark:text-accent-blue'
+                className='text-primary-600 dark:text-accent-blue hover:underline'
               >
                 @{reporterAcct}
               </Link>
diff --git a/app/soapbox/features/admin/user-index.tsx b/app/soapbox/features/admin/user-index.tsx
index ff1361204..f4150b859 100644
--- a/app/soapbox/features/admin/user-index.tsx
+++ b/app/soapbox/features/admin/user-index.tsx
@@ -4,9 +4,8 @@ import { defineMessages, useIntl } from 'react-intl';
 
 import { expandUserIndex, fetchUserIndex, setUserIndexQuery } from 'soapbox/actions/admin';
 import ScrollableList from 'soapbox/components/scrollable-list';
-import { Column } from 'soapbox/components/ui';
+import { Column, Input } from 'soapbox/components/ui';
 import AccountContainer from 'soapbox/containers/account-container';
-import { SimpleForm, TextInput } from 'soapbox/features/forms';
 import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
 
 const messages = defineMessages({
@@ -22,7 +21,7 @@ const UserIndex: React.FC = () => {
   const { isLoading, items, total, query, next } = useAppSelector((state) => state.admin_user_index);
 
   const handleLoadMore = () => {
-    dispatch(expandUserIndex());
+    if (!isLoading) dispatch(expandUserIndex());
   };
 
   const updateQuery = useCallback(debounce(() => {
@@ -31,25 +30,25 @@ const UserIndex: React.FC = () => {
 
   const handleQueryChange: React.ChangeEventHandler<HTMLInputElement> = e => {
     dispatch(setUserIndexQuery(e.target.value));
+    updateQuery();
   };
 
   useEffect(() => {
     updateQuery();
-  }, [query]);
+  }, []);
 
-  const hasMore = items.count() < total && next !== null;
+
+  const hasMore = items.count() < total && !!next;
 
   const showLoading = isLoading && items.isEmpty();
 
   return (
     <Column label={intl.formatMessage(messages.heading)}>
-      <SimpleForm style={{ paddingBottom: 0 }}>
-        <TextInput
-          value={query}
-          onChange={handleQueryChange}
-          placeholder={intl.formatMessage(messages.searchPlaceholder)}
-        />
-      </SimpleForm>
+      <Input
+        value={query}
+        onChange={handleQueryChange}
+        placeholder={intl.formatMessage(messages.searchPlaceholder)}
+      />
       <ScrollableList
         scrollKey='user-index'
         hasMore={hasMore}
diff --git a/app/soapbox/features/ads/components/ad.tsx b/app/soapbox/features/ads/components/ad.tsx
index fffd594a5..f44bb7b5d 100644
--- a/app/soapbox/features/ads/components/ad.tsx
+++ b/app/soapbox/features/ads/components/ad.tsx
@@ -85,7 +85,7 @@ const Ad: React.FC<IAd> = ({ ad }) => {
                 </Text>
 
                 <Icon
-                  className='h-5 w-5 stroke-accent-500'
+                  className='stroke-accent-500 h-5 w-5'
                   src={require('@tabler/icons/timeline.svg')}
                 />
               </HStack>
diff --git a/app/soapbox/features/aliases/components/search.tsx b/app/soapbox/features/aliases/components/search.tsx
index 6b60be5b2..2466e22b1 100644
--- a/app/soapbox/features/aliases/components/search.tsx
+++ b/app/soapbox/features/aliases/components/search.tsx
@@ -44,7 +44,7 @@ const Search: React.FC = () => {
         <span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
 
         <input
-          className='block w-full rounded-full focus:border-primary-500 focus:ring-primary-500 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500 sm:text-sm'
+          className='focus:border-primary-500 focus:ring-primary-500 block w-full rounded-full dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500 sm:text-sm'
           type='text'
           value={value}
           onChange={handleChange}
diff --git a/app/soapbox/features/audio/index.tsx b/app/soapbox/features/audio/index.tsx
index 17854386e..696a77857 100644
--- a/app/soapbox/features/audio/index.tsx
+++ b/app/soapbox/features/audio/index.tsx
@@ -581,4 +581,4 @@ const Audio: React.FC<IAudio> = (props) => {
   );
 };
 
-export default Audio;
\ No newline at end of file
+export default Audio;
diff --git a/app/soapbox/features/auth-login/components/consumers-list.tsx b/app/soapbox/features/auth-login/components/consumers-list.tsx
index 784077af9..0b5295a82 100644
--- a/app/soapbox/features/auth-login/components/consumers-list.tsx
+++ b/app/soapbox/features/auth-login/components/consumers-list.tsx
@@ -17,7 +17,7 @@ const ConsumersList: React.FC<IConsumersList> = () => {
 
   if (providers.size > 0) {
     return (
-      <Card className='bg-gray-50 p-4 dark:bg-primary-800 sm:rounded-xl'>
+      <Card className='dark:bg-primary-800 bg-gray-50 p-4 sm:rounded-xl'>
         <Text size='xs' theme='muted'>
           <FormattedMessage id='oauth_consumers.title' defaultMessage='Other ways to sign in' />
         </Text>
diff --git a/app/soapbox/features/auth-token-list/index.tsx b/app/soapbox/features/auth-token-list/index.tsx
index 954814449..1b801e6ec 100644
--- a/app/soapbox/features/auth-token-list/index.tsx
+++ b/app/soapbox/features/auth-token-list/index.tsx
@@ -41,7 +41,7 @@ const AuthToken: React.FC<IAuthToken> = ({ token, isCurrent }) => {
   };
 
   return (
-    <div className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
+    <div className='dark:bg-primary-800 rounded-lg bg-gray-100 p-4'>
       <Stack space={2}>
         <Stack>
           <Text size='md' weight='medium'>{token.app_name}</Text>
diff --git a/app/soapbox/features/chats/components/chat-composer.tsx b/app/soapbox/features/chats/components/chat-composer.tsx
index a703d772f..8b30e32fe 100644
--- a/app/soapbox/features/chats/components/chat-composer.tsx
+++ b/app/soapbox/features/chats/components/chat-composer.tsx
@@ -131,7 +131,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
 
   if (isBlocking) {
     return (
-      <div className='mt-auto p-6 shadow-3xl dark:border-t-2 dark:border-solid dark:border-gray-800'>
+      <div className='shadow-3xl mt-auto p-6 dark:border-t-2 dark:border-solid dark:border-gray-800'>
         <Stack space={3} alignItems='center'>
           <Text align='center' theme='muted'>
             {intl.formatMessage(messages.blocked)}
@@ -150,7 +150,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
   }
 
   return (
-    <div className='mt-auto px-4 shadow-3xl'>
+    <div className='shadow-3xl mt-auto px-4'>
       {/* Spacer */}
       <div className='h-5' />
 
diff --git a/app/soapbox/features/chats/components/chat-list-item.tsx b/app/soapbox/features/chats/components/chat-list-item.tsx
index 795a29a74..24fc220a8 100644
--- a/app/soapbox/features/chats/components/chat-list-item.tsx
+++ b/app/soapbox/features/chats/components/chat-list-item.tsx
@@ -68,7 +68,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
       role='button'
       key={chat.id}
       onClick={() => onClick(chat)}
-      className='group flex w-full flex-col rounded-lg px-2 py-3 hover:bg-gray-100 focus:shadow-inset-ring dark:hover:bg-gray-800'
+      className='focus:shadow-inset-ring group flex w-full flex-col rounded-lg px-2 py-3 hover:bg-gray-100 dark:hover:bg-gray-800'
       data-testid='chat-list-item'
     >
       <HStack alignItems='center' justifyContent='between' space={2} className='w-full'>
@@ -130,7 +130,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
             <>
               {chat.last_message.unread && (
                 <div
-                  className='h-2 w-2 rounded-full bg-secondary-500'
+                  className='bg-secondary-500 h-2 w-2 rounded-full'
                   data-testid='chat-unread-indicator'
                 />
               )}
diff --git a/app/soapbox/features/chats/components/chat-list.tsx b/app/soapbox/features/chats/components/chat-list.tsx
index 65629ce14..649d335d2 100644
--- a/app/soapbox/features/chats/components/chat-list.tsx
+++ b/app/soapbox/features/chats/components/chat-list.tsx
@@ -74,13 +74,13 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false, s
 
       <>
         <div
-          className={classNames('inset-x-0 top-0 flex rounded-t-lg justify-center bg-gradient-to-b from-white to-transparent pb-12 pt-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
+          className={classNames('pointer-events-none absolute inset-x-0 top-0 flex justify-center rounded-t-lg bg-gradient-to-b from-white to-transparent pb-12 pt-8 transition-opacity duration-500 dark:from-gray-900', {
             'opacity-0': isNearTop,
             'opacity-100': !isNearTop,
           })}
         />
         <div
-          className={classNames('inset-x-0 bottom-0 flex rounded-b-lg justify-center bg-gradient-to-t from-white to-transparent pt-12 pb-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
+          className={classNames('pointer-events-none absolute inset-x-0 bottom-0 flex justify-center rounded-b-lg bg-gradient-to-t from-white to-transparent pt-12 pb-8 transition-opacity duration-500 dark:from-gray-900', {
             'opacity-0': isNearBottom,
             'opacity-100': !isNearBottom,
           })}
diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx
index c66418aae..863bfd7d7 100644
--- a/app/soapbox/features/chats/components/chat-message-list.tsx
+++ b/app/soapbox/features/chats/components/chat-message-list.tsx
@@ -379,11 +379,11 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
                 {(isMyMessage && features.chatsReadReceipts) ? (
                   <>
                     {isRead ? (
-                      <span className='flex flex-col items-center justify-center rounded-full border border-solid border-primary-500 bg-primary-500 p-0.5 text-white dark:border-primary-400 dark:bg-primary-400 dark:text-primary-900'>
+                      <span className='border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400 dark:text-primary-900 flex flex-col items-center justify-center rounded-full border border-solid p-0.5 text-white'>
                         <Icon src={require('@tabler/icons/check.svg')} strokeWidth={3} className='h-2.5 w-2.5' />
                       </span>
                     ) : (
-                      <span className='flex flex-col items-center justify-center rounded-full border border-solid border-primary-500 bg-transparent p-0.5 text-primary-500 dark:border-primary-400 dark:text-primary-400'>
+                      <span className='border-primary-500 text-primary-500 dark:border-primary-400 dark:text-primary-400 flex flex-col items-center justify-center rounded-full border border-solid bg-transparent p-0.5'>
                         <Icon src={require('@tabler/icons/check.svg')} strokeWidth={3} className='h-2.5 w-2.5' />
                       </span>
                     )}
diff --git a/app/soapbox/features/chats/components/chat-page/chat-page.tsx b/app/soapbox/features/chats/components/chat-page/chat-page.tsx
index 20ddafd3e..62ddae9d6 100644
--- a/app/soapbox/features/chats/components/chat-page/chat-page.tsx
+++ b/app/soapbox/features/chats/components/chat-page/chat-page.tsx
@@ -60,7 +60,7 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
     <div
       ref={containerRef}
       style={{ height }}
-      className='h-screen overflow-hidden bg-white text-gray-900 shadow-lg dark:bg-primary-900 dark:text-gray-100 dark:shadow-none sm:rounded-t-xl'
+      className='dark:bg-primary-900 h-screen overflow-hidden bg-white text-gray-900 shadow-lg dark:text-gray-100 dark:shadow-none sm:rounded-t-xl'
     >
       {isOnboarded ? (
         <div
@@ -68,7 +68,7 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
           data-testid='chat-page'
         >
           <Stack
-            className={classNames('col-span-9 sm:col-span-3 bg-gradient-to-r from-white to-gray-100 dark:bg-gray-900 dark:bg-none overflow-hidden dark:inset', {
+            className={classNames('dark:inset col-span-9 overflow-hidden bg-gradient-to-r from-white to-gray-100 dark:bg-gray-900 dark:bg-none sm:col-span-3', {
               'hidden sm:block': isSidebarHidden,
             })}
           >
@@ -76,7 +76,7 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
           </Stack>
 
           <Stack
-            className={classNames('col-span-9 sm:col-span-6 h-full overflow-hidden', {
+            className={classNames('col-span-9 h-full overflow-hidden sm:col-span-6', {
               'hidden sm:block': !isSidebarHidden,
             })}
           >
diff --git a/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx b/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
index e365c49cc..60049fee0 100644
--- a/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
+++ b/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
@@ -212,7 +212,7 @@ const ChatPageMain = () => {
                   onSelect={isBlocking ? handleUnblockUser : handleBlockUser}
                   className='!px-0 hover:!bg-transparent'
                 >
-                  <div className='flex w-full items-center space-x-2 text-sm font-bold text-primary-500 dark:text-accent-blue'>
+                  <div className='text-primary-500 dark:text-accent-blue flex w-full items-center space-x-2 text-sm font-bold'>
                     <Icon src={require('@tabler/icons/ban.svg')} className='h-5 w-5' />
                     <span>{intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}</span>
                   </div>
@@ -224,7 +224,7 @@ const ChatPageMain = () => {
                     onSelect={handleLeaveChat}
                     className='!px-0 hover:!bg-transparent'
                   >
-                    <div className='flex w-full items-center space-x-2 text-sm font-bold text-danger-600 dark:text-danger-500'>
+                    <div className='text-danger-600 dark:text-danger-500 flex w-full items-center space-x-2 text-sm font-bold'>
                       <Icon src={require('@tabler/icons/logout.svg')} className='h-5 w-5' />
                       <span>{intl.formatMessage(messages.leaveChat)}</span>
                     </div>
diff --git a/app/soapbox/features/chats/components/chat-search/results.tsx b/app/soapbox/features/chats/components/chat-search/results.tsx
index 7bd7ac0e0..0ed34551d 100644
--- a/app/soapbox/features/chats/components/chat-search/results.tsx
+++ b/app/soapbox/features/chats/components/chat-search/results.tsx
@@ -63,13 +63,13 @@ const Results = ({ accountSearchResult, onSelect }: IResults) => {
 
       <>
         <div
-          className={classNames('inset-x-0 top-0 flex rounded-t-lg justify-center bg-gradient-to-b from-white to-transparent pb-12 pt-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
+          className={classNames('pointer-events-none absolute inset-x-0 top-0 flex justify-center rounded-t-lg bg-gradient-to-b from-white to-transparent pb-12 pt-8 transition-opacity duration-500 dark:from-gray-900', {
             'opacity-0': isNearTop,
             'opacity-100': !isNearTop,
           })}
         />
         <div
-          className={classNames('inset-x-0 bottom-0 flex rounded-b-lg justify-center bg-gradient-to-t from-white to-transparent pt-12 pb-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
+          className={classNames('pointer-events-none absolute inset-x-0 bottom-0 flex justify-center rounded-b-lg bg-gradient-to-t from-white to-transparent pt-12 pb-8 transition-opacity duration-500 dark:from-gray-900', {
             'opacity-0': isNearBottom,
             'opacity-100': !isNearBottom,
           })}
diff --git a/app/soapbox/features/chats/components/chat-widget/chat-pane-header.tsx b/app/soapbox/features/chats/components/chat-widget/chat-pane-header.tsx
index 36c4a4f80..43260c3aa 100644
--- a/app/soapbox/features/chats/components/chat-widget/chat-pane-header.tsx
+++ b/app/soapbox/features/chats/components/chat-widget/chat-pane-header.tsx
@@ -47,7 +47,7 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
               ({unreadCount})
             </Text>
 
-            <div className='h-2.5 w-2.5 rounded-full bg-accent-300' />
+            <div className='bg-accent-300 h-2.5 w-2.5 rounded-full' />
           </HStack>
         )}
       </ButtonComp>
diff --git a/app/soapbox/features/chats/components/chat-widget/chat-settings.tsx b/app/soapbox/features/chats/components/chat-widget/chat-settings.tsx
index 5a38778e0..5ff5406b0 100644
--- a/app/soapbox/features/chats/components/chat-widget/chat-settings.tsx
+++ b/app/soapbox/features/chats/components/chat-widget/chat-settings.tsx
@@ -135,13 +135,13 @@ const ChatSettings = () => {
         )}
 
         <Stack space={5}>
-          <button onClick={isBlocking ? handleUnblockUser : handleBlockUser} className='flex w-full items-center space-x-2 text-sm font-bold text-primary-600 dark:text-accent-blue'>
+          <button onClick={isBlocking ? handleUnblockUser : handleBlockUser} className='text-primary-600 dark:text-accent-blue flex w-full items-center space-x-2 text-sm font-bold'>
             <Icon src={require('@tabler/icons/ban.svg')} className='h-5 w-5' />
             <span>{intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}</span>
           </button>
 
           {features.chatsDelete && (
-            <button onClick={handleLeaveChat} className='flex w-full items-center space-x-2 text-sm font-bold text-danger-600'>
+            <button onClick={handleLeaveChat} className='text-danger-600 flex w-full items-center space-x-2 text-sm font-bold'>
               <Icon src={require('@tabler/icons/logout.svg')} className='h-5 w-5' />
               <span>{intl.formatMessage(messages.leaveChat)}</span>
             </button>
diff --git a/app/soapbox/features/chats/components/chat.tsx b/app/soapbox/features/chats/components/chat.tsx
index fc159ae67..d15825f03 100644
--- a/app/soapbox/features/chats/components/chat.tsx
+++ b/app/soapbox/features/chats/components/chat.tsx
@@ -159,7 +159,7 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
   }, [chat.id, inputRef?.current]);
 
   return (
-    <Stack className={classNames('overflow-hidden flex flex-grow', className)} onMouseOver={handleMouseOver}>
+    <Stack className={classNames('flex flex-grow overflow-hidden', className)} onMouseOver={handleMouseOver}>
       <div className='flex h-full grow justify-center overflow-hidden'>
         <ChatMessageList chat={chat} />
       </div>
diff --git a/app/soapbox/features/chats/components/ui/pane.tsx b/app/soapbox/features/chats/components/ui/pane.tsx
index f81771018..7888d2589 100644
--- a/app/soapbox/features/chats/components/ui/pane.tsx
+++ b/app/soapbox/features/chats/components/ui/pane.tsx
@@ -18,7 +18,7 @@ const Pane: React.FC<IPane> = ({ isOpen = false, index, children, main = false }
 
   return (
     <div
-      className={classNames('flex flex-col shadow-3xl bg-white dark:bg-gray-900 rounded-t-lg fixed bottom-0 right-1 w-96 z-[99]', {
+      className={classNames('shadow-3xl fixed bottom-0 right-1 z-[99] flex w-96 flex-col rounded-t-lg bg-white dark:bg-gray-900', {
         'h-[550px] max-h-[100vh]': isOpen,
         'h-16': !isOpen,
       })}
diff --git a/app/soapbox/features/compose/components/privacy-dropdown.tsx b/app/soapbox/features/compose/components/privacy-dropdown.tsx
index 2543763da..17062c3ce 100644
--- a/app/soapbox/features/compose/components/privacy-dropdown.tsx
+++ b/app/soapbox/features/compose/components/privacy-dropdown.tsx
@@ -242,7 +242,10 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
     <div className={classNames('privacy-dropdown', placement, { active: open })} onKeyDown={handleKeyDown} ref={node}>
       <div className={classNames('privacy-dropdown__value', { active: valueOption && options.indexOf(valueOption) === 0 })}>
         <IconButton
-          className='text-gray-600 hover:text-gray-700 dark:hover:text-gray-500'
+          className={classNames({
+            'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': !open,
+            'text-primary-500 hover:text-primary-600 dark:text-primary-500 dark:hover:text-primary-400': open,
+          })}
           src={valueOption?.icon}
           title={intl.formatMessage(messages.change_privacy)}
           onClick={handleToggle}
diff --git a/app/soapbox/features/compose/components/reply-indicator.tsx b/app/soapbox/features/compose/components/reply-indicator.tsx
index 5c11a1ff8..b9c7418e5 100644
--- a/app/soapbox/features/compose/components/reply-indicator.tsx
+++ b/app/soapbox/features/compose/components/reply-indicator.tsx
@@ -1,3 +1,4 @@
+import classNames from 'clsx';
 import React from 'react';
 
 import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
@@ -8,12 +9,13 @@ import { isRtl } from 'soapbox/rtl';
 import type { Status } from 'soapbox/types/entities';
 
 interface IReplyIndicator {
+  className?: string,
   status?: Status,
   onCancel?: () => void,
   hideActions: boolean,
 }
 
-const ReplyIndicator: React.FC<IReplyIndicator> = ({ status, hideActions, onCancel }) => {
+const ReplyIndicator: React.FC<IReplyIndicator> = ({ className, status, hideActions, onCancel }) => {
   const handleClick = () => {
     onCancel!();
   };
@@ -33,7 +35,7 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ status, hideActions, onCanc
   }
 
   return (
-    <Stack space={2} className='rounded-lg bg-gray-100 p-4 dark:bg-gray-800'>
+    <Stack space={2} className={classNames('rounded-lg bg-gray-100 p-4 dark:bg-gray-800', className)}>
       <AccountContainer
         {...actions}
         id={status.getIn(['account', 'id']) as string}
diff --git a/app/soapbox/features/directory/components/account-card.tsx b/app/soapbox/features/directory/components/account-card.tsx
index b0d3e5e6e..6120622bb 100644
--- a/app/soapbox/features/directory/components/account-card.tsx
+++ b/app/soapbox/features/directory/components/account-card.tsx
@@ -28,7 +28,7 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
   const followedBy = me !== account.id && account.relationship?.followed_by;
 
   return (
-    <div className='flex flex-col divide-y divide-gray-200 rounded-lg bg-white text-center shadow dark:divide-primary-700 dark:bg-primary-800'>
+    <div className='dark:divide-primary-700 dark:bg-primary-800 flex flex-col divide-y divide-gray-200 rounded-lg bg-white text-center shadow'>
       <div className='relative'>
         {followedBy && (
           <div className='absolute top-2.5 left-2.5'>
diff --git a/app/soapbox/features/embedded-status/index.tsx b/app/soapbox/features/embedded-status/index.tsx
index d8c172643..c3cce445b 100644
--- a/app/soapbox/features/embedded-status/index.tsx
+++ b/app/soapbox/features/embedded-status/index.tsx
@@ -62,7 +62,7 @@ const EmbeddedStatus: React.FC<IEmbeddedStatus> = ({ params }) => {
 
   return (
     <a
-      className='block bg-white dark:bg-primary-900'
+      className='dark:bg-primary-900 block bg-white'
       href={status?.url || '#'}
       onClick={e => e.stopPropagation()}
       target='_blank'
diff --git a/app/soapbox/features/event/event-information.tsx b/app/soapbox/features/event/event-information.tsx
index cec8829ae..4ef7ae0b8 100644
--- a/app/soapbox/features/event/event-information.tsx
+++ b/app/soapbox/features/event/event-information.tsx
@@ -76,7 +76,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
             {[event.location.get('postalCode'), event.location.get('locality'), event.location.get('country')].filter(text => text).join(', ')}
             {tileServer && event.location.get('latitude') && (<>
               <br />
-              <a href='#' className='text-primary-600 hover:underline dark:text-accent-blue' onClick={handleShowMap}>
+              <a href='#' className='text-primary-600 dark:text-accent-blue hover:underline' onClick={handleShowMap}>
                 <FormattedMessage id='event.show_on_map' defaultMessage='Show on map' />
               </a>
             </>)}
@@ -143,7 +143,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
         {status.event.links.map(link => (
           <HStack space={2} alignItems='center'>
             <Icon src={require('@tabler/icons/link.svg')} />
-            <a href={link.remote_url || link.url} className='text-primary-600 hover:underline dark:text-accent-blue' target='_blank'>
+            <a href={link.remote_url || link.url} className='text-primary-600 dark:text-accent-blue hover:underline' target='_blank'>
               {(link.remote_url || link.url).replace(/^https?:\/\//, '')}
             </a>
           </HStack>
diff --git a/app/soapbox/features/feed-filtering/feed-carousel.tsx b/app/soapbox/features/feed-filtering/feed-carousel.tsx
index 0c42741e2..e9dad429a 100644
--- a/app/soapbox/features/feed-filtering/feed-carousel.tsx
+++ b/app/soapbox/features/feed-filtering/feed-carousel.tsx
@@ -61,7 +61,7 @@ const CarouselItem = React.forwardRef((
       <Stack className='h-auto w-14' space={3}>
         <div className='relative mx-auto block h-12 w-12 rounded-full'>
           {isSelected && (
-            <div className='absolute inset-0 flex items-center justify-center rounded-full bg-primary-600/50'>
+            <div className='bg-primary-600/50 absolute inset-0 flex items-center justify-center rounded-full'>
               <Icon src={require('@tabler/icons/check.svg')} className='h-6 w-6 text-white' />
             </div>
           )}
@@ -159,11 +159,11 @@ const FeedCarousel = () => {
 
   return (
     <div
-      className='overflow-hidden rounded-xl bg-white shadow-lg dark:bg-primary-900 dark:shadow-none'
+      className='dark:bg-primary-900 overflow-hidden rounded-xl bg-white shadow-lg dark:shadow-none'
       data-testid='feed-carousel'
     >
       <HStack alignItems='stretch'>
-        <div className='z-10 flex w-8 items-center justify-center self-stretch rounded-l-xl bg-white dark:bg-primary-900'>
+        <div className='dark:bg-primary-900 z-10 flex w-8 items-center justify-center self-stretch rounded-l-xl bg-white'>
           <button
             data-testid='prev-page'
             onClick={handlePrevPage}
@@ -177,7 +177,7 @@ const FeedCarousel = () => {
         <div className='relative w-full overflow-hidden'>
           {pinnedAvatar ? (
             <div
-              className='absolute inset-y-0 left-0 z-10 flex items-center justify-center bg-white dark:bg-primary-900'
+              className='dark:bg-primary-900 absolute inset-y-0 left-0 z-10 flex items-center justify-center bg-white'
               style={{
                 width: widthPerAvatar || 'auto',
               }}
@@ -248,7 +248,7 @@ const FeedCarousel = () => {
           </HStack>
         </div>
 
-        <div className='z-10 flex w-8 items-center justify-center self-stretch rounded-r-xl bg-white dark:bg-primary-900'>
+        <div className='dark:bg-primary-900 z-10 flex w-8 items-center justify-center self-stretch rounded-r-xl bg-white'>
           <button
             data-testid='next-page'
             onClick={handleNextPage}
diff --git a/app/soapbox/features/feed-suggestions/feed-suggestions.tsx b/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
index ce86d1432..54d99f862 100644
--- a/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
+++ b/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
@@ -71,7 +71,7 @@ const FeedSuggestions = () => {
 
         <Link
           to='/suggestions'
-          className='text-primary-600 hover:underline dark:text-accent-blue'
+          className='text-primary-600 dark:text-accent-blue hover:underline'
         >
           {intl.formatMessage(messages.viewAll)}
         </Link>
diff --git a/app/soapbox/features/forms/index.tsx b/app/soapbox/features/forms/index.tsx
index 38d68b413..5d750be5a 100644
--- a/app/soapbox/features/forms/index.tsx
+++ b/app/soapbox/features/forms/index.tsx
@@ -103,63 +103,6 @@ export const SimpleInput: React.FC<ISimpleInput> = (props) => {
   );
 };
 
-interface ISimpleTextarea {
-  label?: React.ReactNode,
-  hint?: React.ReactNode,
-  value?: string,
-  onChange?: React.ChangeEventHandler<HTMLTextAreaElement>,
-  rows?: number,
-  name?: string,
-  maxLength?: number,
-  required?: boolean,
-}
-
-export const SimpleTextarea: React.FC<ISimpleTextarea> = (props) => {
-  const { hint, label, ...rest } = props;
-  const Input = label ? LabelTextarea : 'textarea';
-
-  return (
-    <InputContainer {...props}>
-      <Input {...rest} />
-    </InputContainer>
-  );
-};
-
-interface ISimpleForm {
-  className?: string,
-  onSubmit?: React.FormEventHandler,
-  acceptCharset?: string,
-  style?: React.CSSProperties,
-  children: React.ReactNode,
-}
-
-export const SimpleForm: React.FC<ISimpleForm> = (props) => {
-  const {
-    className,
-    children,
-    onSubmit = () => {},
-    acceptCharset = 'UTF-8',
-    ...rest
-  } = props;
-
-  const handleSubmit: React.FormEventHandler = e => {
-    onSubmit(e);
-    e.preventDefault();
-  };
-
-  return (
-    <form
-      className={classNames('simple_form', className)}
-      method='post'
-      onSubmit={handleSubmit}
-      acceptCharset={acceptCharset}
-      {...rest}
-    >
-      {children}
-    </form>
-  );
-};
-
 interface IFieldsGroup {
   children: React.ReactNode,
 }
diff --git a/app/soapbox/features/group/components/group-header.tsx b/app/soapbox/features/group/components/group-header.tsx
index dbb377062..7f9617bf1 100644
--- a/app/soapbox/features/group/components/group-header.tsx
+++ b/app/soapbox/features/group/components/group-header.tsx
@@ -164,7 +164,7 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
         </div>
         <div className='absolute left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2'>
           <a href={group.avatar} onClick={handleAvatarClick} target='_blank'>
-            <Avatar className='ring-[3px] ring-white dark:ring-primary-900' src={group.avatar} size={72} />
+            <Avatar className='dark:ring-primary-900 ring-[3px] ring-white' src={group.avatar} size={72} />
           </a>
         </div>
       </div>
diff --git a/app/soapbox/features/home-timeline/index.tsx b/app/soapbox/features/home-timeline/index.tsx
index aaaec2bb3..83bdf6c9d 100644
--- a/app/soapbox/features/home-timeline/index.tsx
+++ b/app/soapbox/features/home-timeline/index.tsx
@@ -115,7 +115,7 @@ const HomeTimeline: React.FC = () => {
                     defaultMessage='Or you can visit {public} to get started and meet other users.'
                     values={{
                       public: (
-                        <Link to='/timeline/local' className='text-primary-600 hover:underline dark:text-primary-400'>
+                        <Link to='/timeline/local' className='text-primary-600 dark:text-primary-400 hover:underline'>
                           <FormattedMessage id='empty_column.home.local_tab' defaultMessage='the {site_title} tab' values={{ site_title: instance.title }} />
                         </Link>
                       ),
diff --git a/app/soapbox/features/landing-page/index.tsx b/app/soapbox/features/landing-page/index.tsx
index ce1180063..3dffe36fe 100644
--- a/app/soapbox/features/landing-page/index.tsx
+++ b/app/soapbox/features/landing-page/index.tsx
@@ -107,7 +107,7 @@ const LandingPage = () => {
           <div className='px-4 sm:px-6 sm:text-center md:mx-auto md:max-w-2xl lg:col-span-6 lg:flex lg:text-start'>
             <div className='w-full'>
               <Stack space={3}>
-                <h1 className='overflow-hidden text-ellipsis bg-gradient-to-br from-accent-500 via-primary-500 to-gradient-end bg-clip-text text-5xl font-extrabold text-transparent sm:mt-5 sm:leading-none lg:mt-6 lg:text-6xl xl:text-7xl'>
+                <h1 className='from-accent-500 via-primary-500 to-gradient-end overflow-hidden text-ellipsis bg-gradient-to-br bg-clip-text text-5xl font-extrabold text-transparent sm:mt-5 sm:leading-none lg:mt-6 lg:text-6xl xl:text-7xl'>
                   {instance.title}
                 </h1>
 
diff --git a/app/soapbox/features/migration/index.tsx b/app/soapbox/features/migration/index.tsx
index 0915e016e..2a0240e36 100644
--- a/app/soapbox/features/migration/index.tsx
+++ b/app/soapbox/features/migration/index.tsx
@@ -68,7 +68,7 @@ const Migration = () => {
             values={{
               link: (
                 <Link
-                  className='text-primary-600 hover:text-primary-800 hover:underline dark:text-primary-400 dark:hover:text-primary-500'
+                  className='text-primary-600 hover:text-primary-800 dark:text-primary-400 dark:hover:text-primary-500 hover:underline'
                   to='/settings/aliases'
                 >
                   <FormattedMessage
diff --git a/app/soapbox/features/notifications/components/clear-column-button.tsx b/app/soapbox/features/notifications/components/clear-column-button.tsx
deleted file mode 100644
index 3d70545aa..000000000
--- a/app/soapbox/features/notifications/components/clear-column-button.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { FormattedMessage } from 'react-intl';
-
-import Icon from 'soapbox/components/icon';
-
-interface IClearColumnButton {
-  onClick: React.MouseEventHandler<HTMLButtonElement>;
-}
-
-const ClearColumnButton: React.FC<IClearColumnButton> = ({ onClick }) => (
-  <button className='text-btn column-header__setting-btn' tabIndex={0} onClick={onClick}>
-    <Icon src={require('@tabler/icons/eraser.svg')} />
-    {' '}
-    <FormattedMessage id='notifications.clear' defaultMessage='Clear notifications' />
-  </button>
-);
-
-export default ClearColumnButton;
diff --git a/app/soapbox/features/notifications/components/notification.tsx b/app/soapbox/features/notifications/components/notification.tsx
index ccb15c143..0142384a7 100644
--- a/app/soapbox/features/notifications/components/notification.tsx
+++ b/app/soapbox/features/notifications/components/notification.tsx
@@ -276,7 +276,7 @@ const Notification: React.FC<INotificaton> = (props) => {
       return (
         <Icon
           src={icons[type]}
-          className='flex-none text-primary-600 dark:text-primary-400'
+          className='text-primary-600 dark:text-primary-400 flex-none'
         />
       );
     } else {
diff --git a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
index dca78dcd7..b435c7eb9 100644
--- a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
@@ -87,7 +87,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
                 )}
 
                 {isSubmitting && (
-                  <div className='absolute inset-0 flex items-center justify-center rounded-full bg-white/80 dark:bg-primary-900/80'>
+                  <div className='dark:bg-primary-900/80 absolute inset-0 flex items-center justify-center rounded-full bg-white/80'>
                     <Spinner withText={false} />
                   </div>
                 )}
diff --git a/app/soapbox/features/onboarding/steps/completed-step.tsx b/app/soapbox/features/onboarding/steps/completed-step.tsx
index 082defb4d..9a0655c37 100644
--- a/app/soapbox/features/onboarding/steps/completed-step.tsx
+++ b/app/soapbox/features/onboarding/steps/completed-step.tsx
@@ -7,7 +7,7 @@ const CompletedStep = ({ onComplete }: { onComplete: () => void }) => (
   <Card variant='rounded' size='xl'>
     <CardBody>
       <Stack space={2}>
-        <Icon strokeWidth={1} src={require('@tabler/icons/confetti.svg')} className='mx-auto h-16 w-16 text-primary-600 dark:text-primary-400' />
+        <Icon strokeWidth={1} src={require('@tabler/icons/confetti.svg')} className='text-primary-600 dark:text-primary-400 mx-auto h-16 w-16' />
 
         <Text size='2xl' align='center' weight='bold'>
           <FormattedMessage id='onboarding.finished.title' defaultMessage='Onboarding complete' />
diff --git a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
index ba70e21a1..a8862a8ad 100644
--- a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
@@ -99,7 +99,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
 
                   {isSubmitting && (
                     <div
-                      className='absolute inset-0 flex items-center justify-center rounded-t-md bg-white/80 dark:bg-primary-900/80'
+                      className='dark:bg-primary-900/80 absolute inset-0 flex items-center justify-center rounded-t-md bg-white/80'
                     >
                       <Spinner withText={false} />
                     </div>
@@ -122,7 +122,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
 
                 <div className='flex flex-col px-4 pb-4'>
                   {account && (
-                    <Avatar src={account.avatar} size={64} className='-mt-8 mb-2 ring-2 ring-white dark:ring-primary-800' />
+                    <Avatar src={account.avatar} size={64} className='dark:ring-primary-800 -mt-8 mb-2 ring-2 ring-white' />
                   )}
 
                   <Text weight='bold' size='sm'>{account?.display_name}</Text>
diff --git a/app/soapbox/features/onboarding/steps/fediverse-step.tsx b/app/soapbox/features/onboarding/steps/fediverse-step.tsx
index ba5de74e4..63bfa7478 100644
--- a/app/soapbox/features/onboarding/steps/fediverse-step.tsx
+++ b/app/soapbox/features/onboarding/steps/fediverse-step.tsx
@@ -15,7 +15,7 @@ const FediverseStep = ({ onNext }: { onNext: () => void }) => {
     <Card variant='rounded' size='xl'>
       <CardBody>
         <Stack space={2}>
-          <Icon strokeWidth={1} src={require('@tabler/icons/affiliate.svg')} className='mx-auto h-16 w-16 text-primary-600 dark:text-primary-400' />
+          <Icon strokeWidth={1} src={require('@tabler/icons/affiliate.svg')} className='text-primary-600 dark:text-primary-400 mx-auto h-16 w-16' />
 
           <Text size='2xl' weight='bold'>
             <FormattedMessage
@@ -49,7 +49,7 @@ const FediverseStep = ({ onNext }: { onNext: () => void }) => {
               </Stack>
             </div>
 
-            <div className='rounded-lg bg-primary-50 p-4 text-center dark:bg-gray-800'>
+            <div className='bg-primary-50 rounded-lg p-4 text-center dark:bg-gray-800'>
               <Account account={account} />
             </div>
 
diff --git a/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx b/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
index 8dfb2485b..06df3bb49 100644
--- a/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
+++ b/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
@@ -49,7 +49,7 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
 
   const renderEmpty = () => {
     return (
-      <div className='my-2 rounded-lg bg-primary-50 p-8 text-center dark:bg-gray-800'>
+      <div className='bg-primary-50 my-2 rounded-lg p-8 text-center dark:bg-gray-800'>
         <Text>
           <FormattedMessage id='empty_column.follow_recommendations' defaultMessage='Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' />
         </Text>
diff --git a/app/soapbox/features/placeholder/components/placeholder-avatar.tsx b/app/soapbox/features/placeholder/components/placeholder-avatar.tsx
index 6eb479f13..c01af112d 100644
--- a/app/soapbox/features/placeholder/components/placeholder-avatar.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-avatar.tsx
@@ -23,12 +23,12 @@ const PlaceholderAvatar: React.FC<IPlaceholderAvatar> = ({ size, withText = fals
   return (
     <Stack space={2} className='animate-pulse py-3 text-center'>
       <div
-        className='mx-auto block rounded-full bg-primary-50 dark:bg-primary-800'
+        className='bg-primary-50 dark:bg-primary-800 mx-auto block rounded-full'
         style={style}
       />
 
       {withText && (
-        <div style={{ width: size, height: 15 }} className='mx-auto rounded-full bg-primary-50 dark:bg-primary-800' />
+        <div style={{ width: size, height: 15 }} className='bg-primary-50 dark:bg-primary-800 mx-auto rounded-full' />
       )}
     </Stack>
   );
diff --git a/app/soapbox/features/placeholder/components/placeholder-card.tsx b/app/soapbox/features/placeholder/components/placeholder-card.tsx
index 81246ef13..ac1d5c3c0 100644
--- a/app/soapbox/features/placeholder/components/placeholder-card.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-card.tsx
@@ -11,7 +11,7 @@ const PlaceholderCard: React.FC = () => (
   >
     <div className='primary-500 w-2/5 rounded-l'>&nbsp;</div>
 
-    <div className='flex w-3/5 flex-col justify-between break-words p-4 text-primary-50'>
+    <div className='text-primary-50 flex w-3/5 flex-col justify-between break-words p-4'>
       <p>{generateText(randomIntFromInterval(5, 25))}</p>
       <p>{generateText(randomIntFromInterval(5, 75))}</p>
       <p>{generateText(randomIntFromInterval(5, 15))}</p>
diff --git a/app/soapbox/features/placeholder/components/placeholder-chat-message.tsx b/app/soapbox/features/placeholder/components/placeholder-chat-message.tsx
index d74e459cc..566d9b74f 100644
--- a/app/soapbox/features/placeholder/components/placeholder-chat-message.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-chat-message.tsx
@@ -33,7 +33,7 @@ const PlaceholderChatMessage = ({ isMyMessage = false }: { isMyMessage?: boolean
             })
           }
         >
-          <div style={{ width: messageLength, height: 20 }} className='rounded-full bg-primary-50 dark:bg-primary-800' />
+          <div style={{ width: messageLength, height: 20 }} className='bg-primary-50 dark:bg-primary-800 rounded-full' />
         </div>
 
         <div className={classNames({ 'order-1': !isMyMessage })}>
@@ -56,7 +56,7 @@ const PlaceholderChatMessage = ({ isMyMessage = false }: { isMyMessage?: boolean
             'order-2': !isMyMessage,
           })}
         >
-          <span style={{ width: 50, height: 12 }} className='block rounded-full bg-primary-50 dark:bg-primary-800' />
+          <span style={{ width: 50, height: 12 }} className='bg-primary-50 dark:bg-primary-800 block rounded-full' />
         </Text>
 
         <div className={classNames({ 'order-1': !isMyMessage })}>
diff --git a/app/soapbox/features/placeholder/components/placeholder-display-name.tsx b/app/soapbox/features/placeholder/components/placeholder-display-name.tsx
index c367af132..be985e04c 100644
--- a/app/soapbox/features/placeholder/components/placeholder-display-name.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-display-name.tsx
@@ -14,7 +14,7 @@ const PlaceholderDisplayName: React.FC<IPlaceholderDisplayName> = ({ minLength,
   const acctLength = randomIntFromInterval(maxLength, minLength);
 
   return (
-    <div className='flex flex-col text-primary-50 dark:text-primary-800'>
+    <div className='text-primary-50 dark:text-primary-800 flex flex-col'>
       <p>{generateText(length)}</p>
       {withSuffix && <p>{generateText(acctLength)}</p>}
     </div>
diff --git a/app/soapbox/features/placeholder/components/placeholder-event-header.tsx b/app/soapbox/features/placeholder/components/placeholder-event-header.tsx
index c01272944..b33bec04f 100644
--- a/app/soapbox/features/placeholder/components/placeholder-event-header.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-event-header.tsx
@@ -11,7 +11,7 @@ const PlaceholderEventHeader = () => {
   const locationLength = randomIntFromInterval(5, 30);
 
   return (
-    <Stack className='animate-pulse text-primary-50 dark:text-primary-800' space={2}>
+    <Stack className='text-primary-50 dark:text-primary-800 animate-pulse' space={2}>
       <p className='text-lg'>{generateText(eventNameLength)}</p>
 
       <Stack space={1}>
diff --git a/app/soapbox/features/placeholder/components/placeholder-event-preview.tsx b/app/soapbox/features/placeholder/components/placeholder-event-preview.tsx
index f29f46c6e..9a952c7ca 100644
--- a/app/soapbox/features/placeholder/components/placeholder-event-preview.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-event-preview.tsx
@@ -9,8 +9,8 @@ const PlaceholderEventPreview = () => {
   const nameLength = randomIntFromInterval(5, 15);
 
   return (
-    <div className='relative w-full animate-pulse overflow-hidden rounded-lg bg-gray-100 text-primary-50 dark:bg-primary-800 dark:text-primary-800'>
-      <div className='h-40 bg-primary-200 dark:bg-gray-600' />
+    <div className='text-primary-50 dark:bg-primary-800 dark:text-primary-800 relative w-full animate-pulse overflow-hidden rounded-lg bg-gray-100'>
+      <div className='bg-primary-200 h-40 dark:bg-gray-600' />
       <Stack className='p-2.5' space={2}>
         <Text weight='semibold'>{generateText(eventNameLength)}</Text>
 
diff --git a/app/soapbox/features/placeholder/components/placeholder-group-card.tsx b/app/soapbox/features/placeholder/components/placeholder-group-card.tsx
index 9f6507f19..49e1425e6 100644
--- a/app/soapbox/features/placeholder/components/placeholder-group-card.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-group-card.tsx
@@ -11,10 +11,10 @@ const PlaceholderGroupCard = () => {
 
   return (
     <div className='animate-pulse overflow-hidden'>
-      <Stack className='rounded-lg border border-solid border-gray-300 bg-white dark:border-primary-800 dark:bg-primary-900 sm:rounded-xl'>
-        <div className='relative -m-[1px] mb-0 h-[120px] rounded-t-lg bg-primary-100 dark:bg-gray-800 sm:rounded-t-xl'>
+      <Stack className='dark:border-primary-800 dark:bg-primary-900 rounded-lg border border-solid border-gray-300 bg-white sm:rounded-xl'>
+        <div className='bg-primary-100 relative -m-[1px] mb-0 h-[120px] rounded-t-lg dark:bg-gray-800 sm:rounded-t-xl'>
           <div className='absolute left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2'>
-            <div className='h-16 w-16 rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900' />
+            <div className='bg-primary-500 dark:ring-primary-900 h-16 w-16 rounded-full ring-2 ring-white' />
           </div>
         </div>
         <Stack className='p-3 pt-9' alignItems='center' space={3}>
diff --git a/app/soapbox/features/placeholder/components/placeholder-hashtag.tsx b/app/soapbox/features/placeholder/components/placeholder-hashtag.tsx
index 8830b1e90..7e80eafb1 100644
--- a/app/soapbox/features/placeholder/components/placeholder-hashtag.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-hashtag.tsx
@@ -7,7 +7,7 @@ const PlaceholderHashtag: React.FC = () => {
   const length = randomIntFromInterval(15, 30);
 
   return (
-    <div className='animate-pulse text-primary-200 dark:text-primary-700'>
+    <div className='text-primary-200 dark:text-primary-700 animate-pulse'>
       <p>{generateText(length)}</p>
     </div>
   );
diff --git a/app/soapbox/features/placeholder/components/placeholder-media-gallery.tsx b/app/soapbox/features/placeholder/components/placeholder-media-gallery.tsx
index 3eab10e4d..2ceb9f895 100644
--- a/app/soapbox/features/placeholder/components/placeholder-media-gallery.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-media-gallery.tsx
@@ -78,7 +78,7 @@ const PlaceholderMediaGallery: React.FC<IPlaceholderMediaGallery> = ({ media, de
     const float = dimensions.float as any || 'left';
     const position = dimensions.pos as any || 'relative';
 
-    return <div key={i} className='media-gallery__item' style={{ position, float, left, top, right, bottom, height, width }} />;
+    return <div key={i} className='media-gallery__item bg-primary-200 animate-pulse' style={{ position, float, left, top, right, bottom, height, width }} />;
   };
 
   const sizeData = getSizeData(media.size);
diff --git a/app/soapbox/features/placeholder/components/placeholder-notification.tsx b/app/soapbox/features/placeholder/components/placeholder-notification.tsx
index d8c301a4e..8617ae6b2 100644
--- a/app/soapbox/features/placeholder/components/placeholder-notification.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-notification.tsx
@@ -8,7 +8,7 @@ import PlaceholderStatusContent from './placeholder-status-content';
 
 /** Fake notification to display while data is loading. */
 const PlaceholderNotification = () => (
-  <div className='bg-white px-4 py-6 dark:bg-primary-900 sm:p-6'>
+  <div className='dark:bg-primary-900 bg-white px-4 py-6 sm:p-6'>
     <div className='w-full animate-pulse'>
       <div className='mb-2'>
         <PlaceholderStatusContent minLength={20} maxLength={20} />
diff --git a/app/soapbox/features/placeholder/components/placeholder-sidebar-suggestions.tsx b/app/soapbox/features/placeholder/components/placeholder-sidebar-suggestions.tsx
index 9cc1c4448..00add96e9 100644
--- a/app/soapbox/features/placeholder/components/placeholder-sidebar-suggestions.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-sidebar-suggestions.tsx
@@ -14,7 +14,7 @@ export default ({ limit }: { limit: number }) => {
         <HStack key={idx} alignItems='center' space={2} className='animate-pulse'>
           <Stack space={3} className='text-center'>
             <div
-              className='mx-auto block h-9 w-9 rounded-full bg-primary-200 dark:bg-primary-700'
+              className='bg-primary-200 dark:bg-primary-700 mx-auto block h-9 w-9 rounded-full'
             />
           </Stack>
 
diff --git a/app/soapbox/features/placeholder/components/placeholder-sidebar-trends.tsx b/app/soapbox/features/placeholder/components/placeholder-sidebar-trends.tsx
index 44e728284..9edcef46b 100644
--- a/app/soapbox/features/placeholder/components/placeholder-sidebar-trends.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-sidebar-trends.tsx
@@ -11,7 +11,7 @@ export default ({ limit }: { limit: number }) => {
   return (
     <>
       {new Array(limit).fill(undefined).map((_, idx) => (
-        <Stack key={idx} className='animate-pulse text-primary-200 dark:text-primary-700'>
+        <Stack key={idx} className='text-primary-200 dark:text-primary-700 animate-pulse'>
           <p>{generateText(trend)}</p>
           <p>{generateText(stat)}</p>
         </Stack>
diff --git a/app/soapbox/features/placeholder/components/placeholder-status-content.tsx b/app/soapbox/features/placeholder/components/placeholder-status-content.tsx
index 0537f8520..db1f6503e 100644
--- a/app/soapbox/features/placeholder/components/placeholder-status-content.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-status-content.tsx
@@ -12,7 +12,7 @@ const PlaceholderStatusContent: React.FC<IPlaceholderStatusContent> = ({ minLeng
   const length = randomIntFromInterval(maxLength, minLength);
 
   return (
-    <div className='flex flex-col text-primary-50 dark:text-primary-800'>
+    <div className='text-primary-50 dark:text-primary-800 flex flex-col'>
       <p className='break-words'>{generateText(length)}</p>
     </div>
   );
diff --git a/app/soapbox/features/public-layout/components/footer.tsx b/app/soapbox/features/public-layout/components/footer.tsx
index 0f6435f0a..958f99273 100644
--- a/app/soapbox/features/public-layout/components/footer.tsx
+++ b/app/soapbox/features/public-layout/components/footer.tsx
@@ -31,7 +31,7 @@ const Footer = () => {
 
           return (
             <div key={idx} className='px-5 py-2'>
-              <Comp {...compProps} className='text-primary-600 hover:underline dark:text-primary-400'>
+              <Comp {...compProps} className='text-primary-600 dark:text-primary-400 hover:underline'>
                 <Text tag='span' theme='inherit' size='sm'>
                   {(link.getIn(['titleLocales', locale]) || link.get('title')) as string}
                 </Text>
diff --git a/app/soapbox/features/public-layout/components/sonar.tsx b/app/soapbox/features/public-layout/components/sonar.tsx
index cefcf97d0..022fa6417 100644
--- a/app/soapbox/features/public-layout/components/sonar.tsx
+++ b/app/soapbox/features/public-layout/components/sonar.tsx
@@ -3,12 +3,12 @@ import React from 'react';
 const Sonar = () => (
   <div className='relative'>
     <div className='relative h-48 w-48'>
-      <div className='pointer-events-none absolute top-0 left-0 h-full w-full animate-sonar-scale-4 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' />
-      <div className='pointer-events-none absolute top-0 left-0 h-full w-full animate-sonar-scale-3 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' />
-      <div className='pointer-events-none absolute top-0 left-0 h-full w-full animate-sonar-scale-2 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' />
-      <div className='pointer-events-none absolute top-0 left-0 h-full w-full animate-sonar-scale-1 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' />
+      <div className='animate-sonar-scale-4 bg-primary-600/25 dark:bg-primary-600/25 pointer-events-none absolute top-0 left-0 h-full w-full rounded-full opacity-0' />
+      <div className='animate-sonar-scale-3 bg-primary-600/25 dark:bg-primary-600/25 pointer-events-none absolute top-0 left-0 h-full w-full rounded-full opacity-0' />
+      <div className='animate-sonar-scale-2 bg-primary-600/25 dark:bg-primary-600/25 pointer-events-none absolute top-0 left-0 h-full w-full rounded-full opacity-0' />
+      <div className='animate-sonar-scale-1 bg-primary-600/25 dark:bg-primary-600/25 pointer-events-none absolute top-0 left-0 h-full w-full rounded-full opacity-0' />
 
-      <div className='absolute top-0 left-0 h-48 w-48 rounded-full bg-white dark:bg-primary-900' />
+      <div className='dark:bg-primary-900 absolute top-0 left-0 h-48 w-48 rounded-full bg-white' />
     </div>
   </div>
 );
diff --git a/app/soapbox/features/settings/media-display.tsx b/app/soapbox/features/settings/media-display.tsx
deleted file mode 100644
index d89aae6fc..000000000
--- a/app/soapbox/features/settings/media-display.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
-
-import { getSettings, changeSettingImmediate } from 'soapbox/actions/settings';
-import List, { ListItem } from 'soapbox/components/list';
-import { Card, CardBody, CardHeader, CardTitle } from 'soapbox/components/ui';
-import { SimpleForm, SelectDropdown } from 'soapbox/features/forms';
-import { useAppDispatch, useAppSelector } from 'soapbox/hooks';
-
-const messages = defineMessages({
-  mediaDisplay: { id: 'preferences.fields.media_display_label', defaultMessage: 'Media display' },
-  display_media_default: { id: 'preferences.fields.display_media.default', defaultMessage: 'Hide media marked as sensitive' },
-  display_media_hide_all: { id: 'preferences.fields.display_media.hide_all', defaultMessage: 'Always hide media' },
-  display_media_show_all: { id: 'preferences.fields.display_media.show_all', defaultMessage: 'Always show media' },
-});
-
-const MediaDisplay = () => {
-  const dispatch = useAppDispatch();
-  const intl = useIntl();
-
-  const settings = useAppSelector((state) => getSettings(state));
-
-  const displayMediaOptions = {
-    default: intl.formatMessage(messages.display_media_default),
-    hide_all: intl.formatMessage(messages.display_media_hide_all),
-    show_all: intl.formatMessage(messages.display_media_show_all),
-  };
-
-  const onSelectChange: (path: string[]) => React.ChangeEventHandler<HTMLSelectElement> = path => {
-    return e => {
-      dispatch(changeSettingImmediate(path, e.target.value));
-    };
-  };
-
-  return (
-    <Card variant='rounded'>
-      <CardHeader>
-        <CardTitle title={intl.formatMessage(messages.mediaDisplay)} />
-      </CardHeader>
-
-      <CardBody>
-        <SimpleForm className='space-y-3 p-0'>
-          <List>
-            <ListItem label={intl.formatMessage(messages.mediaDisplay)}>
-              <SelectDropdown
-                items={displayMediaOptions}
-                defaultValue={settings.get('displayMedia') as string}
-                onChange={onSelectChange(['displayMedia'])}
-              />
-            </ListItem>
-          </List>
-        </SimpleForm>
-      </CardBody>
-    </Card>
-  );
-};
-
-export default MediaDisplay;
diff --git a/app/soapbox/features/soapbox-config/components/site-preview.tsx b/app/soapbox/features/soapbox-config/components/site-preview.tsx
index 08095f332..3336c2f8c 100644
--- a/app/soapbox/features/soapbox-config/components/site-preview.tsx
+++ b/app/soapbox/features/soapbox-config/components/site-preview.tsx
@@ -26,9 +26,9 @@ const SitePreview: React.FC<ISitePreview> = ({ soapbox }) => {
 
   const bodyClass = classNames(
     'site-preview',
-    'relative flex justify-center align-center text-base',
+    'align-center relative flex justify-center text-base',
     'border border-solid border-gray-200 dark:border-gray-600',
-    'h-40 rounded-lg overflow-hidden',
+    'h-40 overflow-hidden rounded-lg',
     {
       'bg-white': !dark,
       'bg-gray-900': dark,
@@ -39,11 +39,11 @@ const SitePreview: React.FC<ISitePreview> = ({ soapbox }) => {
       <style>{`.site-preview {${generateThemeCss(soapboxConfig)}}`}</style>
       <BackgroundShapes position='absolute' />
 
-      <div className='absolute z-20 self-center overflow-hidden rounded-lg bg-accent-500 p-2 text-white'>
+      <div className='bg-accent-500 absolute z-20 self-center overflow-hidden rounded-lg p-2 text-white'>
         <FormattedMessage id='site_preview.preview' defaultMessage='Preview' />
       </div>
 
-      <div className={classNames('flex absolute inset-0 shadow z-10 h-12 lg:h-16', {
+      <div className={classNames('absolute inset-0 z-10 flex h-12 shadow lg:h-16', {
         'bg-white': !dark,
         'bg-gray-800': dark,
       })}
diff --git a/app/soapbox/features/status/components/card.tsx b/app/soapbox/features/status/components/card.tsx
index 7e659d075..ed7534a50 100644
--- a/app/soapbox/features/status/components/card.tsx
+++ b/app/soapbox/features/status/components/card.tsx
@@ -1,4 +1,4 @@
-import classnames from 'clsx';
+import classNames from 'clsx';
 import { List as ImmutableList } from 'immutable';
 import React, { useState, useEffect } from 'react';
 
@@ -112,7 +112,7 @@ const Card: React.FC<ICard> = ({
 
   const interactive = card.type !== 'link';
   horizontal = typeof horizontal === 'boolean' ? horizontal : interactive || embedded;
-  const className = classnames('status-card', { horizontal, compact, interactive }, `status-card--${card.type}`);
+  const className = classNames('status-card', { horizontal, compact, interactive }, `status-card--${card.type}`);
   const ratio = getRatio(card);
   const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio);
 
@@ -223,7 +223,7 @@ const Card: React.FC<ICard> = ({
     );
   } else if (card.image) {
     embed = (
-      <div className={classnames(
+      <div className={classNames(
         'status-card__image',
         'w-full flex-none rounded-l md:h-auto md:w-auto md:flex-auto',
         {
diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index 04a8b518e..a787a4d2f 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@@ -483,7 +483,7 @@ const Thread: React.FC<IThread> = (props) => {
 
           {!isUnderReview ? (
             <>
-              <hr className='mb-2 border-t-2 dark:border-primary-800' />
+              <hr className='dark:border-primary-800 mb-2 border-t-2' />
 
               <StatusActionBar
                 status={status}
@@ -497,7 +497,7 @@ const Thread: React.FC<IThread> = (props) => {
       </HotKeys>
 
       {hasDescendants && (
-        <hr className='mt-2 border-t-2 dark:border-primary-800' />
+        <hr className='dark:border-primary-800 mt-2 border-t-2' />
       )}
     </div>
   );
diff --git a/app/soapbox/features/ui/components/background-shapes.tsx b/app/soapbox/features/ui/components/background-shapes.tsx
index 1244fa1ab..25c32a7ba 100644
--- a/app/soapbox/features/ui/components/background-shapes.tsx
+++ b/app/soapbox/features/ui/components/background-shapes.tsx
@@ -8,7 +8,7 @@ interface IBackgroundShapes {
 
 /** Gradient that appears in the background of the UI. */
 const BackgroundShapes: React.FC<IBackgroundShapes> = ({ position = 'fixed' }) => (
-  <div className={classNames(position, 'top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none')}>
+  <div className={classNames(position, 'pointer-events-none inset-x-0 top-0 flex justify-center overflow-hidden')}>
     <div className='bg-gradient-sm lg:bg-gradient-light lg:dark:bg-gradient-dark h-screen w-screen' />
   </div>
 );
diff --git a/app/soapbox/features/ui/components/floating-action-button.tsx b/app/soapbox/features/ui/components/floating-action-button.tsx
index 9bfb62848..92f88d22f 100644
--- a/app/soapbox/features/ui/components/floating-action-button.tsx
+++ b/app/soapbox/features/ui/components/floating-action-button.tsx
@@ -1,4 +1,4 @@
-import clsx from 'clsx';
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -25,9 +25,9 @@ const FloatingActionButton: React.FC<IFloatingActionButton> = () => {
   return (
     <button
       onClick={handleOpenComposeModal}
-      className={clsx(
+      className={classNames(
         'inline-flex appearance-none items-center rounded-full border p-4 font-medium transition-all focus:outline-none focus:ring-2 focus:ring-offset-2',
-        'border-transparent bg-secondary-500 text-gray-100 hover:bg-secondary-400 focus:bg-secondary-500 focus:ring-secondary-300',
+        'bg-secondary-500 hover:bg-secondary-400 focus:bg-secondary-500 focus:ring-secondary-300 border-transparent text-gray-100',
       )}
       aria-label={intl.formatMessage(messages.publish)}
     >
@@ -39,4 +39,4 @@ const FloatingActionButton: React.FC<IFloatingActionButton> = () => {
   );
 };
 
-export default FloatingActionButton;
\ No newline at end of file
+export default FloatingActionButton;
diff --git a/app/soapbox/features/ui/components/link-footer.tsx b/app/soapbox/features/ui/components/link-footer.tsx
index 5b7699618..5466a6aee 100644
--- a/app/soapbox/features/ui/components/link-footer.tsx
+++ b/app/soapbox/features/ui/components/link-footer.tsx
@@ -19,7 +19,7 @@ interface IFooterLink {
 const FooterLink: React.FC<IFooterLink> = ({ children, className, ...rest }): JSX.Element => {
   return (
     <div>
-      <Link className={classNames('text-gray-700 dark:text-gray-600 hover:text-gray-800 dark:hover:text-gray-500 hover:underline', className)} {...rest}>{children}</Link>
+      <Link className={classNames('text-gray-700 hover:text-gray-800 hover:underline dark:text-gray-600 dark:hover:text-gray-500', className)} {...rest}>{children}</Link>
     </div>
   );
 };
diff --git a/app/soapbox/features/ui/components/modals/actions-modal.tsx b/app/soapbox/features/ui/components/modals/actions-modal.tsx
index 4bdbb2ee6..ccc86c815 100644
--- a/app/soapbox/features/ui/components/modals/actions-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/actions-modal.tsx
@@ -4,9 +4,8 @@ import { FormattedMessage } from 'react-intl';
 import { spring } from 'react-motion';
 
 import Icon from 'soapbox/components/icon';
-import StatusContent from 'soapbox/components/status-content';
-import { HStack, Stack } from 'soapbox/components/ui';
-import AccountContainer from 'soapbox/containers/account-container';
+import { HStack } from 'soapbox/components/ui';
+import ReplyIndicator from 'soapbox/features/compose/components/reply-indicator';
 
 import Motion from '../../util/optional-motion';
 
@@ -56,16 +55,7 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
       {({ top }) => (
         <div className='modal-root__modal actions-modal' style={{ top: `${top}%` }}>
           {status && (
-            <Stack space={2} className='border-b border-solid border-gray-200 bg-gray-50 p-4 dark:border-gray-700 dark:bg-gray-800'>
-              <AccountContainer
-                key={status.account as string}
-                id={status.account as string}
-                showProfileHoverCard={false}
-                withLinkToProfile={false}
-                timestamp={status.created_at}
-              />
-              <StatusContent status={status} />
-            </Stack>
+            <ReplyIndicator className='actions-modal__status rounded-b-none' status={status} hideActions />
           )}
 
           <ul className={classNames({ 'with-status': !!status })}>
diff --git a/app/soapbox/features/ui/components/modals/compare-history-modal.tsx b/app/soapbox/features/ui/components/modals/compare-history-modal.tsx
index dd73c8d79..b802e6666 100644
--- a/app/soapbox/features/ui/components/modals/compare-history-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/compare-history-modal.tsx
@@ -60,7 +60,7 @@ const CompareHistoryModal: React.FC<ICompareHistoryModal> = ({ onClose, statusId
                     {version.poll.options.map((option: any) => (
                       <HStack alignItems='center' className='p-1 text-gray-900 dark:text-gray-300'>
                         <span
-                          className={classNames('inline-block w-4 h-4 flex-none mr-2.5 border border-solid border-primary-600 rounded-full', {
+                          className={classNames('border-primary-600 mr-2.5 inline-block h-4 w-4 flex-none rounded-full border border-solid', {
                             'rounded': poll.multiple,
                           })}
                           tabIndex={0}
diff --git a/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx b/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
index 0bd8d34d4..eb08e751b 100644
--- a/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
@@ -214,7 +214,7 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
       <FormGroup
         labelText={<FormattedMessage id='compose_event.fields.banner_label' defaultMessage='Event banner' />}
       >
-        <div className='dark:sm:shadow-inset relative flex h-24 items-center justify-center overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-white sm:h-32 sm:shadow'>
+        <div className='dark:sm:shadow-inset bg-primary-100 text-primary-500 relative flex h-24 items-center justify-center overflow-hidden rounded-lg dark:bg-gray-800 dark:text-white sm:h-32 sm:shadow'>
           {banner ? (
             <>
               <img className='h-full w-full object-cover' src={banner.url} alt='' />
diff --git a/app/soapbox/features/ui/components/modals/compose-event-modal/upload-button.tsx b/app/soapbox/features/ui/components/modals/compose-event-modal/upload-button.tsx
index 057794b6c..5dcfbce80 100644
--- a/app/soapbox/features/ui/components/modals/compose-event-modal/upload-button.tsx
+++ b/app/soapbox/features/ui/components/modals/compose-event-modal/upload-button.tsx
@@ -27,7 +27,7 @@ const UploadButton: React.FC<IUploadButton> = ({ disabled, onSelectFile }) => {
   };
 
   return (
-    <HStack className='h-full w-full cursor-pointer text-primary-500 dark:text-accent-blue' space={3} alignItems='center' justifyContent='center' element='label'>
+    <HStack className='text-primary-500 dark:text-accent-blue h-full w-full cursor-pointer' space={3} alignItems='center' justifyContent='center' element='label'>
       <Icon
         src={require('@tabler/icons/photo-plus.svg')}
         className='h-7 w-7'
diff --git a/app/soapbox/features/ui/components/modals/hotkeys-modal.tsx b/app/soapbox/features/ui/components/modals/hotkeys-modal.tsx
index 5e3836cdc..bee2590a5 100644
--- a/app/soapbox/features/ui/components/modals/hotkeys-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/hotkeys-modal.tsx
@@ -9,7 +9,7 @@ interface IHotkeysModal {
 }
 
 const Hotkey: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <kbd className='rounded-md border border-solid border-primary-200 bg-primary-50 px-1.5 py-1 font-sans text-xs dark:border-gray-700 dark:bg-gray-800'>
+  <kbd className='border-primary-200 bg-primary-50 rounded-md border border-solid px-1.5 py-1 font-sans text-xs dark:border-gray-700 dark:bg-gray-800'>
     {children}
   </kbd>
 );
diff --git a/app/soapbox/features/ui/components/modals/landing-page-modal.tsx b/app/soapbox/features/ui/components/modals/landing-page-modal.tsx
index 44ae03a6b..0ac65961f 100644
--- a/app/soapbox/features/ui/components/modals/landing-page-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/landing-page-modal.tsx
@@ -48,7 +48,7 @@ const LandingPageModal: React.FC<ILandingPageModal> = ({ onClose }) => {
         )}
 
         <div
-          className={classNames('pt-6 grid gap-4', {
+          className={classNames('grid gap-4 pt-6', {
             'grid-cols-2': isOpen,
             'grid-cols-1': !isOpen,
           })}
diff --git a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
index 39cb788c6..e0e9e728e 100644
--- a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
+++ b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
@@ -30,11 +30,11 @@ const messages = defineMessages({
 const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
   return (
     <label
-      className='dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-36 sm:shadow'
+      className='dark:sm:shadow-inset bg-primary-100 text-primary-500 dark:text-accent-blue relative h-24 w-full cursor-pointer overflow-hidden rounded-lg dark:bg-gray-800 sm:h-36 sm:shadow'
     >
       {src && <img className='h-full w-full object-cover' src={src} alt='' />}
       <HStack
-        className={classNames('h-full w-full top-0 absolute transition-opacity', {
+        className={classNames('absolute top-0 h-full w-full transition-opacity', {
           'opacity-0 hover:opacity-90 bg-primary-100 dark:bg-gray-800': src,
         })}
         space={3}
@@ -65,13 +65,13 @@ const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
 
 const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
   return (
-    <label className='absolute left-1/2 bottom-0 h-[72px] w-[72px] -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900'>
+    <label className='bg-primary-500 dark:ring-primary-900 absolute left-1/2 bottom-0 h-[72px] w-[72px] -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full ring-2 ring-white'>
       {src && <Avatar src={src} size={72} />}
       <HStack
         alignItems='center'
         justifyContent='center'
 
-        className={classNames('h-full w-full left-0 top-0 rounded-full absolute transition-opacity', {
+        className={classNames('absolute left-0 top-0 h-full w-full rounded-full transition-opacity', {
           'opacity-0 hover:opacity-90 bg-primary-500': src,
         })}
       >
diff --git a/app/soapbox/features/ui/components/modals/policy-modal.tsx b/app/soapbox/features/ui/components/modals/policy-modal.tsx
index 7a1d263e5..180e492c2 100644
--- a/app/soapbox/features/ui/components/modals/policy-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/policy-modal.tsx
@@ -15,7 +15,7 @@ const DirectMessageUpdates = () => {
 
   return (
     <Stack space={3}>
-      <Stack space={4} className='rounded-lg border-2 border-solid border-primary-200 p-4 dark:border-primary-800'>
+      <Stack space={4} className='border-primary-200 dark:border-primary-800 rounded-lg border-2 border-solid p-4'>
         <HStack alignItems='center' space={3}>
           <svg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'>
             <path d='M0 22.5306C0 10.0873 10.0873 0 22.5306 0H26.4828C38.3664 0 48 9.6336 48 21.5172V21.5172C48 36.1433 36.1433 48 21.5172 48H18.4615C8.26551 48 0 39.7345 0 29.5385V22.5306Z' fill='url(#paint0_linear_2190_131524)' fillOpacity='0.2' />
@@ -43,7 +43,7 @@ const DirectMessageUpdates = () => {
         </Text>
       </Stack>
 
-      <Stack space={4} className='rounded-lg border-2 border-solid border-primary-200 p-4 dark:border-primary-800'>
+      <Stack space={4} className='border-primary-200 dark:border-primary-800 rounded-lg border-2 border-solid p-4'>
         <HStack alignItems='center' space={3}>
           <svg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'>
             <path d='M0 25.7561C0 22.2672 0 20.5228 0.197492 19.0588C1.52172 9.24259 9.24259 1.52172 19.0588 0.197492C20.5228 0 22.2672 0 25.7561 0H30.1176C39.9938 0 48 8.0062 48 17.8824C48 34.5159 34.5159 48 17.8824 48H15.3192C15.0228 48 14.8747 48 14.7494 47.9979C6.66132 47.8627 0.137263 41.3387 0.0020943 33.2506C0 33.1253 0 32.9772 0 32.6808V25.7561Z' fill='url(#paint0_linear_2190_131532)' fillOpacity='0.2' />
@@ -61,21 +61,21 @@ const DirectMessageUpdates = () => {
 
         <ul className='space-y-2'>
           <li className='flex items-center space-x-2'>
-            <span className='flex h-8 w-8 items-center justify-center rounded-full border-2 border-solid border-gray-200 text-sm font-bold text-primary-500 dark:border-gray-800 dark:text-primary-300'>
+            <span className='text-primary-500 dark:text-primary-300 flex h-8 w-8 items-center justify-center rounded-full border-2 border-solid border-gray-200 text-sm font-bold dark:border-gray-800'>
               1
             </span>
 
             <Text theme='muted'>Consolidates previously-separate policies</Text>
           </li>
           <li className='flex items-center space-x-2'>
-            <span className='flex h-8 w-8 items-center justify-center rounded-full border-2 border-solid border-gray-200 text-sm font-bold text-primary-500 dark:border-gray-800 dark:text-primary-300'>
+            <span className='text-primary-500 dark:text-primary-300 flex h-8 w-8 items-center justify-center rounded-full border-2 border-solid border-gray-200 text-sm font-bold dark:border-gray-800'>
               2
             </span>
 
             <Text theme='muted'>Reaffirms jurisdiction-specific requirements</Text>
           </li>
           <li className='flex items-center space-x-2'>
-            <span className='flex h-8 w-8 items-center justify-center rounded-full border-2 border-solid border-gray-200 text-sm font-bold text-primary-500 dark:border-gray-800 dark:text-primary-300'>
+            <span className='text-primary-500 dark:text-primary-300 flex h-8 w-8 items-center justify-center rounded-full border-2 border-solid border-gray-200 text-sm font-bold dark:border-gray-800'>
               3
             </span>
 
@@ -85,7 +85,7 @@ const DirectMessageUpdates = () => {
 
         {links.get('privacyPolicy') ? (
           <a
-            className='text-center font-bold text-primary-600 hover:underline dark:text-accent-blue'
+            className='text-primary-600 dark:text-accent-blue text-center font-bold hover:underline'
             href={links.get('privacyPolicy')}
             target='_blank'
           >
diff --git a/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx b/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
index ed9c5c411..a2c1f1130 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
@@ -195,7 +195,7 @@ const ReportModal = ({ onClose }: IReportModal) => {
               <Avatar src={account.avatar} className='h-8 w-8' />
             </div>
 
-            <div className='grow rounded-md bg-gray-200 p-4 dark:bg-primary-800'>
+            <div className='dark:bg-primary-800 grow rounded-md bg-gray-200 p-4'>
               <Text dangerouslySetInnerHTML={{ __html: selectedChatMessage?.content as string }} />
             </div>
           </HStack>
diff --git a/app/soapbox/features/ui/components/modals/report-modal/steps/confirmation-step.tsx b/app/soapbox/features/ui/components/modals/report-modal/steps/confirmation-step.tsx
index eebb3d717..e44599686 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/steps/confirmation-step.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/steps/confirmation-step.tsx
@@ -25,7 +25,7 @@ const renderTermsOfServiceLink = (href: string) => (
   <a
     href={href}
     target='_blank'
-    className='text-primary-600 hover:text-primary-800 hover:underline dark:text-accent-blue dark:hover:text-accent-blue'
+    className='text-primary-600 hover:text-primary-800 dark:text-accent-blue dark:hover:text-accent-blue hover:underline'
   >
     {termsOfServiceText}
   </a>
diff --git a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
index 9cfc44aaa..2a33889f0 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
@@ -131,7 +131,7 @@ const ReasonStep = (_props: IReasonStep) => {
                       value={rule.id}
                       checked={isSelected}
                       readOnly
-                      className='h-4 w-4 rounded border-2 border-gray-300 text-primary-600 checked:bg-primary-500 focus:ring-primary-500 dark:border-gray-800 dark:bg-gray-900 dark:checked:bg-primary-500 dark:focus:ring-primary-500'
+                      className='text-primary-600 checked:bg-primary-500 focus:ring-primary-500 dark:checked:bg-primary-500 dark:focus:ring-primary-500 h-4 w-4 rounded border-2 border-gray-300 dark:border-gray-800 dark:bg-gray-900'
                     />
                   </button>
                 );
@@ -139,13 +139,13 @@ const ReasonStep = (_props: IReasonStep) => {
             </div>
 
             <div
-              className={classNames('inset-x-0 top-0 flex rounded-t-lg justify-center bg-gradient-to-b from-white pb-12 pt-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
+              className={classNames('pointer-events-none absolute inset-x-0 top-0 flex justify-center rounded-t-lg bg-gradient-to-b from-white pb-12 pt-8 transition-opacity duration-500 dark:from-gray-900', {
                 'opacity-0': isNearTop,
                 'opacity-100': !isNearTop,
               })}
             />
             <div
-              className={classNames('inset-x-0 bottom-0 flex rounded-b-lg justify-center bg-gradient-to-t from-white pt-12 pb-8 pointer-events-none dark:from-gray-900 absolute transition-opacity duration-500', {
+              className={classNames('pointer-events-none absolute inset-x-0 bottom-0 flex justify-center rounded-b-lg bg-gradient-to-t from-white pt-12 pb-8 transition-opacity duration-500 dark:from-gray-900', {
                 'opacity-0': isNearBottom,
                 'opacity-100': !isNearBottom,
               })}
diff --git a/app/soapbox/features/ui/components/modals/unauthorized-modal.tsx b/app/soapbox/features/ui/components/modals/unauthorized-modal.tsx
index 66d757935..84c5b2f4b 100644
--- a/app/soapbox/features/ui/components/modals/unauthorized-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/unauthorized-modal.tsx
@@ -3,7 +3,7 @@ import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
 
 import { remoteInteraction } from 'soapbox/actions/interactions';
-import { Button, Modal, Stack, Text } from 'soapbox/components/ui';
+import { Button, Form, Input, Modal, Stack, Text } from 'soapbox/components/ui';
 import { useAppSelector, useAppDispatch, useFeatures, useInstance, useRegistrationStatus } from 'soapbox/hooks';
 import toast from 'soapbox/toast';
 
@@ -104,9 +104,8 @@ const UnauthorizedModal: React.FC<IUnauthorizedModal> = ({ action, onClose, acco
         secondaryText={isOpen ? <FormattedMessage id='account.register' defaultMessage='Sign up' /> : undefined}
       >
         <div className='remote-interaction-modal__content'>
-          <form className='simple_form remote-interaction-modal__fields' onSubmit={onSubmit}>
-            <input
-              type='text'
+          <Form className='remote-interaction-modal__fields' onSubmit={onSubmit}>
+            <Input
               placeholder={intl.formatMessage(messages.accountPlaceholder)}
               name='remote_follow[acct]'
               value={account}
@@ -116,7 +115,7 @@ const UnauthorizedModal: React.FC<IUnauthorizedModal> = ({ action, onClose, acco
               required
             />
             <Button type='submit' theme='primary'>{button}</Button>
-          </form>
+          </Form>
           <div className='remote-interaction-modal__divider'>
             <Text align='center'>
               <FormattedMessage id='remote_interaction.divider' defaultMessage='or' />
diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx
index eb73496fa..baedafedd 100644
--- a/app/soapbox/features/ui/components/navbar.tsx
+++ b/app/soapbox/features/ui/components/navbar.tsx
@@ -63,7 +63,7 @@ const Navbar = () => {
   if (mfaToken) return <Redirect to={`/login?token=${encodeURIComponent(mfaToken)}`} />;
 
   return (
-    <nav className='sticky top-0 z-50 bg-white shadow dark:bg-primary-900' ref={node} data-testid='navbar'>
+    <nav className='dark:bg-primary-900 sticky top-0 z-50 bg-white shadow' ref={node} data-testid='navbar'>
       <div className='mx-auto max-w-7xl px-2 sm:px-6 lg:px-8'>
         <div className='relative flex h-12 justify-between lg:h-16'>
           {account && (
@@ -77,7 +77,7 @@ const Navbar = () => {
           <HStack
             space={4}
             alignItems='center'
-            className={classNames('flex-1 enter lg:items-stretch', {
+            className={classNames('enter flex-1 lg:items-stretch', {
               'justify-center lg:justify-start': account,
               'justify-start': !account,
             })}
diff --git a/app/soapbox/features/ui/components/profile-info-panel.tsx b/app/soapbox/features/ui/components/profile-info-panel.tsx
index 546b0df6d..491806962 100644
--- a/app/soapbox/features/ui/components/profile-info-panel.tsx
+++ b/app/soapbox/features/ui/components/profile-info-panel.tsx
@@ -218,7 +218,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
               <div className='max-w-[300px]'>
                 <Text size='sm' truncate>
                   {isSafeUrl(account.website) ? (
-                    <a className='text-primary-600 hover:underline dark:text-accent-blue' href={account.website} target='_blank'>{account.website}</a>
+                    <a className='text-primary-600 dark:text-accent-blue hover:underline' href={account.website} target='_blank'>{account.website}</a>
                   ) : (
                     account.website
                   )}
diff --git a/app/soapbox/features/ui/index.tsx b/app/soapbox/features/ui/index.tsx
index 5fb66a302..25f228731 100644
--- a/app/soapbox/features/ui/index.tsx
+++ b/app/soapbox/features/ui/index.tsx
@@ -71,7 +71,6 @@ import {
   Lists,
   Bookmarks,
   Settings,
-  MediaDisplay,
   EditProfile,
   EditEmail,
   EditPassword,
@@ -300,7 +299,6 @@ const SwitchingColumnsArea: React.FC<ISwitchingColumnsArea> = ({ children }) =>
       <WrappedRoute path='/settings/email' page={DefaultPage} component={EditEmail} content={children} />
       <WrappedRoute path='/settings/password' page={DefaultPage} component={EditPassword} content={children} />
       <WrappedRoute path='/settings/account' page={DefaultPage} component={DeleteAccount} content={children} />
-      <WrappedRoute path='/settings/media_display' page={DefaultPage} component={MediaDisplay} content={children} />
       <WrappedRoute path='/settings/mfa' page={DefaultPage} component={MfaForm} exact />
       <WrappedRoute path='/settings/tokens' page={DefaultPage} component={AuthTokenList} content={children} />
       <WrappedRoute path='/settings' page={DefaultPage} component={Settings} content={children} />
diff --git a/app/soapbox/features/ui/util/async-components.ts b/app/soapbox/features/ui/util/async-components.ts
index ad89df982..cc12f00b8 100644
--- a/app/soapbox/features/ui/util/async-components.ts
+++ b/app/soapbox/features/ui/util/async-components.ts
@@ -238,10 +238,6 @@ export function Settings() {
   return import(/* webpackChunkName: "features/settings" */'../../settings');
 }
 
-export function MediaDisplay() {
-  return import(/* webpackChunkName: "features/settings" */'../../settings/media-display');
-}
-
 export function EditProfile() {
   return import(/* webpackChunkName: "features/edit_profile" */'../../edit-profile');
 }
diff --git a/app/soapbox/features/verification/email-passthru.tsx b/app/soapbox/features/verification/email-passthru.tsx
index 86152f12d..e141907af 100644
--- a/app/soapbox/features/verification/email-passthru.tsx
+++ b/app/soapbox/features/verification/email-passthru.tsx
@@ -49,7 +49,7 @@ const Success = () => {
 
   return (
     <Stack space={4} alignItems='center'>
-      <Icon src={require('@tabler/icons/circle-check.svg')} className='h-10 w-10 text-primary-600 dark:text-primary-400' />
+      <Icon src={require('@tabler/icons/circle-check.svg')} className='text-primary-600 dark:text-primary-400 h-10 w-10' />
       <Text size='3xl' weight='semibold' align='center'>
         {intl.formatMessage(messages.emailConfirmedHeading)}
       </Text>
@@ -65,7 +65,7 @@ const GenericFail = () => {
 
   return (
     <Stack space={4} alignItems='center'>
-      <Icon src={require('@tabler/icons/circle-x.svg')} className='h-10 w-10 text-danger-600' />
+      <Icon src={require('@tabler/icons/circle-x.svg')} className='text-danger-600 h-10 w-10' />
       <Text size='3xl' weight='semibold' align='center'>
         {intl.formatMessage(messages.genericFailHeading)}
       </Text>
@@ -81,7 +81,7 @@ const TokenNotFound = () => {
 
   return (
     <Stack space={4} alignItems='center'>
-      <Icon src={require('@tabler/icons/circle-x.svg')} className='h-10 w-10 text-danger-600' />
+      <Icon src={require('@tabler/icons/circle-x.svg')} className='text-danger-600 h-10 w-10' />
       <Text size='3xl' weight='semibold' align='center'>
         {intl.formatMessage(messages.tokenNotFoundHeading)}
       </Text>
@@ -98,7 +98,7 @@ const TokenExpired = () => {
 
   return (
     <Stack space={4} alignItems='center'>
-      <Icon src={require('@tabler/icons/circle-x.svg')} className='h-10 w-10 text-danger-600' />
+      <Icon src={require('@tabler/icons/circle-x.svg')} className='text-danger-600 h-10 w-10' />
       <Text size='3xl' weight='semibold' align='center'>
         {intl.formatMessage(messages.tokenExpiredHeading)}
       </Text>
diff --git a/app/soapbox/features/verification/registration.tsx b/app/soapbox/features/verification/registration.tsx
index bee939ec4..2590a2021 100644
--- a/app/soapbox/features/verification/registration.tsx
+++ b/app/soapbox/features/verification/registration.tsx
@@ -132,7 +132,7 @@ const Registration = () => {
                   defaultMessage='By registering, you agree to the {terms} and {privacy}.'
                   values={{
                     terms: (
-                      <a href={links.get('termsOfService')} target='_blank' className='text-primary-600 hover:underline dark:text-primary-400'>
+                      <a href={links.get('termsOfService')} target='_blank' className='text-primary-600 dark:text-primary-400 hover:underline'>
                         <FormattedMessage
                           id='registration.tos'
                           defaultMessage='Terms of Service'
@@ -140,7 +140,7 @@ const Registration = () => {
                       </a>
                     ),
                     privacy: (
-                      <a href={links.get('privacyPolicy')} target='_blank' className='text-primary-600 hover:underline dark:text-primary-400'>
+                      <a href={links.get('privacyPolicy')} target='_blank' className='text-primary-600 dark:text-primary-400 hover:underline'>
                         <FormattedMessage
                           id='registration.privacy'
                           defaultMessage='Privacy Policy'
diff --git a/app/soapbox/features/verification/steps/email-verification.tsx b/app/soapbox/features/verification/steps/email-verification.tsx
index b2d90345d..a1a22599e 100644
--- a/app/soapbox/features/verification/steps/email-verification.tsx
+++ b/app/soapbox/features/verification/steps/email-verification.tsx
@@ -45,7 +45,7 @@ const EmailSent: React.FC<IEmailSent> = ({ handleSubmit }) => {
 
   return (
     <div className='mx-auto flex flex-col items-center justify-center sm:pt-10'>
-      <Icon src={require('@tabler/icons/send.svg')} className='mb-5 h-12 w-12 text-primary-600 dark:text-primary-400' />
+      <Icon src={require('@tabler/icons/send.svg')} className='text-primary-600 dark:text-primary-400 mb-5 h-12 w-12' />
 
       <div className='mb-4 space-y-2 text-center'>
         <Text weight='bold' size='3xl'>We sent you an email</Text>
diff --git a/app/styles/_mixins.scss b/app/styles/_mixins.scss
index 7098c4f34..370badad5 100644
--- a/app/styles/_mixins.scss
+++ b/app/styles/_mixins.scss
@@ -9,17 +9,9 @@
 @mixin standard-panel {
   @include standard-panel-shadow;
   border-radius: 10px;
-  background: var(--foreground-color);
 }
 
 // SHORTCUTS
-@mixin input-placeholder($color) {
-  &::-webkit-input-placeholder { color: $color; }
-  &::-moz-placeholder { color: $color; }
-  &:-ms-input-placeholder { color: $color; }
-  &:-moz-placeholder { color: $color; }
-}
-
 @mixin avatar-radius {
   border-radius: 50%;
   background: transparent no-repeat;
diff --git a/app/styles/application.scss b/app/styles/application.scss
index 4694fccb9..e9b87db19 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -1,5 +1,4 @@
 @import 'mixins';
-@import 'themes';
 @import 'variables';
 @import 'fonts';
 @import 'basics';
@@ -9,7 +8,6 @@
 @import 'rtl';
 @import 'accessibility';
 @import 'navigation';
-@import 'placeholder';
 @import 'autosuggest';
 
 // COMPONENTS
@@ -17,7 +15,6 @@
 @import 'components/dropdown-menu';
 @import 'components/modal';
 @import 'components/compose-form';
-@import 'components/emoji-reacts';
 @import 'components/status';
 @import 'components/reply-mentions';
 @import 'components/detailed-status';
diff --git a/app/styles/basics.scss b/app/styles/basics.scss
index 705265996..966dfa5b8 100644
--- a/app/styles/basics.scss
+++ b/app/styles/basics.scss
@@ -9,16 +9,11 @@ body.with-modals {
 }
 
 body {
-  &.lighter {
-    background: var(--brand-color--med);
-  }
-
   &.player {
     text-align: center;
   }
 
   &.embed {
-    background: var(--brand-color--faint);
     margin: 0;
     padding-bottom: 0;
 
@@ -31,7 +26,6 @@ body {
   }
 
   &.admin {
-    background: var(--brand-color--med);
     position: fixed;
     width: 100%;
     height: 100%;
@@ -42,7 +36,6 @@ body {
     @apply text-gray-400;
     position: absolute;
     text-align: center;
-    background: var(--brand-color--med);
     width: 100%;
     height: 100%;
     padding: 0;
@@ -65,7 +58,7 @@ body {
 
 // Note: this is needed for React HotKeys performance. Removing this
 // will cause severe performance degradation on Safari.
-div[tabindex="-1"]:focus {
+div[tabindex='-1']:focus {
   outline: 0;
 }
 
@@ -89,7 +82,6 @@ noscript {
     max-width: 400px;
 
     a {
-      color: var(--highlight-text-color);
       text-decoration: underline;
 
       &:hover {
@@ -105,6 +97,6 @@ noscript {
 
 // Virtuoso empty placeholder fix.
 // https://gitlab.com/petyosi/soapbox-fe/-/commit/1e22c39934b60e5e186de804060ecfdf1955b506
-div[data-viewport-type="window"] {
+div[data-viewport-type='window'] {
   position: static !important;
 }
diff --git a/app/styles/components/audio-player.scss b/app/styles/components/audio-player.scss
index 4adc73c4c..263603ae1 100644
--- a/app/styles/components/audio-player.scss
+++ b/app/styles/components/audio-player.scss
@@ -1,69 +1,51 @@
 .audio-player {
-  overflow: hidden;
-  box-sizing: border-box;
-  position: relative;
-  background: $base-shadow-color;
-  border-radius: 10px;
-  padding-bottom: 44px;
+  @apply relative box-border overflow-hidden rounded-[10px] bg-black pb-11;
   direction: ltr;
 
   &.editable {
-    border-radius: 0;
-    height: 100%;
+    @apply rounded-none h-full;
   }
 
   .video-player__volume::before,
   .video-player__seek::before {
-    background: currentcolor;
-    opacity: 0.15;
+    @apply bg-current opacity-[15];
   }
 
   .video-player__seek__buffer {
-    background: currentcolor;
-    opacity: 0.2;
+    @apply bg-current opacity-20;
   }
 
   .video-player__buttons button {
-    color: currentcolor;
-    opacity: 0.75;
+    @apply text-current opacity-[75];
 
     &:active,
     &:hover,
     &:focus {
-      color: currentcolor;
-      opacity: 1;
+      @apply text-current opacity-100;
     }
   }
 
   .video-player__time-sep,
   .video-player__time-total,
   .video-player__time-current {
-    color: currentcolor;
+    @apply text-current;
   }
 
   .video-player__seek::before,
   .video-player__seek__buffer,
   .video-player__seek__progress {
-    top: 0;
+    @apply top-0;
   }
 
   .video-player__seek__handle {
-    top: -4px;
+    @apply -top-1;
   }
 
   .video-player__controls {
-    padding-top: 10px;
-    background: transparent;
+    @apply pt-2.5 bg-transparent;
   }
 }
 
 .media-spoiler-audio {
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-  cursor: pointer;
-  margin-top: 8px;
-  position: relative;
-  border: 0;
-  display: block;
+  @apply relative mt-2 block cursor-pointer border-0 bg-cover bg-center bg-no-repeat;
 }
diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss
index 72c7262cd..4ed61c298 100644
--- a/app/styles/components/columns.scss
+++ b/app/styles/components/columns.scss
@@ -24,56 +24,6 @@
   }
 }
 
-.column-link {
-  @apply text-gray-900;
-  background: var(--brand-color--med);
-  display: flex;
-  align-items: center;
-  font-size: 16px;
-  padding: 15px;
-  text-decoration: none;
-
-  &:hover,
-  &:focus,
-  &:active {
-    background: var(--brand-color--faint);
-  }
-
-  &:focus {
-    outline: 0;
-  }
-
-  &--transparent {
-    @apply bg-transparent;
-    color: var(--background-color);
-
-    &:hover,
-    &:focus,
-    &:active {
-      @apply text-gray-900 bg-transparent;
-    }
-
-    &.active {
-      color: var(--brand-color);
-    }
-  }
-}
-
-.svg-icon.column-link__icon {
-  display: inline-block;
-  margin-right: 5px;
-}
-
-.column-header__setting-btn {
-  &--link {
-    text-decoration: none;
-  }
-
-  &:hover {
-    @apply text-gray-400 underline;
-  }
-}
-
 .empty-column-indicator,
 .error-column {
   @apply bg-primary-50 dark:bg-gray-700 text-gray-900 dark:text-gray-300 text-center p-10 flex flex-1 items-center justify-center min-h-[160px] rounded-lg;
diff --git a/app/styles/components/compose-form.scss b/app/styles/components/compose-form.scss
index 30db30695..a07917e91 100644
--- a/app/styles/components/compose-form.scss
+++ b/app/styles/components/compose-form.scss
@@ -13,7 +13,6 @@
     }
 
     a {
-      color: var(--brand-color--hicontrast);
       font-weight: 500;
       text-decoration: underline;
 
@@ -28,7 +27,6 @@
   &__modifiers {
     @apply text-gray-900 text-sm;
     font-family: inherit;
-    background: var(--background-color);
   }
 }
 
@@ -41,7 +39,6 @@
 
   &.contains-media {
     padding: 5px;
-    border-top: 1px solid var(--foreground-color);
   }
 }
 
@@ -120,7 +117,7 @@
 }
 
 .privacy-dropdown__dropdown {
-  @apply absolute bg-white dark:bg-gray-900 z-[1000] rounded-md shadow-lg ml-10 text-sm;
+  @apply absolute bg-white dark:bg-gray-900 z-[1000] rounded-md shadow-lg ml-10 text-sm overflow-hidden;
 
   &.top {
     transform-origin: 50% 100%;
@@ -152,7 +149,7 @@
 }
 
 .privacy-dropdown__option__icon {
-  @apply flex items-center justify-center mr-2.5;
+  @apply flex items-center justify-center mr-2.5 rtl:mr-0 rtl:ml-2.5;
 }
 
 .privacy-dropdown__option__content {
@@ -170,24 +167,6 @@
 }
 
 .privacy-dropdown.active {
-  .privacy-dropdown__value {
-    background: var(--foreground-color);
-    border-radius: 4px 4px 0 0;
-    box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1);
-
-    .icon-button {
-      transition: none;
-    }
-
-    &.active {
-      background: var(--brand-color);
-
-      .icon-button {
-        @apply text-gray-900;
-      }
-    }
-  }
-
   &.top .privacy-dropdown__value {
     @apply rounded-t-md;
   }
diff --git a/app/styles/components/emoji-reacts.scss b/app/styles/components/emoji-reacts.scss
deleted file mode 100644
index 12157969f..000000000
--- a/app/styles/components/emoji-reacts.scss
+++ /dev/null
@@ -1,98 +0,0 @@
-.emoji-react {
-  @apply inline-block text-gray-900 dark:text-gray-300 no-underline;
-  transition: 0.2s;
-
-  &__emoji {
-    img {
-      @apply w-5 h-5;
-      filter: drop-shadow(2px 0 0 var(--foreground-color));
-    }
-  }
-
-  &__count {
-    @apply hidden;
-  }
-
-  + .emoji-react {
-    @apply -mr-3;
-  }
-
-  &[type='button'] {
-    cursor: pointer;
-  }
-}
-
-.emoji-reacts {
-  display: inline-flex;
-  flex-direction: row-reverse;
-}
-
-.emoji-reacts-container {
-  display: inline-flex;
-
-  &:hover {
-    .emoji-react {
-      margin: 0;
-
-      &__count {
-        display: inline;
-      }
-    }
-
-    .emoji-reacts__count {
-      display: none;
-    }
-  }
-}
-
-.emoji-react-selector {
-  position: absolute;
-  display: flex;
-  background-color: var(--foreground-color);
-  padding: 5px 8px;
-  border-radius: 9999px;
-  box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.1);
-  opacity: 0;
-  pointer-events: none;
-  transition: 0.1s;
-  z-index: 999;
-
-  &--visible,
-  &--focused {
-    opacity: 1;
-    pointer-events: all;
-  }
-
-  &__emoji {
-    display: block;
-    padding: 0;
-    margin: 0;
-    border: 0;
-    background: transparent;
-
-    img {
-      width: 36px;
-      height: 36px;
-      padding: 3px;
-      transition: 0.1s;
-    }
-
-    &:hover,
-    &:focus {
-      img {
-        transform: scale(1.2);
-      }
-    }
-  }
-}
-
-.status .emoji-react-selector {
-  bottom: 100%;
-  left: -20px;
-
-  @media (max-width: 455px) {
-    bottom: 31px;
-    right: 10px;
-    left: auto;
-  }
-}
diff --git a/app/styles/components/icon.scss b/app/styles/components/icon.scss
index ee0115fd3..01ab7f4f3 100644
--- a/app/styles/components/icon.scss
+++ b/app/styles/components/icon.scss
@@ -12,46 +12,6 @@
     height: 100%;
     transition: 0.2s;
   }
-
-  &--active {
-    &.svg-icon--home svg {
-      fill: currentcolor;
-    }
-
-    svg.icon-tabler-search,
-    svg.icon-tabler-code {
-      stroke-width: 2.3px;
-    }
-
-    svg.icon-tabler-bell,
-    svg.icon-tabler-messages {
-      path:nth-child(2) {
-        fill: currentcolor;
-      }
-    }
-
-    svg.icon-tabler-users {
-      circle,
-      circle + path {
-        fill: currentcolor;
-      }
-    }
-
-    svg.icon-tabler-mail {
-      stroke: var(--background-color);
-
-      rect {
-        fill: currentcolor;
-        stroke: currentcolor;
-      }
-    }
-  }
-
-  &--unread {
-    svg.icon-tabler-bell {
-      transform: rotate(45deg);
-    }
-  }
 }
 
 .icon-button > div {
diff --git a/app/styles/components/media-gallery.scss b/app/styles/components/media-gallery.scss
index 482980ab4..4e95b0ca1 100644
--- a/app/styles/components/media-gallery.scss
+++ b/app/styles/components/media-gallery.scss
@@ -6,7 +6,6 @@
   position: relative;
   width: 100%;
   height: auto;
-  background-color: var(--brand-color--faint);
 }
 
 .media-gallery__item {
@@ -105,19 +104,8 @@
 .media-gallery__gifv__label,
 .media-gallery__filename__label,
 .media-gallery__file-extension__label {
-  display: block;
-  position: absolute;
-  color: #fff;
-  background: rgba($base-overlay-background, 0.5);
-  bottom: 6px;
-  left: 6px;
-  padding: 2px 6px;
-  border-radius: 2px;
+  @apply pointer-events-none absolute bottom-1.5 left-1.5 z-[1] block bg-black/50 py-0.5 px-1.5 font-semibold text-white opacity-90;
   font-size: 11px;
-  font-weight: 600;
-  z-index: 1;
-  pointer-events: none;
-  opacity: 0.9;
   transition: opacity 0.1s ease;
   line-height: 18px;
 }
diff --git a/app/styles/components/modal.scss b/app/styles/components/modal.scss
index cf1923343..cdd0fb771 100644
--- a/app/styles/components/modal.scss
+++ b/app/styles/components/modal.scss
@@ -27,197 +27,179 @@
     height: 100%;
 
     video {
-      max-width: $media-modal-media-max-width;
-      max-height: $media-modal-media-max-height;
+      @apply max-w-full max-h-[80%];
     }
   }
-}
 
-.media-modal__closer {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-}
-
-.media-modal__navigation {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  pointer-events: none;
-  transition: opacity 0.3s linear;
-  will-change: opacity;
-
-  * {
-    pointer-events: auto;
+  &__closer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
   }
 
-  &.media-modal__navigation--hidden {
-    opacity: 0;
+  &__navigation {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    pointer-events: none;
+    transition: opacity 0.3s linear;
+    will-change: opacity;
 
     * {
-      pointer-events: none;
+      pointer-events: auto;
+    }
+
+    &--hidden {
+      opacity: 0;
+
+      * {
+        pointer-events: none;
+      }
     }
   }
-}
 
-.media-modal__nav {
-  background: rgba($base-overlay-background, 0.5);
-  box-sizing: border-box;
-  border: 0;
-  color: #fff;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-  font-size: 24px;
-  height: 20vmax;
-  margin: auto 0;
-  padding: 30px 15px;
-  position: absolute;
-  top: 0;
-  bottom: 0;
+  &__nav {
+    @apply absolute top-0 bottom-0 my-auto mx-0 box-border flex h-[20vmax] cursor-pointer items-center border-0 bg-black/50 text-2xl text-white;
+    padding: 30px 15px;
 
-  @media screen and (max-width: 600px) { padding: 30px 2px; }
+    @media screen and (max-width: 600px) {
+      @apply px-0.5;
+    }
 
-  .svg-icon {
-    width: 24px;
-    height: 24px;
-  }
-}
+    .svg-icon {
+      @apply h-6 w-6;
+    }
 
-.media-modal__nav--left {
-  left: 0;
-}
+    &--left {
+      left: 0;
+    }
 
-.media-modal__nav--right {
-  right: 0;
-}
-
-.media-modal__pagination {
-  width: 100%;
-  text-align: center;
-  position: absolute;
-  left: 0;
-  bottom: 20px;
-  pointer-events: none;
-}
-
-.media-modal__meta {
-  text-align: center;
-  position: absolute;
-  left: 0;
-  bottom: 20px;
-  width: 100%;
-  pointer-events: none;
-
-  &--shifted {
-    bottom: 62px;
-  }
-
-  a {
-    text-decoration: none;
-    font-weight: 500;
-    color: #fff;
-
-    &:hover,
-    &:focus,
-    &:active {
-      text-decoration: underline;
+    &--right {
+      right: 0;
     }
   }
-}
 
-.media-modal__page-dot {
-  display: inline-block;
-}
+  &__pagination {
+    width: 100%;
+    text-align: center;
+    position: absolute;
+    left: 0;
+    bottom: 20px;
+    pointer-events: none;
+  }
 
-.media-modal__button {
-  background-color: #fff;
-  height: 12px;
-  width: 12px;
-  border-radius: 6px;
-  margin: 10px;
-  padding: 0;
-  border: 0;
-  font-size: 0;
-}
+  &__meta {
+    text-align: center;
+    position: absolute;
+    left: 0;
+    bottom: 20px;
+    width: 100%;
+    pointer-events: none;
 
-.media-modal__button--active {
-  @apply bg-accent-500;
-}
+    &--shifted {
+      bottom: 62px;
+    }
 
-.media-modal__close {
-  position: absolute;
-  right: 8px;
-  top: 8px;
-  height: 48px;
-  width: 48px;
-  z-index: 100;
-  color: #fff;
+    a {
+      text-decoration: none;
+      font-weight: 500;
+      color: #fff;
 
-  .svg-icon {
+      &:hover,
+      &:focus,
+      &:active {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &__page-dot {
+    display: inline-block;
+  }
+
+  &__button {
+    background-color: #fff;
+    height: 12px;
+    width: 12px;
+    border-radius: 6px;
+    margin: 10px;
+    padding: 0;
+    border: 0;
+    font-size: 0;
+
+    &--active {
+      @apply bg-accent-500;
+    }
+  }
+
+  &__close {
+    position: absolute;
+    right: 8px;
+    top: 8px;
     height: 48px;
     width: 48px;
+    z-index: 100;
+    color: #fff;
+
+    .svg-icon {
+      height: 48px;
+      width: 48px;
+    }
   }
 }
 
 .error-modal {
   @apply text-gray-900;
-  background: var(--background-color);
   border-radius: 8px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
-}
 
-.error-modal__body {
-  height: 80vh;
-  width: 80vw;
-  max-width: 520px;
-  max-height: 420px;
-  position: relative;
-
-  & > div {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    box-sizing: border-box;
-    padding: 25px;
+  &__body {
     display: flex;
     flex-direction: column;
-    align-items: center;
     justify-content: center;
-    opacity: 0;
-    user-select: text;
-  }
-}
+    align-items: center;
+    height: 80vh;
+    width: 80vw;
+    max-width: 520px;
+    max-height: 420px;
+    position: relative;
+    text-align: center;
 
-.error-modal__body {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-}
-
-.error-modal__footer {
-  flex: 0 0 auto;
-  background: var(--background-color);
-  display: flex;
-  justify-content: center;
-  padding: 25px;
-
-  & > div {
-    min-width: 33px;
+    & > div {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      box-sizing: border-box;
+      padding: 25px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      opacity: 0;
+      user-select: text;
+    }
   }
 
-  .error-modal__nav {
-    color: var(--highlight-text-color);
+  &__footer {
+    flex: 0 0 auto;
+    display: flex;
+    justify-content: center;
+    padding: 25px;
+
+    & > div {
+      min-width: 33px;
+    }
+  }
+
+  &__nav {
     border: 0;
     font-size: 14px;
     font-weight: 500;
@@ -232,31 +214,26 @@
     &:focus,
     &:active {
       @apply text-gray-400;
-      background-color: var(--background-color);
     }
   }
 }
 
 .actions-modal {
-  @apply flex-col relative text-gray-400 overflow-hidden;
-  border-radius: 10px;
-  border: 1px solid var(--background-color);
+  @apply flex-col relative text-gray-400 overflow-hidden w-full max-w-lg m-auto bg-white dark:bg-gray-900 shadow-xl rounded-2xl;
+  max-height: calc(100vh - 3rem);
+
+  &__item-label {
+    font-weight: 500;
+  }
 
   .dropdown-menu__separator {
     @apply block m-2 h-[1px] bg-gray-200 dark:bg-gray-600;
   }
-}
 
-.actions-modal {
-  @apply w-full max-h-full max-w-lg m-auto mb-2 bg-white dark:bg-gray-800;
-
-  .status {
-    overflow-y: auto;
-    max-height: 300px;
+  &__status {
+    @apply overflow-y-auto max-h-[300px];
   }
 
-  .actions-modal__item-label { font-weight: 500; }
-
   ul {
     @apply my-2 flex-shrink-0 overflow-y-auto;
     max-height: calc(100vh - 147px);
@@ -267,10 +244,10 @@
     li:not(:empty) {
       a,
       button {
-        @apply flex items-center px-4 py-3 text-gray-600 dark:text-gray-300 no-underline hover:bg-gray-100 dark:bg-gray-800 hover:text-gray-800 dark:hover:text-gray-200 text-left;
+        @apply flex items-center px-4 py-3 text-gray-700 dark:text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800 focus:bg-gray-100 dark:focus:bg-primary-800 no-underline text-left;
 
         &.destructive {
-          @apply text-danger-600;
+          @apply text-danger-600 dark:text-danger-400;
         }
 
         .svg-icon:first-child {
diff --git a/app/styles/components/react-toggle.scss b/app/styles/components/react-toggle.scss
index 3b0ec9eba..a56db522a 100644
--- a/app/styles/components/react-toggle.scss
+++ b/app/styles/components/react-toggle.scss
@@ -6,7 +6,7 @@
   border: 0;
   padding: 0;
   user-select: none;
-  -webkit-tap-highlight-color: rgba($base-overlay-background, 0);
+  -webkit-tap-highlight-color: #0000;
   -webkit-tap-highlight-color: transparent;
 
   &:focus-within .react-toggle-track {
diff --git a/app/styles/components/search.scss b/app/styles/components/search.scss
index cab174bdb..70d39c8d2 100644
--- a/app/styles/components/search.scss
+++ b/app/styles/components/search.scss
@@ -38,24 +38,7 @@
 
   .svg-icon--backspace {
     cursor: pointer;
-    color: var(--highlight-text-color);
     width: 22px;
     height: 22px;
-
-    &:hover {
-      color: var(--brand-color);
-    }
-  }
-}
-
-.column {
-  .search {
-    @apply border border-solid border-b-gray-900/20;
-    padding: 10px 15px;
-    background-color: var(--foreground-color);
-  }
-
-  .search__icon .svg-icon {
-    right: 24px;
   }
 }
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index b273c0e83..0cea26e38 100644
--- a/app/styles/components/status.scss
+++ b/app/styles/components/status.scss
@@ -78,7 +78,6 @@ a.status-card {
 
 .status-card__image {
   flex: 0 0 40%;
-  background: var(--brand-color--med);
   position: relative;
   overflow: hidden;
 
diff --git a/app/styles/components/video-player.scss b/app/styles/components/video-player.scss
index 4802afa7f..e37f10427 100644
--- a/app/styles/components/video-player.scss
+++ b/app/styles/components/video-player.scss
@@ -11,17 +11,11 @@
 }
 
 .video-player {
-  overflow: hidden;
-  position: relative;
-  background: $base-shadow-color;
-  max-width: 100%;
-  border-radius: 10px;
-  box-sizing: border-box;
+  @apply relative box-border max-w-full overflow-hidden rounded-[10px] bg-black text-white;
   direction: ltr;
-  color: white;
 
   &.editable {
-    border-radius: 0;
+    @apply rounded-none;
     height: 100% !important;
   }
 
@@ -63,7 +57,7 @@
     left: 0;
     right: 0;
     box-sizing: border-box;
-    background: linear-gradient(0deg, rgba($base-shadow-color, 0.85) 0, rgba($base-shadow-color, 0.45) 60%, transparent);
+    background: linear-gradient(0deg, #000000d9 0, #00000073 60%, transparent);
     padding: 0 15px;
     opacity: 0;
     transition: opacity 0.1s ease;
@@ -199,7 +193,7 @@
       left: 0;
       margin-left: -6px;
       transform: translate(0, -50%);
-      box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
+      box-shadow: 1px 2px 6px #0003;
       opacity: 0;
 
       .no-reduce-motion & {
@@ -272,7 +266,7 @@
       height: 12px;
       top: 10px;
       margin-left: -6px;
-      box-shadow: 1px 2px 6px rgba($base-shadow-color, 0.2);
+      box-shadow: 1px 2px 6px #0003;
 
       .no-reduce-motion & {
         transition: opacity 0.1s ease;
diff --git a/app/styles/forms.scss b/app/styles/forms.scss
index a0db30c20..a581b2fb7 100644
--- a/app/styles/forms.scss
+++ b/app/styles/forms.scss
@@ -22,434 +22,6 @@ select {
   margin-left: -1px;
 }
 
-.simple_form {
-  .input {
-    &.hidden {
-      margin: 0;
-    }
-
-    &.radio_buttons {
-      .radio {
-        margin-bottom: 15px;
-
-        &:last-child {
-          margin-bottom: 0;
-        }
-      }
-
-      .radio > label {
-        position: relative;
-        padding-left: 28px;
-
-        input {
-          position: absolute;
-          top: -2px;
-          left: 0;
-        }
-      }
-    }
-
-    &.boolean {
-      position: relative;
-
-      .label_input > label {
-        @apply text-sm font-medium text-gray-700 dark:text-gray-400;
-        font-family: inherit;
-        font-size: 14px;
-        display: block;
-        width: auto;
-      }
-
-      .label_input,
-      .hint {
-        padding-left: 28px;
-      }
-
-      .label_input__wrapper {
-        position: static;
-      }
-
-      input[type="checkbox"] {
-        position: absolute;
-        top: 1px;
-        left: 0;
-      }
-
-      label a {
-        color: var(--highlight-text-color);
-        text-decoration: underline;
-
-        &:hover,
-        &:active,
-        &:focus {
-          text-decoration: none;
-        }
-      }
-    }
-  }
-
-  .row {
-    display: flex;
-    margin: 0 -5px;
-
-    .input {
-      box-sizing: border-box;
-      flex: 1 1 auto;
-      width: 50%;
-      padding: 0 5px;
-    }
-  }
-
-  .hint {
-    @apply text-gray-400;
-
-    a {
-      color: var(--highlight-text-color);
-    }
-
-    code {
-      border-radius: 3px;
-      padding: 0.2em 0.4em;
-      background: var(--background-color);
-    }
-  }
-
-  span.hint {
-    display: block;
-    font-size: 12px;
-  }
-
-  p.hint {
-    @apply text-gray-400;
-    margin-bottom: 15px;
-
-    &.subtle-hint {
-      text-align: center;
-      font-size: 12px;
-      line-height: 18px;
-      margin-top: 15px;
-      margin-bottom: 0;
-    }
-  }
-
-  .card {
-    margin-bottom: 15px;
-  }
-
-  strong {
-    font-weight: 500;
-
-    @each $lang in $cjk-langs {
-      &:lang(#{$lang}) {
-        font-weight: 700;
-      }
-    }
-  }
-
-  .input.with_floating_label {
-    .label_input {
-      display: flex;
-
-      & > label {
-        @apply text-gray-900;
-        font-family: inherit;
-        font-size: 14px;
-        font-weight: 500;
-        min-width: 150px;
-        flex: 0 0 auto;
-      }
-
-      input,
-      select {
-        flex: 1 1 auto;
-      }
-    }
-
-    &.select .hint {
-      margin-top: 6px;
-      margin-left: 150px;
-    }
-  }
-
-  .input {
-    .label_input > label {
-      @apply text-gray-700 dark:text-gray-400;
-      font-family: inherit;
-      font-size: 14px;
-      display: block;
-      word-wrap: break-word;
-      font-weight: 500;
-    }
-
-    ul {
-      flex: 390px;
-    }
-  }
-
-  .required abbr {
-    text-decoration: none;
-    color: lighten($error-value-color, 12%);
-  }
-
-  .fields-group {
-    margin-bottom: 25px;
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-
-    .input:last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  .input.radio_buttons .radio label {
-    @apply text-gray-900;
-    margin-bottom: 5px;
-    font-family: inherit;
-    font-size: 14px;
-    display: block;
-    width: auto;
-  }
-
-  fieldset[disabled] {
-    input[type=text],
-    input[type=number],
-    input[type=email],
-    input[type=url],
-    input[type=password],
-    textarea {
-      @apply text-gray-400 border-gray-400;
-    }
-  }
-
-  input[type=text],
-  input[type=number],
-  input[type=email],
-  input[type=url],
-  input[type=password],
-  textarea,
-  .rfipbtn {
-    @apply border border-solid border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-black dark:text-white;
-    box-sizing: border-box;
-    font-size: 16px;
-    display: block;
-    width: 100%;
-    outline: 0;
-    font-family: inherit;
-    resize: vertical;
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
-    border-radius: 6px;
-    padding: 8px 12px;
-    transition: 0.2s;
-
-    &:invalid {
-      box-shadow: none;
-    }
-
-    &:focus:invalid:not(:placeholder-shown) {
-      border-color: lighten($error-red, 12%);
-    }
-
-    // &:required:valid {
-    //   border-color: $valid-value-color;
-    // }
-
-    &:active,
-    &:focus {
-      border-color: var(--brand-color);
-      outline: 2px solid transparent;
-      outline-offset: 2px;
-      box-shadow: rgb(255, 255, 255) 0 0 0 0,
-        var(--brand-color) 0 0 0 1px,
-        rgba(0, 0, 0, 0.05) 0 1px 2px 0;
-    }
-  }
-
-  .rfip {
-    width: 100%;
-    margin: 0;
-  }
-
-  input[type=text][disabled],
-  input[type=number][disabled],
-  input[type=email][disabled],
-  input[type=url][disabled],
-  input[type=password][disabled],
-  textarea[disabled] {
-    @apply text-gray-400 border-gray-400;
-  }
-
-  .input.field_with_errors {
-    label {
-      color: lighten($error-red, 12%);
-    }
-
-    input[type=text],
-    input[type=number],
-    input[type=email],
-    input[type=url],
-    input[type=password],
-    textarea,
-    select {
-      border-color: lighten($error-red, 12%);
-    }
-  }
-
-  .error {
-    display: block;
-    font-weight: 500;
-    color: lighten($error-red, 12%);
-    margin-top: 4px;
-  }
-
-  .input.disabled {
-    opacity: 0.5;
-  }
-
-  .actions {
-    margin-top: 20px;
-    display: flex;
-    justify-content: flex-end;
-  }
-
-  // button,
-  // .button,
-  // .block-button,
-  // .color-swatch {
-  //   display: block;
-  //   width: 100%;
-  //   border: 0;
-  //   border-radius: 4px;
-  //   background: var(--brand-color);
-  //   color: #fff;
-  //   line-height: inherit;
-  //   height: auto;
-  //   padding: 10px;
-  //   text-decoration: none;
-  //   text-align: center;
-  //   box-sizing: border-box;
-  //   cursor: pointer;
-  //   font-weight: 500;
-  //   outline: 0;
-
-  //   &:last-child {
-  //     margin-right: 0;
-  //   }
-
-  //   &:hover,
-  //   &:active,
-  //   &:focus {
-  //     background-color: var(--brand-color--hicontrast);
-  //   }
-
-  //   &.negative {
-  //     background: $error-value-color;
-
-  //     &:hover {
-  //       background-color: lighten($error-value-color, 5%);
-  //     }
-
-  //     &:active,
-  //     &:focus {
-  //       background-color: darken($error-value-color, 5%);
-  //     }
-  //   }
-
-  //   &.accordion__toggle {
-  //     display: inline-block;
-  //     width: auto;
-  //     border: 0;
-  //     border-radius: 0;
-  //     background: none;
-  //     color: var(--primary-text-color--faint);
-  //     font-size: 18px;
-  //     line-height: inherit;
-  //     height: auto;
-  //     padding: 0 10px;
-  //     text-transform: none;
-  //     text-decoration: none;
-  //     text-align: center;
-  //     box-sizing: border-box;
-  //     cursor: pointer;
-  //     font-weight: 500;
-  //     outline: 0;
-  //     margin-bottom: 0;
-  //     margin-right: 10px;
-  //   }
-  // }
-
-  // select {
-  //   appearance: none;
-  //   background-color: transparent;
-  //   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
-  //   background-position: right 0.5rem center;
-  //   background-repeat: no-repeat;
-  //   background-size: 1.5em 1.5em;
-  //   border-radius: 0.375rem;
-  //   border: none;
-  //   color: var(--gray-500);
-  //   display: inline-block;
-  //   font-family: var(--font-sans-serif), sans-serif;
-  //   font-size: 14px;
-  //   height: var(--input-height);
-  //   padding-bottom: 0.5rem;
-  //   padding-left: 0.75rem;
-  //   padding-right: 2.5rem;
-  //   padding-top: 0.5rem;
-  // }
-
-  .label_input__wrapper {
-    position: relative;
-  }
-
-  h2 {
-    font-size: 20px;
-    line-height: normal;
-    margin-bottom: 14px;
-    font-weight: bold;
-  }
-}
-
-.simple_form {
-  .warning {
-    @apply text-gray-900;
-    box-sizing: border-box;
-    background: rgba($error-value-color, 0.5);
-    text-shadow: 1px 1px 0 rgba($base-shadow-color, 0.3);
-    box-shadow: 0 2px 6px rgba($base-shadow-color, 0.4);
-    border-radius: 4px;
-    padding: 10px;
-    margin-bottom: 15px;
-
-    a {
-      @apply text-gray-900 underline;
-
-      &:hover,
-      &:focus,
-      &:active {
-        @apply no-underline;
-      }
-    }
-
-    strong {
-      font-weight: 600;
-      display: block;
-      margin-bottom: 5px;
-
-      @each $lang in $cjk-langs {
-        &:lang(#{$lang}) {
-          font-weight: 700;
-        }
-      }
-
-      .fa {
-        font-weight: 400;
-      }
-    }
-  }
-}
-
 .captcha {
   background-color: #fff;
   border-radius: 4px;
@@ -459,7 +31,7 @@ select {
     margin: 0 auto;
   }
 
-  input[type="text"] {
+  input[type='text'] {
     border-radius: 0 0 4px 4px;
   }
 }
diff --git a/app/styles/loading.scss b/app/styles/loading.scss
index 5c37eccbf..18458ba9e 100644
--- a/app/styles/loading.scss
+++ b/app/styles/loading.scss
@@ -59,7 +59,7 @@
 }
 
 @keyframes heartbeat {
-  from {
+  0% {
     transform: scale(1);
     animation-timing-function: ease-out;
   }
@@ -130,26 +130,16 @@
 .load-more {
   @apply block w-full m-0 p-4 border-0 box-border text-gray-900 bg-transparent;
 
-  &:hover,
-  &:focus {
-    background: var(--brand-color--faint);
-  }
-
   .svg-icon {
     @apply mx-auto;
   }
 }
 
-.load-gap {
-  border-bottom: 1px solid var(--brand-color--med);
-}
-
 .regeneration-indicator {
   @apply text-gray-900;
   text-align: center;
   font-size: 16px;
   font-weight: 500;
-  background: var(--accent-color--faint);
   cursor: default;
   display: flex;
   flex: 1 1 auto;
diff --git a/app/styles/placeholder.scss b/app/styles/placeholder.scss
deleted file mode 100644
index 816234750..000000000
--- a/app/styles/placeholder.scss
+++ /dev/null
@@ -1,40 +0,0 @@
-.media-gallery--placeholder {
-  position: relative;
-
-  &::before {
-    content: '';
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    height: 100%;
-    background-image: linear-gradient(
-      90deg,
-      hsla(var(--foreground-color_hsl), 0) 0%,
-      hsla(var(--foreground-color_hsl), 0) 25%,
-      var(--foreground-color) 50%,
-      hsla(var(--foreground-color_hsl), 0) 70%,
-      hsla(var(--foreground-color_hsl), 0) 100%
-    );
-    background-size: 200%;
-    animation: placeholder-pulse 2s infinite;
-    z-index: 1;
-    opacity: 0.9;
-  }
-}
-
-@keyframes placeholder-pulse {
-  0% { background-position-x: 200%; }
-  100% { background-position-x: 0; }
-}
-
-.media-gallery.media-gallery--placeholder {
-  background: none;
-
-  .media-gallery__item {
-    background-color: var(--brand-color--faint);
-  }
-}
diff --git a/app/styles/rtl.scss b/app/styles/rtl.scss
index 426cdcb7a..bab735c81 100644
--- a/app/styles/rtl.scss
+++ b/app/styles/rtl.scss
@@ -1,56 +1,11 @@
 body.rtl {
   direction: rtl;
 
-  .column-link__icon {
-    margin-right: 0;
-    margin-left: 5px;
-  }
-
   .status {
     padding-left: 10px;
     padding-right: 68px;
   }
 
-  .privacy-dropdown__dropdown {
-    margin-left: 0;
-    margin-right: 40px;
-  }
-
-  .privacy-dropdown__option__icon {
-    margin-left: 10px;
-    margin-right: 0;
-  }
-
-  .simple_form .input.with_label.boolean label.checkbox {
-    padding-left: 25px;
-    padding-right: 0;
-  }
-
-  .simple_form .input.radio_buttons .radio {
-    left: auto;
-    right: 0;
-  }
-
-  .simple_form .input.radio_buttons .radio > label {
-    padding-right: 28px;
-    padding-left: 0;
-  }
-
-  .simple_form .input.boolean label.checkbox {
-    left: auto;
-    right: 0;
-  }
-
-  .simple_form .input.boolean .label_input,
-  .simple_form .input.boolean .hint {
-    padding-left: 0;
-    padding-right: 28px;
-  }
-
-  // .simple_form select {
-  //   background: var(--background-color) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14.933 18.467' height='19.698' width='15.929'><path d='M3.467 14.967l-3.393-3.5H14.86l-3.392 3.5c-1.866 1.925-3.666 3.5-4 3.5-.335 0-2.135-1.575-4-3.5zm.266-11.234L7.467 0 11.2 3.733l3.733 3.734H0l3.733-3.734z' fill='#{hex-color(var(--brand-color--med))}'/></svg>") no-repeat left 8px center / auto 16px;
-  // }
-
   .table th,
   .table td {
     text-align: right;
@@ -67,9 +22,4 @@ body.rtl {
       }
     }
   }
-
-  .simple_form .input.radio_buttons .radio > label input {
-    left: auto;
-    right: 0;
-  }
 }
diff --git a/app/styles/themes.scss b/app/styles/themes.scss
deleted file mode 100644
index 378e7b332..000000000
--- a/app/styles/themes.scss
+++ /dev/null
@@ -1,77 +0,0 @@
-/*
-# CSS VARIABLE NAMING CONVENTIONS
-
-Primary variables are fully-formed CSS properties.
-Form: --{primary-name}
-Examples:
-  --brand-color
-  --accent-color
-  --primary-text-color
-
-Meta-variables are combined to make primary variables.
-Form: --{primary-name}_{property}
-Examples:
-  --brand-color_h   (int, hue)
-  --brand-color_s   (percent, saturation)
-  --brand-color_l   (percent, lightness)
-  --brand-color_hsl (csv of the 3 variables above)
-
-Modifiers are variations of primary variables made by modifying their meta-values.
-Form: --{primary-name}--{modifier}
-Examples:
-  --brand-color--faint
-  --brand-color--hicontrast
-  --primary-text-color--faint
-*/
-
-body,
-.site-preview {
-  // Primary variables
-  --brand-color: hsl(var(--brand-color_hsl));
-  --accent-color: hsl(var(--accent-color_hsl));
-  --background-color: hsl(var(--background-color_hsl));
-  --foreground-color: hsl(var(--foreground-color_hsl));
-
-  // Meta-variables
-  --brand-color_hsl: var(--brand-color_h), var(--brand-color_s), var(--brand-color_l);
-  --accent-color_hsl: var(--accent-color_h), var(--accent-color_s), var(--accent-color_l);
-  --background-color_hsl: var(--background-color_h), var(--background-color_s), var(--background-color_l);
-  --foreground-color_hsl: var(--foreground-color_h), var(--foreground-color_s), var(--foreground-color_l);
-  --accent-color_h: calc(var(--brand-color_h) - 15);
-  --accent-color_s: 86%;
-  --accent-color_l: 44%;
-
-  // Modifiers
-  --brand-color--faint: hsla(var(--brand-color_hsl), 0.1);
-  --brand-color--med: hsla(var(--brand-color_hsl), 0.2);
-  --accent-color--faint: hsla(var(--accent-color_hsl), 0.15);
-  --accent-color--bright: hsl(
-    var(--accent-color_h),
-    var(--accent-color_s),
-    calc(var(--accent-color_l) + 3%)
-  );
-}
-
-.theme-mode-light {
-  // Primary variables
-  --highlight-text-color: hsl(
-    var(--brand-color_h),
-    var(--brand-color_s),
-    calc(var(--brand-color_l) - 8%)
-  );
-
-  // Meta-variables
-  --background-color_h: 0;
-  --background-color_s: 0%;
-  --background-color_l: 94.9%;
-  --foreground-color_h: 0;
-  --foreground-color_s: 0%;
-  --foreground-color_l: 100%;
-
-  // Modifiers
-  --brand-color--hicontrast: hsl(
-    var(--brand-color_h),
-    var(--brand-color_s),
-    calc(var(--brand-color_l) - 5%)
-  );
-}
diff --git a/app/styles/ui.scss b/app/styles/ui.scss
index ac618756b..1b975fb24 100644
--- a/app/styles/ui.scss
+++ b/app/styles/ui.scss
@@ -25,11 +25,6 @@
     cursor: default;
   }
 
-  &.active {
-    color: var(--highlight-text-color);
-    opacity: 1;
-  }
-
   &::-moz-focus-inner {
     border: 0;
   }
@@ -75,8 +70,7 @@
   flex-direction: column;
 
   .image-loader__preview-canvas {
-    max-width: $media-modal-media-max-width;
-    max-height: $media-modal-media-max-height;
+    @apply max-w-full max-h-[80%];
     background: url('../assets/images/void.png') repeat;
     object-fit: contain;
   }
@@ -90,9 +84,7 @@
   @apply relative w-full h-full flex items-center justify-center;
 
   img {
-    @apply w-auto h-auto object-contain shadow-2xl;
-    max-width: $media-modal-media-max-width;
-    max-height: $media-modal-media-max-height;
+    @apply w-auto h-auto max-w-full max-h-[80%] object-contain shadow-2xl;
   }
 }
 
diff --git a/app/styles/variables.scss b/app/styles/variables.scss
index a124b1f50..afcccbd20 100644
--- a/app/styles/variables.scss
+++ b/app/styles/variables.scss
@@ -1,23 +1,7 @@
-// Commonly used web colors
-
-$error-red: #df405a !default; // Cerise
-
-// Variables for defaults in UI
-$base-shadow-color: #000 !default;
-$base-overlay-background: #000 !default;
-$error-value-color: $error-red !default;
-
 // Language codes that uses CJK fonts
 /* stylelint-disable-next-line value-keyword-case -- locale filenames */
 $cjk-langs: ja, ko, zh-CN, zh-HK, zh-TW;
 
-// Variables for components
-$media-modal-media-max-width: 100%;
-// put margins on top and bottom of image to avoid the screen covered by image.
-$media-modal-media-max-height: 80%;
-
-$no-gap-breakpoint: 415px;
-
 // CSS variables
 // NOTE: Prefer CSS variables whenever possible.
 // They're future-proof and more flexible.