From 03d6211e1ca4a31f4f82db5a0449265a9dea3a6e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 31 Aug 2022 11:35:06 +0200
Subject: [PATCH] Replace classnames with 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                    | 2 +-
 app/soapbox/components/announcements/announcements-panel.tsx | 2 +-
 app/soapbox/components/announcements/reaction.tsx            | 2 +-
 app/soapbox/components/announcements/reactions-bar.tsx       | 2 +-
 app/soapbox/components/autosuggest_input.tsx                 | 2 +-
 app/soapbox/components/autosuggest_textarea.tsx              | 2 +-
 app/soapbox/components/avatar.tsx                            | 2 +-
 app/soapbox/components/badge.tsx                             | 2 +-
 app/soapbox/components/column_header.js                      | 2 +-
 app/soapbox/components/dropdown_menu.tsx                     | 2 +-
 app/soapbox/components/emoji-button-wrapper.tsx              | 2 +-
 app/soapbox/components/emoji_selector.tsx                    | 2 +-
 app/soapbox/components/filter_bar.js                         | 2 +-
 app/soapbox/components/fork_awesome_icon.tsx                 | 2 +-
 app/soapbox/components/gdpr-banner.tsx                       | 2 +-
 app/soapbox/components/hover-status-wrapper.tsx              | 2 +-
 app/soapbox/components/hover_ref_wrapper.tsx                 | 2 +-
 app/soapbox/components/icon_button.js                        | 2 +-
 app/soapbox/components/list.tsx                              | 2 +-
 app/soapbox/components/media_gallery.js                      | 2 +-
 app/soapbox/components/modal_root.js                         | 2 +-
 app/soapbox/components/polls/poll-option.tsx                 | 2 +-
 app/soapbox/components/profile-hover-card.tsx                | 2 +-
 app/soapbox/components/progress_circle.tsx                   | 2 +-
 app/soapbox/components/quoted-status.tsx                     | 2 +-
 app/soapbox/components/radio_button.tsx                      | 2 +-
 app/soapbox/components/scroll-top-button.tsx                 | 2 +-
 app/soapbox/components/sidebar-navigation-link.tsx           | 2 +-
 app/soapbox/components/sidebar_menu.tsx                      | 2 +-
 app/soapbox/components/site-logo.tsx                         | 2 +-
 app/soapbox/components/status-action-bar.tsx                 | 2 +-
 app/soapbox/components/status-action-button.tsx              | 2 +-
 app/soapbox/components/status-hover-card.tsx                 | 2 +-
 app/soapbox/components/status.tsx                            | 2 +-
 app/soapbox/components/status_content.tsx                    | 2 +-
 app/soapbox/components/status_list.tsx                       | 2 +-
 app/soapbox/components/still_image.tsx                       | 2 +-
 app/soapbox/components/svg_icon.tsx                          | 2 +-
 app/soapbox/components/thumb_navigation-link.tsx             | 2 +-
 app/soapbox/components/ui/avatar/avatar.tsx                  | 2 +-
 app/soapbox/components/ui/banner/banner.tsx                  | 2 +-
 app/soapbox/components/ui/button/button.tsx                  | 2 +-
 app/soapbox/components/ui/button/useButtonStyles.ts          | 2 +-
 app/soapbox/components/ui/card/card.tsx                      | 2 +-
 app/soapbox/components/ui/emoji-selector/emoji-selector.tsx  | 2 +-
 app/soapbox/components/ui/hstack/hstack.tsx                  | 2 +-
 app/soapbox/components/ui/icon-button/icon-button.tsx        | 2 +-
 app/soapbox/components/ui/input/input.tsx                    | 2 +-
 app/soapbox/components/ui/layout/layout.tsx                  | 2 +-
 app/soapbox/components/ui/modal/modal.tsx                    | 2 +-
 app/soapbox/components/ui/stack/stack.tsx                    | 2 +-
 app/soapbox/components/ui/tabs/tabs.tsx                      | 2 +-
 app/soapbox/components/ui/text/text.tsx                      | 2 +-
 app/soapbox/components/ui/textarea/textarea.tsx              | 2 +-
 app/soapbox/components/validation-checkmark.tsx              | 2 +-
 app/soapbox/components/verification_badge.tsx                | 2 +-
 app/soapbox/containers/soapbox.tsx                           | 2 +-
 .../features/account_gallery/components/media_item.tsx       | 2 +-
 app/soapbox/features/aliases/components/search.tsx           | 2 +-
 app/soapbox/features/audio/index.js                          | 2 +-
 app/soapbox/features/backups/index.tsx                       | 2 +-
 app/soapbox/features/chats/components/chat-message-list.tsx  | 2 +-
 app/soapbox/features/compose/components/compose_form.js      | 2 +-
 .../features/compose/components/compose_form_button.tsx      | 2 +-
 .../features/compose/components/emoji_picker_dropdown.js     | 2 +-
 app/soapbox/features/compose/components/privacy_dropdown.tsx | 2 +-
 app/soapbox/features/compose/components/schedule_form.tsx    | 2 +-
 app/soapbox/features/compose/components/search.tsx           | 2 +-
 app/soapbox/features/compose/components/search_results.tsx   | 2 +-
 .../features/compose/components/text_character_counter.tsx   | 2 +-
 app/soapbox/features/compose/components/upload.tsx           | 2 +-
 app/soapbox/features/compose/components/upload_form.tsx      | 2 +-
 app/soapbox/features/directory/components/account_card.tsx   | 2 +-
 app/soapbox/features/directory/index.tsx                     | 2 +-
 .../components/restricted_instance.tsx                       | 2 +-
 app/soapbox/features/feed-filtering/feed-carousel.tsx        | 2 +-
 app/soapbox/features/forms/index.tsx                         | 2 +-
 app/soapbox/features/groups/create/index.js                  | 2 +-
 app/soapbox/features/groups/edit/index.js                    | 2 +-
 app/soapbox/features/groups/index/index.js                   | 2 +-
 app/soapbox/features/introduction/index.js                   | 2 +-
 app/soapbox/features/list_editor/components/search.tsx       | 2 +-
 app/soapbox/features/notifications/index.tsx                 | 2 +-
 app/soapbox/features/onboarding/onboarding-wizard.tsx        | 2 +-
 .../features/onboarding/steps/avatar-selection-step.tsx      | 2 +-
 .../features/onboarding/steps/cover-photo-selection-step.tsx | 2 +-
 .../features/placeholder/components/placeholder_card.tsx     | 2 +-
 .../features/placeholder/components/placeholder_status.tsx   | 2 +-
 .../scheduled_statuses/components/scheduled_status.tsx       | 2 +-
 .../soapbox_config/components/icon_picker_dropdown.js        | 2 +-
 .../features/soapbox_config/components/site-preview.tsx      | 2 +-
 app/soapbox/features/status/components/card.tsx              | 2 +-
 .../features/status/components/status-interaction-bar.tsx    | 2 +-
 app/soapbox/features/status/components/thread-status.tsx     | 2 +-
 app/soapbox/features/status/index.tsx                        | 2 +-
 app/soapbox/features/ui/components/accordion.tsx             | 2 +-
 app/soapbox/features/ui/components/actions_modal.tsx         | 2 +-
 app/soapbox/features/ui/components/background_shapes.tsx     | 2 +-
 app/soapbox/features/ui/components/column_header.tsx         | 2 +-
 app/soapbox/features/ui/components/compare_history_modal.tsx | 2 +-
 app/soapbox/features/ui/components/focal_point_modal.js      | 2 +-
 app/soapbox/features/ui/components/image_loader.js           | 2 +-
 app/soapbox/features/ui/components/link_footer.tsx           | 2 +-
 app/soapbox/features/ui/components/media_modal.js            | 2 +-
 .../features/ui/components/modals/landing-page-modal.tsx     | 2 +-
 .../ui/components/modals/report-modal/steps/reason-step.tsx  | 2 +-
 app/soapbox/features/ui/components/navbar.tsx                | 2 +-
 app/soapbox/features/ui/components/pending_status.tsx        | 2 +-
 app/soapbox/features/ui/components/profile_fields_panel.tsx  | 2 +-
 app/soapbox/features/ui/components/upload_area.tsx           | 2 +-
 app/soapbox/features/video/index.js                          | 2 +-
 package.json                                                 | 2 +-
 webpack/shared.js                                            | 1 +
 yarn.lock                                                    | 5 +++++
 114 files changed, 118 insertions(+), 112 deletions(-)

diff --git a/app/soapbox/components/account_search.tsx b/app/soapbox/components/account_search.tsx
index adbb5501d..bf9652b66 100644
--- a/app/soapbox/components/account_search.tsx
+++ b/app/soapbox/components/account_search.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
diff --git a/app/soapbox/components/announcements/announcements-panel.tsx b/app/soapbox/components/announcements/announcements-panel.tsx
index 200615dab..2febea40d 100644
--- a/app/soapbox/components/announcements/announcements-panel.tsx
+++ b/app/soapbox/components/announcements/announcements-panel.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
diff --git a/app/soapbox/components/announcements/reaction.tsx b/app/soapbox/components/announcements/reaction.tsx
index 1e415c667..8e2391aec 100644
--- a/app/soapbox/components/announcements/reaction.tsx
+++ b/app/soapbox/components/announcements/reaction.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState } from 'react';
 
 import AnimatedNumber from 'soapbox/components/animated-number';
diff --git a/app/soapbox/components/announcements/reactions-bar.tsx b/app/soapbox/components/announcements/reactions-bar.tsx
index 66b5f3f83..5cec53974 100644
--- a/app/soapbox/components/announcements/reactions-bar.tsx
+++ b/app/soapbox/components/announcements/reactions-bar.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { TransitionMotion, spring } from 'react-motion';
 
diff --git a/app/soapbox/components/autosuggest_input.tsx b/app/soapbox/components/autosuggest_input.tsx
index 54f126a23..744160b2b 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 'classnames';
+import classNames from 'clsx';
 import { List as ImmutableList } from 'immutable';
 import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
diff --git a/app/soapbox/components/autosuggest_textarea.tsx b/app/soapbox/components/autosuggest_textarea.tsx
index a475e5ce2..47f0eea39 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 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import Textarea from 'react-textarea-autosize';
diff --git a/app/soapbox/components/avatar.tsx b/app/soapbox/components/avatar.tsx
index 9d4fbaa7c..4f40d46bb 100644
--- a/app/soapbox/components/avatar.tsx
+++ b/app/soapbox/components/avatar.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 import StillImage from 'soapbox/components/still_image';
diff --git a/app/soapbox/components/badge.tsx b/app/soapbox/components/badge.tsx
index 78610870f..13646bcdb 100644
--- a/app/soapbox/components/badge.tsx
+++ b/app/soapbox/components/badge.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 interface IBadge {
diff --git a/app/soapbox/components/column_header.js b/app/soapbox/components/column_header.js
index c5fa73e5d..42f8eebb8 100644
--- a/app/soapbox/components/column_header.js
+++ b/app/soapbox/components/column_header.js
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { withRouter } from 'react-router-dom';
 
-// import classNames from 'classnames';
+// import classNames from 'clsx';
 // import { injectIntl, defineMessages } from 'react-intl';
 // import Icon from 'soapbox/components/icon';
 import SubNavigation from 'soapbox/components/sub_navigation';
diff --git a/app/soapbox/components/dropdown_menu.tsx b/app/soapbox/components/dropdown_menu.tsx
index d8b35f5fc..bb20c8622 100644
--- a/app/soapbox/components/dropdown_menu.tsx
+++ b/app/soapbox/components/dropdown_menu.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import React from 'react';
 import { spring } from 'react-motion';
diff --git a/app/soapbox/components/emoji-button-wrapper.tsx b/app/soapbox/components/emoji-button-wrapper.tsx
index 231525867..0afdba85f 100644
--- a/app/soapbox/components/emoji-button-wrapper.tsx
+++ b/app/soapbox/components/emoji-button-wrapper.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState, useEffect, useRef } from 'react';
 import { usePopper } from 'react-popper';
 import { useDispatch } from 'react-redux';
diff --git a/app/soapbox/components/emoji_selector.tsx b/app/soapbox/components/emoji_selector.tsx
index 69d104385..43e10d875 100644
--- a/app/soapbox/components/emoji_selector.tsx
+++ b/app/soapbox/components/emoji_selector.tsx
@@ -1,4 +1,4 @@
-// import classNames from 'classnames';
+// import classNames from 'clsx';
 import React from 'react';
 import { HotKeys } from 'react-hotkeys';
 import ImmutablePureComponent from 'react-immutable-pure-component';
diff --git a/app/soapbox/components/filter_bar.js b/app/soapbox/components/filter_bar.js
index 7b0651d01..601ca04a2 100644
--- a/app/soapbox/components/filter_bar.js
+++ b/app/soapbox/components/filter_bar.js
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import debounce from 'lodash/debounce';
 import PropTypes from 'prop-types';
 import React from 'react';
diff --git a/app/soapbox/components/fork_awesome_icon.tsx b/app/soapbox/components/fork_awesome_icon.tsx
index 45b146e08..98d6c5747 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 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 export interface IForkAwesomeIcon extends React.HTMLAttributes<HTMLLIElement> {
diff --git a/app/soapbox/components/gdpr-banner.tsx b/app/soapbox/components/gdpr-banner.tsx
index bd9c7cb68..425376f95 100644
--- a/app/soapbox/components/gdpr-banner.tsx
+++ b/app/soapbox/components/gdpr-banner.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
diff --git a/app/soapbox/components/hover-status-wrapper.tsx b/app/soapbox/components/hover-status-wrapper.tsx
index 6860762e7..da962e47c 100644
--- a/app/soapbox/components/hover-status-wrapper.tsx
+++ b/app/soapbox/components/hover-status-wrapper.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { debounce } from 'lodash';
 import React, { useRef } from 'react';
 import { useDispatch } from 'react-redux';
diff --git a/app/soapbox/components/hover_ref_wrapper.tsx b/app/soapbox/components/hover_ref_wrapper.tsx
index 7e103f3e5..f509b2efe 100644
--- a/app/soapbox/components/hover_ref_wrapper.tsx
+++ b/app/soapbox/components/hover_ref_wrapper.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import debounce from 'lodash/debounce';
 import React, { useRef } from 'react';
 
diff --git a/app/soapbox/components/icon_button.js b/app/soapbox/components/icon_button.js
index b6ed8b3d4..cb92c2841 100644
--- a/app/soapbox/components/icon_button.js
+++ b/app/soapbox/components/icon_button.js
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import PropTypes from 'prop-types';
 import React from 'react';
 import spring from 'react-motion/lib/spring';
diff --git a/app/soapbox/components/list.tsx b/app/soapbox/components/list.tsx
index 45e6c38c5..ae29a5cbd 100644
--- a/app/soapbox/components/list.tsx
+++ b/app/soapbox/components/list.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import * as React from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
diff --git a/app/soapbox/components/media_gallery.js b/app/soapbox/components/media_gallery.js
index 9d23c7f72..f8e9dc51e 100644
--- a/app/soapbox/components/media_gallery.js
+++ b/app/soapbox/components/media_gallery.js
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { Map as ImmutableMap, is } from 'immutable';
 import PropTypes from 'prop-types';
 import React from 'react';
diff --git a/app/soapbox/components/modal_root.js b/app/soapbox/components/modal_root.js
index 6c6c4021e..23d392b51 100644
--- a/app/soapbox/components/modal_root.js
+++ b/app/soapbox/components/modal_root.js
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { createBrowserHistory } from 'history';
 import PropTypes from 'prop-types';
 import React from 'react';
diff --git a/app/soapbox/components/polls/poll-option.tsx b/app/soapbox/components/polls/poll-option.tsx
index 024f01b7b..f81be4f5b 100644
--- a/app/soapbox/components/polls/poll-option.tsx
+++ b/app/soapbox/components/polls/poll-option.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Motion, presets, spring } from 'react-motion';
diff --git a/app/soapbox/components/profile-hover-card.tsx b/app/soapbox/components/profile-hover-card.tsx
index e2574c755..c96839c77 100644
--- a/app/soapbox/components/profile-hover-card.tsx
+++ b/app/soapbox/components/profile-hover-card.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { usePopper } from 'react-popper';
diff --git a/app/soapbox/components/progress_circle.tsx b/app/soapbox/components/progress_circle.tsx
index 6922bc68d..fcfad084e 100644
--- a/app/soapbox/components/progress_circle.tsx
+++ b/app/soapbox/components/progress_circle.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 interface IProgressCircle {
diff --git a/app/soapbox/components/quoted-status.tsx b/app/soapbox/components/quoted-status.tsx
index 6d8af184c..a8809bedf 100644
--- a/app/soapbox/components/quoted-status.tsx
+++ b/app/soapbox/components/quoted-status.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage, FormattedList } from 'react-intl';
 import { useHistory } from 'react-router-dom';
diff --git a/app/soapbox/components/radio_button.tsx b/app/soapbox/components/radio_button.tsx
index b317e4259..2d350b953 100644
--- a/app/soapbox/components/radio_button.tsx
+++ b/app/soapbox/components/radio_button.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 interface IRadioButton {
diff --git a/app/soapbox/components/scroll-top-button.tsx b/app/soapbox/components/scroll-top-button.tsx
index 64c7c4629..7bf03f66b 100644
--- a/app/soapbox/components/scroll-top-button.tsx
+++ b/app/soapbox/components/scroll-top-button.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import throttle from 'lodash/throttle';
 import React, { useState, useEffect, useCallback } from 'react';
 import { useIntl, MessageDescriptor } from 'react-intl';
diff --git a/app/soapbox/components/sidebar-navigation-link.tsx b/app/soapbox/components/sidebar-navigation-link.tsx
index 0509c34ad..9a20ca482 100644
--- a/app/soapbox/components/sidebar-navigation-link.tsx
+++ b/app/soapbox/components/sidebar-navigation-link.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { NavLink } from 'react-router-dom';
 
diff --git a/app/soapbox/components/sidebar_menu.tsx b/app/soapbox/components/sidebar_menu.tsx
index 084506b89..4f349fd1c 100644
--- a/app/soapbox/components/sidebar_menu.tsx
+++ b/app/soapbox/components/sidebar_menu.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
diff --git a/app/soapbox/components/site-logo.tsx b/app/soapbox/components/site-logo.tsx
index 1e8751ac5..56add1c19 100644
--- a/app/soapbox/components/site-logo.tsx
+++ b/app/soapbox/components/site-logo.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 import { useSoapboxConfig, useSettings, useTheme } from 'soapbox/hooks';
diff --git a/app/soapbox/components/status-action-bar.tsx b/app/soapbox/components/status-action-bar.tsx
index 036289e7f..c07bf818d 100644
--- a/app/soapbox/components/status-action-bar.tsx
+++ b/app/soapbox/components/status-action-bar.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { List as ImmutableList } from 'immutable';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
diff --git a/app/soapbox/components/status-action-button.tsx b/app/soapbox/components/status-action-button.tsx
index 46eac83d0..aacda516f 100644
--- a/app/soapbox/components/status-action-button.tsx
+++ b/app/soapbox/components/status-action-button.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 import { Text, Icon, Emoji } from 'soapbox/components/ui';
diff --git a/app/soapbox/components/status-hover-card.tsx b/app/soapbox/components/status-hover-card.tsx
index dc02af3f4..4ae3f705e 100644
--- a/app/soapbox/components/status-hover-card.tsx
+++ b/app/soapbox/components/status-hover-card.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useEffect, useState, useCallback } from 'react';
 import { usePopper } from 'react-popper';
 import { useHistory } from 'react-router-dom';
diff --git a/app/soapbox/components/status.tsx b/app/soapbox/components/status.tsx
index da7af3fa7..dd2a15142 100644
--- a/app/soapbox/components/status.tsx
+++ b/app/soapbox/components/status.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
 import { HotKeys } from 'react-hotkeys';
 import { useIntl, FormattedMessage, defineMessages } from 'react-intl';
diff --git a/app/soapbox/components/status_content.tsx b/app/soapbox/components/status_content.tsx
index 75d969868..2a8972315 100644
--- a/app/soapbox/components/status_content.tsx
+++ b/app/soapbox/components/status_content.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState, useRef, useEffect, useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useHistory } from 'react-router-dom';
diff --git a/app/soapbox/components/status_list.tsx b/app/soapbox/components/status_list.tsx
index 3f0b262b5..295538da2 100644
--- a/app/soapbox/components/status_list.tsx
+++ b/app/soapbox/components/status_list.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import debounce from 'lodash/debounce';
 import React, { useRef, useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
diff --git a/app/soapbox/components/still_image.tsx b/app/soapbox/components/still_image.tsx
index 4369c84b9..24e212ce5 100644
--- a/app/soapbox/components/still_image.tsx
+++ b/app/soapbox/components/still_image.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useRef } from 'react';
 
 import { useSettings } from 'soapbox/hooks';
diff --git a/app/soapbox/components/svg_icon.tsx b/app/soapbox/components/svg_icon.tsx
index a81979d0d..cd8942f68 100644
--- a/app/soapbox/components/svg_icon.tsx
+++ b/app/soapbox/components/svg_icon.tsx
@@ -4,7 +4,7 @@
  * @see soapbox/components/icon
  */
 
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import InlineSVG from 'react-inlinesvg'; // eslint-disable-line no-restricted-imports
 
diff --git a/app/soapbox/components/thumb_navigation-link.tsx b/app/soapbox/components/thumb_navigation-link.tsx
index 1a6fa2ea5..58a55e7e6 100644
--- a/app/soapbox/components/thumb_navigation-link.tsx
+++ b/app/soapbox/components/thumb_navigation-link.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
 
diff --git a/app/soapbox/components/ui/avatar/avatar.tsx b/app/soapbox/components/ui/avatar/avatar.tsx
index 1b02c6d25..bdd38df9c 100644
--- a/app/soapbox/components/ui/avatar/avatar.tsx
+++ b/app/soapbox/components/ui/avatar/avatar.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import * as React from 'react';
 
 import StillImage from 'soapbox/components/still_image';
diff --git a/app/soapbox/components/ui/banner/banner.tsx b/app/soapbox/components/ui/banner/banner.tsx
index fa1cd0b44..f9313eca3 100644
--- a/app/soapbox/components/ui/banner/banner.tsx
+++ b/app/soapbox/components/ui/banner/banner.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 interface IBanner {
diff --git a/app/soapbox/components/ui/button/button.tsx b/app/soapbox/components/ui/button/button.tsx
index e3ae339fc..97de8862b 100644
--- a/app/soapbox/components/ui/button/button.tsx
+++ b/app/soapbox/components/ui/button/button.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import * as React from 'react';
 import { Link } from 'react-router-dom';
 
diff --git a/app/soapbox/components/ui/button/useButtonStyles.ts b/app/soapbox/components/ui/button/useButtonStyles.ts
index 23d401999..286a7751f 100644
--- a/app/soapbox/components/ui/button/useButtonStyles.ts
+++ b/app/soapbox/components/ui/button/useButtonStyles.ts
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 
 type ButtonThemes = 'primary' | 'secondary' | 'tertiary' | 'accent' | 'danger' | 'transparent' | 'outline'
 type ButtonSizes = 'sm' | 'md' | 'lg'
diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx
index d342ef63c..816627326 100644
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/app/soapbox/components/ui/card/card.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { Link } from 'react-router-dom';
diff --git a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
index 659f72fd3..20810efbe 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 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 import { Emoji, HStack } from 'soapbox/components/ui';
diff --git a/app/soapbox/components/ui/hstack/hstack.tsx b/app/soapbox/components/ui/hstack/hstack.tsx
index f05f991ec..3eef11055 100644
--- a/app/soapbox/components/ui/hstack/hstack.tsx
+++ b/app/soapbox/components/ui/hstack/hstack.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { forwardRef } from 'react';
 
 const justifyContentOptions = {
diff --git a/app/soapbox/components/ui/icon-button/icon-button.tsx b/app/soapbox/components/ui/icon-button/icon-button.tsx
index 6b4f5414a..0e0ad25e2 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 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 import SvgIcon from '../icon/svg-icon';
diff --git a/app/soapbox/components/ui/input/input.tsx b/app/soapbox/components/ui/input/input.tsx
index 03a5630d1..5ca748ebc 100644
--- a/app/soapbox/components/ui/input/input.tsx
+++ b/app/soapbox/components/ui/input/input.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
diff --git a/app/soapbox/components/ui/layout/layout.tsx b/app/soapbox/components/ui/layout/layout.tsx
index 59e860406..239a7c578 100644
--- a/app/soapbox/components/ui/layout/layout.tsx
+++ b/app/soapbox/components/ui/layout/layout.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import StickyBox from 'react-sticky-box';
 
diff --git a/app/soapbox/components/ui/modal/modal.tsx b/app/soapbox/components/ui/modal/modal.tsx
index 654ad9e7b..e203a1460 100644
--- a/app/soapbox/components/ui/modal/modal.tsx
+++ b/app/soapbox/components/ui/modal/modal.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import * as React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
diff --git a/app/soapbox/components/ui/stack/stack.tsx b/app/soapbox/components/ui/stack/stack.tsx
index 984bae782..3398d8df2 100644
--- a/app/soapbox/components/ui/stack/stack.tsx
+++ b/app/soapbox/components/ui/stack/stack.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 type SIZES = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 10
diff --git a/app/soapbox/components/ui/tabs/tabs.tsx b/app/soapbox/components/ui/tabs/tabs.tsx
index 1222aaa38..49316529a 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 'classnames';
+import classNames from 'clsx';
 import * as React from 'react';
 import { useHistory } from 'react-router-dom';
 
diff --git a/app/soapbox/components/ui/text/text.tsx b/app/soapbox/components/ui/text/text.tsx
index 087893076..933ac7a76 100644
--- a/app/soapbox/components/ui/text/text.tsx
+++ b/app/soapbox/components/ui/text/text.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 type Themes = 'default' | 'danger' | 'primary' | 'muted' | 'subtle' | 'success' | 'inherit' | 'white'
diff --git a/app/soapbox/components/ui/textarea/textarea.tsx b/app/soapbox/components/ui/textarea/textarea.tsx
index 5ba1a523c..c1bbe0ee4 100644
--- a/app/soapbox/components/ui/textarea/textarea.tsx
+++ b/app/soapbox/components/ui/textarea/textarea.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 interface ITextarea extends Pick<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'maxLength' | 'onChange' | 'required' | 'disabled' | 'rows' | 'readOnly'> {
diff --git a/app/soapbox/components/validation-checkmark.tsx b/app/soapbox/components/validation-checkmark.tsx
index 634634866..6b6402ac1 100644
--- a/app/soapbox/components/validation-checkmark.tsx
+++ b/app/soapbox/components/validation-checkmark.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 import { HStack, Icon, Text } from 'soapbox/components/ui';
diff --git a/app/soapbox/components/verification_badge.tsx b/app/soapbox/components/verification_badge.tsx
index 987b1ad8a..ce1d3792a 100644
--- a/app/soapbox/components/verification_badge.tsx
+++ b/app/soapbox/components/verification_badge.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { useIntl, defineMessages } from 'react-intl';
 
diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx
index 92b6f6f95..099bb3b96 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 'classnames';
+import classNames from 'clsx';
 import React, { useState, useEffect } from 'react';
 import { IntlProvider } from 'react-intl';
 import { Provider } from 'react-redux';
diff --git a/app/soapbox/features/account_gallery/components/media_item.tsx b/app/soapbox/features/account_gallery/components/media_item.tsx
index cddc59c9d..d98f74363 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 'classnames';
+import classNames from 'clsx';
 import React, { useState } from 'react';
 
 import Blurhash from 'soapbox/components/blurhash';
diff --git a/app/soapbox/features/aliases/components/search.tsx b/app/soapbox/features/aliases/components/search.tsx
index 4c2bf4b6b..b84d90aa4 100644
--- a/app/soapbox/features/aliases/components/search.tsx
+++ b/app/soapbox/features/aliases/components/search.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
diff --git a/app/soapbox/features/audio/index.js b/app/soapbox/features/audio/index.js
index 07edf9eae..98bfc66b5 100644
--- a/app/soapbox/features/audio/index.js
+++ b/app/soapbox/features/audio/index.js
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
 import PropTypes from 'prop-types';
diff --git a/app/soapbox/features/backups/index.tsx b/app/soapbox/features/backups/index.tsx
index c74b1bf60..87049a936 100644
--- a/app/soapbox/features/backups/index.tsx
+++ b/app/soapbox/features/backups/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx
index 70f843ebd..ad1a2f82d 100644
--- a/app/soapbox/features/chats/components/chat-message-list.tsx
+++ b/app/soapbox/features/chats/components/chat-message-list.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import {
   Map as ImmutableMap,
   List as ImmutableList,
diff --git a/app/soapbox/features/compose/components/compose_form.js b/app/soapbox/features/compose/components/compose_form.js
index 961f79480..da66083a6 100644
--- a/app/soapbox/features/compose/components/compose_form.js
+++ b/app/soapbox/features/compose/components/compose_form.js
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import get from 'lodash/get';
 import PropTypes from 'prop-types';
 import React from 'react';
diff --git a/app/soapbox/features/compose/components/compose_form_button.tsx b/app/soapbox/features/compose/components/compose_form_button.tsx
index 975a89c41..f88225913 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 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 import { IconButton } from 'soapbox/components/ui';
diff --git a/app/soapbox/features/compose/components/emoji_picker_dropdown.js b/app/soapbox/features/compose/components/emoji_picker_dropdown.js
index aa24d2644..9deddd623 100644
--- a/app/soapbox/features/compose/components/emoji_picker_dropdown.js
+++ b/app/soapbox/features/compose/components/emoji_picker_dropdown.js
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import PropTypes from 'prop-types';
 import React from 'react';
diff --git a/app/soapbox/features/compose/components/privacy_dropdown.tsx b/app/soapbox/features/compose/components/privacy_dropdown.tsx
index a33eae37b..875e13d5f 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 'classnames';
+import classNames from 'clsx';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import React, { useState, useRef, useEffect } from 'react';
 import { useIntl, defineMessages } from 'react-intl';
diff --git a/app/soapbox/features/compose/components/schedule_form.tsx b/app/soapbox/features/compose/components/schedule_form.tsx
index 32137a71f..b1d25a6ab 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 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
diff --git a/app/soapbox/features/compose/components/search.tsx b/app/soapbox/features/compose/components/search.tsx
index b9eea88d4..9c1aab765 100644
--- a/app/soapbox/features/compose/components/search.tsx
+++ b/app/soapbox/features/compose/components/search.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { Map as ImmutableMap } from 'immutable';
 import debounce from 'lodash/debounce';
 import React, { useCallback } from 'react';
diff --git a/app/soapbox/features/compose/components/search_results.tsx b/app/soapbox/features/compose/components/search_results.tsx
index ddcf2a563..b1cb833ba 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 'classnames';
+import classNames from 'clsx';
 import React, { useEffect, useRef } from 'react';
 import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
diff --git a/app/soapbox/features/compose/components/text_character_counter.tsx b/app/soapbox/features/compose/components/text_character_counter.tsx
index ac650384b..6d07fa659 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 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { length } from 'stringz';
 
diff --git a/app/soapbox/features/compose/components/upload.tsx b/app/soapbox/features/compose/components/upload.tsx
index 5c9788575..77876c505 100644
--- a/app/soapbox/features/compose/components/upload.tsx
+++ b/app/soapbox/features/compose/components/upload.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState } from 'react';
 import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
 import { spring } from 'react-motion';
diff --git a/app/soapbox/features/compose/components/upload_form.tsx b/app/soapbox/features/compose/components/upload_form.tsx
index b177e1695..88ee7c012 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 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 import { useAppSelector } from 'soapbox/hooks';
diff --git a/app/soapbox/features/directory/components/account_card.tsx b/app/soapbox/features/directory/components/account_card.tsx
index 991461f41..ca3e852f1 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 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 
diff --git a/app/soapbox/features/directory/index.tsx b/app/soapbox/features/directory/index.tsx
index 375e99465..1824ddfe3 100644
--- a/app/soapbox/features/directory/index.tsx
+++ b/app/soapbox/features/directory/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
diff --git a/app/soapbox/features/federation_restrictions/components/restricted_instance.tsx b/app/soapbox/features/federation_restrictions/components/restricted_instance.tsx
index 7b2547d2b..9b5889208 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 'classnames';
+import classNames from 'clsx';
 import React, { useState } from 'react';
 
 import Icon from 'soapbox/components/icon';
diff --git a/app/soapbox/features/feed-filtering/feed-carousel.tsx b/app/soapbox/features/feed-filtering/feed-carousel.tsx
index 02b30e7a1..c3fac39be 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 'classnames';
+import classNames from 'clsx';
 import React, { useEffect, useState } from 'react';
 import { FormattedMessage } from 'react-intl';
 
diff --git a/app/soapbox/features/forms/index.tsx b/app/soapbox/features/forms/index.tsx
index 4bab25a5d..b4b13a503 100644
--- a/app/soapbox/features/forms/index.tsx
+++ b/app/soapbox/features/forms/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useState, useRef } from 'react';
 import { v4 as uuidv4 } from 'uuid';
 
diff --git a/app/soapbox/features/groups/create/index.js b/app/soapbox/features/groups/create/index.js
index 7da3e4c6a..d7189baa4 100644
--- a/app/soapbox/features/groups/create/index.js
+++ b/app/soapbox/features/groups/create/index.js
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { defineMessages, injectIntl } from 'react-intl';
diff --git a/app/soapbox/features/groups/edit/index.js b/app/soapbox/features/groups/edit/index.js
index 13601708b..2e040aa0e 100644
--- a/app/soapbox/features/groups/edit/index.js
+++ b/app/soapbox/features/groups/edit/index.js
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
diff --git a/app/soapbox/features/groups/index/index.js b/app/soapbox/features/groups/index/index.js
index 13be53b13..d661cf341 100644
--- a/app/soapbox/features/groups/index/index.js
+++ b/app/soapbox/features/groups/index/index.js
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
diff --git a/app/soapbox/features/introduction/index.js b/app/soapbox/features/introduction/index.js
index 34b868847..a35ba341a 100644
--- a/app/soapbox/features/introduction/index.js
+++ b/app/soapbox/features/introduction/index.js
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import PropTypes from 'prop-types';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
diff --git a/app/soapbox/features/list_editor/components/search.tsx b/app/soapbox/features/list_editor/components/search.tsx
index 4326ffa93..d386f40f0 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 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
diff --git a/app/soapbox/features/notifications/index.tsx b/app/soapbox/features/notifications/index.tsx
index 4f276f42e..de99b9043 100644
--- a/app/soapbox/features/notifications/index.tsx
+++ b/app/soapbox/features/notifications/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { List as ImmutableList, Map as ImmutableMap } from 'immutable';
 import debounce from 'lodash/debounce';
 import React, { useCallback, useEffect, useRef } from 'react';
diff --git a/app/soapbox/features/onboarding/onboarding-wizard.tsx b/app/soapbox/features/onboarding/onboarding-wizard.tsx
index cf88284f6..7b82e8862 100644
--- a/app/soapbox/features/onboarding/onboarding-wizard.tsx
+++ b/app/soapbox/features/onboarding/onboarding-wizard.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import * as React from 'react';
 import { useDispatch } from 'react-redux';
 import ReactSwipeableViews from 'react-swipeable-views';
diff --git a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
index 1889a3e20..8f95b496f 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 'classnames';
+import classNames from 'clsx';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
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 485775279..9961a08c0 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 'classnames';
+import classNames from 'clsx';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
diff --git a/app/soapbox/features/placeholder/components/placeholder_card.tsx b/app/soapbox/features/placeholder/components/placeholder_card.tsx
index b296ede4e..f587589d6 100644
--- a/app/soapbox/features/placeholder/components/placeholder_card.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder_card.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import * as React from 'react';
 
 import { randomIntFromInterval, generateText } from '../utils';
diff --git a/app/soapbox/features/placeholder/components/placeholder_status.tsx b/app/soapbox/features/placeholder/components/placeholder_status.tsx
index 0fd5cfb9b..1bff89459 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 'classnames';
+import classNames from 'clsx';
 import * as React from 'react';
 
 import PlaceholderAvatar from './placeholder_avatar';
diff --git a/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx b/app/soapbox/features/scheduled_statuses/components/scheduled_status.tsx
index 9bb26762a..865bbaff4 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 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
diff --git a/app/soapbox/features/soapbox_config/components/icon_picker_dropdown.js b/app/soapbox/features/soapbox_config/components/icon_picker_dropdown.js
index 8c2bdf473..cc2986a7b 100644
--- a/app/soapbox/features/soapbox_config/components/icon_picker_dropdown.js
+++ b/app/soapbox/features/soapbox_config/components/icon_picker_dropdown.js
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { supportsPassiveEvents } from 'detect-passive-events';
 import Picker from 'emoji-mart/dist-es/components/picker/picker';
 import PropTypes from 'prop-types';
diff --git a/app/soapbox/features/soapbox_config/components/site-preview.tsx b/app/soapbox/features/soapbox_config/components/site-preview.tsx
index 932fa39ca..94c349e25 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 'classnames';
+import classNames from 'clsx';
 import React, { useMemo } from 'react';
 import { FormattedMessage } from 'react-intl';
 
diff --git a/app/soapbox/features/status/components/card.tsx b/app/soapbox/features/status/components/card.tsx
index d15eaadf3..3d83020fe 100644
--- a/app/soapbox/features/status/components/card.tsx
+++ b/app/soapbox/features/status/components/card.tsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import classnames from 'clsx';
 import { List as ImmutableList } from 'immutable';
 import React, { useState, useEffect } from 'react';
 
diff --git a/app/soapbox/features/status/components/status-interaction-bar.tsx b/app/soapbox/features/status/components/status-interaction-bar.tsx
index ec21849a6..79d4f82bd 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 'classnames';
+import classNames from 'clsx';
 import { Map as ImmutableMap, List as ImmutableList } from 'immutable';
 import React from 'react';
 import { FormattedNumber } from 'react-intl';
diff --git a/app/soapbox/features/status/components/thread-status.tsx b/app/soapbox/features/status/components/thread-status.tsx
index f9117e903..d3d587e7a 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 'classnames';
+import classNames from 'clsx';
 import { OrderedSet as ImmutableOrderedSet } from 'immutable';
 import React from 'react';
 
diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index 1f02961d8..189c74853 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { List as ImmutableList, OrderedSet as ImmutableOrderedSet } from 'immutable';
 import { debounce } from 'lodash';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
diff --git a/app/soapbox/features/ui/components/accordion.tsx b/app/soapbox/features/ui/components/accordion.tsx
index 32eb9da0c..f425e5321 100644
--- a/app/soapbox/features/ui/components/accordion.tsx
+++ b/app/soapbox/features/ui/components/accordion.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
diff --git a/app/soapbox/features/ui/components/actions_modal.tsx b/app/soapbox/features/ui/components/actions_modal.tsx
index 2a9b78623..aaa8a6209 100644
--- a/app/soapbox/features/ui/components/actions_modal.tsx
+++ b/app/soapbox/features/ui/components/actions_modal.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { spring } from 'react-motion';
diff --git a/app/soapbox/features/ui/components/background_shapes.tsx b/app/soapbox/features/ui/components/background_shapes.tsx
index fd1cd678d..658d73f4a 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 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 interface IBackgroundShapes {
diff --git a/app/soapbox/features/ui/components/column_header.tsx b/app/soapbox/features/ui/components/column_header.tsx
index a0b9a7acb..fc0d6e7c9 100644
--- a/app/soapbox/features/ui/components/column_header.tsx
+++ b/app/soapbox/features/ui/components/column_header.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-// import classNames from 'classnames';
+// import classNames from 'clsx';
 // import Icon from 'soapbox/components/icon';
 import SubNavigation from 'soapbox/components/sub_navigation';
 
diff --git a/app/soapbox/features/ui/components/compare_history_modal.tsx b/app/soapbox/features/ui/components/compare_history_modal.tsx
index 1bf5d4df7..62898a8cb 100644
--- a/app/soapbox/features/ui/components/compare_history_modal.tsx
+++ b/app/soapbox/features/ui/components/compare_history_modal.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { List as ImmutableList } from 'immutable';
 import React, { useEffect } from 'react';
 import { FormattedDate, FormattedMessage } from 'react-intl';
diff --git a/app/soapbox/features/ui/components/focal_point_modal.js b/app/soapbox/features/ui/components/focal_point_modal.js
index 777b40ecb..b45b367eb 100644
--- a/app/soapbox/features/ui/components/focal_point_modal.js
+++ b/app/soapbox/features/ui/components/focal_point_modal.js
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import ImmutablePureComponent from 'react-immutable-pure-component';
diff --git a/app/soapbox/features/ui/components/image_loader.js b/app/soapbox/features/ui/components/image_loader.js
index a8f50772e..8e6e8ec55 100644
--- a/app/soapbox/features/ui/components/image_loader.js
+++ b/app/soapbox/features/ui/components/image_loader.js
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import PropTypes from 'prop-types';
 import React from 'react';
 
diff --git a/app/soapbox/features/ui/components/link_footer.tsx b/app/soapbox/features/ui/components/link_footer.tsx
index 913799a34..bc1c67fd3 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 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useDispatch } from 'react-redux';
diff --git a/app/soapbox/features/ui/components/media_modal.js b/app/soapbox/features/ui/components/media_modal.js
index dcc670d15..dc988f270 100644
--- a/app/soapbox/features/ui/components/media_modal.js
+++ b/app/soapbox/features/ui/components/media_modal.js
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
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 815aa57b5..314f80618 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 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 
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 38e3b11c4..aa9c4a1bd 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 'classnames';
+import classNames from 'clsx';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx
index 103223009..1df4df05a 100644
--- a/app/soapbox/features/ui/components/navbar.tsx
+++ b/app/soapbox/features/ui/components/navbar.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React, { useRef, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { useDispatch } from 'react-redux';
diff --git a/app/soapbox/features/ui/components/pending_status.tsx b/app/soapbox/features/ui/components/pending_status.tsx
index 5f4e5c63c..76b8bb47e 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 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 
 import StatusReplyMentions from 'soapbox/components/status-reply-mentions';
diff --git a/app/soapbox/features/ui/components/profile_fields_panel.tsx b/app/soapbox/features/ui/components/profile_fields_panel.tsx
index d734442e7..5674a3cff 100644
--- a/app/soapbox/features/ui/components/profile_fields_panel.tsx
+++ b/app/soapbox/features/ui/components/profile_fields_panel.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import React from 'react';
 import { defineMessages, useIntl, FormattedMessage, FormatDateOptions } from 'react-intl';
 
diff --git a/app/soapbox/features/ui/components/upload_area.tsx b/app/soapbox/features/ui/components/upload_area.tsx
index 42e8783f8..6aeb5caa2 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 'classnames';
+import classNames from 'clsx';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { spring } from 'react-motion';
diff --git a/app/soapbox/features/video/index.js b/app/soapbox/features/video/index.js
index d4250029b..e5eb400b7 100644
--- a/app/soapbox/features/video/index.js
+++ b/app/soapbox/features/video/index.js
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import classNames from 'clsx';
 import { fromJS, is } from 'immutable';
 import debounce from 'lodash/debounce';
 import throttle from 'lodash/throttle';
diff --git a/package.json b/package.json
index b74ac5285..d5a49a6f5 100644
--- a/package.json
+++ b/package.json
@@ -105,7 +105,7 @@
     "bowser": "^2.11.0",
     "browserslist": "^4.16.6",
     "cheerio": "^1.0.0-rc.10",
-    "classnames": "^2.2.5",
+    "clsx": "^1.2.1",
     "copy-webpack-plugin": "^9.0.1",
     "core-js": "^3.15.2",
     "cryptocurrency-icons": "^0.18.0",
diff --git a/webpack/shared.js b/webpack/shared.js
index 326981b8b..6cb916290 100644
--- a/webpack/shared.js
+++ b/webpack/shared.js
@@ -146,6 +146,7 @@ module.exports = {
       'node_modules',
     ],
     alias: {
+      'classnames': 'clsx',
       'icons': resolve('app', 'icons'),
       'custom': resolve('custom'),
     },
diff --git a/yarn.lock b/yarn.lock
index 6677785fd..5261e0570 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4213,6 +4213,11 @@ clone-regexp@^2.1.0:
   dependencies:
     is-regexp "^2.0.0"
 
+clsx@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
+  integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"