From c56728b7226c8f0e8b213baa2fde428037fc5a14 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 6 Feb 2023 20:28:18 +0100
Subject: [PATCH] classNames() ==> clsx()
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 app/soapbox/components/account-search.tsx        |  6 +++---
 .../announcements/announcements-panel.tsx        |  4 ++--
 .../components/announcements/reaction.tsx        |  4 ++--
 .../components/announcements/reactions-bar.tsx   |  4 ++--
 app/soapbox/components/autosuggest-input.tsx     |  8 ++++----
 app/soapbox/components/autosuggest-textarea.tsx  |  8 ++++----
 app/soapbox/components/badge.tsx                 |  6 +++---
 app/soapbox/components/copyable-input.tsx        |  2 +-
 app/soapbox/components/dropdown-menu.tsx         |  6 +++---
 app/soapbox/components/emoji-button-wrapper.tsx  |  4 ++--
 app/soapbox/components/emoji-selector.tsx        |  2 +-
 app/soapbox/components/event-preview.tsx         |  4 ++--
 app/soapbox/components/fork-awesome-icon.tsx     |  4 ++--
 app/soapbox/components/gdpr-banner.tsx           |  4 ++--
 app/soapbox/components/hover-ref-wrapper.tsx     |  4 ++--
 app/soapbox/components/hover-status-wrapper.tsx  |  4 ++--
 app/soapbox/components/icon-button.tsx           |  4 ++--
 app/soapbox/components/icon.tsx                  |  4 ++--
 app/soapbox/components/list.tsx                  |  6 +++---
 app/soapbox/components/location-search.tsx       |  6 +++---
 app/soapbox/components/media-gallery.tsx         | 14 +++++++-------
 app/soapbox/components/modal-root.tsx            |  6 +++---
 app/soapbox/components/outline-box.tsx           |  6 +++---
 app/soapbox/components/polls/poll-option.tsx     |  6 +++---
 app/soapbox/components/profile-hover-card.tsx    |  4 ++--
 app/soapbox/components/progress-circle.tsx       |  4 ++--
 app/soapbox/components/quoted-status.tsx         |  4 ++--
 app/soapbox/components/scroll-top-button.tsx     |  4 ++--
 app/soapbox/components/sidebar-menu.tsx          |  8 ++++----
 .../components/sidebar-navigation-link.tsx       |  6 +++---
 app/soapbox/components/site-logo.tsx             |  4 ++--
 app/soapbox/components/status-action-button.tsx  |  6 +++---
 app/soapbox/components/status-content.tsx        |  8 ++++----
 app/soapbox/components/status-hover-card.tsx     |  4 ++--
 app/soapbox/components/status-list.tsx           |  6 +++---
 app/soapbox/components/status.tsx                |  8 ++++----
 .../statuses/sensitive-content-overlay.tsx       |  4 ++--
 app/soapbox/components/still-image.tsx           | 10 +++++-----
 app/soapbox/components/thumb-navigation-link.tsx |  8 ++++----
 .../components/ui/accordion/accordion.tsx        |  4 ++--
 app/soapbox/components/ui/avatar/avatar.tsx      |  4 ++--
 app/soapbox/components/ui/banner/banner.tsx      |  4 ++--
 app/soapbox/components/ui/button/button.tsx      |  4 ++--
 .../components/ui/button/useButtonStyles.ts      |  4 ++--
 app/soapbox/components/ui/card/card.tsx          |  6 +++---
 app/soapbox/components/ui/column/column.tsx      |  4 ++--
 .../ui/emoji-selector/emoji-selector.tsx         |  6 +++---
 app/soapbox/components/ui/hstack/hstack.tsx      |  6 +++---
 .../components/ui/icon-button/icon-button.tsx    |  4 ++--
 app/soapbox/components/ui/input/input.tsx        |  6 +++---
 app/soapbox/components/ui/layout/layout.tsx      |  4 ++--
 app/soapbox/components/ui/menu/menu.tsx          |  4 ++--
 app/soapbox/components/ui/modal/modal.tsx        | 10 +++++-----
 app/soapbox/components/ui/stack/stack.tsx        |  6 +++---
 app/soapbox/components/ui/tabs/tabs.tsx          |  4 ++--
 app/soapbox/components/ui/text/text.tsx          |  4 ++--
 app/soapbox/components/ui/textarea/textarea.tsx  |  4 ++--
 app/soapbox/components/ui/toast/toast.tsx        |  6 +++---
 app/soapbox/components/upload.tsx                |  8 ++++----
 app/soapbox/components/validation-checkmark.tsx  |  4 ++--
 app/soapbox/components/verification-badge.tsx    |  4 ++--
 app/soapbox/containers/soapbox.tsx               |  6 +++---
 .../account-gallery/components/media-item.tsx    |  6 +++---
 .../features/aliases/components/search.tsx       |  4 ++--
 app/soapbox/features/audio/index.tsx             |  8 ++++----
 .../features/chats/components/chat-list.tsx      |  6 +++---
 .../chats/components/chat-message-list-intro.tsx |  4 ++--
 .../chats/components/chat-message-list.tsx       | 16 ++++++++--------
 .../chats/components/chat-page/chat-page.tsx     |  6 +++---
 .../chats/components/chat-search/results.tsx     |  6 +++---
 app/soapbox/features/chats/components/chat.tsx   |  4 ++--
 .../features/chats/components/ui/pane.tsx        |  4 ++--
 .../compose/components/compose-form-button.tsx   |  4 ++--
 .../features/compose/components/compose-form.tsx |  4 ++--
 .../emoji-picker/emoji-picker-dropdown.tsx       |  4 ++--
 .../emoji-picker/emoji-picker-menu.tsx           |  4 ++--
 .../compose/components/privacy-dropdown.tsx      | 10 +++++-----
 .../compose/components/reply-indicator.tsx       |  4 ++--
 .../compose/components/schedule-form.tsx         |  4 ++--
 .../compose/components/search-results.tsx        |  6 +++---
 .../features/compose/components/search.tsx       |  6 +++---
 .../compose/components/spoiler-input.tsx         |  4 ++--
 .../components/text-character-counter.tsx        |  4 ++--
 .../features/compose/components/upload-form.tsx  |  4 ++--
 .../features/developers/components/indicator.tsx |  6 +++---
 .../directory/components/account-card.tsx        |  4 ++--
 app/soapbox/features/directory/index.tsx         |  4 ++--
 app/soapbox/features/edit-profile/index.tsx      |  4 ++--
 .../components/restricted-instance.tsx           |  6 +++---
 .../features/feed-filtering/feed-carousel.tsx    |  4 ++--
 app/soapbox/features/forms/index.tsx             |  4 ++--
 .../list-editor/components/edit-list-form.tsx    |  2 +-
 .../features/list-editor/components/search.tsx   |  4 ++--
 app/soapbox/features/notifications/index.tsx     |  4 ++--
 .../features/onboarding/onboarding-wizard.tsx    |  6 +++---
 .../onboarding/steps/avatar-selection-step.tsx   |  4 ++--
 .../steps/cover-photo-selection-step.tsx         |  4 ++--
 .../placeholder/components/placeholder-card.tsx  |  4 ++--
 .../components/placeholder-chat-message.tsx      | 14 +++++++-------
 .../components/placeholder-status.tsx            |  4 ++--
 .../components/scheduled-status.tsx              |  6 +++---
 .../components/crypto-address-input.tsx          |  6 +++---
 .../components/footer-link-input.tsx             |  4 ++--
 .../components/icon-picker-menu.tsx              |  4 ++--
 .../components/promo-panel-input.tsx             |  4 ++--
 .../soapbox-config/components/site-preview.tsx   |  6 +++---
 app/soapbox/features/status/components/card.tsx  |  6 +++---
 .../status/components/status-interaction-bar.tsx |  4 ++--
 .../features/status/components/thread-status.tsx |  4 ++--
 app/soapbox/features/status/index.tsx            |  4 ++--
 .../features/ui/components/background-shapes.tsx |  4 ++--
 .../ui/components/floating-action-button.tsx     |  4 ++--
 .../features/ui/components/image-loader.tsx      |  6 +++---
 .../features/ui/components/link-footer.tsx       |  4 ++--
 .../ui/components/modals/actions-modal.tsx       |  8 ++++----
 .../components/modals/compare-history-modal.tsx  |  4 ++--
 .../ui/components/modals/landing-page-modal.tsx  |  4 ++--
 .../manage-group-modal/steps/details-step.tsx    |  6 +++---
 .../ui/components/modals/media-modal.tsx         |  6 +++---
 .../ui/components/modals/reactions-modal.tsx     |  4 ++--
 .../modals/report-modal/steps/reason-step.tsx    |  8 ++++----
 app/soapbox/features/ui/components/navbar.tsx    |  4 ++--
 .../features/ui/components/pending-status.tsx    |  8 ++++----
 .../features/ui/components/profile-field.tsx     |  4 ++--
 .../features/ui/components/upload-area.tsx       |  8 ++++----
 app/soapbox/features/video/index.tsx             | 12 ++++++------
 126 files changed, 336 insertions(+), 336 deletions(-)

diff --git a/app/soapbox/components/account-search.tsx b/app/soapbox/components/account-search.tsx
index a3d7fd1a6..f69845dd3 100644
--- a/app/soapbox/components/account-search.tsx
+++ b/app/soapbox/components/account-search.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -77,12 +77,12 @@ const AccountSearch: React.FC<IAccountSearch> = ({ onSelected, ...rest }) => {
         >
           <SvgIcon
             src={require('@tabler/icons/search.svg')}
-            className={classNames('h-4 w-4 text-gray-400', { hidden: !isEmpty() })}
+            className={clsx('h-4 w-4 text-gray-400', { hidden: !isEmpty() })}
           />
 
           <SvgIcon
             src={require('@tabler/icons/x.svg')}
-            className={classNames('h-4 w-4 text-gray-400', { hidden: isEmpty() })}
+            className={clsx('h-4 w-4 text-gray-400', { hidden: isEmpty() })}
             aria-label={intl.formatMessage(messages.placeholder)}
           />
         </div>
diff --git a/app/soapbox/components/announcements/announcements-panel.tsx b/app/soapbox/components/announcements/announcements-panel.tsx
index 2febea40d..800328678 100644
--- a/app/soapbox/components/announcements/announcements-panel.tsx
+++ b/app/soapbox/components/announcements/announcements-panel.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -52,7 +52,7 @@ const AnnouncementsPanel = () => {
                 key={i}
                 tabIndex={0}
                 onClick={() => setIndex(i)}
-                className={classNames({
+                className={clsx({
                   'w-2 h-2 rounded-full focus:ring-primary-600 focus:ring-2 focus:ring-offset-2': true,
                   'bg-gray-200 hover:bg-gray-300': i !== index,
                   'bg-primary-600': i === index,
diff --git a/app/soapbox/components/announcements/reaction.tsx b/app/soapbox/components/announcements/reaction.tsx
index a39942c32..888c7733a 100644
--- a/app/soapbox/components/announcements/reaction.tsx
+++ b/app/soapbox/components/announcements/reaction.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useState } from 'react';
 
 import AnimatedNumber from 'soapbox/components/animated-number';
@@ -43,7 +43,7 @@ const Reaction: React.FC<IReaction> = ({ announcementId, reaction, addReaction,
 
   return (
     <button
-      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', {
+      className={clsx('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,
       })}
diff --git a/app/soapbox/components/announcements/reactions-bar.tsx b/app/soapbox/components/announcements/reactions-bar.tsx
index f9569fb90..566d8a106 100644
--- a/app/soapbox/components/announcements/reactions-bar.tsx
+++ b/app/soapbox/components/announcements/reactions-bar.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { TransitionMotion, spring } from 'react-motion';
 
@@ -42,7 +42,7 @@ const ReactionsBar: React.FC<IReactionsBar> = ({ announcementId, reactions, addR
   return (
     <TransitionMotion styles={styles} willEnter={willEnter} willLeave={willLeave}>
       {items => (
-        <div className={classNames('flex flex-wrap items-center gap-1', { 'reactions-bar--empty': visibleReactions.isEmpty() })}>
+        <div className={clsx('flex flex-wrap items-center gap-1', { 'reactions-bar--empty': visibleReactions.isEmpty() })}>
           {items.map(({ key, data, style }) => (
             <Reaction
               key={key}
diff --git a/app/soapbox/components/autosuggest-input.tsx b/app/soapbox/components/autosuggest-input.tsx
index dcc2e78d7..0a52dbd79 100644
--- a/app/soapbox/components/autosuggest-input.tsx
+++ b/app/soapbox/components/autosuggest-input.tsx
@@ -1,5 +1,5 @@
 import { Portal } from '@reach/portal';
-import classNames from 'clsx';
+import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
 import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
@@ -199,7 +199,7 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
         tabIndex={0}
         key={key}
         data-index={i}
-        className={classNames({
+        className={clsx({
           'px-4 py-2.5 text-sm 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 group': true,
           'bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800': i === selectedSuggestion,
         })}
@@ -235,7 +235,7 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
 
     return menu.map((item, i) => (
       <a
-        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 })}
+        className={clsx('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}
@@ -302,7 +302,7 @@ export default class AutosuggestInput extends ImmutablePureComponent<IAutosugges
       <Portal key='portal'>
         <div
           style={this.setPortalPosition()}
-          className={classNames({
+          className={clsx({
             'fixed w-full z-[1001] shadow bg-white dark:bg-gray-900 rounded-lg py-1 dark:ring-2 dark:ring-primary-700 focus:outline-none': true,
             hidden: !visible,
             block: visible,
diff --git a/app/soapbox/components/autosuggest-textarea.tsx b/app/soapbox/components/autosuggest-textarea.tsx
index 9b97d69dd..ca20f584f 100644
--- a/app/soapbox/components/autosuggest-textarea.tsx
+++ b/app/soapbox/components/autosuggest-textarea.tsx
@@ -1,5 +1,5 @@
 import { Portal } from '@reach/portal';
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Textarea from 'react-textarea-autosize';
@@ -201,7 +201,7 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
         tabIndex={0}
         key={key}
         data-index={i}
-        className={classNames({
+        className={clsx({
           'px-4 py-2.5 text-sm 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 group': true,
           'bg-gray-100 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-800': i === selectedSuggestion,
         })}
@@ -244,7 +244,7 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
 
             <Textarea
               ref={this.setTextarea}
-              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', {
+              className={clsx('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,
               })}
@@ -271,7 +271,7 @@ class AutosuggestTextarea extends ImmutablePureComponent<IAutosuggesteTextarea>
       <Portal key='portal'>
         <div
           style={this.setPortalPosition()}
-          className={classNames({
+          className={clsx({
             'fixed z-1000 shadow bg-white dark:bg-gray-900 rounded-lg py-1 space-y-0 dark:ring-2 dark:ring-primary-700 focus:outline-none': true,
             hidden: suggestionsHidden || suggestions.isEmpty(),
             block: !suggestionsHidden && !suggestions.isEmpty(),
diff --git a/app/soapbox/components/badge.tsx b/app/soapbox/components/badge.tsx
index 3914381de..9bee3a1bf 100644
--- a/app/soapbox/components/badge.tsx
+++ b/app/soapbox/components/badge.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 
 interface IBadge {
@@ -12,13 +12,13 @@ const Badge: React.FC<IBadge> = ({ title, slug }) => {
   return (
     <span
       data-testid='badge'
-      className={classNames('inline-flex items-center rounded px-2 py-0.5 text-xs font-medium', {
+      className={clsx('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',
         'bg-cyan-600 text-white': slug === 'moderator',
         'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-gray-100': fallback,
-        'bg-white bg-opacity-75 text-gray-900': slug === 'opaque',
+        'bg-white bg/-opacity-75 text-gray-900': slug === 'opaque',
       })}
     >
       {title}
diff --git a/app/soapbox/components/copyable-input.tsx b/app/soapbox/components/copyable-input.tsx
index 24253d7df..a8175fe3f 100644
--- a/app/soapbox/components/copyable-input.tsx
+++ b/app/soapbox/components/copyable-input.tsx
@@ -29,7 +29,7 @@ const CopyableInput: React.FC<ICopyableInput> = ({ value }) => {
         type='text'
         value={value}
         className='rounded-r-none rtl:rounded-l-none rtl:rounded-r-lg'
-        outerClassName='flex-grow'
+        outerClassName='grow'
         onClick={selectInput}
         readOnly
       />
diff --git a/app/soapbox/components/dropdown-menu.tsx b/app/soapbox/components/dropdown-menu.tsx
index a125b9565..740c95d28 100644
--- a/app/soapbox/components/dropdown-menu.tsx
+++ b/app/soapbox/components/dropdown-menu.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import React from 'react';
 import { spring } from 'react-motion';
@@ -182,7 +182,7 @@ class DropdownMenu extends React.PureComponent<IDropdownMenu, IDropdownMenuState
     const { text, href, to, newTab, isLogout, icon, count, destructive } = option;
 
     return (
-      <li className={classNames('dropdown-menu__item truncate', { destructive })} key={`${text}-${i}`}>
+      <li className={clsx('dropdown-menu__item truncate', { destructive })} key={`${text}-${i}`}>
         <a
           href={href || to || '#'}
           role='button'
@@ -392,7 +392,7 @@ class Dropdown extends React.PureComponent<IDropdown, IDropdownState> {
         ) : (
           <IconButton
             disabled={disabled}
-            className={classNames({
+            className={clsx({
               'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': true,
               'text-gray-700 dark:text-gray-500': open,
             })}
diff --git a/app/soapbox/components/emoji-button-wrapper.tsx b/app/soapbox/components/emoji-button-wrapper.tsx
index 9cd826c36..f04e2bbc0 100644
--- a/app/soapbox/components/emoji-button-wrapper.tsx
+++ b/app/soapbox/components/emoji-button-wrapper.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useState, useEffect, useRef } from 'react';
 import { usePopper } from 'react-popper';
 
@@ -122,7 +122,7 @@ const EmojiButtonWrapper: React.FC<IEmojiButtonWrapper> = ({ statusId, children
 
   const selector = (
     <div
-      className={classNames('z-50 transition-opacity duration-100', {
+      className={clsx('z-50 transition-opacity duration-100', {
         'opacity-0 pointer-events-none': !visible,
       })}
       ref={setPopperElement}
diff --git a/app/soapbox/components/emoji-selector.tsx b/app/soapbox/components/emoji-selector.tsx
index 39efc1153..ad4d558a5 100644
--- a/app/soapbox/components/emoji-selector.tsx
+++ b/app/soapbox/components/emoji-selector.tsx
@@ -1,4 +1,4 @@
-// import classNames from 'clsx';
+// import clsx from 'clsx';
 import React from 'react';
 import { HotKeys } from 'react-hotkeys';
 import ImmutablePureComponent from 'react-immutable-pure-component';
diff --git a/app/soapbox/components/event-preview.tsx b/app/soapbox/components/event-preview.tsx
index 5c12799ff..c40c385c1 100644
--- a/app/soapbox/components/event-preview.tsx
+++ b/app/soapbox/components/event-preview.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -51,7 +51,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
   ));
 
   return (
-    <div className={classNames('dark:bg-primary-800 relative w-full overflow-hidden rounded-lg bg-gray-100', className)}>
+    <div className={clsx('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>
diff --git a/app/soapbox/components/fork-awesome-icon.tsx b/app/soapbox/components/fork-awesome-icon.tsx
index 98d6c5747..a4e268b24 100644
--- a/app/soapbox/components/fork-awesome-icon.tsx
+++ b/app/soapbox/components/fork-awesome-icon.tsx
@@ -5,7 +5,7 @@
  * @see soapbox/components/icon
  */
 
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 
 export interface IForkAwesomeIcon extends React.HTMLAttributes<HTMLLIElement> {
@@ -25,7 +25,7 @@ const ForkAwesomeIcon: React.FC<IForkAwesomeIcon> = ({ id, className, fixedWidth
     <i
       role='img'
       // alt={alt}
-      className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })}
+      className={clsx('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })}
       {...rest}
     />
   );
diff --git a/app/soapbox/components/gdpr-banner.tsx b/app/soapbox/components/gdpr-banner.tsx
index a5a2f53f1..f8bd28341 100644
--- a/app/soapbox/components/gdpr-banner.tsx
+++ b/app/soapbox/components/gdpr-banner.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -30,7 +30,7 @@ const GdprBanner: React.FC = () => {
   }
 
   return (
-    <Banner theme='opaque' className={classNames('transition-transform', { 'translate-y-full': slideout })}>
+    <Banner theme='opaque' className={clsx('transition-transform', { 'translate-y-full': slideout })}>
       <div className='flex flex-col space-y-4 rtl:space-x-reverse lg:flex-row lg:items-center lg:justify-between lg:space-y-0 lg:space-x-4'>
         <Stack space={2}>
           <Text size='xl' weight='bold'>
diff --git a/app/soapbox/components/hover-ref-wrapper.tsx b/app/soapbox/components/hover-ref-wrapper.tsx
index e1cb9d5f5..8a9d0adec 100644
--- a/app/soapbox/components/hover-ref-wrapper.tsx
+++ b/app/soapbox/components/hover-ref-wrapper.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import debounce from 'lodash/debounce';
 import React, { useRef } from 'react';
 
@@ -47,7 +47,7 @@ export const HoverRefWrapper: React.FC<IHoverRefWrapper> = ({ accountId, childre
   return (
     <Elem
       ref={ref}
-      className={classNames('hover-ref-wrapper', className)}
+      className={clsx('hover-ref-wrapper', className)}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       onClick={handleClick}
diff --git a/app/soapbox/components/hover-status-wrapper.tsx b/app/soapbox/components/hover-status-wrapper.tsx
index 558428954..0176bf41f 100644
--- a/app/soapbox/components/hover-status-wrapper.tsx
+++ b/app/soapbox/components/hover-status-wrapper.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import debounce from 'lodash/debounce';
 import React, { useRef } from 'react';
 import { useDispatch } from 'react-redux';
@@ -45,7 +45,7 @@ export const HoverStatusWrapper: React.FC<IHoverStatusWrapper> = ({ statusId, ch
   return (
     <Elem
       ref={ref}
-      className={classNames('hover-status-wrapper', className)}
+      className={clsx('hover-status-wrapper', className)}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}
       onClick={handleClick}
diff --git a/app/soapbox/components/icon-button.tsx b/app/soapbox/components/icon-button.tsx
index 9927ae8df..f4da2c2c5 100644
--- a/app/soapbox/components/icon-button.tsx
+++ b/app/soapbox/components/icon-button.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 
 import Icon from 'soapbox/components/icon';
@@ -66,7 +66,7 @@ const IconButton: React.FC<IIconButton> = ({
     }
   };
 
-  const classes = classNames(className, 'icon-button', {
+  const classes = clsx(className, 'icon-button', {
     active,
     disabled,
   });
diff --git a/app/soapbox/components/icon.tsx b/app/soapbox/components/icon.tsx
index 8e875ed0e..5239bc46b 100644
--- a/app/soapbox/components/icon.tsx
+++ b/app/soapbox/components/icon.tsx
@@ -3,7 +3,7 @@
  * @module soapbox/components/icon
  */
 
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import InlineSVG from 'react-inlinesvg'; // eslint-disable-line no-restricted-imports
 
@@ -17,7 +17,7 @@ export interface IIcon extends React.HTMLAttributes<HTMLDivElement> {
 const Icon: React.FC<IIcon> = ({ src, alt, className, ...rest }) => {
   return (
     <div
-      className={classNames('svg-icon', className)}
+      className={clsx('svg-icon', className)}
       {...rest}
     >
       <InlineSVG src={src} title={alt} loader={<></>} />
diff --git a/app/soapbox/components/list.tsx b/app/soapbox/components/list.tsx
index 14c23a54d..f8d2471df 100644
--- a/app/soapbox/components/list.tsx
+++ b/app/soapbox/components/list.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -45,7 +45,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick, onSelec
 
         return React.cloneElement(child, {
           id: domId,
-          className: classNames({
+          className: clsx({
             'w-auto': isSelect,
           }, child.props.className),
         });
@@ -57,7 +57,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick, onSelec
 
   return (
     <Comp
-      className={classNames({
+      className={clsx({
         'flex items-center justify-between px-3 py-2 first:rounded-t-lg last:rounded-b-lg bg-gradient-to-r from-gradient-start/10 to-gradient-end/10': true,
         'cursor-pointer hover:from-gradient-start/20 hover:to-gradient-end/20 dark:hover:from-gradient-start/5 dark:hover:to-gradient-end/5': typeof onClick !== 'undefined' || typeof onSelect !== 'undefined',
       })}
diff --git a/app/soapbox/components/location-search.tsx b/app/soapbox/components/location-search.tsx
index 0f4534bd7..fc108e0e8 100644
--- a/app/soapbox/components/location-search.tsx
+++ b/app/soapbox/components/location-search.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import throttle from 'lodash/throttle';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
@@ -100,8 +100,8 @@ const LocationSearch: React.FC<ILocationSearch> = ({ onSelected }) => {
         renderSuggestion={AutosuggestLocation}
       />
       <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
-        <Icon src={require('@tabler/icons/search.svg')} className={classNames('svg-icon--search', { active: isEmpty() })} />
-        <Icon src={require('@tabler/icons/backspace.svg')} className={classNames('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
+        <Icon src={require('@tabler/icons/search.svg')} className={clsx('svg-icon--search', { active: isEmpty() })} />
+        <Icon src={require('@tabler/icons/backspace.svg')} className={clsx('svg-icon--backspace', { active: !isEmpty() })} aria-label={intl.formatMessage(messages.placeholder)} />
       </div>
     </div>
   );
diff --git a/app/soapbox/components/media-gallery.tsx b/app/soapbox/components/media-gallery.tsx
index 3321ba158..dbf1119cc 100644
--- a/app/soapbox/components/media-gallery.tsx
+++ b/app/soapbox/components/media-gallery.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useState, useRef, useLayoutEffect } from 'react';
 
 import Blurhash from 'soapbox/components/blurhash';
@@ -152,7 +152,7 @@ const Item: React.FC<IItem> = ({
     );
 
     return (
-      <div className={classNames('media-gallery__item', { standalone })} key={attachment.id} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
+      <div className={clsx('media-gallery__item', { standalone })} key={attachment.id} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
         <a className='media-gallery__item-thumbnail' href={attachment.url} target='_blank' style={{ cursor: 'pointer' }}>
           <Blurhash hash={attachment.blurhash} className='media-gallery__preview' />
           <span className='media-gallery__item__icons'>{attachmentIcon}</span>
@@ -189,7 +189,7 @@ const Item: React.FC<IItem> = ({
     }
 
     thumbnail = (
-      <div className={classNames('media-gallery__gifv', { autoplay: autoPlayGif })}>
+      <div className={clsx('media-gallery__gifv', { autoplay: autoPlayGif })}>
         <video
           className='media-gallery__item-gifv-thumbnail'
           aria-label={attachment.description}
@@ -211,7 +211,7 @@ const Item: React.FC<IItem> = ({
     const ext = attachment.url.split('.').pop()?.toUpperCase();
     thumbnail = (
       <a
-        className={classNames('media-gallery__item-thumbnail')}
+        className={clsx('media-gallery__item-thumbnail')}
         href={attachment.url}
         onClick={handleClick}
         target='_blank'
@@ -225,7 +225,7 @@ const Item: React.FC<IItem> = ({
     const ext = attachment.url.split('.').pop()?.toUpperCase();
     thumbnail = (
       <a
-        className={classNames('media-gallery__item-thumbnail')}
+        className={clsx('media-gallery__item-thumbnail')}
         href={attachment.url}
         onClick={handleClick}
         target='_blank'
@@ -245,7 +245,7 @@ const Item: React.FC<IItem> = ({
   }
 
   return (
-    <div className={classNames('media-gallery__item', `media-gallery__item--${attachment.type}`, { standalone })} key={attachment.id} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
+    <div className={clsx('media-gallery__item', `media-gallery__item--${attachment.type}`, { standalone })} key={attachment.id} style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}>
       {last && total > ATTACHMENT_LIMIT && (
         <div className='media-gallery__item-overflow'>
           +{total - ATTACHMENT_LIMIT + 1}
@@ -546,7 +546,7 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
   }, [node.current]);
 
   return (
-    <div className={classNames('media-gallery', { 'media-gallery--compact': compact })} style={sizeData.style} ref={node}>
+    <div className={clsx('media-gallery', { 'media-gallery--compact': compact })} style={sizeData.style} ref={node}>
       {children}
     </div>
   );
diff --git a/app/soapbox/components/modal-root.tsx b/app/soapbox/components/modal-root.tsx
index 67f3fb32a..581c167d8 100644
--- a/app/soapbox/components/modal-root.tsx
+++ b/app/soapbox/components/modal-root.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import 'wicg-inert';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@@ -232,7 +232,7 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
   return (
     <div
       ref={ref}
-      className={classNames({
+      className={clsx({
         'fixed top-0 left-0 z-[100] w-full h-full overflow-x-hidden overflow-y-auto': true,
         'pointer-events-none': !visible,
       })}
@@ -247,7 +247,7 @@ const ModalRoot: React.FC<IModalRoot> = ({ children, onCancel, onClose, type })
 
       <div
         role='dialog'
-        className={classNames({
+        className={clsx({
           'my-2 mx-auto relative pointer-events-none flex items-center min-h-[calc(100%-3.5rem)]': true,
           'p-4 md:p-0': type !== 'MEDIA',
         })}
diff --git a/app/soapbox/components/outline-box.tsx b/app/soapbox/components/outline-box.tsx
index 163ba6dd4..5db74c4ab 100644
--- a/app/soapbox/components/outline-box.tsx
+++ b/app/soapbox/components/outline-box.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 
 interface IOutlineBox extends React.HTMLAttributes<HTMLDivElement> {
@@ -10,7 +10,7 @@ interface IOutlineBox extends React.HTMLAttributes<HTMLDivElement> {
 const OutlineBox: React.FC<IOutlineBox> = ({ children, className, ...rest }) => {
   return (
     <div
-      className={classNames('rounded-lg border border-solid border-gray-300 p-4 dark:border-gray-800', className)}
+      className={clsx('rounded-lg border border-solid border-gray-300 p-4 dark:border-gray-800', className)}
       {...rest}
     >
       {children}
@@ -18,4 +18,4 @@ const OutlineBox: React.FC<IOutlineBox> = ({ children, className, ...rest }) =>
   );
 };
 
-export default OutlineBox;
\ No newline at end of file
+export default OutlineBox;
diff --git a/app/soapbox/components/polls/poll-option.tsx b/app/soapbox/components/polls/poll-option.tsx
index 5079ef2ad..8bf60578b 100644
--- a/app/soapbox/components/polls/poll-option.tsx
+++ b/app/soapbox/components/polls/poll-option.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Motion, presets, spring } from 'react-motion';
@@ -46,7 +46,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
   return (
     <label
       className={
-        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', {
+        clsx('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 h-6 w-6 flex-none items-center justify-center rounded-full border border-solid', {
+            className={clsx('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,
             })}
diff --git a/app/soapbox/components/profile-hover-card.tsx b/app/soapbox/components/profile-hover-card.tsx
index 32e4ceb20..e832db513 100644
--- a/app/soapbox/components/profile-hover-card.tsx
+++ b/app/soapbox/components/profile-hover-card.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { useIntl, FormattedMessage } from 'react-intl';
 import { usePopper } from 'react-popper';
@@ -95,7 +95,7 @@ export const ProfileHoverCard: React.FC<IProfileHoverCard> = ({ visible = true }
 
   return (
     <div
-      className={classNames({
+      className={clsx({
         'absolute transition-opacity w-[320px] z-[101] top-0 left-0': true,
         'opacity-100': visible,
         'opacity-0 pointer-events-none': !visible,
diff --git a/app/soapbox/components/progress-circle.tsx b/app/soapbox/components/progress-circle.tsx
index fcfad084e..fa85f9a63 100644
--- a/app/soapbox/components/progress-circle.tsx
+++ b/app/soapbox/components/progress-circle.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 
 interface IProgressCircle {
@@ -30,7 +30,7 @@ const ProgressCircle: React.FC<IProgressCircle> = ({ progress, radius = 12, stro
           strokeWidth={stroke}
         />
         <circle
-          className={classNames('stroke-primary-500', {
+          className={clsx('stroke-primary-500', {
             'stroke-secondary-500': progress > 1,
           })}
           style={{
diff --git a/app/soapbox/components/quoted-status.tsx b/app/soapbox/components/quoted-status.tsx
index d3e97d4b8..d43c471a5 100644
--- a/app/soapbox/components/quoted-status.tsx
+++ b/app/soapbox/components/quoted-status.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { MouseEventHandler, useEffect, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
@@ -94,7 +94,7 @@ const QuotedStatus: React.FC<IQuotedStatus> = ({ status, onCancel, compose }) =>
   return (
     <OutlineBox
       data-testid='quoted-status'
-      className={classNames('cursor-pointer', {
+      className={clsx('cursor-pointer', {
         'hover:bg-gray-100 dark:hover:bg-gray-800': !compose,
       })}
     >
diff --git a/app/soapbox/components/scroll-top-button.tsx b/app/soapbox/components/scroll-top-button.tsx
index ec826bc23..0cc119689 100644
--- a/app/soapbox/components/scroll-top-button.tsx
+++ b/app/soapbox/components/scroll-top-button.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import throttle from 'lodash/throttle';
 import React, { useState, useEffect, useCallback } from 'react';
 import { useIntl, MessageDescriptor } from 'react-intl';
@@ -36,7 +36,7 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
 
   const visible = count > 0 && scrolled;
 
-  const classes = classNames('fixed left-1/2 top-20 z-50 -translate-x-1/2', {
+  const classes = clsx('fixed left-1/2 top-20 z-50 -translate-x-1/2', {
     'hidden': !visible,
   });
 
diff --git a/app/soapbox/components/sidebar-menu.tsx b/app/soapbox/components/sidebar-menu.tsx
index fff42ea5d..b0cf46ac0 100644
--- a/app/soapbox/components/sidebar-menu.tsx
+++ b/app/soapbox/components/sidebar-menu.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable jsx-a11y/interactive-supports-focus */
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { Link, NavLink } from 'react-router-dom';
@@ -138,7 +138,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
     <div
       aria-expanded={sidebarOpen}
       className={
-        classNames({
+        clsx({
           'z-[1000]': sidebarOpen,
           hidden: !sidebarOpen,
         })
@@ -153,7 +153,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
       <div className='fixed inset-0 z-[1000] flex'>
         <div
           className={
-            classNames({
+            clsx({
               'flex flex-col flex-1 bg-white dark:bg-primary-900 -translate-x-full rtl:translate-x-full w-full max-w-xs': true,
               '!translate-x-0': sidebarOpen,
             })
@@ -334,7 +334,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
 
                         <Icon
                           src={require('@tabler/icons/chevron-down.svg')}
-                          className={classNames('h-4 w-4 text-gray-900 transition-transform dark:text-gray-100', {
+                          className={clsx('h-4 w-4 text-gray-900 transition-transform dark:text-gray-100', {
                             'rotate-180': switcher,
                           })}
                         />
diff --git a/app/soapbox/components/sidebar-navigation-link.tsx b/app/soapbox/components/sidebar-navigation-link.tsx
index c20635cd3..3103972db 100644
--- a/app/soapbox/components/sidebar-navigation-link.tsx
+++ b/app/soapbox/components/sidebar-navigation-link.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 
@@ -38,7 +38,7 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
       to={to}
       ref={ref}
       onClick={handleClick}
-      className={classNames({
+      className={clsx({
         'flex items-center px-4 py-3.5 text-base font-semibold space-x-4 rtl:space-x-reverse rounded-full group text-gray-600 hover:text-gray-900 dark:text-gray-500 dark:hover:text-gray-100 hover:bg-primary-200 dark:hover:bg-primary-900': true,
         'dark:text-gray-100 text-gray-900': isActive,
       })}
@@ -48,7 +48,7 @@ const SidebarNavigationLink = React.forwardRef((props: ISidebarNavigationLink, r
           src={icon}
           count={count}
           countMax={countMax}
-          className={classNames('h-5 w-5', {
+          className={clsx('h-5 w-5', {
             'text-gray-600 dark:text-gray-500 group-hover:text-primary-500 dark:group-hover:text-primary-400': !isActive,
             'text-primary-500 dark:text-primary-400': isActive,
           })}
diff --git a/app/soapbox/components/site-logo.tsx b/app/soapbox/components/site-logo.tsx
index 7a3ef8e5d..771c19a57 100644
--- a/app/soapbox/components/site-logo.tsx
+++ b/app/soapbox/components/site-logo.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 
 import { useSoapboxConfig, useSettings, useTheme } from 'soapbox/hooks';
@@ -36,7 +36,7 @@ const SiteLogo: React.FC<ISiteLogo> = ({ className, theme, ...rest }) => {
   return (
     // eslint-disable-next-line jsx-a11y/alt-text
     <img
-      className={classNames('object-contain', className)}
+      className={clsx('object-contain', className)}
       src={getSrc()}
       {...rest}
     />
diff --git a/app/soapbox/components/status-action-button.tsx b/app/soapbox/components/status-action-button.tsx
index d526dd211..0ccfb83f5 100644
--- a/app/soapbox/components/status-action-button.tsx
+++ b/app/soapbox/components/status-action-button.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 
 import { Text, Icon, Emoji } from 'soapbox/components/ui';
@@ -49,7 +49,7 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
       return (
         <Icon
           src={icon}
-          className={classNames(
+          className={clsx(
             {
               'fill-accent-300 hover:fill-accent-300': active && filled && color === COLORS.accent,
             },
@@ -78,7 +78,7 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
     <button
       ref={ref}
       type='button'
-      className={classNames(
+      className={clsx(
         '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',
diff --git a/app/soapbox/components/status-content.tsx b/app/soapbox/components/status-content.tsx
index 719dea6e7..672e8866f 100644
--- a/app/soapbox/components/status-content.tsx
+++ b/app/soapbox/components/status-content.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useState, useRef, useLayoutEffect, useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
@@ -153,7 +153,7 @@ const StatusContent: React.FC<IStatusContent> = ({
 
   const content = { __html: parsedHtml };
   const direction = isRtl(status.search_index) ? 'rtl' : 'ltr';
-  const className = classNames(baseClassName, {
+  const className = clsx(baseClassName, {
     'cursor-pointer': onClick,
     'whitespace-normal': withSpoiler,
     'max-h-[300px]': collapsed,
@@ -183,14 +183,14 @@ const StatusContent: React.FC<IStatusContent> = ({
       output.push(<Poll id={status.poll} key='poll' status={status.url} />);
     }
 
-    return <div className={classNames({ 'bg-gray-100 dark:bg-primary-800 rounded-md p-4': hasPoll })}>{output}</div>;
+    return <div className={clsx({ 'bg-gray-100 dark:bg-primary-800 rounded-md p-4': hasPoll })}>{output}</div>;
   } else {
     const output = [
       <Markup
         ref={node}
         tabIndex={0}
         key='content'
-        className={classNames(baseClassName, {
+        className={clsx(baseClassName, {
           'leading-normal big-emoji': onlyEmoji,
         })}
         direction={direction}
diff --git a/app/soapbox/components/status-hover-card.tsx b/app/soapbox/components/status-hover-card.tsx
index 37ca117a0..bd1a92787 100644
--- a/app/soapbox/components/status-hover-card.tsx
+++ b/app/soapbox/components/status-hover-card.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useEffect, useState, useCallback } from 'react';
 import { usePopper } from 'react-popper';
 import { useHistory } from 'react-router-dom';
@@ -79,7 +79,7 @@ export const StatusHoverCard: React.FC<IStatusHoverCard> = ({ visible = true })
 
   return (
     <div
-      className={classNames({
+      className={clsx({
         'absolute transition-opacity w-[500px] z-50 top-0 left-0': true,
         'opacity-100': visible,
         'opacity-0 pointer-events-none': !visible,
diff --git a/app/soapbox/components/status-list.tsx b/app/soapbox/components/status-list.tsx
index a20835a16..1ea1ec366 100644
--- a/app/soapbox/components/status-list.tsx
+++ b/app/soapbox/components/status-list.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import { Map as ImmutableMap } from 'immutable';
 import debounce from 'lodash/debounce';
 import React, { useRef, useCallback } from 'react';
@@ -244,10 +244,10 @@ const StatusList: React.FC<IStatusList> = ({
       placeholderComponent={PlaceholderStatus}
       placeholderCount={20}
       ref={node}
-      className={classNames('divide-y divide-solid divide-gray-200 dark:divide-gray-800', {
+      className={clsx('divide-y divide-solid divide-gray-200 dark:divide-gray-800', {
         'divide-none': divideType !== 'border',
       })}
-      itemClassName={classNames({
+      itemClassName={clsx({
         'pb-3': divideType !== 'border',
       })}
       {...other}
diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx
index 2f3c280d2..b9989ae4c 100644
--- a/app/soapbox/components/status.tsx
+++ b/app/soapbox/components/status.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
 import { HotKeys } from 'react-hotkeys';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
@@ -289,7 +289,7 @@ const Status: React.FC<IStatus> = (props) => {
 
     return (
       <HotKeys handlers={minHandlers}>
-        <div className={classNames('status__wrapper', 'status__wrapper--filtered', { focusable })} tabIndex={focusable ? 0 : undefined} ref={node}>
+        <div className={clsx('status__wrapper', 'status__wrapper--filtered', { focusable })} tabIndex={focusable ? 0 : undefined} ref={node}>
           <FormattedMessage id='status.filtered' defaultMessage='Filtered' />
         </div>
       </HotKeys>
@@ -339,7 +339,7 @@ const Status: React.FC<IStatus> = (props) => {
   return (
     <HotKeys handlers={handlers} data-testid='status'>
       <div
-        className={classNames('status cursor-pointer', { focusable })}
+        className={clsx('status cursor-pointer', { focusable })}
         tabIndex={focusable && !muted ? 0 : undefined}
         data-featured={featured ? 'true' : null}
         aria-label={textForScreenReader(intl, actualStatus, rebloggedByText)}
@@ -349,7 +349,7 @@ const Status: React.FC<IStatus> = (props) => {
       >
         <Card
           variant={variant}
-          className={classNames('status__wrapper space-y-4', `status-${actualStatus.visibility}`, {
+          className={clsx('status__wrapper space-y-4', `status-${actualStatus.visibility}`, {
             'py-6 sm:p-5': variant === 'rounded',
             'status-reply': !!status.in_reply_to_id,
             muted,
diff --git a/app/soapbox/components/statuses/sensitive-content-overlay.tsx b/app/soapbox/components/statuses/sensitive-content-overlay.tsx
index 192df71d1..48f19c003 100644
--- a/app/soapbox/components/statuses/sensitive-content-overlay.tsx
+++ b/app/soapbox/components/statuses/sensitive-content-overlay.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useEffect, useMemo, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -91,7 +91,7 @@ const SensitiveContentOverlay = React.forwardRef<HTMLDivElement, ISensitiveConte
 
   return (
     <div
-      className={classNames('absolute z-40', {
+      className={clsx('absolute z-40', {
         'cursor-default backdrop-blur-lg rounded-lg w-full h-full border-0 flex justify-center': !visible,
         'bg-gray-800/75 inset-0': !visible,
         'bottom-1 right-1': visible,
diff --git a/app/soapbox/components/still-image.tsx b/app/soapbox/components/still-image.tsx
index 7b6b55182..e3844cda4 100644
--- a/app/soapbox/components/still-image.tsx
+++ b/app/soapbox/components/still-image.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useRef } from 'react';
 
 import { useSettings } from 'soapbox/hooks';
@@ -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('block h-full w-full', {
+  const baseClassName = clsx('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, 'group relative isolate overflow-hidden')}
+      className={clsx(className, 'group relative isolate overflow-hidden')}
       style={style}
     >
       <img
@@ -55,7 +55,7 @@ const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterb
         alt={alt}
         ref={img}
         onLoad={handleImageLoad}
-        className={classNames(baseClassName, {
+        className={clsx(baseClassName, {
           'invisible group-hover:visible': hoverToPlay,
         })}
       />
@@ -63,7 +63,7 @@ const StillImage: React.FC<IStillImage> = ({ alt, className, src, style, letterb
       {hoverToPlay && (
         <canvas
           ref={canvas}
-          className={classNames(baseClassName, {
+          className={clsx(baseClassName, {
             'group-hover:invisible': hoverToPlay,
           })}
         />
diff --git a/app/soapbox/components/thumb-navigation-link.tsx b/app/soapbox/components/thumb-navigation-link.tsx
index fa9715847..fab88b810 100644
--- a/app/soapbox/components/thumb-navigation-link.tsx
+++ b/app/soapbox/components/thumb-navigation-link.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
 
@@ -33,7 +33,7 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax,
       {count !== undefined ? (
         <IconWithCounter
           src={src}
-          className={classNames({
+          className={clsx({
             'h-5 w-5': true,
             'text-gray-600': !active,
             'text-primary-500': active,
@@ -44,7 +44,7 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax,
       ) : (
         <Icon
           src={src}
-          className={classNames({
+          className={clsx({
             'h-5 w-5': true,
             'text-gray-600': !active,
             'text-primary-500': active,
@@ -56,7 +56,7 @@ const ThumbNavigationLink: React.FC<IThumbNavigationLink> = ({ count, countMax,
         tag='span'
         size='xs'
         weight='medium'
-        className={classNames({
+        className={clsx({
           'text-gray-600': !active,
           'text-primary-500': active,
         })}
diff --git a/app/soapbox/components/ui/accordion/accordion.tsx b/app/soapbox/components/ui/accordion/accordion.tsx
index 4554d641a..1462a4f6d 100644
--- a/app/soapbox/components/ui/accordion/accordion.tsx
+++ b/app/soapbox/components/ui/accordion/accordion.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -62,7 +62,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
 
       <div
         className={
-          classNames({
+          clsx({
             'p-4 rounded-b-lg border-t border-solid border-gray-100 dark:border-primary-900': true,
             'h-0 hidden': !expanded,
           })
diff --git a/app/soapbox/components/ui/avatar/avatar.tsx b/app/soapbox/components/ui/avatar/avatar.tsx
index 384fa354d..89ea8ff36 100644
--- a/app/soapbox/components/ui/avatar/avatar.tsx
+++ b/app/soapbox/components/ui/avatar/avatar.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 
 import StillImage from 'soapbox/components/still-image';
@@ -25,7 +25,7 @@ const Avatar = (props: IAvatar) => {
 
   return (
     <StillImage
-      className={classNames('rounded-full', className)}
+      className={clsx('rounded-full', className)}
       style={style}
       src={src}
       alt='Avatar'
diff --git a/app/soapbox/components/ui/banner/banner.tsx b/app/soapbox/components/ui/banner/banner.tsx
index 44e3cf162..b68fb4a94 100644
--- a/app/soapbox/components/ui/banner/banner.tsx
+++ b/app/soapbox/components/ui/banner/banner.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 
 interface IBanner {
@@ -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 z-50 py-8', {
+      className={clsx('fixed bottom-0 inset-x-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/button.tsx b/app/soapbox/components/ui/button/button.tsx
index 43805eee2..c256b706b 100644
--- a/app/soapbox/components/ui/button/button.tsx
+++ b/app/soapbox/components/ui/button/button.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { Link } from 'react-router-dom';
 
@@ -74,7 +74,7 @@ const Button = React.forwardRef<HTMLButtonElement, IButton>((props, ref): JSX.El
 
   const renderButton = () => (
     <button
-      className={classNames('space-x-2 rtl:space-x-reverse', themeClass, className)}
+      className={clsx('space-x-2 rtl:space-x-reverse', themeClass, className)}
       disabled={disabled}
       onClick={handleClick}
       ref={ref}
diff --git a/app/soapbox/components/ui/button/useButtonStyles.ts b/app/soapbox/components/ui/button/useButtonStyles.ts
index 898b313cd..2cc06f6e7 100644
--- a/app/soapbox/components/ui/button/useButtonStyles.ts
+++ b/app/soapbox/components/ui/button/useButtonStyles.ts
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 
 const themes = {
   primary:
@@ -38,7 +38,7 @@ const useButtonStyles = ({
   disabled,
   size,
 }: IButtonStyles) => {
-  const buttonStyle = classNames({
+  const buttonStyle = clsx({
     'inline-flex items-center border font-medium rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 appearance-none transition-all': true,
     'select-none disabled:opacity-75 disabled:cursor-default': disabled,
     [`${themes[theme]}`]: true,
diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx
index 3520fe823..767091f3b 100644
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/app/soapbox/components/ui/card/card.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
@@ -32,7 +32,7 @@ const Card = React.forwardRef<HTMLDivElement, ICard>(({ children, variant = 'def
   <div
     ref={ref}
     {...filteredProps}
-    className={classNames({
+    className={clsx({
       'bg-white dark:bg-primary-900 text-gray-900 dark:text-gray-100 shadow-lg dark:shadow-none overflow-hidden': variant === 'rounded',
       [sizes[size]]: variant === 'rounded',
     }, className)}
@@ -72,7 +72,7 @@ const CardHeader: React.FC<ICardHeader> = ({ className, children, backHref, onBa
   };
 
   return (
-    <HStack alignItems='center' space={2} className={classNames('mb-4', className)}>
+    <HStack alignItems='center' space={2} className={clsx('mb-4', className)}>
       {renderBackButton()}
 
       {children}
diff --git a/app/soapbox/components/ui/column/column.tsx b/app/soapbox/components/ui/column/column.tsx
index 5ccf3ac42..3cb746f0d 100644
--- a/app/soapbox/components/ui/column/column.tsx
+++ b/app/soapbox/components/ui/column/column.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 
@@ -74,7 +74,7 @@ const Column: React.FC<IColumn> = React.forwardRef((props, ref: React.ForwardedR
           <ColumnHeader
             label={label}
             backHref={backHref}
-            className={classNames({ 'px-4 pt-4 sm:p-0': transparent })}
+            className={clsx({ 'px-4 pt-4 sm:p-0': transparent })}
           />
         )}
 
diff --git a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
index 371afb6eb..cae7ae813 100644
--- a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
+++ b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useRef } from 'react';
 
 import { Emoji, HStack } from 'soapbox/components/ui';
@@ -19,7 +19,7 @@ interface IEmojiButton {
 /** Clickable emoji button that scales when hovered. */
 const EmojiButton: React.FC<IEmojiButton> = ({ emoji, className, onClick, onKeyDown, tabIndex }): JSX.Element => {
   return (
-    <button className={classNames(className)} onClick={onClick} onKeyDown={onKeyDown} tabIndex={tabIndex}>
+    <button className={clsx(className)} onClick={onClick} onKeyDown={onKeyDown} tabIndex={tabIndex}>
       <Emoji className='h-8 w-8 duration-100' emoji={emoji} />
     </button>
   );
@@ -101,7 +101,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({ emojis, onReact, onUnfocus, v
 
   return (
     <HStack
-      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')}
+      className={clsx('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}
     >
       {emojiList.map((emoji, i) => (
diff --git a/app/soapbox/components/ui/hstack/hstack.tsx b/app/soapbox/components/ui/hstack/hstack.tsx
index d648c036e..69488711f 100644
--- a/app/soapbox/components/ui/hstack/hstack.tsx
+++ b/app/soapbox/components/ui/hstack/hstack.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { forwardRef } from 'react';
 
 const justifyContentOptions = {
@@ -61,14 +61,14 @@ const HStack = forwardRef<HTMLDivElement, IHStack>((props, ref) => {
     <Elem
       {...filteredProps}
       ref={ref}
-      className={classNames('flex rtl:space-x-reverse', {
+      className={clsx('flex rtl:space-x-reverse', {
         // @ts-ignore
         [alignItemsOptions[alignItems]]: typeof alignItems !== 'undefined',
         // @ts-ignore
         [justifyContentOptions[justifyContent]]: typeof justifyContent !== 'undefined',
         // @ts-ignore
         [spaces[space]]: typeof space !== 'undefined',
-        'flex-grow': grow,
+        'grow': grow,
         'flex-wrap': wrap,
       }, className)}
     />
diff --git a/app/soapbox/components/ui/icon-button/icon-button.tsx b/app/soapbox/components/ui/icon-button/icon-button.tsx
index a8c05af47..47d89044c 100644
--- a/app/soapbox/components/ui/icon-button/icon-button.tsx
+++ b/app/soapbox/components/ui/icon-button/icon-button.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 
 import SvgIcon from '../icon/svg-icon';
@@ -25,7 +25,7 @@ const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef
     <button
       ref={ref}
       type='button'
-      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', {
+      className={clsx('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 a225c2a45..83fd5917c 100644
--- a/app/soapbox/components/ui/input/input.tsx
+++ b/app/soapbox/components/ui/input/input.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -59,7 +59,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
     return (
       <div
         className={
-          classNames('relative', {
+          clsx('relative', {
             'rounded-md': theme !== 'search',
             'rounded-full': theme === 'search',
             'mt-1': !String(outerClassName).includes('mt-'),
@@ -83,7 +83,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
           {...filteredProps}
           type={revealed ? 'text' : type}
           ref={ref}
-          className={classNames('text-base placeholder:text-gray-600 dark:placeholder:text-gray-600', {
+          className={clsx('text-base placeholder:text-gray-600 dark:placeholder:text-gray-600', {
             'text-gray-900 dark:text-gray-100 block w-full sm:text-sm dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
               ['normal', 'search'].includes(theme),
             'rounded-md bg-white dark:bg-gray-900 border-gray-400 dark:border-gray-800': theme === 'normal',
diff --git a/app/soapbox/components/ui/layout/layout.tsx b/app/soapbox/components/ui/layout/layout.tsx
index bf7b21022..db3288d59 100644
--- a/app/soapbox/components/ui/layout/layout.tsx
+++ b/app/soapbox/components/ui/layout/layout.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import StickyBox from 'react-sticky-box';
 
@@ -40,7 +40,7 @@ const Sidebar: React.FC<ISidebar> = ({ children }) => (
 /** Center column container in the UI. */
 const Main: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({ children, className }) => (
   <main
-    className={classNames({
+    className={clsx({
       'md:col-span-12 lg:col-span-9 xl:col-span-6 pb-36': true,
     }, className)}
   >
diff --git a/app/soapbox/components/ui/menu/menu.tsx b/app/soapbox/components/ui/menu/menu.tsx
index a4208d6c8..8dc46bcb1 100644
--- a/app/soapbox/components/ui/menu/menu.tsx
+++ b/app/soapbox/components/ui/menu/menu.tsx
@@ -8,7 +8,7 @@ import {
   MenuListProps,
 } from '@reach/menu-button';
 import { positionDefault, positionRight } from '@reach/popover';
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 
 import './menu.css';
@@ -28,7 +28,7 @@ const MenuList: React.FC<IMenuList> = (props) => {
       <MenuItems
         onKeyDown={(event) => event.nativeEvent.stopImmediatePropagation()}
         className={
-          classNames(className, 'dark:bg-primary-900 shadow-menu rounded-lg bg-white py-1')
+          clsx(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 f890385d0..8e867b697 100644
--- a/app/soapbox/components/ui/modal/modal.tsx
+++ b/app/soapbox/components/ui/modal/modal.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -87,12 +87,12 @@ const Modal: React.FC<IModal> = ({
   }, [skipFocus, buttonRef]);
 
   return (
-    <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 data-testid='modal' className={clsx('dark:bg-primary-900 pointer-events-auto mx-auto block w-full 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('flex w-full items-center gap-2', {
+              className={clsx('flex w-full items-center gap-2', {
                 'flex-row-reverse': closePosition === 'left',
               })}
             >
@@ -121,7 +121,7 @@ const Modal: React.FC<IModal> = ({
 
       {confirmationAction && (
         <HStack className='mt-5' justifyContent='between' data-testid='modal-actions'>
-          <div className={classNames({ 'flex-grow': !confirmationFullWidth })}>
+          <div className={clsx({ 'grow': !confirmationFullWidth })}>
             {cancelAction && (
               <Button
                 theme='tertiary'
@@ -132,7 +132,7 @@ const Modal: React.FC<IModal> = ({
             )}
           </div>
 
-          <HStack space={2} className={classNames({ 'flex-grow': confirmationFullWidth })}>
+          <HStack space={2} className={clsx({ 'grow': confirmationFullWidth })}>
             {secondaryAction && (
               <Button
                 theme='secondary'
diff --git a/app/soapbox/components/ui/stack/stack.tsx b/app/soapbox/components/ui/stack/stack.tsx
index fed361e93..622a5c549 100644
--- a/app/soapbox/components/ui/stack/stack.tsx
+++ b/app/soapbox/components/ui/stack/stack.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 
 const spaces = {
@@ -52,14 +52,14 @@ const Stack = React.forwardRef<HTMLDivElement, IStack>((props, ref: React.Legacy
     <Elem
       {...filteredProps}
       ref={ref}
-      className={classNames('flex flex-col', {
+      className={clsx('flex flex-col', {
         // @ts-ignore
         [spaces[space]]: typeof space !== 'undefined',
         // @ts-ignore
         [alignItemsOptions[alignItems]]: typeof alignItems !== 'undefined',
         // @ts-ignore
         [justifyContentOptions[justifyContent]]: typeof justifyContent !== 'undefined',
-        'flex-grow': grow,
+        'grow': grow,
       }, className)}
     />
   );
diff --git a/app/soapbox/components/ui/tabs/tabs.tsx b/app/soapbox/components/ui/tabs/tabs.tsx
index 7febd332a..4a2ed1580 100644
--- a/app/soapbox/components/ui/tabs/tabs.tsx
+++ b/app/soapbox/components/ui/tabs/tabs.tsx
@@ -5,7 +5,7 @@ import {
   Tab as ReachTab,
   useTabsContext,
 } from '@reach/tabs';
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
 
@@ -50,7 +50,7 @@ const AnimatedTabs: React.FC<IAnimatedInterface> = ({ children, ...rest }) => {
           style={{ top }}
         />
         <div
-          className={classNames('bg-primary-500 absolute h-[3px] transition-all duration-200', {
+          className={clsx('bg-primary-500 absolute h-[3px] transition-all duration-200', {
             'hidden': top <= 0,
           })}
           style={{ left, top, width }}
diff --git a/app/soapbox/components/ui/text/text.tsx b/app/soapbox/components/ui/text/text.tsx
index 111c65287..b31204e15 100644
--- a/app/soapbox/components/ui/text/text.tsx
+++ b/app/soapbox/components/ui/text/text.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 
 const themes = {
@@ -115,7 +115,7 @@ const Text = React.forwardRef<any, IText>(
           textDecoration: tag === 'abbr' ? 'underline dotted' : undefined,
           direction,
         }}
-        className={classNames({
+        className={clsx({
           'cursor-default': tag === 'abbr',
           truncate: truncate,
           [sizes[size]]: true,
diff --git a/app/soapbox/components/ui/textarea/textarea.tsx b/app/soapbox/components/ui/textarea/textarea.tsx
index 745325ea9..4b2274a21 100644
--- a/app/soapbox/components/ui/textarea/textarea.tsx
+++ b/app/soapbox/components/ui/textarea/textarea.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useState } from 'react';
 
 interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'onKeyDown' | 'onPaste' | 'required' | 'disabled' | 'rows' | 'readOnly'> {
@@ -72,7 +72,7 @@ const Textarea = React.forwardRef(({
       ref={ref}
       rows={rows}
       onChange={handleChange}
-      className={classNames({
+      className={clsx({
         'bg-white dark:bg-transparent shadow-sm block w-full sm:text-sm rounded-md text-gray-900 dark:text-gray-100 placeholder:text-gray-600 dark:placeholder:text-gray-600 border-gray-400 dark:border-gray-800 dark:ring-1 dark:ring-gray-800 focus:ring-primary-500 focus:border-primary-500 dark:focus:ring-primary-500 dark:focus:border-primary-500':
           true,
         'font-mono': isCodeEditor,
diff --git a/app/soapbox/components/ui/toast/toast.tsx b/app/soapbox/components/ui/toast/toast.tsx
index 341db8309..7285bd340 100644
--- a/app/soapbox/components/ui/toast/toast.tsx
+++ b/app/soapbox/components/ui/toast/toast.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import toast, { Toast as RHToast } from 'react-hot-toast';
 import { FormattedMessage } from 'react-intl';
@@ -102,7 +102,7 @@ const Toast = (props: IToast) => {
     <div
       data-testid='toast'
       className={
-        classNames({
+        clsx({
           'p-4 pointer-events-auto w-full max-w-sm overflow-hidden rounded-lg bg-white dark:bg-gray-900 shadow-lg dark:ring-2 dark:ring-gray-800': true,
           'animate-enter': t.visible,
           'animate-leave': !t.visible,
@@ -142,4 +142,4 @@ const Toast = (props: IToast) => {
   );
 };
 
-export default Toast;
\ No newline at end of file
+export default Toast;
diff --git a/app/soapbox/components/upload.tsx b/app/soapbox/components/upload.tsx
index eaa5bf019..2abf0bbdd 100644
--- a/app/soapbox/components/upload.tsx
+++ b/app/soapbox/components/upload.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
 import React, { useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
@@ -152,13 +152,13 @@ const Upload: React.FC<IUpload> = ({
       <Motion defaultStyle={{ scale: 0.8 }} style={{ scale: spring(1, { stiffness: 180, damping: 12 }) }}>
         {({ scale }) => (
           <div
-            className={classNames('compose-form__upload-thumbnail',  mediaType)}
+            className={clsx('compose-form__upload-thumbnail',  mediaType)}
             style={{
               transform: `scale(${scale})`,
               backgroundImage: mediaType === 'image' ? `url(${media.preview_url})` : undefined,
               backgroundPosition: typeof x === 'number' && typeof y === 'number' ? `${x}% ${y}%` : undefined }}
           >
-            <div className={classNames('compose-form__upload__actions', { active })}>
+            <div className={clsx('compose-form__upload__actions', { active })}>
               {onDelete && (
                 <IconButton
                   onClick={handleUndoClick}
@@ -178,7 +178,7 @@ const Upload: React.FC<IUpload> = ({
             </div>
 
             {onDescriptionChange && (
-              <div className={classNames('compose-form__upload-description', { active })}>
+              <div className={clsx('compose-form__upload-description', { active })}>
                 <label>
                   <span style={{ display: 'none' }}>{intl.formatMessage(messages.description)}</span>
 
diff --git a/app/soapbox/components/validation-checkmark.tsx b/app/soapbox/components/validation-checkmark.tsx
index 6b6402ac1..c2d5da70d 100644
--- a/app/soapbox/components/validation-checkmark.tsx
+++ b/app/soapbox/components/validation-checkmark.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 
 import { HStack, Icon, Text } from 'soapbox/components/ui';
@@ -13,7 +13,7 @@ const ValidationCheckmark = ({ isValid, text }: IValidationCheckmark) => {
     <HStack alignItems='center' space={2} data-testid='validation-checkmark'>
       <Icon
         src={isValid ? require('@tabler/icons/check.svg') : require('@tabler/icons/point.svg')}
-        className={classNames({
+        className={clsx({
           'w-4 h-4': true,
           'text-gray-400 dark:text-gray-600 dark:fill-gray-600 fill-gray-400': !isValid,
           'text-success-500': isValid,
diff --git a/app/soapbox/components/verification-badge.tsx b/app/soapbox/components/verification-badge.tsx
index 1abe6ed72..e56617578 100644
--- a/app/soapbox/components/verification-badge.tsx
+++ b/app/soapbox/components/verification-badge.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
@@ -25,7 +25,7 @@ const VerificationBadge: React.FC<IVerificationBadge> = ({ className }) => {
 
   return (
     <span className='verified-icon' data-testid='verified-badge'>
-      <Element className={classNames('text-accent-500 w-4', className)} src={icon} alt={intl.formatMessage(messages.verified)} />
+      <Element className={clsx('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 8e96b963e..0f1c2253d 100644
--- a/app/soapbox/containers/soapbox.tsx
+++ b/app/soapbox/containers/soapbox.tsx
@@ -1,7 +1,7 @@
 'use strict';
 
 import { QueryClientProvider } from '@tanstack/react-query';
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useState, useEffect } from 'react';
 import { Toaster } from 'react-hot-toast';
 import { IntlProvider } from 'react-intl';
@@ -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('h-full bg-white text-base dark:bg-gray-800', {
+  const bodyClass = clsx('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'),
@@ -280,7 +280,7 @@ const SoapboxHead: React.FC<ISoapboxHead> = ({ children }) => {
   return (
     <>
       <Helmet>
-        <html lang={locale} className={classNames('h-full', { dark: darkMode })} />
+        <html lang={locale} className={clsx('h-full', { dark: darkMode })} />
         <body className={bodyClass} dir={direction} />
         {themeCss && <style id='theme' type='text/css'>{`:root{${themeCss}}`}</style>}
         {darkMode && <style type='text/css'>{':root { color-scheme: dark; }'}</style>}
diff --git a/app/soapbox/features/account-gallery/components/media-item.tsx b/app/soapbox/features/account-gallery/components/media-item.tsx
index 4a664a03f..6e0bae840 100644
--- a/app/soapbox/features/account-gallery/components/media-item.tsx
+++ b/app/soapbox/features/account-gallery/components/media-item.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useState } from 'react';
 
 import Blurhash from 'soapbox/components/blurhash';
@@ -83,7 +83,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
       conditionalAttributes.autoPlay = true;
     }
     thumbnail = (
-      <div className={classNames('media-gallery__gifv', { autoplay: autoPlayGif })}>
+      <div className={clsx('media-gallery__gifv', { autoplay: autoPlayGif })}>
         <video
           className='media-gallery__item-gifv-thumbnail'
           aria-label={attachment.description}
@@ -125,7 +125,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
       <a className='media-gallery__item-thumbnail aspect-square' href={status.get('url')} target='_blank' onClick={handleClick} title={title}>
         <Blurhash
           hash={attachment.get('blurhash')}
-          className={classNames('media-gallery__preview', {
+          className={clsx('media-gallery__preview', {
             'media-gallery__preview--hidden': visible,
           })}
         />
diff --git a/app/soapbox/features/aliases/components/search.tsx b/app/soapbox/features/aliases/components/search.tsx
index 2466e22b1..550f307ce 100644
--- a/app/soapbox/features/aliases/components/search.tsx
+++ b/app/soapbox/features/aliases/components/search.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -53,7 +53,7 @@ const Search: React.FC = () => {
         />
 
         <div role='button' tabIndex={hasValue ? 0 : -1} className='search__icon' onClick={handleClear}>
-          <Icon src={require('@tabler/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
+          <Icon src={require('@tabler/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('svg-icon--backspace', { active: hasValue })} />
         </div>
       </label>
       <Button onClick={handleSubmit}>{intl.formatMessage(messages.searchTitle)}</Button>
diff --git a/app/soapbox/features/audio/index.tsx b/app/soapbox/features/audio/index.tsx
index 696a77857..7ba8c63a5 100644
--- a/app/soapbox/features/audio/index.tsx
+++ b/app/soapbox/features/audio/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
@@ -437,7 +437,7 @@ const Audio: React.FC<IAudio> = (props) => {
 
   return (
     <div
-      className={classNames('audio-player', { editable })}
+      className={clsx('audio-player', { editable })}
       ref={player}
       style={{
         backgroundColor: _getBackgroundColor(),
@@ -503,7 +503,7 @@ const Audio: React.FC<IAudio> = (props) => {
         />
 
         <span
-          className={classNames('video-player__seek__handle', { active: dragging })}
+          className={clsx('video-player__seek__handle', { active: dragging })}
           tabIndex={0}
           style={{ left: `${progress}%`, backgroundColor: _getAccentColor() }}
           onKeyDown={handleAudioKeyDown}
@@ -535,7 +535,7 @@ const Audio: React.FC<IAudio> = (props) => {
             </button>
 
             <div
-              className={classNames('video-player__volume', { active: hovered })}
+              className={clsx('video-player__volume', { active: hovered })}
               ref={slider}
               onMouseDown={handleVolumeMouseDown}
             >
diff --git a/app/soapbox/features/chats/components/chat-list.tsx b/app/soapbox/features/chats/components/chat-list.tsx
index 649d335d2..a656afba9 100644
--- a/app/soapbox/features/chats/components/chat-list.tsx
+++ b/app/soapbox/features/chats/components/chat-list.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useRef, useState } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
@@ -74,13 +74,13 @@ const ChatList: React.FC<IChatList> = ({ onClickChat, useWindowScroll = false, s
 
       <>
         <div
-          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', {
+          className={clsx('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('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', {
+          className={clsx('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-intro.tsx b/app/soapbox/features/chats/components/chat-message-list-intro.tsx
index a827114c8..3e63be246 100644
--- a/app/soapbox/features/chats/components/chat-message-list-intro.tsx
+++ b/app/soapbox/features/chats/components/chat-message-list-intro.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useHistory } from 'react-router-dom';
@@ -60,7 +60,7 @@ const ChatMessageListIntro = () => {
       alignItems='center'
       space={4}
       className={
-        classNames({
+        clsx({
           'w-3/4 mx-auto': needsAcceptance,
           'py-6': true, // needs to be padding to prevent Virtuoso bugs
         })
diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx
index 863bfd7d7..24fd973f3 100644
--- a/app/soapbox/features/chats/components/chat-message-list.tsx
+++ b/app/soapbox/features/chats/components/chat-message-list.tsx
@@ -1,5 +1,5 @@
 import { useMutation } from '@tanstack/react-query';
-import classNames from 'clsx';
+import clsx from 'clsx';
 import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 import escape from 'lodash/escape';
 import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
@@ -281,20 +281,20 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
       <div key={chatMessage.id} className='group' data-testid='chat-message'>
         <Stack
           space={1.5}
-          className={classNames({
+          className={clsx({
             'ml-auto': isMyMessage,
           })}
         >
           <HStack
             alignItems='center'
             justifyContent={isMyMessage ? 'end' : 'start'}
-            className={classNames({
+            className={clsx({
               'opacity-50': chatMessage.pending,
             })}
           >
             {menu.length > 0 && (
               <div
-                className={classNames({
+                className={clsx({
                   'hidden focus:block group-hover:block text-gray-500': true,
                   'mr-2 order-1': isMyMessage,
                   'ml-2 order-2': !isMyMessage,
@@ -314,7 +314,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
 
             <Stack
               space={0.5}
-              className={classNames({
+              className={clsx({
                 'max-w-[85%]': true,
                 'flex-1': chatMessage.attachment,
                 'order-2': isMyMessage,
@@ -329,7 +329,7 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
                   <div
                     title={getFormattedTimestamp(chatMessage)}
                     className={
-                      classNames({
+                      clsx({
                         'text-ellipsis break-words relative rounded-md py-2 px-3 max-w-full space-y-2 [&_.mention]:underline': true,
                         'rounded-tr-sm': chatMessage.attachment && isMyMessage,
                         'rounded-tl-sm': chatMessage.attachment && !isMyMessage,
@@ -358,12 +358,12 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
           <HStack
             alignItems='center'
             space={2}
-            className={classNames({
+            className={clsx({
               'ml-auto': isMyMessage,
             })}
           >
             <div
-              className={classNames({
+              className={clsx({
                 'text-right': isMyMessage,
                 'order-2': !isMyMessage,
               })}
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 62ddae9d6..81620a4cf 100644
--- a/app/soapbox/features/chats/components/chat-page/chat-page.tsx
+++ b/app/soapbox/features/chats/components/chat-page/chat-page.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import { matchPath, Route, Switch, useHistory } from 'react-router-dom';
 
@@ -68,7 +68,7 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
           data-testid='chat-page'
         >
           <Stack
-            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', {
+            className={clsx('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 h-full overflow-hidden sm:col-span-6', {
+            className={clsx('col-span-9 h-full overflow-hidden sm:col-span-6', {
               'hidden sm:block': !isSidebarHidden,
             })}
           >
diff --git a/app/soapbox/features/chats/components/chat-search/results.tsx b/app/soapbox/features/chats/components/chat-search/results.tsx
index 0ed34551d..2f3583053 100644
--- a/app/soapbox/features/chats/components/chat-search/results.tsx
+++ b/app/soapbox/features/chats/components/chat-search/results.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useCallback, useState } from 'react';
 import { Virtuoso } from 'react-virtuoso';
 
@@ -63,13 +63,13 @@ const Results = ({ accountSearchResult, onSelect }: IResults) => {
 
       <>
         <div
-          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', {
+          className={clsx('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('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', {
+          className={clsx('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.tsx b/app/soapbox/features/chats/components/chat.tsx
index d15825f03..c04032666 100644
--- a/app/soapbox/features/chats/components/chat.tsx
+++ b/app/soapbox/features/chats/components/chat.tsx
@@ -1,5 +1,5 @@
 import { AxiosError } from 'axios';
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { MutableRefObject, useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -159,7 +159,7 @@ const Chat: React.FC<ChatInterface> = ({ chat, inputRef, className }) => {
   }, [chat.id, inputRef?.current]);
 
   return (
-    <Stack className={classNames('flex flex-grow overflow-hidden', className)} onMouseOver={handleMouseOver}>
+    <Stack className={clsx('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 7888d2589..16ac6f839 100644
--- a/app/soapbox/features/chats/components/ui/pane.tsx
+++ b/app/soapbox/features/chats/components/ui/pane.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 
 interface IPane {
@@ -18,7 +18,7 @@ const Pane: React.FC<IPane> = ({ isOpen = false, index, children, main = false }
 
   return (
     <div
-      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', {
+      className={clsx('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/compose-form-button.tsx b/app/soapbox/features/compose/components/compose-form-button.tsx
index f88225913..a76a4bf9c 100644
--- a/app/soapbox/features/compose/components/compose-form-button.tsx
+++ b/app/soapbox/features/compose/components/compose-form-button.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 
 import { IconButton } from 'soapbox/components/ui';
@@ -22,7 +22,7 @@ const ComposeFormButton: React.FC<IComposeFormButton> = ({
     <div>
       <IconButton
         className={
-          classNames({
+          clsx({
             'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': !active,
             'text-primary-500 hover:text-primary-600 dark:text-primary-500 dark:hover:text-primary-400': active,
           })
diff --git a/app/soapbox/features/compose/components/compose-form.tsx b/app/soapbox/features/compose/components/compose-form.tsx
index cf140149a..c901e047c 100644
--- a/app/soapbox/features/compose/components/compose-form.tsx
+++ b/app/soapbox/features/compose/components/compose-form.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { defineMessages, FormattedMessage, MessageDescriptor, useIntl } from 'react-intl';
 import { Link, useHistory } from 'react-router-dom';
@@ -334,7 +334,7 @@ const ComposeForm = <ID extends string>({ id, shouldCondense, autoFocus, clickab
       <QuotedStatusContainer composeId={id} />
 
       <div
-        className={classNames('flex flex-wrap items-center justify-between', {
+        className={clsx('flex flex-wrap items-center justify-between', {
           'hidden': condensed,
         })}
       >
diff --git a/app/soapbox/features/compose/components/emoji-picker/emoji-picker-dropdown.tsx b/app/soapbox/features/compose/components/emoji-picker/emoji-picker-dropdown.tsx
index c65f8ecad..a97495840 100644
--- a/app/soapbox/features/compose/components/emoji-picker/emoji-picker-dropdown.tsx
+++ b/app/soapbox/features/compose/components/emoji-picker/emoji-picker-dropdown.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 import React, { useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -180,7 +180,7 @@ const EmojiPickerDropdown: React.FC<IEmojiPickerDropdown> = ({ onPickEmoji, butt
         tabIndex={0}
       >
         {button || <IconButton
-          className={classNames({
+          className={clsx({
             'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': true,
             'pulse-loading': active && loading,
           })}
diff --git a/app/soapbox/features/compose/components/emoji-picker/emoji-picker-menu.tsx b/app/soapbox/features/compose/components/emoji-picker/emoji-picker-menu.tsx
index 87362cef5..4cead554d 100644
--- a/app/soapbox/features/compose/components/emoji-picker/emoji-picker-menu.tsx
+++ b/app/soapbox/features/compose/components/emoji-picker/emoji-picker-menu.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
@@ -136,7 +136,7 @@ const EmojiPickerMenu: React.FC<IEmojiPickerMenu> = ({
   const title = intl.formatMessage(messages.emoji);
 
   return (
-    <div className={classNames('emoji-picker-dropdown__menu', { selecting: modifierOpen })} style={style} ref={node}>
+    <div className={clsx('emoji-picker-dropdown__menu', { selecting: modifierOpen })} style={style} ref={node}>
       <EmojiPicker
         perLine={8}
         emojiSize={22}
diff --git a/app/soapbox/features/compose/components/privacy-dropdown.tsx b/app/soapbox/features/compose/components/privacy-dropdown.tsx
index 17062c3ce..652a7560d 100644
--- a/app/soapbox/features/compose/components/privacy-dropdown.tsx
+++ b/app/soapbox/features/compose/components/privacy-dropdown.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import React, { useState, useRef, useEffect } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
@@ -122,7 +122,7 @@ const PrivacyDropdownMenu: React.FC<IPrivacyDropdownMenu> = ({ style, items, pla
         // react-overlays
         <div className={`privacy-dropdown__dropdown ${placement}`} style={{ ...style, opacity: opacity, transform: mounted ? `scale(${scaleX}, ${scaleY})` : undefined }} role='listbox' ref={node}>
           {items.map(item => (
-            <div role='option' tabIndex={0} key={item.value} data-index={item.value} onKeyDown={handleKeyDown} onClick={handleClick} className={classNames('privacy-dropdown__option', { active: item.value === value })} aria-selected={item.value === value} ref={item.value === value ? focusedItem : null}>
+            <div role='option' tabIndex={0} key={item.value} data-index={item.value} onKeyDown={handleKeyDown} onClick={handleClick} className={clsx('privacy-dropdown__option', { active: item.value === value })} aria-selected={item.value === value} ref={item.value === value ? focusedItem : null}>
               <div className='privacy-dropdown__option__icon'>
                 <Icon src={item.icon} />
               </div>
@@ -239,10 +239,10 @@ const PrivacyDropdown: React.FC<IPrivacyDropdown> = ({
   const valueOption = options.find(item => item.value === value);
 
   return (
-    <div className={classNames('privacy-dropdown', placement, { active: open })} onKeyDown={handleKeyDown} ref={node}>
-      <div className={classNames('privacy-dropdown__value', { active: valueOption && options.indexOf(valueOption) === 0 })}>
+    <div className={clsx('privacy-dropdown', placement, { active: open })} onKeyDown={handleKeyDown} ref={node}>
+      <div className={clsx('privacy-dropdown__value', { active: valueOption && options.indexOf(valueOption) === 0 })}>
         <IconButton
-          className={classNames({
+          className={clsx({
             '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,
           })}
diff --git a/app/soapbox/features/compose/components/reply-indicator.tsx b/app/soapbox/features/compose/components/reply-indicator.tsx
index b9c7418e5..0d80dd684 100644
--- a/app/soapbox/features/compose/components/reply-indicator.tsx
+++ b/app/soapbox/features/compose/components/reply-indicator.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 
 import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
@@ -35,7 +35,7 @@ const ReplyIndicator: React.FC<IReplyIndicator> = ({ className, status, hideActi
   }
 
   return (
-    <Stack space={2} className={classNames('rounded-lg bg-gray-100 p-4 dark:bg-gray-800', className)}>
+    <Stack space={2} className={clsx('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/compose/components/schedule-form.tsx b/app/soapbox/features/compose/components/schedule-form.tsx
index 22e10daef..9c1ee5a6c 100644
--- a/app/soapbox/features/compose/components/schedule-form.tsx
+++ b/app/soapbox/features/compose/components/schedule-form.tsx
@@ -1,6 +1,6 @@
 'use strict';
 
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -68,7 +68,7 @@ const ScheduleForm: React.FC<IScheduleForm> = ({ composeId }) => {
             placeholderText={intl.formatMessage(messages.schedule)}
             filterDate={isCurrentOrFutureDate}
             filterTime={isFiveMinutesFromNow}
-            className={classNames({
+            className={clsx({
               'has-error': !isFiveMinutesFromNow(scheduledAt),
             })}
           />)}
diff --git a/app/soapbox/features/compose/components/search-results.tsx b/app/soapbox/features/compose/components/search-results.tsx
index 0e5db15c9..1729def21 100644
--- a/app/soapbox/features/compose/components/search-results.tsx
+++ b/app/soapbox/features/compose/components/search-results.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useEffect, useRef } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
@@ -260,10 +260,10 @@ const SearchResults = () => {
           onLoadMore={handleLoadMore}
           placeholderComponent={placeholderComponent}
           placeholderCount={20}
-          className={classNames({
+          className={clsx({
             'divide-gray-200 dark:divide-gray-800 divide-solid divide-y': selectedFilter === 'statuses',
           })}
-          itemClassName={classNames({
+          itemClassName={clsx({
             'pb-4': selectedFilter === 'accounts',
             'pb-3': selectedFilter === 'hashtags',
           })}
diff --git a/app/soapbox/features/compose/components/search.tsx b/app/soapbox/features/compose/components/search.tsx
index 9e1c21a44..5e177bb45 100644
--- a/app/soapbox/features/compose/components/search.tsx
+++ b/app/soapbox/features/compose/components/search.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import debounce from 'lodash/debounce';
 import React, { useCallback } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
@@ -154,12 +154,12 @@ const Search = (props: ISearch) => {
         >
           <SvgIcon
             src={require('@tabler/icons/search.svg')}
-            className={classNames('h-4 w-4 text-gray-600', { hidden: hasValue })}
+            className={clsx('h-4 w-4 text-gray-600', { hidden: hasValue })}
           />
 
           <SvgIcon
             src={require('@tabler/icons/x.svg')}
-            className={classNames('h-4 w-4 text-gray-600', { hidden: !hasValue })}
+            className={clsx('h-4 w-4 text-gray-600', { hidden: !hasValue })}
             aria-label={intl.formatMessage(messages.placeholder)}
           />
         </div>
diff --git a/app/soapbox/features/compose/components/spoiler-input.tsx b/app/soapbox/features/compose/components/spoiler-input.tsx
index 5aeb6caa7..2c849c8bf 100644
--- a/app/soapbox/features/compose/components/spoiler-input.tsx
+++ b/app/soapbox/features/compose/components/spoiler-input.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -39,7 +39,7 @@ const SpoilerInput = React.forwardRef<AutosuggestInput, ISpoilerInput>(({
   return (
     <Stack
       space={4}
-      className={classNames({
+      className={clsx({
         'relative transition-height': true,
         'hidden': !compose.spoiler,
       })}
diff --git a/app/soapbox/features/compose/components/text-character-counter.tsx b/app/soapbox/features/compose/components/text-character-counter.tsx
index 6d07fa659..024ff1e60 100644
--- a/app/soapbox/features/compose/components/text-character-counter.tsx
+++ b/app/soapbox/features/compose/components/text-character-counter.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { length } from 'stringz';
 
@@ -11,7 +11,7 @@ const TextCharacterCounter: React.FC<ITextCharacterCounter> = ({ text, max }) =>
   const checkRemainingText = (diff: number) => {
     return (
       <span
-        className={classNames('text-sm font-medium', {
+        className={clsx('text-sm font-medium', {
           'text-gray-700': diff >= 0,
           'text-secondary-600': diff < 0,
         })}
diff --git a/app/soapbox/features/compose/components/upload-form.tsx b/app/soapbox/features/compose/components/upload-form.tsx
index e9c116b24..dc420de49 100644
--- a/app/soapbox/features/compose/components/upload-form.tsx
+++ b/app/soapbox/features/compose/components/upload-form.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 
 import { useCompose } from 'soapbox/hooks';
@@ -14,7 +14,7 @@ interface IUploadForm {
 
 const UploadForm: React.FC<IUploadForm> = ({ composeId }) => {
   const mediaIds = useCompose(composeId).media_attachments.map((item: AttachmentEntity) => item.id);
-  const classes = classNames('compose-form__uploads-wrapper', {
+  const classes = clsx('compose-form__uploads-wrapper', {
     'contains-media': mediaIds.size !== 0,
   });
 
diff --git a/app/soapbox/features/developers/components/indicator.tsx b/app/soapbox/features/developers/components/indicator.tsx
index 5cb7763b5..a3cd84850 100644
--- a/app/soapbox/features/developers/components/indicator.tsx
+++ b/app/soapbox/features/developers/components/indicator.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 
 interface IIndicator {
@@ -10,7 +10,7 @@ interface IIndicator {
 const Indicator: React.FC<IIndicator> = ({ state = 'inactive', size = 'sm' }) => {
   return (
     <div
-      className={classNames('rounded-full outline-double', {
+      className={clsx('rounded-full outline-double', {
         'w-1.5 h-1.5 shadow-sm': size === 'sm',
         'bg-green-500 outline-green-400': state === 'active',
         'bg-yellow-500 outline-yellow-400': state === 'pending',
@@ -21,4 +21,4 @@ const Indicator: React.FC<IIndicator> = ({ state = 'inactive', size = 'sm' }) =>
   );
 };
 
-export default Indicator;
\ No newline at end of file
+export default Indicator;
diff --git a/app/soapbox/features/directory/components/account-card.tsx b/app/soapbox/features/directory/components/account-card.tsx
index 6120622bb..237abf20f 100644
--- a/app/soapbox/features/directory/components/account-card.tsx
+++ b/app/soapbox/features/directory/components/account-card.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -59,7 +59,7 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
         <Text
           truncate
           align='left'
-          className={classNames('[&_br]:hidden [&_p]:hidden [&_p:first-child]:inline [&_p:first-child]:truncate')}
+          className={clsx('[&_br]:hidden [&_p]:hidden [&_p:first-child]:inline [&_p:first-child]:truncate')}
           dangerouslySetInnerHTML={{ __html: account.note_emojified || '&nbsp;' }}
         />
       </Stack>
diff --git a/app/soapbox/features/directory/index.tsx b/app/soapbox/features/directory/index.tsx
index 13ad6b816..31fde9048 100644
--- a/app/soapbox/features/directory/index.tsx
+++ b/app/soapbox/features/directory/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useLocation } from 'react-router-dom';
@@ -79,7 +79,7 @@ const Directory = () => {
 
         <div
           className={
-            classNames({
+            clsx({
               'grid grid-cols-1 sm:grid-cols-2 gap-2.5': true,
               'opacity-30': isLoading,
             })
diff --git a/app/soapbox/features/edit-profile/index.tsx b/app/soapbox/features/edit-profile/index.tsx
index 99c06544f..044e9b70a 100644
--- a/app/soapbox/features/edit-profile/index.tsx
+++ b/app/soapbox/features/edit-profile/index.tsx
@@ -152,14 +152,14 @@ const ProfileField: StreamfieldComponent<AccountCredentialsField> = ({ value, on
     <HStack space={2} grow>
       <Input
         type='text'
-        outerClassName='w-2/5 flex-grow'
+        outerClassName='w-2/5 grow'
         value={value.name}
         onChange={handleChange('name')}
         placeholder={intl.formatMessage(messages.metaFieldLabel)}
       />
       <Input
         type='text'
-        outerClassName='w-3/5 flex-grow'
+        outerClassName='w-3/5 grow'
         value={value.value}
         onChange={handleChange('value')}
         placeholder={intl.formatMessage(messages.metaFieldContent)}
diff --git a/app/soapbox/features/federation-restrictions/components/restricted-instance.tsx b/app/soapbox/features/federation-restrictions/components/restricted-instance.tsx
index 97c838984..2dd5aedb8 100644
--- a/app/soapbox/features/federation-restrictions/components/restricted-instance.tsx
+++ b/app/soapbox/features/federation-restrictions/components/restricted-instance.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useState } from 'react';
 
 import Icon from 'soapbox/components/icon';
@@ -27,12 +27,12 @@ const RestrictedInstance: React.FC<IRestrictedInstance> = ({ host }) => {
     <div>
       <a href='#' className='flex items-center gap-1 py-2.5 no-underline' onClick={toggleExpanded}>
         <Icon src={expanded ? require('@tabler/icons/caret-down.svg') : require('@tabler/icons/caret-right.svg')} />
-        <div className={classNames({ 'line-through': remoteInstance.getIn(['federation', 'reject']) })}>
+        <div className={clsx({ 'line-through': remoteInstance.getIn(['federation', 'reject']) })}>
           {remoteInstance.get('host')}
         </div>
       </a>
       <div
-        className={classNames({
+        className={clsx({
           'h-0 overflow-hidden': !expanded,
           'h-auto': expanded,
         })}
diff --git a/app/soapbox/features/feed-filtering/feed-carousel.tsx b/app/soapbox/features/feed-filtering/feed-carousel.tsx
index e9dad429a..4859c2145 100644
--- a/app/soapbox/features/feed-filtering/feed-carousel.tsx
+++ b/app/soapbox/features/feed-filtering/feed-carousel.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -68,7 +68,7 @@ const CarouselItem = React.forwardRef((
 
           <img
             src={avatar.account_avatar}
-            className={classNames({
+            className={clsx({
               'w-12 h-12 min-w-[48px] rounded-full ring-2 ring-offset-4 dark:ring-offset-primary-900': true,
               'ring-transparent': !isSelected && seen,
               'ring-primary-600': isSelected,
diff --git a/app/soapbox/features/forms/index.tsx b/app/soapbox/features/forms/index.tsx
index 5d750be5a..348980c90 100644
--- a/app/soapbox/features/forms/index.tsx
+++ b/app/soapbox/features/forms/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useState } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -15,7 +15,7 @@ interface IInputContainer {
 }
 
 export const InputContainer: React.FC<IInputContainer> = (props) => {
-  const containerClass = classNames('input', {
+  const containerClass = clsx('input', {
     'with_label': props.label,
     'required': props.required,
     'boolean': props.type === 'checkbox',
diff --git a/app/soapbox/features/list-editor/components/edit-list-form.tsx b/app/soapbox/features/list-editor/components/edit-list-form.tsx
index ba365e40b..e41db67de 100644
--- a/app/soapbox/features/list-editor/components/edit-list-form.tsx
+++ b/app/soapbox/features/list-editor/components/edit-list-form.tsx
@@ -36,7 +36,7 @@ const ListForm = () => {
     <Form onSubmit={handleSubmit}>
       <HStack space={2}>
         <Input
-          outerClassName='flex-grow'
+          outerClassName='grow'
           type='text'
           value={value}
           onChange={handleChange}
diff --git a/app/soapbox/features/list-editor/components/search.tsx b/app/soapbox/features/list-editor/components/search.tsx
index 58b2e6311..8d86da0b8 100644
--- a/app/soapbox/features/list-editor/components/search.tsx
+++ b/app/soapbox/features/list-editor/components/search.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -45,7 +45,7 @@ const Search = () => {
             placeholder={intl.formatMessage(messages.search)}
           />
           <div role='button' tabIndex={0} className='search__icon' onClick={handleClear}>
-            <Icon src={require('@tabler/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={classNames('svg-icon--backspace', { active: hasValue })} />
+            <Icon src={require('@tabler/icons/backspace.svg')} aria-label={intl.formatMessage(messages.search)} className={clsx('svg-icon--backspace', { active: hasValue })} />
           </div>
         </label>
 
diff --git a/app/soapbox/features/notifications/index.tsx b/app/soapbox/features/notifications/index.tsx
index 820bb64c3..794073330 100644
--- a/app/soapbox/features/notifications/index.tsx
+++ b/app/soapbox/features/notifications/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 import debounce from 'lodash/debounce';
 import React, { useCallback, useEffect, useRef } from 'react';
@@ -164,7 +164,7 @@ const Notifications = () => {
       onLoadMore={handleLoadOlder}
       onScrollToTop={handleScrollToTop}
       onScroll={handleScroll}
-      className={classNames({
+      className={clsx({
         'divide-y divide-gray-200 dark:divide-primary-800 divide-solid': notifications.size > 0,
         'space-y-2': notifications.size === 0,
       })}
diff --git a/app/soapbox/features/onboarding/onboarding-wizard.tsx b/app/soapbox/features/onboarding/onboarding-wizard.tsx
index 96522d2ec..3c6e5c64c 100644
--- a/app/soapbox/features/onboarding/onboarding-wizard.tsx
+++ b/app/soapbox/features/onboarding/onboarding-wizard.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import ReactSwipeableViews from 'react-swipeable-views';
 
@@ -84,7 +84,7 @@ const OnboardingWizard = () => {
             {steps.map((step, i) => (
               <div key={i} className='w-full max-w-[100vw] py-6 sm:mx-auto sm:max-w-lg md:max-w-2xl'>
                 <div
-                  className={classNames({
+                  className={clsx({
                     'transition-opacity ease-linear': true,
                     'opacity-0 duration-500': currentStep !== i,
                     'opacity-100 duration-75': currentStep === i,
@@ -102,7 +102,7 @@ const OnboardingWizard = () => {
                 key={i}
                 tabIndex={0}
                 onClick={() => handleDotClick(i)}
-                className={classNames({
+                className={clsx({
                   'w-5 h-5 rounded-full focus:ring-primary-600 focus:ring-2 focus:ring-offset-2': true,
                   'bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-700/75 hover:bg-gray-400': i !== currentStep,
                   'bg-primary-600': i === currentStep,
diff --git a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
index b435c7eb9..5a9a366cd 100644
--- a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, FormattedMessage } from 'react-intl';
 
@@ -95,7 +95,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
                 <button
                   onClick={openFilePicker}
                   type='button'
-                  className={classNames({
+                  className={clsx({
                     'absolute bottom-3 right-2 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-primary-900 hover:bg-primary-700': true,
                     'opacity-50 pointer-events-none': isSubmitting,
                   })}
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 a8862a8ad..e397c59f6 100644
--- a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -108,7 +108,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
                   <button
                     onClick={openFilePicker}
                     type='button'
-                    className={classNames({
+                    className={clsx({
                       'absolute -top-3 -right-3 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-primary-900 hover:bg-primary-700': true,
                       'opacity-50 pointer-events-none': isSubmitting,
                     })}
diff --git a/app/soapbox/features/placeholder/components/placeholder-card.tsx b/app/soapbox/features/placeholder/components/placeholder-card.tsx
index ac1d5c3c0..96309ccfa 100644
--- a/app/soapbox/features/placeholder/components/placeholder-card.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-card.tsx
@@ -1,11 +1,11 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 
 import { randomIntFromInterval, generateText } from '../utils';
 
 /** Fake link preview to display while data is loading. */
 const PlaceholderCard: React.FC = () => (
-  <div className={classNames('status-card', {
+  <div className={clsx('status-card', {
     'animate-pulse': true,
   })}
   >
diff --git a/app/soapbox/features/placeholder/components/placeholder-chat-message.tsx b/app/soapbox/features/placeholder/components/placeholder-chat-message.tsx
index 566d9b74f..94f5a5c08 100644
--- a/app/soapbox/features/placeholder/components/placeholder-chat-message.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-chat-message.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 
 import { HStack, Stack, Text } from 'soapbox/components/ui';
@@ -15,7 +15,7 @@ const PlaceholderChatMessage = ({ isMyMessage = false }: { isMyMessage?: boolean
     <Stack
       data-testid='placeholder-chat-message'
       space={1}
-      className={classNames({
+      className={clsx({
         'max-w-[85%] animate-pulse': true,
         'ml-auto': isMyMessage,
       })}
@@ -26,7 +26,7 @@ const PlaceholderChatMessage = ({ isMyMessage = false }: { isMyMessage?: boolean
       >
         <div
           className={
-            classNames({
+            clsx({
               'text-ellipsis break-words relative rounded-md p-2': true,
               'mr-2': isMyMessage,
               'order-2 ml-2': !isMyMessage,
@@ -36,7 +36,7 @@ const PlaceholderChatMessage = ({ isMyMessage = false }: { isMyMessage?: boolean
           <div style={{ width: messageLength, height: 20 }} className='bg-primary-50 dark:bg-primary-800 rounded-full' />
         </div>
 
-        <div className={classNames({ 'order-1': !isMyMessage })}>
+        <div className={clsx({ 'order-1': !isMyMessage })}>
           <PlaceholderAvatar size={34} />
         </div>
       </HStack>
@@ -44,14 +44,14 @@ const PlaceholderChatMessage = ({ isMyMessage = false }: { isMyMessage?: boolean
       <HStack
         alignItems='center'
         space={2}
-        className={classNames({
+        className={clsx({
           'ml-auto': isMyMessage,
         })}
       >
         <Text
           theme='muted'
           size='xs'
-          className={classNames({
+          className={clsx({
             'text-right': isMyMessage,
             'order-2': !isMyMessage,
           })}
@@ -59,7 +59,7 @@ const PlaceholderChatMessage = ({ isMyMessage = false }: { isMyMessage?: boolean
           <span style={{ width: 50, height: 12 }} className='bg-primary-50 dark:bg-primary-800 block rounded-full' />
         </Text>
 
-        <div className={classNames({ 'order-1': !isMyMessage })}>
+        <div className={clsx({ 'order-1': !isMyMessage })}>
           <div className='ml-2 w-[34px]' />
         </div>
       </HStack>
diff --git a/app/soapbox/features/placeholder/components/placeholder-status.tsx b/app/soapbox/features/placeholder/components/placeholder-status.tsx
index 7dc83f571..37da3fa45 100644
--- a/app/soapbox/features/placeholder/components/placeholder-status.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-status.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 
 import { HStack } from 'soapbox/components/ui';
@@ -14,7 +14,7 @@ interface IPlaceholderStatus {
 /** Fake status to display while data is loading. */
 const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ thread = false }) => (
   <div
-    className={classNames({
+    className={clsx({
       'status-placeholder bg-white dark:bg-primary-900': true,
       'shadow-xl dark:shadow-none sm:rounded-xl px-4 py-6 sm:p-5': !thread,
     })}
diff --git a/app/soapbox/features/scheduled-statuses/components/scheduled-status.tsx b/app/soapbox/features/scheduled-statuses/components/scheduled-status.tsx
index 1a0a912d9..5aa8d41ba 100644
--- a/app/soapbox/features/scheduled-statuses/components/scheduled-status.tsx
+++ b/app/soapbox/features/scheduled-statuses/components/scheduled-status.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 
 import Account from 'soapbox/components/account';
@@ -32,8 +32,8 @@ const ScheduledStatus: React.FC<IScheduledStatus> = ({ statusId, ...other }) =>
   const account = status.account as AccountEntity;
 
   return (
-    <div className={classNames('status__wrapper', `status__wrapper-${status.visibility}`, { 'status__wrapper-reply': !!status.in_reply_to_id })} tabIndex={0}>
-      <div className={classNames('status', `status-${status.visibility}`, { 'status-reply': !!status.in_reply_to_id })} data-id={status.id}>
+    <div className={clsx('status__wrapper', `status__wrapper-${status.visibility}`, { 'status__wrapper-reply': !!status.in_reply_to_id })} tabIndex={0}>
+      <div className={clsx('status', `status-${status.visibility}`, { 'status-reply': !!status.in_reply_to_id })} data-id={status.id}>
         <div className='mb-4'>
           <HStack justifyContent='between' alignItems='start'>
             <Account
diff --git a/app/soapbox/features/soapbox-config/components/crypto-address-input.tsx b/app/soapbox/features/soapbox-config/components/crypto-address-input.tsx
index 5e0a6de2c..08cea6bbf 100644
--- a/app/soapbox/features/soapbox-config/components/crypto-address-input.tsx
+++ b/app/soapbox/features/soapbox-config/components/crypto-address-input.tsx
@@ -25,21 +25,21 @@ const CryptoAddressInput: StreamfieldComponent<CryptoAddress> = ({ value, onChan
     <HStack space={2} grow>
       <Input
         type='text'
-        outerClassName='w-1/6 flex-grow'
+        outerClassName='w-1/6 grow'
         value={value.ticker}
         onChange={handleChange('ticker')}
         placeholder={intl.formatMessage(messages.ticker)}
       />
       <Input
         type='text'
-        outerClassName='w-3/6 flex-grow'
+        outerClassName='w-3/6 grow'
         value={value.address}
         onChange={handleChange('address')}
         placeholder={intl.formatMessage(messages.address)}
       />
       <Input
         type='text'
-        outerClassName='w-2/6 flex-grow'
+        outerClassName='w-2/6 grow'
         value={value.note}
         onChange={handleChange('note')}
         placeholder={intl.formatMessage(messages.note)}
diff --git a/app/soapbox/features/soapbox-config/components/footer-link-input.tsx b/app/soapbox/features/soapbox-config/components/footer-link-input.tsx
index 19b6af9f7..ff0085d6b 100644
--- a/app/soapbox/features/soapbox-config/components/footer-link-input.tsx
+++ b/app/soapbox/features/soapbox-config/components/footer-link-input.tsx
@@ -24,14 +24,14 @@ const PromoPanelInput: StreamfieldComponent<FooterItem> = ({ value, onChange })
     <HStack space={2} grow>
       <Input
         type='text'
-        outerClassName='w-full flex-grow'
+        outerClassName='w-full grow'
         placeholder={intl.formatMessage(messages.label)}
         value={value.title}
         onChange={handleChange('title')}
       />
       <Input
         type='text'
-        outerClassName='w-full flex-grow'
+        outerClassName='w-full grow'
         placeholder={intl.formatMessage(messages.url)}
         value={value.url}
         onChange={handleChange('url')}
diff --git a/app/soapbox/features/soapbox-config/components/icon-picker-menu.tsx b/app/soapbox/features/soapbox-config/components/icon-picker-menu.tsx
index c88c1afd7..9a2c2e2ba 100644
--- a/app/soapbox/features/soapbox-config/components/icon-picker-menu.tsx
+++ b/app/soapbox/features/soapbox-config/components/icon-picker-menu.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import { supportsPassiveEvents } from 'detect-passive-events';
 // @ts-ignore
 import Picker from 'emoji-mart/dist-es/components/picker/picker';
@@ -105,7 +105,7 @@ const IconPickerMenu: React.FC<IIconPickerMenu> = ({ customEmojis, onClose, onPi
   const title = intl.formatMessage(messages.emoji);
 
   return (
-    <div className={classNames('font-icon-picker emoji-picker-dropdown__menu')} style={style} ref={setRef}>
+    <div className={clsx('font-icon-picker emoji-picker-dropdown__menu')} style={style} ref={setRef}>
       <Picker
         perLine={8}
         emojiSize={22}
diff --git a/app/soapbox/features/soapbox-config/components/promo-panel-input.tsx b/app/soapbox/features/soapbox-config/components/promo-panel-input.tsx
index b894b5984..93e32b0e3 100644
--- a/app/soapbox/features/soapbox-config/components/promo-panel-input.tsx
+++ b/app/soapbox/features/soapbox-config/components/promo-panel-input.tsx
@@ -36,14 +36,14 @@ const PromoPanelInput: StreamfieldComponent<PromoPanelItem> = ({ value, onChange
 
       <Input
         type='text'
-        outerClassName='w-full flex-grow'
+        outerClassName='w-full grow'
         placeholder={intl.formatMessage(messages.label)}
         value={value.text}
         onChange={handleChange('text')}
       />
       <Input
         type='text'
-        outerClassName='w-full flex-grow'
+        outerClassName='w-full grow'
         placeholder={intl.formatMessage(messages.url)}
         value={value.url}
         onChange={handleChange('url')}
diff --git a/app/soapbox/features/soapbox-config/components/site-preview.tsx b/app/soapbox/features/soapbox-config/components/site-preview.tsx
index 3336c2f8c..ce60f8078 100644
--- a/app/soapbox/features/soapbox-config/components/site-preview.tsx
+++ b/app/soapbox/features/soapbox-config/components/site-preview.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 
@@ -24,7 +24,7 @@ const SitePreview: React.FC<ISitePreview> = ({ soapbox }) => {
 
   const dark = userTheme === 'dark' || (userTheme === 'system' && systemTheme === 'dark');
 
-  const bodyClass = classNames(
+  const bodyClass = clsx(
     'site-preview',
     'align-center relative flex justify-center text-base',
     'border border-solid border-gray-200 dark:border-gray-600',
@@ -43,7 +43,7 @@ const SitePreview: React.FC<ISitePreview> = ({ soapbox }) => {
         <FormattedMessage id='site_preview.preview' defaultMessage='Preview' />
       </div>
 
-      <div className={classNames('absolute inset-0 z-10 flex h-12 shadow lg:h-16', {
+      <div className={clsx('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 ed7534a50..e210876b8 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 clsx 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 = clsx('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={clsx(
         '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/components/status-interaction-bar.tsx b/app/soapbox/features/status/components/status-interaction-bar.tsx
index b69fa3ecf..5303b2d73 100644
--- a/app/soapbox/features/status/components/status-interaction-bar.tsx
+++ b/app/soapbox/features/status/components/status-interaction-bar.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
@@ -188,7 +188,7 @@ const InteractionCounter: React.FC<IInteractionCounter> = ({ count, onClick, chi
       type='button'
       onClick={onClick}
       className={
-        classNames({
+        clsx({
           'text-gray-600 dark:text-gray-700': true,
           'hover:underline': features.exposableReactions,
           'cursor-default': !features.exposableReactions,
diff --git a/app/soapbox/features/status/components/thread-status.tsx b/app/soapbox/features/status/components/thread-status.tsx
index 8054e268a..a5fce9a75 100644
--- a/app/soapbox/features/status/components/thread-status.tsx
+++ b/app/soapbox/features/status/components/thread-status.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import React from 'react';
 
@@ -30,7 +30,7 @@ const ThreadStatus: React.FC<IThreadStatus> = (props): JSX.Element => {
 
     return (
       <div
-        className={classNames('thread__connector', {
+        className={clsx('thread__connector', {
           'thread__connector--top': isConnectedTop,
           'thread__connector--bottom': isConnectedBottom,
         })}
diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index a787a4d2f..4e2c7faff 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
 import debounce from 'lodash/debounce';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
@@ -461,7 +461,7 @@ const Thread: React.FC<IThread> = (props) => {
   const titleMessage = status.visibility === 'direct' ? messages.titleDirect : messages.title;
 
   const focusedStatus = (
-    <div className={classNames({ 'pb-4': hasDescendants })} key={status.id}>
+    <div className={clsx({ 'pb-4': hasDescendants })} key={status.id}>
       <HotKeys handlers={handlers}>
         <div
           ref={statusRef}
diff --git a/app/soapbox/features/ui/components/background-shapes.tsx b/app/soapbox/features/ui/components/background-shapes.tsx
index 25c32a7ba..9768b06d6 100644
--- a/app/soapbox/features/ui/components/background-shapes.tsx
+++ b/app/soapbox/features/ui/components/background-shapes.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 
 interface IBackgroundShapes {
@@ -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, 'pointer-events-none inset-x-0 top-0 flex justify-center overflow-hidden')}>
+  <div className={clsx(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 92f88d22f..482222377 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 classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -25,7 +25,7 @@ const FloatingActionButton: React.FC<IFloatingActionButton> = () => {
   return (
     <button
       onClick={handleOpenComposeModal}
-      className={classNames(
+      className={clsx(
         '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',
         'bg-secondary-500 hover:bg-secondary-400 focus:bg-secondary-500 focus:ring-secondary-300 border-transparent text-gray-100',
       )}
diff --git a/app/soapbox/features/ui/components/image-loader.tsx b/app/soapbox/features/ui/components/image-loader.tsx
index 2340cd3a2..1d091cbd7 100644
--- a/app/soapbox/features/ui/components/image-loader.tsx
+++ b/app/soapbox/features/ui/components/image-loader.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 
 import ZoomableImage from './zoomable-image';
@@ -135,7 +135,7 @@ class ImageLoader extends React.PureComponent<IImageLoader> {
     const { alt, src, width, height, onClick } = this.props;
     const { loading } = this.state;
 
-    const className = classNames('image-loader', {
+    const className = clsx('image-loader', {
       'image-loader--loading': loading,
       'image-loader--amorphous': !this.hasSize(),
     });
@@ -162,4 +162,4 @@ class ImageLoader extends React.PureComponent<IImageLoader> {
 
 }
 
-export default ImageLoader;
\ No newline at end of file
+export default ImageLoader;
diff --git a/app/soapbox/features/ui/components/link-footer.tsx b/app/soapbox/features/ui/components/link-footer.tsx
index 5466a6aee..5f8d8c2b0 100644
--- a/app/soapbox/features/ui/components/link-footer.tsx
+++ b/app/soapbox/features/ui/components/link-footer.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router-dom';
@@ -19,7 +19,7 @@ interface IFooterLink {
 const FooterLink: React.FC<IFooterLink> = ({ children, className, ...rest }): JSX.Element => {
   return (
     <div>
-      <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>
+      <Link className={clsx('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 ccc86c815..631eacc12 100644
--- a/app/soapbox/features/ui/components/modals/actions-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/actions-modal.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { spring } from 'react-motion';
@@ -36,13 +36,13 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
           {...compProps}
           space={2.5}
           data-index={i}
-          className={classNames('w-full', { active, destructive })}
+          className={clsx('w-full', { active, destructive })}
           data-method={isLogout ? 'delete' : null}
           element={Comp}
         >
           {icon && <Icon title={text} src={icon} role='presentation' tabIndex={-1} />}
           <div>
-            <div className={classNames({ 'actions-modal__item-label': !!meta })}>{text}</div>
+            <div className={clsx({ 'actions-modal__item-label': !!meta })}>{text}</div>
             <div>{meta}</div>
           </div>
         </HStack>
@@ -58,7 +58,7 @@ const ActionsModal: React.FC<IActionsModal> = ({ status, actions, onClick, onClo
             <ReplyIndicator className='actions-modal__status rounded-b-none' status={status} hideActions />
           )}
 
-          <ul className={classNames({ 'with-status': !!status })}>
+          <ul className={clsx({ 'with-status': !!status })}>
             {actions && actions.map(renderAction)}
 
             <li className='dropdown-menu__separator' />
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 b802e6666..75a2f19e5 100644
--- a/app/soapbox/features/ui/components/modals/compare-history-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/compare-history-modal.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
 import React, { useEffect } from 'react';
 import { FormattedDate, FormattedMessage } from 'react-intl';
@@ -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('border-primary-600 mr-2.5 inline-block h-4 w-4 flex-none rounded-full border border-solid', {
+                          className={clsx('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/landing-page-modal.tsx b/app/soapbox/features/ui/components/modals/landing-page-modal.tsx
index 0ac65961f..4ce2919cb 100644
--- a/app/soapbox/features/ui/components/modals/landing-page-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/landing-page-modal.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -48,7 +48,7 @@ const LandingPageModal: React.FC<ILandingPageModal> = ({ onClose }) => {
         )}
 
         <div
-          className={classNames('grid gap-4 pt-6', {
+          className={clsx('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 e0e9e728e..c337fb137 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
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
@@ -34,7 +34,7 @@ const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
     >
       {src && <img className='h-full w-full object-cover' src={src} alt='' />}
       <HStack
-        className={classNames('absolute top-0 h-full w-full transition-opacity', {
+        className={clsx('absolute top-0 h-full w-full transition-opacity', {
           'opacity-0 hover:opacity-90 bg-primary-100 dark:bg-gray-800': src,
         })}
         space={3}
@@ -71,7 +71,7 @@ const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
         alignItems='center'
         justifyContent='center'
 
-        className={classNames('absolute left-0 top-0 h-full w-full rounded-full transition-opacity', {
+        className={clsx('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/media-modal.tsx b/app/soapbox/features/ui/components/modals/media-modal.tsx
index 94bb3f70f..032d19f34 100644
--- a/app/soapbox/features/ui/components/modals/media-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/media-modal.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
@@ -247,7 +247,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
     alignItems: 'center', // center vertically
   };
 
-  const navigationClassName = classNames('media-modal__navigation', {
+  const navigationClassName = clsx('media-modal__navigation', {
     'media-modal__navigation--hidden': navigationHidden,
   });
 
@@ -280,7 +280,7 @@ const MediaModal: React.FC<IMediaModal> = (props) => {
         {rightNav}
 
         {(status && !isMultiMedia[getIndex()]) && (
-          <div className={classNames('media-modal__meta', { 'media-modal__meta--shifted': media.size > 1 })}>
+          <div className={clsx('media-modal__meta', { 'media-modal__meta--shifted': media.size > 1 })}>
             <a href={status.url} onClick={handleStatusClick}>
               <FormattedMessage id='lightbox.view_context' defaultMessage='View context' />
             </a>
diff --git a/app/soapbox/features/ui/components/modals/reactions-modal.tsx b/app/soapbox/features/ui/components/modals/reactions-modal.tsx
index 1a01dd080..56fd10e67 100644
--- a/app/soapbox/features/ui/components/modals/reactions-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/reactions-modal.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import { List as ImmutableList } from 'immutable';
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
@@ -85,7 +85,7 @@ const ReactionsModal: React.FC<IReactionsModal> = ({ onClose, statusId, reaction
       <ScrollableList
         scrollKey='reactions'
         emptyMessage={emptyMessage}
-        className={classNames('max-w-full', {
+        className={clsx('max-w-full', {
           'mt-4': reactions.size > 0,
         })}
         itemClassName='pb-3'
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 2a33889f0..ff1496ff4 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
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
@@ -106,7 +106,7 @@ const ReasonStep = (_props: IReasonStep) => {
                     key={idx}
                     data-testid={`rule-${rule.id}`}
                     onClick={() => dispatch(changeReportRule(rule.id))}
-                    className={classNames({
+                    className={clsx({
                       'relative border border-solid border-gray-200 dark:border-gray-800 hover:bg-gray-100 dark:hover:bg-primary-800/30 text-start w-full p-4 flex justify-between items-center cursor-pointer': true,
                       'rounded-tl-lg rounded-tr-lg': idx === 0,
                       'rounded-bl-lg rounded-br-lg': idx === rules.length - 1,
@@ -139,13 +139,13 @@ const ReasonStep = (_props: IReasonStep) => {
             </div>
 
             <div
-              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', {
+              className={clsx('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('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', {
+              className={clsx('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/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx
index baedafedd..14b4d7aa9 100644
--- a/app/soapbox/features/ui/components/navbar.tsx
+++ b/app/soapbox/features/ui/components/navbar.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React, { useRef, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { Link, Redirect } from 'react-router-dom';
@@ -77,7 +77,7 @@ const Navbar = () => {
           <HStack
             space={4}
             alignItems='center'
-            className={classNames('enter flex-1 lg:items-stretch', {
+            className={clsx('enter flex-1 lg:items-stretch', {
               'justify-center lg:justify-start': account,
               'justify-start': !account,
             })}
diff --git a/app/soapbox/features/ui/components/pending-status.tsx b/app/soapbox/features/ui/components/pending-status.tsx
index 367ede08a..9651a2924 100644
--- a/app/soapbox/features/ui/components/pending-status.tsx
+++ b/app/soapbox/features/ui/components/pending-status.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 
 import Account from 'soapbox/components/account';
@@ -57,10 +57,10 @@ const PendingStatus: React.FC<IPendingStatus> = ({ idempotencyKey, className, mu
   const account = status.account as AccountEntity;
 
   return (
-    <div className={classNames('opacity-50', className)}>
-      <div className={classNames('status', { 'status-reply': !!status.in_reply_to_id, muted })} data-id={status.id}>
+    <div className={clsx('opacity-50', className)}>
+      <div className={clsx('status', { 'status-reply': !!status.in_reply_to_id, muted })} data-id={status.id}>
         <Card
-          className={classNames('py-6 sm:p-5', `status-${status.visibility}`, { 'status-reply': !!status.in_reply_to_id })}
+          className={clsx('py-6 sm:p-5', `status-${status.visibility}`, { 'status-reply': !!status.in_reply_to_id })}
           variant={thread ? 'default' : 'rounded'}
         >
           <div className='mb-4'>
diff --git a/app/soapbox/features/ui/components/profile-field.tsx b/app/soapbox/features/ui/components/profile-field.tsx
index fa8203d31..38d6972d7 100644
--- a/app/soapbox/features/ui/components/profile-field.tsx
+++ b/app/soapbox/features/ui/components/profile-field.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl, FormatDateOptions } from 'react-intl';
 
@@ -53,7 +53,7 @@ const ProfileField: React.FC<IProfileField> = ({ field }) => {
       </dt>
 
       <dd
-        className={classNames({ 'text-success-500': field.verified_at })}
+        className={clsx({ 'text-success-500': field.verified_at })}
         title={field.value_plain}
       >
         <HStack space={2} alignItems='center'>
diff --git a/app/soapbox/features/ui/components/upload-area.tsx b/app/soapbox/features/ui/components/upload-area.tsx
index ecbf1a62c..ee49d2ed6 100644
--- a/app/soapbox/features/ui/components/upload-area.tsx
+++ b/app/soapbox/features/ui/components/upload-area.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { spring } from 'react-motion';
@@ -43,8 +43,8 @@ const UploadArea: React.FC<IUploadArea> = ({ active, onClose }) => {
     >
       {({ backgroundOpacity, backgroundScale }) => (
         <div
-          className={classNames({
-            'flex items-center justify-center bg-gray-700 bg-opacity-90 h-full w-full absolute left-0 top-0 z-1000 pointer-events-none': true,
+          className={clsx({
+            'flex items-center justify-center bg-gray-700/90 h-full w-full absolute left-0 top-0 z-1000 pointer-events-none': true,
             'visible': active,
             'invisible': !active,
           })}
@@ -56,7 +56,7 @@ const UploadArea: React.FC<IUploadArea> = ({ active, onClose }) => {
             <Stack space={3} justifyContent='center' alignItems='center'>
               <Icon
                 src={require('@tabler/icons/cloud-upload.svg')}
-                className='h-12 w-12 text-white text-opacity-90'
+                className='h-12 w-12 text-white/90'
               />
 
               <Text size='xl' theme='white'>
diff --git a/app/soapbox/features/video/index.tsx b/app/soapbox/features/video/index.tsx
index c06c73eca..1768a6a24 100644
--- a/app/soapbox/features/video/index.tsx
+++ b/app/soapbox/features/video/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'clsx';
+import clsx from 'clsx';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
@@ -466,7 +466,7 @@ const Video: React.FC<IVideo> = ({
   return (
     <div
       role='menuitem'
-      className={classNames('video-player', { detailed, 'video-player--inline': inline && !fullscreen, fullscreen })}
+      className={clsx('video-player', { detailed, 'video-player--inline': inline && !fullscreen, fullscreen })}
       style={playerStyle}
       ref={player}
       onMouseEnter={handleMouseEnter}
@@ -499,13 +499,13 @@ const Video: React.FC<IVideo> = ({
         onVolumeChange={handleVolumeChange}
       />
 
-      <div className={classNames('video-player__controls', { active: paused || hovered })}>
+      <div className={clsx('video-player__controls', { active: paused || hovered })}>
         <div className='video-player__seek' onMouseDown={handleMouseDown} ref={seek}>
           <div className='video-player__seek__buffer' style={{ width: `${buffer}%` }} />
           <div className='video-player__seek__progress' style={{ width: `${progress}%` }} />
 
           <span
-            className={classNames('video-player__seek__handle', { active: dragging })}
+            className={clsx('video-player__seek__handle', { active: dragging })}
             tabIndex={0}
             style={{ left: `${progress}%` }}
             onKeyDown={handleVideoKeyDown}
@@ -535,10 +535,10 @@ const Video: React.FC<IVideo> = ({
               <Icon src={muted ? require('@tabler/icons/volume-3.svg') : require('@tabler/icons/volume.svg')} />
             </button>
 
-            <div className={classNames('video-player__volume', { active: hovered })} onMouseDown={handleVolumeMouseDown} ref={slider}>
+            <div className={clsx('video-player__volume', { active: hovered })} onMouseDown={handleVolumeMouseDown} ref={slider}>
               <div className='video-player__volume__current' style={{ width: `${volume * 100}%` }} />
               <span
-                className={classNames('video-player__volume__handle')}
+                className={clsx('video-player__volume__handle')}
                 tabIndex={0}
                 style={{ left: `${volume * 100}%` }}
               />