From bfe1401a3493633be14f21e1635803868cc69450 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 6 Feb 2023 23:48:44 +0100
Subject: [PATCH] Fix imports
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.tsx                   |  2 +-
 app/soapbox/components/announcements/reaction.tsx    |  2 +-
 app/soapbox/components/emoji-selector.tsx            |  1 -
 app/soapbox/components/error-boundary.tsx            |  8 ++++----
 app/soapbox/components/event-preview.tsx             |  2 +-
 app/soapbox/components/group-card.tsx                |  6 +++---
 app/soapbox/components/landing-gradient.tsx          |  2 +-
 app/soapbox/components/link.tsx                      |  2 +-
 app/soapbox/components/list.tsx                      |  2 +-
 app/soapbox/components/polls/poll-option.tsx         |  8 ++++----
 app/soapbox/components/radio.tsx                     |  2 +-
 app/soapbox/components/scroll-top-button.tsx         |  2 +-
 app/soapbox/components/sidebar-menu.tsx              |  6 +++---
 app/soapbox/components/ui/accordion/accordion.tsx    |  2 +-
 app/soapbox/components/ui/card/card.tsx              |  2 +-
 app/soapbox/components/ui/checkbox/checkbox.tsx      |  2 +-
 app/soapbox/components/ui/counter/counter.tsx        |  2 +-
 .../components/ui/emoji-selector/emoji-selector.tsx  |  2 +-
 app/soapbox/components/ui/form-group/form-group.tsx  |  4 ++--
 app/soapbox/components/ui/input/input.tsx            |  2 +-
 .../ui/phone-input/country-code-dropdown.tsx         |  2 +-
 .../components/ui/progress-bar/progress-bar.tsx      |  4 ++--
 .../components/ui/radio-button/radio-button.tsx      |  2 +-
 app/soapbox/components/ui/select/select.tsx          |  2 +-
 app/soapbox/components/ui/slider/slider.tsx          |  6 +++---
 app/soapbox/components/ui/tabs/tabs.tsx              |  2 +-
 app/soapbox/components/ui/tag-input/tag-input.tsx    |  2 +-
 app/soapbox/components/ui/tag-input/tag.tsx          |  2 +-
 app/soapbox/components/ui/toast/toast.tsx            |  8 ++++----
 app/soapbox/components/upload-progress.tsx           |  2 +-
 app/soapbox/features/about/index.tsx                 |  2 +-
 .../account-timeline/components/moved-note.tsx       |  2 +-
 app/soapbox/features/account/components/header.tsx   |  2 +-
 app/soapbox/features/admin/components/report.tsx     |  2 +-
 app/soapbox/features/ads/components/ad.tsx           |  2 +-
 app/soapbox/features/aliases/components/search.tsx   |  2 +-
 .../auth-login/components/consumers-list.tsx         |  2 +-
 app/soapbox/features/auth-token-list/index.tsx       |  2 +-
 .../features/chats/components/chat-composer.tsx      |  4 ++--
 .../features/chats/components/chat-list-item.tsx     |  4 ++--
 .../features/chats/components/chat-message-list.tsx  |  4 ++--
 .../chats/components/chat-page/chat-page.tsx         |  2 +-
 .../chat-page/components/chat-page-main.tsx          |  4 ++--
 .../components/chat-widget/chat-pane-header.tsx      |  2 +-
 .../chats/components/chat-widget/chat-settings.tsx   |  4 ++--
 .../features/directory/components/account-card.tsx   |  2 +-
 app/soapbox/features/embedded-status/index.tsx       |  2 +-
 app/soapbox/features/event/event-information.tsx     |  4 ++--
 .../features/feed-filtering/feed-carousel.tsx        | 10 +++++-----
 .../features/feed-suggestions/feed-suggestions.tsx   |  2 +-
 .../features/group/components/group-header.tsx       |  2 +-
 app/soapbox/features/home-timeline/index.tsx         |  2 +-
 app/soapbox/features/landing-page/index.tsx          |  2 +-
 app/soapbox/features/migration/index.tsx             |  2 +-
 .../notifications/components/notification.tsx        |  2 +-
 .../onboarding/steps/avatar-selection-step.tsx       |  2 +-
 .../features/onboarding/steps/completed-step.tsx     |  2 +-
 .../onboarding/steps/cover-photo-selection-step.tsx  |  4 ++--
 .../features/onboarding/steps/fediverse-step.tsx     |  4 ++--
 .../onboarding/steps/suggested-accounts-step.tsx     |  2 +-
 .../placeholder/components/placeholder-avatar.tsx    |  4 ++--
 .../placeholder/components/placeholder-card.tsx      |  2 +-
 .../components/placeholder-chat-message.tsx          |  4 ++--
 .../components/placeholder-display-name.tsx          |  2 +-
 .../components/placeholder-event-header.tsx          |  2 +-
 .../components/placeholder-event-preview.tsx         |  4 ++--
 .../components/placeholder-group-card.tsx            |  6 +++---
 .../placeholder/components/placeholder-hashtag.tsx   |  2 +-
 .../components/placeholder-media-gallery.tsx         |  2 +-
 .../components/placeholder-notification.tsx          |  2 +-
 .../components/placeholder-sidebar-suggestions.tsx   |  2 +-
 .../components/placeholder-sidebar-trends.tsx        |  2 +-
 .../components/placeholder-status-content.tsx        |  2 +-
 .../features/public-layout/components/footer.tsx     |  2 +-
 .../features/public-layout/components/sonar.tsx      | 10 +++++-----
 .../soapbox-config/components/site-preview.tsx       |  2 +-
 app/soapbox/features/status/index.tsx                |  4 ++--
 .../ui/components/floating-action-button.tsx         |  2 +-
 .../compose-event-modal/compose-event-modal.tsx      |  2 +-
 .../modals/compose-event-modal/upload-button.tsx     |  2 +-
 .../features/ui/components/modals/hotkeys-modal.tsx  |  2 +-
 .../modals/manage-group-modal/steps/details-step.tsx |  4 ++--
 .../features/ui/components/modals/policy-modal.tsx   | 12 ++++++------
 .../components/modals/report-modal/report-modal.tsx  |  2 +-
 .../modals/report-modal/steps/confirmation-step.tsx  |  2 +-
 .../modals/report-modal/steps/reason-step.tsx        |  2 +-
 app/soapbox/features/ui/components/navbar.tsx        |  2 +-
 .../features/ui/components/profile-info-panel.tsx    |  2 +-
 app/soapbox/features/verification/email-passthru.tsx |  8 ++++----
 app/soapbox/features/verification/registration.tsx   |  4 ++--
 .../verification/steps/email-verification.tsx        |  2 +-
 app/styles/application.scss                          |  1 -
 92 files changed, 139 insertions(+), 141 deletions(-)

diff --git a/app/soapbox/components/account.tsx b/app/soapbox/components/account.tsx
index 710737963..2901433ec 100644
--- a/app/soapbox/components/account.tsx
+++ b/app/soapbox/components/account.tsx
@@ -43,7 +43,7 @@ const InstanceFavicon: React.FC<IInstanceFavicon> = ({ account, disabled }) => {
 
   return (
     <button
-      className='focus:ring-primary-500 h-4 w-4 flex-none focus:ring-2 focus:ring-offset-2'
+      className='h-4 w-4 flex-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2'
       onClick={handleClick}
       disabled={disabled}
     >
diff --git a/app/soapbox/components/announcements/reaction.tsx b/app/soapbox/components/announcements/reaction.tsx
index 6cfe07f73..edcdc5206 100644
--- a/app/soapbox/components/announcements/reaction.tsx
+++ b/app/soapbox/components/announcements/reaction.tsx
@@ -56,7 +56,7 @@ const Reaction: React.FC<IReaction> = ({ announcementId, reaction, addReaction,
       <span className='block h-4 w-4'>
         <Emoji hovered={hovered} emoji={reaction.name} emojiMap={emojiMap} />
       </span>
-      <span className='text-primary-600 block min-w-[9px] text-center text-xs font-medium dark:text-white'>
+      <span className='block min-w-[9px] text-center text-xs font-medium text-primary-600 dark:text-white'>
         <AnimatedNumber value={reaction.count} />
       </span>
     </button>
diff --git a/app/soapbox/components/emoji-selector.tsx b/app/soapbox/components/emoji-selector.tsx
index ad4d558a5..5ed0ccf19 100644
--- a/app/soapbox/components/emoji-selector.tsx
+++ b/app/soapbox/components/emoji-selector.tsx
@@ -1,4 +1,3 @@
-// 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/error-boundary.tsx b/app/soapbox/components/error-boundary.tsx
index 4285c31d5..3a6b4ac0b 100644
--- a/app/soapbox/components/error-boundary.tsx
+++ b/app/soapbox/components/error-boundary.tsx
@@ -113,7 +113,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
     const errorText = this.getErrorText();
 
     return (
-      <div className='dark:bg-primary-900 flex h-screen flex-col bg-white pt-16 pb-12'>
+      <div className='flex h-screen flex-col bg-white pt-16 pb-12 dark:bg-primary-900'>
         <main className='mx-auto flex w-full max-w-7xl grow flex-col justify-center px-4 sm:px-6 lg:px-8'>
           <div className='flex shrink-0 justify-center'>
             <a href='/' className='inline-flex'>
@@ -132,7 +132,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
                   defaultMessage="We're sorry for the interruption. If the problem persists, please reach out to our support team. You may also try to {clearCookies} (this will log you out)."
                   values={{
                     clearCookies: (
-                      <a href='/' onClick={this.clearCookies} className='text-primary-600 dark:text-accent-blue hover:underline'>
+                      <a href='/' onClick={this.clearCookies} className='text-primary-600 hover:underline dark:text-accent-blue'>
                         <FormattedMessage
                           id='alert.unexpected.clear_cookies'
                           defaultMessage='clear cookies and browser data'
@@ -150,7 +150,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
               </Text>
 
               <div className='mt-10'>
-                <a href='/' className='text-primary-600 dark:text-accent-blue text-base font-medium hover:underline'>
+                <a href='/' className='text-base font-medium text-primary-600 hover:underline dark:text-accent-blue'>
                   <FormattedMessage id='alert.unexpected.return_home' defaultMessage='Return Home' />
                   <span aria-hidden='true'> &rarr;</span>
                 </a>
@@ -162,7 +162,7 @@ class ErrorBoundary extends React.PureComponent<Props, State> {
                 {errorText && (
                   <textarea
                     ref={this.setTextareaRef}
-                    className='focus:border-primary-500 focus:ring-primary-500 block h-48 w-full rounded-md border-gray-300 bg-gray-100 p-4 font-mono text-gray-900 shadow-sm focus:ring-2 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 sm:text-sm'
+                    className='block h-48 w-full rounded-md border-gray-300 bg-gray-100 p-4 font-mono text-gray-900 shadow-sm focus:border-primary-500 focus:ring-2 focus:ring-primary-500 dark:border-gray-700 dark:bg-gray-800 dark:text-gray-100 sm:text-sm'
                     value={errorText}
                     onClick={this.handleCopy}
                     readOnly
diff --git a/app/soapbox/components/event-preview.tsx b/app/soapbox/components/event-preview.tsx
index 6cba415e9..0d11382e4 100644
--- a/app/soapbox/components/event-preview.tsx
+++ b/app/soapbox/components/event-preview.tsx
@@ -55,7 +55,7 @@ const EventPreview: React.FC<IEventPreview> = ({ status, className, hideAction,
       <div className='absolute top-28 right-3'>
         {floatingAction && action}
       </div>
-      <div className='bg-primary-200 h-40 dark:bg-gray-600'>
+      <div className='h-40 bg-primary-200 dark:bg-gray-600'>
         {banner && <img className='h-full w-full object-cover' src={banner.url} alt={intl.formatMessage(messages.eventBanner)} />}
       </div>
       <Stack className='p-2.5' space={2}>
diff --git a/app/soapbox/components/group-card.tsx b/app/soapbox/components/group-card.tsx
index edb95a285..15d8cf497 100644
--- a/app/soapbox/components/group-card.tsx
+++ b/app/soapbox/components/group-card.tsx
@@ -18,11 +18,11 @@ const GroupCard: React.FC<IGroupCard> = ({ group }) => {
 
   return (
     <div className='overflow-hidden'>
-      <Stack className='dark:border-primary-800 dark:bg-primary-900 rounded-lg border border-solid border-gray-300 bg-white sm:rounded-xl'>
-        <div className='bg-primary-100 relative -m-[1px] mb-0 h-[120px] rounded-t-lg dark:bg-gray-800 sm:rounded-t-xl'>
+      <Stack className='rounded-lg border border-solid border-gray-300 bg-white dark:border-primary-800 dark:bg-primary-900 sm:rounded-xl'>
+        <div className='relative -m-[1px] mb-0 h-[120px] rounded-t-lg bg-primary-100 dark:bg-gray-800 sm:rounded-t-xl'>
           {group.header && <img className='h-full w-full rounded-t-lg object-cover sm:rounded-t-xl' src={group.header} alt={intl.formatMessage(messages.groupHeader)} />}
           <div className='absolute left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2'>
-            <Avatar className='dark:ring-primary-900 ring-2 ring-white' src={group.avatar} size={64} />
+            <Avatar className='ring-2 ring-white dark:ring-primary-900' src={group.avatar} size={64} />
           </div>
         </div>
         <Stack className='p-3 pt-9' alignItems='center' space={3}>
diff --git a/app/soapbox/components/landing-gradient.tsx b/app/soapbox/components/landing-gradient.tsx
index 6f923de27..1cef99843 100644
--- a/app/soapbox/components/landing-gradient.tsx
+++ b/app/soapbox/components/landing-gradient.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 /** Fullscreen gradient used as a backdrop to public pages. */
 const LandingGradient: React.FC = () => (
-  <div className='from-primary-50 to-gradient-end/10 dark:from-primary-900/50 dark:via-primary-900 dark:to-primary-800/50 fixed h-screen w-full bg-gradient-to-tr via-white' />
+  <div className='fixed h-screen w-full bg-gradient-to-tr from-primary-50 via-white to-gradient-end/10 dark:from-primary-900/50 dark:via-primary-900 dark:to-primary-800/50' />
 );
 
 export default LandingGradient;
diff --git a/app/soapbox/components/link.tsx b/app/soapbox/components/link.tsx
index 7455547e6..51bb91300 100644
--- a/app/soapbox/components/link.tsx
+++ b/app/soapbox/components/link.tsx
@@ -4,7 +4,7 @@ import { Link as Comp, LinkProps } from 'react-router-dom';
 const Link = (props: LinkProps) => (
   <Comp
     {...props}
-    className='text-primary-600 dark:text-accent-blue hover:underline'
+    className='text-primary-600 hover:underline dark:text-accent-blue'
   />
 );
 
diff --git a/app/soapbox/components/list.tsx b/app/soapbox/components/list.tsx
index f8d2471df..4dd1f85b7 100644
--- a/app/soapbox/components/list.tsx
+++ b/app/soapbox/components/list.tsx
@@ -84,7 +84,7 @@ const ListItem: React.FC<IListItem> = ({ label, hint, children, onClick, onSelec
           {children}
 
           {isSelected ? (
-            <Icon src={require('@tabler/icons/check.svg')} className='text-primary-500 dark:text-primary-400 ml-1' />
+            <Icon src={require('@tabler/icons/check.svg')} className='ml-1 text-primary-500 dark:text-primary-400' />
           ) : null}
         </div>
       ) : null}
diff --git a/app/soapbox/components/polls/poll-option.tsx b/app/soapbox/components/polls/poll-option.tsx
index dbd3e0ae6..d318b287e 100644
--- a/app/soapbox/components/polls/poll-option.tsx
+++ b/app/soapbox/components/polls/poll-option.tsx
@@ -20,7 +20,7 @@ const PollPercentageBar: React.FC<{ percent: number, leading: boolean }> = ({ pe
     <Motion defaultStyle={{ width: 0 }} style={{ width: spring(percent, { ...presets.gentle, precision: 0.1 }) }}>
       {({ width }) => (
         <span
-          className='bg-primary-100 dark:bg-primary-500 absolute inset-0 inline-block h-full rounded-l-md'
+          className='absolute inset-0 inline-block h-full rounded-l-md bg-primary-100 dark:bg-primary-500'
           style={{ width: `${width}%` }}
         />
       )}
@@ -85,7 +85,7 @@ const PollOptionText: React.FC<IPollOptionText> = ({ poll, option, index, active
             aria-label={option.title}
           >
             {active && (
-              <Icon src={require('@tabler/icons/check.svg')} className='dark:text-primary-900 h-4 w-4 text-white' />
+              <Icon src={require('@tabler/icons/check.svg')} className='h-4 w-4 text-white dark:text-primary-900' />
             )}
           </span>
         </div>
@@ -123,7 +123,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
           <HStack
             justifyContent='between'
             alignItems='center'
-            className='dark:bg-primary-800 relative w-full overflow-hidden rounded-md bg-white p-2'
+            className='relative w-full overflow-hidden rounded-md bg-white p-2 dark:bg-primary-800'
           >
             <PollPercentageBar percent={percent} leading={leading} />
 
@@ -141,7 +141,7 @@ const PollOption: React.FC<IPollOption> = (props): JSX.Element | null => {
                 <Icon
                   src={require('@tabler/icons/circle-check.svg')}
                   alt={intl.formatMessage(messages.voted)}
-                  className='text-primary-600 dark:text-primary-800 h-4 w-4 dark:fill-white'
+                  className='h-4 w-4 text-primary-600 dark:fill-white dark:text-primary-800'
                 />
               ) : (
                 <div className='svg-icon' />
diff --git a/app/soapbox/components/radio.tsx b/app/soapbox/components/radio.tsx
index f122e3ea8..ef204b06f 100644
--- a/app/soapbox/components/radio.tsx
+++ b/app/soapbox/components/radio.tsx
@@ -31,7 +31,7 @@ const RadioItem: React.FC<IRadioItem> = ({ label, hint, checked = false, onChang
         checked={checked}
         onChange={onChange}
         value={value}
-        className='text-primary-600 focus:ring-primary-500 h-4 w-4 border-gray-300'
+        className='h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500'
       />
     </ListItem>
   );
diff --git a/app/soapbox/components/scroll-top-button.tsx b/app/soapbox/components/scroll-top-button.tsx
index 0cc119689..21c368b34 100644
--- a/app/soapbox/components/scroll-top-button.tsx
+++ b/app/soapbox/components/scroll-top-button.tsx
@@ -83,7 +83,7 @@ const ScrollTopButton: React.FC<IScrollTopButton> = ({
 
   return (
     <div className={classes}>
-      <a className='bg-primary-600 hover:bg-primary-700 flex cursor-pointer items-center space-x-1.5 whitespace-nowrap rounded-full px-4 py-2 text-white transition-transform hover:scale-105 active:scale-100' onClick={handleClick}>
+      <a className='flex cursor-pointer items-center space-x-1.5 whitespace-nowrap rounded-full bg-primary-600 px-4 py-2 text-white transition-transform hover:scale-105 hover:bg-primary-700 active:scale-100' onClick={handleClick}>
         <Icon src={require('@tabler/icons/arrow-bar-to-up.svg')} />
 
         {(count > 0) && (
diff --git a/app/soapbox/components/sidebar-menu.tsx b/app/soapbox/components/sidebar-menu.tsx
index b0cf46ac0..e87cb16df 100644
--- a/app/soapbox/components/sidebar-menu.tsx
+++ b/app/soapbox/components/sidebar-menu.tsx
@@ -53,8 +53,8 @@ interface ISidebarLink {
 const SidebarLink: React.FC<ISidebarLink> = ({ href, to, icon, text, onClick }) => {
   const body = (
     <HStack space={2} alignItems='center'>
-      <div className='bg-primary-50 relative inline-flex rounded-full p-2 dark:bg-gray-800'>
-        <Icon src={icon} className='text-primary-500 h-5 w-5' />
+      <div className='relative inline-flex rounded-full bg-primary-50 p-2 dark:bg-gray-800'>
+        <Icon src={icon} className='h-5 w-5 text-primary-500' />
       </div>
 
       <Text tag='span' weight='medium' theme='inherit'>{text}</Text>
@@ -346,7 +346,7 @@ const SidebarMenu: React.FC = (): JSX.Element | null => {
                         {otherAccounts.map(account => renderAccount(account))}
 
                         <NavLink className='flex items-center space-x-1 py-2' to='/login/add' onClick={handleClose}>
-                          <Icon className='text-primary-500 h-4 w-4' src={require('@tabler/icons/plus.svg')} />
+                          <Icon className='h-4 w-4 text-primary-500' src={require('@tabler/icons/plus.svg')} />
                           <Text size='sm' weight='medium'>{intl.formatMessage(messages.addAccount)}</Text>
                         </NavLink>
                       </div>
diff --git a/app/soapbox/components/ui/accordion/accordion.tsx b/app/soapbox/components/ui/accordion/accordion.tsx
index 1462a4f6d..b12b5382a 100644
--- a/app/soapbox/components/ui/accordion/accordion.tsx
+++ b/app/soapbox/components/ui/accordion/accordion.tsx
@@ -36,7 +36,7 @@ const Accordion: React.FC<IAccordion> = ({ headline, children, menu, expanded =
   };
 
   return (
-    <div className='dark:bg-primary-800 rounded-lg bg-white text-gray-900 shadow dark:text-gray-100 dark:shadow-none'>
+    <div className='rounded-lg bg-white text-gray-900 shadow dark:bg-primary-800 dark:text-gray-100 dark:shadow-none'>
       <button
         type='button'
         onClick={handleToggle}
diff --git a/app/soapbox/components/ui/card/card.tsx b/app/soapbox/components/ui/card/card.tsx
index 767091f3b..e2ed0ff2e 100644
--- a/app/soapbox/components/ui/card/card.tsx
+++ b/app/soapbox/components/ui/card/card.tsx
@@ -64,7 +64,7 @@ const CardHeader: React.FC<ICardHeader> = ({ className, children, backHref, onBa
     const backAttributes = backHref ? { to: backHref } : { onClick: onBackClick };
 
     return (
-      <Comp {...backAttributes} className='focus:ring-primary-500 text-gray-900 focus:ring-2 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
+      <Comp {...backAttributes} className='text-gray-900 focus:ring-2 focus:ring-primary-500 dark:text-gray-100' aria-label={intl.formatMessage(messages.back)}>
         <SvgIcon src={require('@tabler/icons/arrow-left.svg')} className='h-6 w-6 rtl:rotate-180' />
         <span className='sr-only' data-testid='back-button'>{intl.formatMessage(messages.back)}</span>
       </Comp>
diff --git a/app/soapbox/components/ui/checkbox/checkbox.tsx b/app/soapbox/components/ui/checkbox/checkbox.tsx
index dfd32acf7..fe31e8089 100644
--- a/app/soapbox/components/ui/checkbox/checkbox.tsx
+++ b/app/soapbox/components/ui/checkbox/checkbox.tsx
@@ -9,7 +9,7 @@ const Checkbox = React.forwardRef<HTMLInputElement, ICheckbox>((props, ref) => {
       {...props}
       ref={ref}
       type='checkbox'
-      className='text-primary-600 focus:ring-primary-500 h-4 w-4 rounded border-2 border-gray-300 dark:border-gray-800 dark:bg-gray-900'
+      className='h-4 w-4 rounded border-2 border-gray-300 text-primary-600 focus:ring-primary-500 dark:border-gray-800 dark:bg-gray-900'
     />
   );
 });
diff --git a/app/soapbox/components/ui/counter/counter.tsx b/app/soapbox/components/ui/counter/counter.tsx
index 18b7122f9..e0fbb6004 100644
--- a/app/soapbox/components/ui/counter/counter.tsx
+++ b/app/soapbox/components/ui/counter/counter.tsx
@@ -12,7 +12,7 @@ interface ICounter {
 /** A simple counter for notifications, etc. */
 const Counter: React.FC<ICounter> = ({ count, countMax }) => {
   return (
-    <span className='bg-secondary-500 flex h-5 min-w-[20px] max-w-[26px] items-center justify-center rounded-full text-xs font-medium text-white ring-2 ring-white dark:ring-gray-800'>
+    <span className='flex h-5 min-w-[20px] max-w-[26px] items-center justify-center rounded-full bg-secondary-500 text-xs font-medium text-white ring-2 ring-white dark:ring-gray-800'>
       {shortNumberFormat(count, countMax)}
     </span>
   );
diff --git a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
index 209847d87..84ef1fbc1 100644
--- a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
+++ b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import React from 'react';
+import React, { useRef } from 'react';
 
 import { Emoji, HStack } from 'soapbox/components/ui';
 
diff --git a/app/soapbox/components/ui/form-group/form-group.tsx b/app/soapbox/components/ui/form-group/form-group.tsx
index 5e119f2de..bbd094d2e 100644
--- a/app/soapbox/components/ui/form-group/form-group.tsx
+++ b/app/soapbox/components/ui/form-group/form-group.tsx
@@ -55,7 +55,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
             <div>
               <p
                 data-testid='form-group-error'
-                className='form-error bg-danger-200 text-danger-900 relative mt-0.5 inline-block rounded-md px-2 py-1 text-xs'
+                className='form-error relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
               >
                 {errors.join(', ')}
               </p>
@@ -92,7 +92,7 @@ const FormGroup: React.FC<IFormGroup> = (props) => {
         {hasError && (
           <p
             data-testid='form-group-error'
-            className='form-error bg-danger-200 text-danger-900 relative mt-0.5 inline-block rounded-md px-2 py-1 text-xs'
+            className='form-error relative mt-0.5 inline-block rounded-md bg-danger-200 px-2 py-1 text-xs text-danger-900'
           >
             {errors.join(', ')}
           </p>
diff --git a/app/soapbox/components/ui/input/input.tsx b/app/soapbox/components/ui/input/input.tsx
index 83fd5917c..af8539bcb 100644
--- a/app/soapbox/components/ui/input/input.tsx
+++ b/app/soapbox/components/ui/input/input.tsx
@@ -113,7 +113,7 @@ const Input = React.forwardRef<HTMLInputElement, IInput>(
                 type='button'
                 onClick={togglePassword}
                 tabIndex={-1}
-                className='focus:ring-primary-500 h-full px-2 text-gray-700 hover:text-gray-500 focus:ring-2 dark:text-gray-600 dark:hover:text-gray-400'
+                className='h-full px-2 text-gray-700 hover:text-gray-500 focus:ring-2 focus:ring-primary-500 dark:text-gray-600 dark:hover:text-gray-400'
               >
                 <SvgIcon
                   src={revealed ? require('@tabler/icons/eye-off.svg') : require('@tabler/icons/eye.svg')}
diff --git a/app/soapbox/components/ui/phone-input/country-code-dropdown.tsx b/app/soapbox/components/ui/phone-input/country-code-dropdown.tsx
index 9264dcf87..e420b733f 100644
--- a/app/soapbox/components/ui/phone-input/country-code-dropdown.tsx
+++ b/app/soapbox/components/ui/phone-input/country-code-dropdown.tsx
@@ -12,7 +12,7 @@ const CountryCodeDropdown: React.FC<ICountryCodeDropdown> = ({ countryCode, onCh
   return (
     <select
       value={countryCode}
-      className='focus:ring-primary-500 h-full rounded-md border-transparent bg-transparent py-0 pl-3 pr-7 text-base focus:outline-none dark:text-white sm:text-sm'
+      className='h-full rounded-md border-transparent bg-transparent py-0 pl-3 pr-7 text-base focus:outline-none focus:ring-primary-500 dark:text-white sm:text-sm'
       onChange={(event) => onChange(event.target.value as any)}
     >
       {COUNTRY_CODES.map((code) => (
diff --git a/app/soapbox/components/ui/progress-bar/progress-bar.tsx b/app/soapbox/components/ui/progress-bar/progress-bar.tsx
index 0ac4e8ab1..c0161ae34 100644
--- a/app/soapbox/components/ui/progress-bar/progress-bar.tsx
+++ b/app/soapbox/components/ui/progress-bar/progress-bar.tsx
@@ -6,8 +6,8 @@ interface IProgressBar {
 
 /** A horizontal meter filled to the given percentage. */
 const ProgressBar: React.FC<IProgressBar> = ({ progress }) => (
-  <div className='dark:bg-primary-800 h-2.5 w-full overflow-hidden rounded-full bg-gray-300'>
-    <div className='bg-secondary-500 h-full' style={{ width: `${Math.floor(progress * 100)}%` }} />
+  <div className='h-2.5 w-full overflow-hidden rounded-full bg-gray-300 dark:bg-primary-800'>
+    <div className='h-full bg-secondary-500' style={{ width: `${Math.floor(progress * 100)}%` }} />
   </div>
 );
 
diff --git a/app/soapbox/components/ui/radio-button/radio-button.tsx b/app/soapbox/components/ui/radio-button/radio-button.tsx
index b956dd077..96f2c2ec4 100644
--- a/app/soapbox/components/ui/radio-button/radio-button.tsx
+++ b/app/soapbox/components/ui/radio-button/radio-button.tsx
@@ -26,7 +26,7 @@ const RadioButton: React.FC<IRadioButton> = ({ name, value, checked, onChange, l
         value={value}
         checked={checked}
         onChange={onChange}
-        className='text-primary-600 focus:ring-primary-500 h-4 w-4 border-gray-300'
+        className='h-4 w-4 border-gray-300 text-primary-600 focus:ring-primary-500'
       />
 
       <label htmlFor={formFieldId} className='block text-sm font-medium text-gray-700'>
diff --git a/app/soapbox/components/ui/select/select.tsx b/app/soapbox/components/ui/select/select.tsx
index 63070085a..4c88ae5bd 100644
--- a/app/soapbox/components/ui/select/select.tsx
+++ b/app/soapbox/components/ui/select/select.tsx
@@ -11,7 +11,7 @@ const Select = React.forwardRef<HTMLSelectElement, ISelect>((props, ref) => {
   return (
     <select
       ref={ref}
-      className={`focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 w-full truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:outline-none disabled:opacity-50 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 sm:text-sm ${className}`}
+      className={`w-full truncate rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-primary-500 focus:outline-none focus:ring-primary-500 disabled:opacity-50 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm ${className}`}
       {...filteredProps}
     >
       {children}
diff --git a/app/soapbox/components/ui/slider/slider.tsx b/app/soapbox/components/ui/slider/slider.tsx
index 1ed7e96be..4449f7f5b 100644
--- a/app/soapbox/components/ui/slider/slider.tsx
+++ b/app/soapbox/components/ui/slider/slider.tsx
@@ -57,10 +57,10 @@ const Slider: React.FC<ISlider> = ({ value, onChange }) => {
       onMouseDown={handleMouseDown}
       ref={node}
     >
-      <div className='bg-primary-200 dark:bg-primary-700 absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full' />
-      <div className='bg-accent-500 absolute top-1/2 h-1 -translate-y-1/2 rounded-full' style={{ width: `${value * 100}%` }} />
+      <div className='absolute top-1/2 h-1 w-full -translate-y-1/2 rounded-full bg-primary-200 dark:bg-primary-700' />
+      <div className='absolute top-1/2 h-1 -translate-y-1/2 rounded-full bg-accent-500' style={{ width: `${value * 100}%` }} />
       <span
-        className='bg-accent-500 absolute top-1/2 z-10 -ml-1.5 h-3 w-3 -translate-y-1/2 rounded-full shadow'
+        className='absolute top-1/2 z-10 -ml-1.5 h-3 w-3 -translate-y-1/2 rounded-full bg-accent-500 shadow'
         tabIndex={0}
         style={{ left: `${value * 100}%` }}
       />
diff --git a/app/soapbox/components/ui/tabs/tabs.tsx b/app/soapbox/components/ui/tabs/tabs.tsx
index e38564b19..0d0d4d9a8 100644
--- a/app/soapbox/components/ui/tabs/tabs.tsx
+++ b/app/soapbox/components/ui/tabs/tabs.tsx
@@ -46,7 +46,7 @@ const AnimatedTabs: React.FC<IAnimatedInterface> = ({ children, ...rest }) => {
         ref={ref}
       >
         <div
-          className='bg-primary-200 dark:bg-primary-700 absolute h-[3px] w-full'
+          className='absolute h-[3px] w-full bg-primary-200 dark:bg-primary-700'
           style={{ top }}
         />
         <div
diff --git a/app/soapbox/components/ui/tag-input/tag-input.tsx b/app/soapbox/components/ui/tag-input/tag-input.tsx
index c45c01d61..fe09bf0ee 100644
--- a/app/soapbox/components/ui/tag-input/tag-input.tsx
+++ b/app/soapbox/components/ui/tag-input/tag-input.tsx
@@ -45,7 +45,7 @@ const TagInput: React.FC<ITagInput> = ({ tags, onChange, placeholder }) => {
   return (
     <div className='relative mt-1 grow shadow-sm'>
       <HStack
-        className='focus:border-primary-500 focus:ring-primary-500 dark:focus:border-primary-500 dark:focus:ring-primary-500 block w-full rounded-md border-gray-400 bg-white p-2 pb-0 text-gray-900 placeholder:text-gray-600 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:placeholder:text-gray-600 sm:text-sm'
+        className='block w-full rounded-md border-gray-400 bg-white p-2 pb-0 text-gray-900 placeholder:text-gray-600 focus:border-primary-500 focus:ring-primary-500 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-100 dark:ring-1 dark:ring-gray-800 dark:placeholder:text-gray-600 dark:focus:border-primary-500 dark:focus:ring-primary-500 sm:text-sm'
         space={2}
         wrap
       >
diff --git a/app/soapbox/components/ui/tag-input/tag.tsx b/app/soapbox/components/ui/tag-input/tag.tsx
index 1c0672127..94ce5bbfb 100644
--- a/app/soapbox/components/ui/tag-input/tag.tsx
+++ b/app/soapbox/components/ui/tag-input/tag.tsx
@@ -13,7 +13,7 @@ interface ITag {
 /** A single editable Tag (used by TagInput). */
 const Tag: React.FC<ITag> = ({ tag, onDelete }) => {
   return (
-    <div className='bg-primary-500 inline-flex items-center whitespace-nowrap rounded p-1'>
+    <div className='inline-flex items-center whitespace-nowrap rounded bg-primary-500 p-1'>
       <Text theme='white'>{tag}</Text>
 
       <IconButton
diff --git a/app/soapbox/components/ui/toast/toast.tsx b/app/soapbox/components/ui/toast/toast.tsx
index 7285bd340..38bda317e 100644
--- a/app/soapbox/components/ui/toast/toast.tsx
+++ b/app/soapbox/components/ui/toast/toast.tsx
@@ -40,7 +40,7 @@ const Toast = (props: IToast) => {
         return (
           <Icon
             src={require('@tabler/icons/circle-check.svg')}
-            className='text-success-500 dark:text-success-400 h-6 w-6'
+            className='h-6 w-6 text-success-500 dark:text-success-400'
             aria-hidden
           />
         );
@@ -48,7 +48,7 @@ const Toast = (props: IToast) => {
         return (
           <Icon
             src={require('@tabler/icons/info-circle.svg')}
-            className='text-primary-600 dark:text-accent-blue h-6 w-6'
+            className='h-6 w-6 text-primary-600 dark:text-accent-blue'
             aria-hidden
           />
         );
@@ -56,7 +56,7 @@ const Toast = (props: IToast) => {
         return (
           <Icon
             src={require('@tabler/icons/alert-circle.svg')}
-            className='text-danger-600 h-6 w-6'
+            className='h-6 w-6 text-danger-600'
             aria-hidden
           />
         );
@@ -129,7 +129,7 @@ const Toast = (props: IToast) => {
         <div className='flex shrink-0 pt-0.5'>
           <button
             type='button'
-            className='focus:ring-primary-500 inline-flex rounded-md text-gray-600 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:text-gray-600 dark:hover:text-gray-500'
+            className='inline-flex rounded-md text-gray-600 hover:text-gray-700 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:text-gray-600 dark:hover:text-gray-500'
             onClick={dismissToast}
             data-testid='toast-dismiss'
           >
diff --git a/app/soapbox/components/upload-progress.tsx b/app/soapbox/components/upload-progress.tsx
index f65129b16..5cbb4e1b3 100644
--- a/app/soapbox/components/upload-progress.tsx
+++ b/app/soapbox/components/upload-progress.tsx
@@ -28,7 +28,7 @@ const UploadProgress: React.FC<IUploadProgress> = ({ progress }) => {
           <Motion defaultStyle={{ width: 0 }} style={{ width: spring(progress) }}>
             {({ width }) =>
               (<div
-                className='bg-primary-600 absolute left-0 top-0 h-1.5 rounded-lg'
+                className='absolute left-0 top-0 h-1.5 rounded-lg bg-primary-600'
                 style={{ width: `${width}%` }}
               />)
             }
diff --git a/app/soapbox/features/about/index.tsx b/app/soapbox/features/about/index.tsx
index d528d71c4..8d1be5c2e 100644
--- a/app/soapbox/features/about/index.tsx
+++ b/app/soapbox/features/about/index.tsx
@@ -60,7 +60,7 @@ const AboutPage: React.FC = () => {
   );
 
   return (
-    <div className='prose dark:prose-invert mx-auto py-20'>
+    <div className='prose mx-auto py-20 dark:prose-invert'>
       <div dangerouslySetInnerHTML={{ __html: pageHtml }} />
 
       {alsoAvailable}
diff --git a/app/soapbox/features/account-timeline/components/moved-note.tsx b/app/soapbox/features/account-timeline/components/moved-note.tsx
index 7cc64f5ca..a41e241d1 100644
--- a/app/soapbox/features/account-timeline/components/moved-note.tsx
+++ b/app/soapbox/features/account-timeline/components/moved-note.tsx
@@ -17,7 +17,7 @@ const MovedNote: React.FC<IMovedNote> = ({ from, to }) => (
     <HStack className='mb-2' alignItems='center' space={1.5}>
       <Icon
         src={require('@tabler/icons/briefcase.svg')}
-        className='text-primary-600 dark:text-primary-400 flex-none'
+        className='flex-none text-primary-600 dark:text-primary-400'
       />
 
       <div className='truncate'>
diff --git a/app/soapbox/features/account/components/header.tsx b/app/soapbox/features/account/components/header.tsx
index 99d42c0a3..368dce1b1 100644
--- a/app/soapbox/features/account/components/header.tsx
+++ b/app/soapbox/features/account/components/header.tsx
@@ -610,7 +610,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
               <Avatar
                 src={account.avatar}
                 size={96}
-                className='dark:bg-primary-900 dark:ring-primary-900 relative h-24 w-24 rounded-full bg-white ring-4 ring-white'
+                className='relative h-24 w-24 rounded-full bg-white ring-4 ring-white dark:bg-primary-900 dark:ring-primary-900'
               />
             </a>
           </div>
diff --git a/app/soapbox/features/admin/components/report.tsx b/app/soapbox/features/admin/components/report.tsx
index 210288fdc..2d961d095 100644
--- a/app/soapbox/features/admin/components/report.tsx
+++ b/app/soapbox/features/admin/components/report.tsx
@@ -135,7 +135,7 @@ const Report: React.FC<IReport> = ({ id }) => {
               <Link
                 to={`/@${reporterAcct}`}
                 title={reporterAcct}
-                className='text-primary-600 dark:text-accent-blue hover:underline'
+                className='text-primary-600 hover:underline dark:text-accent-blue'
               >
                 @{reporterAcct}
               </Link>
diff --git a/app/soapbox/features/ads/components/ad.tsx b/app/soapbox/features/ads/components/ad.tsx
index f44bb7b5d..fffd594a5 100644
--- a/app/soapbox/features/ads/components/ad.tsx
+++ b/app/soapbox/features/ads/components/ad.tsx
@@ -85,7 +85,7 @@ const Ad: React.FC<IAd> = ({ ad }) => {
                 </Text>
 
                 <Icon
-                  className='stroke-accent-500 h-5 w-5'
+                  className='h-5 w-5 stroke-accent-500'
                   src={require('@tabler/icons/timeline.svg')}
                 />
               </HStack>
diff --git a/app/soapbox/features/aliases/components/search.tsx b/app/soapbox/features/aliases/components/search.tsx
index 550f307ce..6270ec9d4 100644
--- a/app/soapbox/features/aliases/components/search.tsx
+++ b/app/soapbox/features/aliases/components/search.tsx
@@ -44,7 +44,7 @@ const Search: React.FC = () => {
         <span style={{ display: 'none' }}>{intl.formatMessage(messages.search)}</span>
 
         <input
-          className='focus:border-primary-500 focus:ring-primary-500 block w-full rounded-full dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500 sm:text-sm'
+          className='block w-full rounded-full focus:border-primary-500 focus:ring-primary-500 dark:bg-gray-800 dark:text-white dark:placeholder:text-gray-500 sm:text-sm'
           type='text'
           value={value}
           onChange={handleChange}
diff --git a/app/soapbox/features/auth-login/components/consumers-list.tsx b/app/soapbox/features/auth-login/components/consumers-list.tsx
index 0b5295a82..784077af9 100644
--- a/app/soapbox/features/auth-login/components/consumers-list.tsx
+++ b/app/soapbox/features/auth-login/components/consumers-list.tsx
@@ -17,7 +17,7 @@ const ConsumersList: React.FC<IConsumersList> = () => {
 
   if (providers.size > 0) {
     return (
-      <Card className='dark:bg-primary-800 bg-gray-50 p-4 sm:rounded-xl'>
+      <Card className='bg-gray-50 p-4 dark:bg-primary-800 sm:rounded-xl'>
         <Text size='xs' theme='muted'>
           <FormattedMessage id='oauth_consumers.title' defaultMessage='Other ways to sign in' />
         </Text>
diff --git a/app/soapbox/features/auth-token-list/index.tsx b/app/soapbox/features/auth-token-list/index.tsx
index 1b801e6ec..954814449 100644
--- a/app/soapbox/features/auth-token-list/index.tsx
+++ b/app/soapbox/features/auth-token-list/index.tsx
@@ -41,7 +41,7 @@ const AuthToken: React.FC<IAuthToken> = ({ token, isCurrent }) => {
   };
 
   return (
-    <div className='dark:bg-primary-800 rounded-lg bg-gray-100 p-4'>
+    <div className='rounded-lg bg-gray-100 p-4 dark:bg-primary-800'>
       <Stack space={2}>
         <Stack>
           <Text size='md' weight='medium'>{token.app_name}</Text>
diff --git a/app/soapbox/features/chats/components/chat-composer.tsx b/app/soapbox/features/chats/components/chat-composer.tsx
index 8b30e32fe..a703d772f 100644
--- a/app/soapbox/features/chats/components/chat-composer.tsx
+++ b/app/soapbox/features/chats/components/chat-composer.tsx
@@ -131,7 +131,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
 
   if (isBlocking) {
     return (
-      <div className='shadow-3xl mt-auto p-6 dark:border-t-2 dark:border-solid dark:border-gray-800'>
+      <div className='mt-auto p-6 shadow-3xl dark:border-t-2 dark:border-solid dark:border-gray-800'>
         <Stack space={3} alignItems='center'>
           <Text align='center' theme='muted'>
             {intl.formatMessage(messages.blocked)}
@@ -150,7 +150,7 @@ const ChatComposer = React.forwardRef<HTMLTextAreaElement | null, IChatComposer>
   }
 
   return (
-    <div className='shadow-3xl mt-auto px-4'>
+    <div className='mt-auto px-4 shadow-3xl'>
       {/* Spacer */}
       <div className='h-5' />
 
diff --git a/app/soapbox/features/chats/components/chat-list-item.tsx b/app/soapbox/features/chats/components/chat-list-item.tsx
index 24fc220a8..795a29a74 100644
--- a/app/soapbox/features/chats/components/chat-list-item.tsx
+++ b/app/soapbox/features/chats/components/chat-list-item.tsx
@@ -68,7 +68,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
       role='button'
       key={chat.id}
       onClick={() => onClick(chat)}
-      className='focus:shadow-inset-ring group flex w-full flex-col rounded-lg px-2 py-3 hover:bg-gray-100 dark:hover:bg-gray-800'
+      className='group flex w-full flex-col rounded-lg px-2 py-3 hover:bg-gray-100 focus:shadow-inset-ring dark:hover:bg-gray-800'
       data-testid='chat-list-item'
     >
       <HStack alignItems='center' justifyContent='between' space={2} className='w-full'>
@@ -130,7 +130,7 @@ const ChatListItem: React.FC<IChatListItemInterface> = ({ chat, onClick }) => {
             <>
               {chat.last_message.unread && (
                 <div
-                  className='bg-secondary-500 h-2 w-2 rounded-full'
+                  className='h-2 w-2 rounded-full bg-secondary-500'
                   data-testid='chat-unread-indicator'
                 />
               )}
diff --git a/app/soapbox/features/chats/components/chat-message-list.tsx b/app/soapbox/features/chats/components/chat-message-list.tsx
index 24fd973f3..1a2b1bd65 100644
--- a/app/soapbox/features/chats/components/chat-message-list.tsx
+++ b/app/soapbox/features/chats/components/chat-message-list.tsx
@@ -379,11 +379,11 @@ const ChatMessageList: React.FC<IChatMessageList> = ({ chat }) => {
                 {(isMyMessage && features.chatsReadReceipts) ? (
                   <>
                     {isRead ? (
-                      <span className='border-primary-500 bg-primary-500 dark:border-primary-400 dark:bg-primary-400 dark:text-primary-900 flex flex-col items-center justify-center rounded-full border border-solid p-0.5 text-white'>
+                      <span className='flex flex-col items-center justify-center rounded-full border border-solid border-primary-500 bg-primary-500 p-0.5 text-white dark:border-primary-400 dark:bg-primary-400 dark:text-primary-900'>
                         <Icon src={require('@tabler/icons/check.svg')} strokeWidth={3} className='h-2.5 w-2.5' />
                       </span>
                     ) : (
-                      <span className='border-primary-500 text-primary-500 dark:border-primary-400 dark:text-primary-400 flex flex-col items-center justify-center rounded-full border border-solid bg-transparent p-0.5'>
+                      <span className='flex flex-col items-center justify-center rounded-full border border-solid border-primary-500 bg-transparent p-0.5 text-primary-500 dark:border-primary-400 dark:text-primary-400'>
                         <Icon src={require('@tabler/icons/check.svg')} strokeWidth={3} className='h-2.5 w-2.5' />
                       </span>
                     )}
diff --git a/app/soapbox/features/chats/components/chat-page/chat-page.tsx b/app/soapbox/features/chats/components/chat-page/chat-page.tsx
index 81620a4cf..0b6550b76 100644
--- a/app/soapbox/features/chats/components/chat-page/chat-page.tsx
+++ b/app/soapbox/features/chats/components/chat-page/chat-page.tsx
@@ -60,7 +60,7 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
     <div
       ref={containerRef}
       style={{ height }}
-      className='dark:bg-primary-900 h-screen overflow-hidden bg-white text-gray-900 shadow-lg dark:text-gray-100 dark:shadow-none sm:rounded-t-xl'
+      className='h-screen overflow-hidden bg-white text-gray-900 shadow-lg dark:bg-primary-900 dark:text-gray-100 dark:shadow-none sm:rounded-t-xl'
     >
       {isOnboarded ? (
         <div
diff --git a/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx b/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
index 60049fee0..e365c49cc 100644
--- a/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
+++ b/app/soapbox/features/chats/components/chat-page/components/chat-page-main.tsx
@@ -212,7 +212,7 @@ const ChatPageMain = () => {
                   onSelect={isBlocking ? handleUnblockUser : handleBlockUser}
                   className='!px-0 hover:!bg-transparent'
                 >
-                  <div className='text-primary-500 dark:text-accent-blue flex w-full items-center space-x-2 text-sm font-bold'>
+                  <div className='flex w-full items-center space-x-2 text-sm font-bold text-primary-500 dark:text-accent-blue'>
                     <Icon src={require('@tabler/icons/ban.svg')} className='h-5 w-5' />
                     <span>{intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}</span>
                   </div>
@@ -224,7 +224,7 @@ const ChatPageMain = () => {
                     onSelect={handleLeaveChat}
                     className='!px-0 hover:!bg-transparent'
                   >
-                    <div className='text-danger-600 dark:text-danger-500 flex w-full items-center space-x-2 text-sm font-bold'>
+                    <div className='flex w-full items-center space-x-2 text-sm font-bold text-danger-600 dark:text-danger-500'>
                       <Icon src={require('@tabler/icons/logout.svg')} className='h-5 w-5' />
                       <span>{intl.formatMessage(messages.leaveChat)}</span>
                     </div>
diff --git a/app/soapbox/features/chats/components/chat-widget/chat-pane-header.tsx b/app/soapbox/features/chats/components/chat-widget/chat-pane-header.tsx
index 43260c3aa..36c4a4f80 100644
--- a/app/soapbox/features/chats/components/chat-widget/chat-pane-header.tsx
+++ b/app/soapbox/features/chats/components/chat-widget/chat-pane-header.tsx
@@ -47,7 +47,7 @@ const ChatPaneHeader = (props: IChatPaneHeader) => {
               ({unreadCount})
             </Text>
 
-            <div className='bg-accent-300 h-2.5 w-2.5 rounded-full' />
+            <div className='h-2.5 w-2.5 rounded-full bg-accent-300' />
           </HStack>
         )}
       </ButtonComp>
diff --git a/app/soapbox/features/chats/components/chat-widget/chat-settings.tsx b/app/soapbox/features/chats/components/chat-widget/chat-settings.tsx
index 5ff5406b0..5a38778e0 100644
--- a/app/soapbox/features/chats/components/chat-widget/chat-settings.tsx
+++ b/app/soapbox/features/chats/components/chat-widget/chat-settings.tsx
@@ -135,13 +135,13 @@ const ChatSettings = () => {
         )}
 
         <Stack space={5}>
-          <button onClick={isBlocking ? handleUnblockUser : handleBlockUser} className='text-primary-600 dark:text-accent-blue flex w-full items-center space-x-2 text-sm font-bold'>
+          <button onClick={isBlocking ? handleUnblockUser : handleBlockUser} className='flex w-full items-center space-x-2 text-sm font-bold text-primary-600 dark:text-accent-blue'>
             <Icon src={require('@tabler/icons/ban.svg')} className='h-5 w-5' />
             <span>{intl.formatMessage(isBlocking ? messages.unblockUser : messages.blockUser, { acct: chat.account.acct })}</span>
           </button>
 
           {features.chatsDelete && (
-            <button onClick={handleLeaveChat} className='text-danger-600 flex w-full items-center space-x-2 text-sm font-bold'>
+            <button onClick={handleLeaveChat} className='flex w-full items-center space-x-2 text-sm font-bold text-danger-600'>
               <Icon src={require('@tabler/icons/logout.svg')} className='h-5 w-5' />
               <span>{intl.formatMessage(messages.leaveChat)}</span>
             </button>
diff --git a/app/soapbox/features/directory/components/account-card.tsx b/app/soapbox/features/directory/components/account-card.tsx
index 237abf20f..e4a4a10a2 100644
--- a/app/soapbox/features/directory/components/account-card.tsx
+++ b/app/soapbox/features/directory/components/account-card.tsx
@@ -28,7 +28,7 @@ const AccountCard: React.FC<IAccountCard> = ({ id }) => {
   const followedBy = me !== account.id && account.relationship?.followed_by;
 
   return (
-    <div className='dark:divide-primary-700 dark:bg-primary-800 flex flex-col divide-y divide-gray-200 rounded-lg bg-white text-center shadow'>
+    <div className='flex flex-col divide-y divide-gray-200 rounded-lg bg-white text-center shadow dark:divide-primary-700 dark:bg-primary-800'>
       <div className='relative'>
         {followedBy && (
           <div className='absolute top-2.5 left-2.5'>
diff --git a/app/soapbox/features/embedded-status/index.tsx b/app/soapbox/features/embedded-status/index.tsx
index c3cce445b..d8c172643 100644
--- a/app/soapbox/features/embedded-status/index.tsx
+++ b/app/soapbox/features/embedded-status/index.tsx
@@ -62,7 +62,7 @@ const EmbeddedStatus: React.FC<IEmbeddedStatus> = ({ params }) => {
 
   return (
     <a
-      className='dark:bg-primary-900 block bg-white'
+      className='block bg-white dark:bg-primary-900'
       href={status?.url || '#'}
       onClick={e => e.stopPropagation()}
       target='_blank'
diff --git a/app/soapbox/features/event/event-information.tsx b/app/soapbox/features/event/event-information.tsx
index 4ef7ae0b8..cec8829ae 100644
--- a/app/soapbox/features/event/event-information.tsx
+++ b/app/soapbox/features/event/event-information.tsx
@@ -76,7 +76,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
             {[event.location.get('postalCode'), event.location.get('locality'), event.location.get('country')].filter(text => text).join(', ')}
             {tileServer && event.location.get('latitude') && (<>
               <br />
-              <a href='#' className='text-primary-600 dark:text-accent-blue hover:underline' onClick={handleShowMap}>
+              <a href='#' className='text-primary-600 hover:underline dark:text-accent-blue' onClick={handleShowMap}>
                 <FormattedMessage id='event.show_on_map' defaultMessage='Show on map' />
               </a>
             </>)}
@@ -143,7 +143,7 @@ const EventInformation: React.FC<IEventInformation> = ({ params }) => {
         {status.event.links.map(link => (
           <HStack space={2} alignItems='center'>
             <Icon src={require('@tabler/icons/link.svg')} />
-            <a href={link.remote_url || link.url} className='text-primary-600 dark:text-accent-blue hover:underline' target='_blank'>
+            <a href={link.remote_url || link.url} className='text-primary-600 hover:underline dark:text-accent-blue' target='_blank'>
               {(link.remote_url || link.url).replace(/^https?:\/\//, '')}
             </a>
           </HStack>
diff --git a/app/soapbox/features/feed-filtering/feed-carousel.tsx b/app/soapbox/features/feed-filtering/feed-carousel.tsx
index 4859c2145..af6cb47bb 100644
--- a/app/soapbox/features/feed-filtering/feed-carousel.tsx
+++ b/app/soapbox/features/feed-filtering/feed-carousel.tsx
@@ -61,7 +61,7 @@ const CarouselItem = React.forwardRef((
       <Stack className='h-auto w-14' space={3}>
         <div className='relative mx-auto block h-12 w-12 rounded-full'>
           {isSelected && (
-            <div className='bg-primary-600/50 absolute inset-0 flex items-center justify-center rounded-full'>
+            <div className='absolute inset-0 flex items-center justify-center rounded-full bg-primary-600/50'>
               <Icon src={require('@tabler/icons/check.svg')} className='h-6 w-6 text-white' />
             </div>
           )}
@@ -159,11 +159,11 @@ const FeedCarousel = () => {
 
   return (
     <div
-      className='dark:bg-primary-900 overflow-hidden rounded-xl bg-white shadow-lg dark:shadow-none'
+      className='overflow-hidden rounded-xl bg-white shadow-lg dark:bg-primary-900 dark:shadow-none'
       data-testid='feed-carousel'
     >
       <HStack alignItems='stretch'>
-        <div className='dark:bg-primary-900 z-10 flex w-8 items-center justify-center self-stretch rounded-l-xl bg-white'>
+        <div className='z-10 flex w-8 items-center justify-center self-stretch rounded-l-xl bg-white dark:bg-primary-900'>
           <button
             data-testid='prev-page'
             onClick={handlePrevPage}
@@ -177,7 +177,7 @@ const FeedCarousel = () => {
         <div className='relative w-full overflow-hidden'>
           {pinnedAvatar ? (
             <div
-              className='dark:bg-primary-900 absolute inset-y-0 left-0 z-10 flex items-center justify-center bg-white'
+              className='absolute inset-y-0 left-0 z-10 flex items-center justify-center bg-white dark:bg-primary-900'
               style={{
                 width: widthPerAvatar || 'auto',
               }}
@@ -248,7 +248,7 @@ const FeedCarousel = () => {
           </HStack>
         </div>
 
-        <div className='dark:bg-primary-900 z-10 flex w-8 items-center justify-center self-stretch rounded-r-xl bg-white'>
+        <div className='z-10 flex w-8 items-center justify-center self-stretch rounded-r-xl bg-white dark:bg-primary-900'>
           <button
             data-testid='next-page'
             onClick={handleNextPage}
diff --git a/app/soapbox/features/feed-suggestions/feed-suggestions.tsx b/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
index 54d99f862..ce86d1432 100644
--- a/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
+++ b/app/soapbox/features/feed-suggestions/feed-suggestions.tsx
@@ -71,7 +71,7 @@ const FeedSuggestions = () => {
 
         <Link
           to='/suggestions'
-          className='text-primary-600 dark:text-accent-blue hover:underline'
+          className='text-primary-600 hover:underline dark:text-accent-blue'
         >
           {intl.formatMessage(messages.viewAll)}
         </Link>
diff --git a/app/soapbox/features/group/components/group-header.tsx b/app/soapbox/features/group/components/group-header.tsx
index 7f9617bf1..dbb377062 100644
--- a/app/soapbox/features/group/components/group-header.tsx
+++ b/app/soapbox/features/group/components/group-header.tsx
@@ -164,7 +164,7 @@ const GroupHeader: React.FC<IGroupHeader> = ({ group }) => {
         </div>
         <div className='absolute left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2'>
           <a href={group.avatar} onClick={handleAvatarClick} target='_blank'>
-            <Avatar className='dark:ring-primary-900 ring-[3px] ring-white' src={group.avatar} size={72} />
+            <Avatar className='ring-[3px] ring-white dark:ring-primary-900' src={group.avatar} size={72} />
           </a>
         </div>
       </div>
diff --git a/app/soapbox/features/home-timeline/index.tsx b/app/soapbox/features/home-timeline/index.tsx
index 83bdf6c9d..aaaec2bb3 100644
--- a/app/soapbox/features/home-timeline/index.tsx
+++ b/app/soapbox/features/home-timeline/index.tsx
@@ -115,7 +115,7 @@ const HomeTimeline: React.FC = () => {
                     defaultMessage='Or you can visit {public} to get started and meet other users.'
                     values={{
                       public: (
-                        <Link to='/timeline/local' className='text-primary-600 dark:text-primary-400 hover:underline'>
+                        <Link to='/timeline/local' className='text-primary-600 hover:underline dark:text-primary-400'>
                           <FormattedMessage id='empty_column.home.local_tab' defaultMessage='the {site_title} tab' values={{ site_title: instance.title }} />
                         </Link>
                       ),
diff --git a/app/soapbox/features/landing-page/index.tsx b/app/soapbox/features/landing-page/index.tsx
index 3dffe36fe..ce1180063 100644
--- a/app/soapbox/features/landing-page/index.tsx
+++ b/app/soapbox/features/landing-page/index.tsx
@@ -107,7 +107,7 @@ const LandingPage = () => {
           <div className='px-4 sm:px-6 sm:text-center md:mx-auto md:max-w-2xl lg:col-span-6 lg:flex lg:text-start'>
             <div className='w-full'>
               <Stack space={3}>
-                <h1 className='from-accent-500 via-primary-500 to-gradient-end overflow-hidden text-ellipsis bg-gradient-to-br bg-clip-text text-5xl font-extrabold text-transparent sm:mt-5 sm:leading-none lg:mt-6 lg:text-6xl xl:text-7xl'>
+                <h1 className='overflow-hidden text-ellipsis bg-gradient-to-br from-accent-500 via-primary-500 to-gradient-end bg-clip-text text-5xl font-extrabold text-transparent sm:mt-5 sm:leading-none lg:mt-6 lg:text-6xl xl:text-7xl'>
                   {instance.title}
                 </h1>
 
diff --git a/app/soapbox/features/migration/index.tsx b/app/soapbox/features/migration/index.tsx
index 2a0240e36..0915e016e 100644
--- a/app/soapbox/features/migration/index.tsx
+++ b/app/soapbox/features/migration/index.tsx
@@ -68,7 +68,7 @@ const Migration = () => {
             values={{
               link: (
                 <Link
-                  className='text-primary-600 hover:text-primary-800 dark:text-primary-400 dark:hover:text-primary-500 hover:underline'
+                  className='text-primary-600 hover:text-primary-800 hover:underline dark:text-primary-400 dark:hover:text-primary-500'
                   to='/settings/aliases'
                 >
                   <FormattedMessage
diff --git a/app/soapbox/features/notifications/components/notification.tsx b/app/soapbox/features/notifications/components/notification.tsx
index 0142384a7..ccb15c143 100644
--- a/app/soapbox/features/notifications/components/notification.tsx
+++ b/app/soapbox/features/notifications/components/notification.tsx
@@ -276,7 +276,7 @@ const Notification: React.FC<INotificaton> = (props) => {
       return (
         <Icon
           src={icons[type]}
-          className='text-primary-600 dark:text-primary-400 flex-none'
+          className='flex-none text-primary-600 dark:text-primary-400'
         />
       );
     } else {
diff --git a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
index 5a9a366cd..32c69115f 100644
--- a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx
@@ -87,7 +87,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
                 )}
 
                 {isSubmitting && (
-                  <div className='dark:bg-primary-900/80 absolute inset-0 flex items-center justify-center rounded-full bg-white/80'>
+                  <div className='absolute inset-0 flex items-center justify-center rounded-full bg-white/80 dark:bg-primary-900/80'>
                     <Spinner withText={false} />
                   </div>
                 )}
diff --git a/app/soapbox/features/onboarding/steps/completed-step.tsx b/app/soapbox/features/onboarding/steps/completed-step.tsx
index 9a0655c37..082defb4d 100644
--- a/app/soapbox/features/onboarding/steps/completed-step.tsx
+++ b/app/soapbox/features/onboarding/steps/completed-step.tsx
@@ -7,7 +7,7 @@ const CompletedStep = ({ onComplete }: { onComplete: () => void }) => (
   <Card variant='rounded' size='xl'>
     <CardBody>
       <Stack space={2}>
-        <Icon strokeWidth={1} src={require('@tabler/icons/confetti.svg')} className='text-primary-600 dark:text-primary-400 mx-auto h-16 w-16' />
+        <Icon strokeWidth={1} src={require('@tabler/icons/confetti.svg')} className='mx-auto h-16 w-16 text-primary-600 dark:text-primary-400' />
 
         <Text size='2xl' align='center' weight='bold'>
           <FormattedMessage id='onboarding.finished.title' defaultMessage='Onboarding complete' />
diff --git a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
index e397c59f6..c48cd3c1f 100644
--- a/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
+++ b/app/soapbox/features/onboarding/steps/cover-photo-selection-step.tsx
@@ -99,7 +99,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
 
                   {isSubmitting && (
                     <div
-                      className='dark:bg-primary-900/80 absolute inset-0 flex items-center justify-center rounded-t-md bg-white/80'
+                      className='absolute inset-0 flex items-center justify-center rounded-t-md bg-white/80 dark:bg-primary-900/80'
                     >
                       <Spinner withText={false} />
                     </div>
@@ -122,7 +122,7 @@ const CoverPhotoSelectionStep = ({ onNext }: { onNext: () => void }) => {
 
                 <div className='flex flex-col px-4 pb-4'>
                   {account && (
-                    <Avatar src={account.avatar} size={64} className='dark:ring-primary-800 -mt-8 mb-2 ring-2 ring-white' />
+                    <Avatar src={account.avatar} size={64} className='-mt-8 mb-2 ring-2 ring-white dark:ring-primary-800' />
                   )}
 
                   <Text weight='bold' size='sm'>{account?.display_name}</Text>
diff --git a/app/soapbox/features/onboarding/steps/fediverse-step.tsx b/app/soapbox/features/onboarding/steps/fediverse-step.tsx
index 63bfa7478..ba5de74e4 100644
--- a/app/soapbox/features/onboarding/steps/fediverse-step.tsx
+++ b/app/soapbox/features/onboarding/steps/fediverse-step.tsx
@@ -15,7 +15,7 @@ const FediverseStep = ({ onNext }: { onNext: () => void }) => {
     <Card variant='rounded' size='xl'>
       <CardBody>
         <Stack space={2}>
-          <Icon strokeWidth={1} src={require('@tabler/icons/affiliate.svg')} className='text-primary-600 dark:text-primary-400 mx-auto h-16 w-16' />
+          <Icon strokeWidth={1} src={require('@tabler/icons/affiliate.svg')} className='mx-auto h-16 w-16 text-primary-600 dark:text-primary-400' />
 
           <Text size='2xl' weight='bold'>
             <FormattedMessage
@@ -49,7 +49,7 @@ const FediverseStep = ({ onNext }: { onNext: () => void }) => {
               </Stack>
             </div>
 
-            <div className='bg-primary-50 rounded-lg p-4 text-center dark:bg-gray-800'>
+            <div className='rounded-lg bg-primary-50 p-4 text-center dark:bg-gray-800'>
               <Account account={account} />
             </div>
 
diff --git a/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx b/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
index 06df3bb49..8dfb2485b 100644
--- a/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
+++ b/app/soapbox/features/onboarding/steps/suggested-accounts-step.tsx
@@ -49,7 +49,7 @@ const SuggestedAccountsStep = ({ onNext }: { onNext: () => void }) => {
 
   const renderEmpty = () => {
     return (
-      <div className='bg-primary-50 my-2 rounded-lg p-8 text-center dark:bg-gray-800'>
+      <div className='my-2 rounded-lg bg-primary-50 p-8 text-center dark:bg-gray-800'>
         <Text>
           <FormattedMessage id='empty_column.follow_recommendations' defaultMessage='Looks like no suggestions could be generated for you. You can try using search to look for people you might know or explore trending hashtags.' />
         </Text>
diff --git a/app/soapbox/features/placeholder/components/placeholder-avatar.tsx b/app/soapbox/features/placeholder/components/placeholder-avatar.tsx
index c01af112d..6eb479f13 100644
--- a/app/soapbox/features/placeholder/components/placeholder-avatar.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-avatar.tsx
@@ -23,12 +23,12 @@ const PlaceholderAvatar: React.FC<IPlaceholderAvatar> = ({ size, withText = fals
   return (
     <Stack space={2} className='animate-pulse py-3 text-center'>
       <div
-        className='bg-primary-50 dark:bg-primary-800 mx-auto block rounded-full'
+        className='mx-auto block rounded-full bg-primary-50 dark:bg-primary-800'
         style={style}
       />
 
       {withText && (
-        <div style={{ width: size, height: 15 }} className='bg-primary-50 dark:bg-primary-800 mx-auto rounded-full' />
+        <div style={{ width: size, height: 15 }} className='mx-auto rounded-full bg-primary-50 dark:bg-primary-800' />
       )}
     </Stack>
   );
diff --git a/app/soapbox/features/placeholder/components/placeholder-card.tsx b/app/soapbox/features/placeholder/components/placeholder-card.tsx
index 96309ccfa..9b88d8429 100644
--- a/app/soapbox/features/placeholder/components/placeholder-card.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-card.tsx
@@ -11,7 +11,7 @@ const PlaceholderCard: React.FC = () => (
   >
     <div className='primary-500 w-2/5 rounded-l'>&nbsp;</div>
 
-    <div className='text-primary-50 flex w-3/5 flex-col justify-between break-words p-4'>
+    <div className='flex w-3/5 flex-col justify-between break-words p-4 text-primary-50'>
       <p>{generateText(randomIntFromInterval(5, 25))}</p>
       <p>{generateText(randomIntFromInterval(5, 75))}</p>
       <p>{generateText(randomIntFromInterval(5, 15))}</p>
diff --git a/app/soapbox/features/placeholder/components/placeholder-chat-message.tsx b/app/soapbox/features/placeholder/components/placeholder-chat-message.tsx
index 94f5a5c08..c11431be9 100644
--- a/app/soapbox/features/placeholder/components/placeholder-chat-message.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-chat-message.tsx
@@ -33,7 +33,7 @@ const PlaceholderChatMessage = ({ isMyMessage = false }: { isMyMessage?: boolean
             })
           }
         >
-          <div style={{ width: messageLength, height: 20 }} className='bg-primary-50 dark:bg-primary-800 rounded-full' />
+          <div style={{ width: messageLength, height: 20 }} className='rounded-full bg-primary-50 dark:bg-primary-800' />
         </div>
 
         <div className={clsx({ 'order-1': !isMyMessage })}>
@@ -56,7 +56,7 @@ const PlaceholderChatMessage = ({ isMyMessage = false }: { isMyMessage?: boolean
             'order-2': !isMyMessage,
           })}
         >
-          <span style={{ width: 50, height: 12 }} className='bg-primary-50 dark:bg-primary-800 block rounded-full' />
+          <span style={{ width: 50, height: 12 }} className='block rounded-full bg-primary-50 dark:bg-primary-800' />
         </Text>
 
         <div className={clsx({ 'order-1': !isMyMessage })}>
diff --git a/app/soapbox/features/placeholder/components/placeholder-display-name.tsx b/app/soapbox/features/placeholder/components/placeholder-display-name.tsx
index be985e04c..c367af132 100644
--- a/app/soapbox/features/placeholder/components/placeholder-display-name.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-display-name.tsx
@@ -14,7 +14,7 @@ const PlaceholderDisplayName: React.FC<IPlaceholderDisplayName> = ({ minLength,
   const acctLength = randomIntFromInterval(maxLength, minLength);
 
   return (
-    <div className='text-primary-50 dark:text-primary-800 flex flex-col'>
+    <div className='flex flex-col text-primary-50 dark:text-primary-800'>
       <p>{generateText(length)}</p>
       {withSuffix && <p>{generateText(acctLength)}</p>}
     </div>
diff --git a/app/soapbox/features/placeholder/components/placeholder-event-header.tsx b/app/soapbox/features/placeholder/components/placeholder-event-header.tsx
index b33bec04f..c01272944 100644
--- a/app/soapbox/features/placeholder/components/placeholder-event-header.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-event-header.tsx
@@ -11,7 +11,7 @@ const PlaceholderEventHeader = () => {
   const locationLength = randomIntFromInterval(5, 30);
 
   return (
-    <Stack className='text-primary-50 dark:text-primary-800 animate-pulse' space={2}>
+    <Stack className='animate-pulse text-primary-50 dark:text-primary-800' space={2}>
       <p className='text-lg'>{generateText(eventNameLength)}</p>
 
       <Stack space={1}>
diff --git a/app/soapbox/features/placeholder/components/placeholder-event-preview.tsx b/app/soapbox/features/placeholder/components/placeholder-event-preview.tsx
index 9a952c7ca..f29f46c6e 100644
--- a/app/soapbox/features/placeholder/components/placeholder-event-preview.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-event-preview.tsx
@@ -9,8 +9,8 @@ const PlaceholderEventPreview = () => {
   const nameLength = randomIntFromInterval(5, 15);
 
   return (
-    <div className='text-primary-50 dark:bg-primary-800 dark:text-primary-800 relative w-full animate-pulse overflow-hidden rounded-lg bg-gray-100'>
-      <div className='bg-primary-200 h-40 dark:bg-gray-600' />
+    <div className='relative w-full animate-pulse overflow-hidden rounded-lg bg-gray-100 text-primary-50 dark:bg-primary-800 dark:text-primary-800'>
+      <div className='h-40 bg-primary-200 dark:bg-gray-600' />
       <Stack className='p-2.5' space={2}>
         <Text weight='semibold'>{generateText(eventNameLength)}</Text>
 
diff --git a/app/soapbox/features/placeholder/components/placeholder-group-card.tsx b/app/soapbox/features/placeholder/components/placeholder-group-card.tsx
index 49e1425e6..9f6507f19 100644
--- a/app/soapbox/features/placeholder/components/placeholder-group-card.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-group-card.tsx
@@ -11,10 +11,10 @@ const PlaceholderGroupCard = () => {
 
   return (
     <div className='animate-pulse overflow-hidden'>
-      <Stack className='dark:border-primary-800 dark:bg-primary-900 rounded-lg border border-solid border-gray-300 bg-white sm:rounded-xl'>
-        <div className='bg-primary-100 relative -m-[1px] mb-0 h-[120px] rounded-t-lg dark:bg-gray-800 sm:rounded-t-xl'>
+      <Stack className='rounded-lg border border-solid border-gray-300 bg-white dark:border-primary-800 dark:bg-primary-900 sm:rounded-xl'>
+        <div className='relative -m-[1px] mb-0 h-[120px] rounded-t-lg bg-primary-100 dark:bg-gray-800 sm:rounded-t-xl'>
           <div className='absolute left-1/2 bottom-0 -translate-x-1/2 translate-y-1/2'>
-            <div className='bg-primary-500 dark:ring-primary-900 h-16 w-16 rounded-full ring-2 ring-white' />
+            <div className='h-16 w-16 rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900' />
           </div>
         </div>
         <Stack className='p-3 pt-9' alignItems='center' space={3}>
diff --git a/app/soapbox/features/placeholder/components/placeholder-hashtag.tsx b/app/soapbox/features/placeholder/components/placeholder-hashtag.tsx
index 7e80eafb1..8830b1e90 100644
--- a/app/soapbox/features/placeholder/components/placeholder-hashtag.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-hashtag.tsx
@@ -7,7 +7,7 @@ const PlaceholderHashtag: React.FC = () => {
   const length = randomIntFromInterval(15, 30);
 
   return (
-    <div className='text-primary-200 dark:text-primary-700 animate-pulse'>
+    <div className='animate-pulse text-primary-200 dark:text-primary-700'>
       <p>{generateText(length)}</p>
     </div>
   );
diff --git a/app/soapbox/features/placeholder/components/placeholder-media-gallery.tsx b/app/soapbox/features/placeholder/components/placeholder-media-gallery.tsx
index 2ceb9f895..09dc505e7 100644
--- a/app/soapbox/features/placeholder/components/placeholder-media-gallery.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-media-gallery.tsx
@@ -78,7 +78,7 @@ const PlaceholderMediaGallery: React.FC<IPlaceholderMediaGallery> = ({ media, de
     const float = dimensions.float as any || 'left';
     const position = dimensions.pos as any || 'relative';
 
-    return <div key={i} className='media-gallery__item bg-primary-200 animate-pulse' style={{ position, float, left, top, right, bottom, height, width }} />;
+    return <div key={i} className='media-gallery__item animate-pulse bg-primary-200' style={{ position, float, left, top, right, bottom, height, width }} />;
   };
 
   const sizeData = getSizeData(media.size);
diff --git a/app/soapbox/features/placeholder/components/placeholder-notification.tsx b/app/soapbox/features/placeholder/components/placeholder-notification.tsx
index 8617ae6b2..d8c301a4e 100644
--- a/app/soapbox/features/placeholder/components/placeholder-notification.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-notification.tsx
@@ -8,7 +8,7 @@ import PlaceholderStatusContent from './placeholder-status-content';
 
 /** Fake notification to display while data is loading. */
 const PlaceholderNotification = () => (
-  <div className='dark:bg-primary-900 bg-white px-4 py-6 sm:p-6'>
+  <div className='bg-white px-4 py-6 dark:bg-primary-900 sm:p-6'>
     <div className='w-full animate-pulse'>
       <div className='mb-2'>
         <PlaceholderStatusContent minLength={20} maxLength={20} />
diff --git a/app/soapbox/features/placeholder/components/placeholder-sidebar-suggestions.tsx b/app/soapbox/features/placeholder/components/placeholder-sidebar-suggestions.tsx
index 00add96e9..9cc1c4448 100644
--- a/app/soapbox/features/placeholder/components/placeholder-sidebar-suggestions.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-sidebar-suggestions.tsx
@@ -14,7 +14,7 @@ export default ({ limit }: { limit: number }) => {
         <HStack key={idx} alignItems='center' space={2} className='animate-pulse'>
           <Stack space={3} className='text-center'>
             <div
-              className='bg-primary-200 dark:bg-primary-700 mx-auto block h-9 w-9 rounded-full'
+              className='mx-auto block h-9 w-9 rounded-full bg-primary-200 dark:bg-primary-700'
             />
           </Stack>
 
diff --git a/app/soapbox/features/placeholder/components/placeholder-sidebar-trends.tsx b/app/soapbox/features/placeholder/components/placeholder-sidebar-trends.tsx
index 9edcef46b..44e728284 100644
--- a/app/soapbox/features/placeholder/components/placeholder-sidebar-trends.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-sidebar-trends.tsx
@@ -11,7 +11,7 @@ export default ({ limit }: { limit: number }) => {
   return (
     <>
       {new Array(limit).fill(undefined).map((_, idx) => (
-        <Stack key={idx} className='text-primary-200 dark:text-primary-700 animate-pulse'>
+        <Stack key={idx} className='animate-pulse text-primary-200 dark:text-primary-700'>
           <p>{generateText(trend)}</p>
           <p>{generateText(stat)}</p>
         </Stack>
diff --git a/app/soapbox/features/placeholder/components/placeholder-status-content.tsx b/app/soapbox/features/placeholder/components/placeholder-status-content.tsx
index db1f6503e..0537f8520 100644
--- a/app/soapbox/features/placeholder/components/placeholder-status-content.tsx
+++ b/app/soapbox/features/placeholder/components/placeholder-status-content.tsx
@@ -12,7 +12,7 @@ const PlaceholderStatusContent: React.FC<IPlaceholderStatusContent> = ({ minLeng
   const length = randomIntFromInterval(maxLength, minLength);
 
   return (
-    <div className='text-primary-50 dark:text-primary-800 flex flex-col'>
+    <div className='flex flex-col text-primary-50 dark:text-primary-800'>
       <p className='break-words'>{generateText(length)}</p>
     </div>
   );
diff --git a/app/soapbox/features/public-layout/components/footer.tsx b/app/soapbox/features/public-layout/components/footer.tsx
index 958f99273..0f6435f0a 100644
--- a/app/soapbox/features/public-layout/components/footer.tsx
+++ b/app/soapbox/features/public-layout/components/footer.tsx
@@ -31,7 +31,7 @@ const Footer = () => {
 
           return (
             <div key={idx} className='px-5 py-2'>
-              <Comp {...compProps} className='text-primary-600 dark:text-primary-400 hover:underline'>
+              <Comp {...compProps} className='text-primary-600 hover:underline dark:text-primary-400'>
                 <Text tag='span' theme='inherit' size='sm'>
                   {(link.getIn(['titleLocales', locale]) || link.get('title')) as string}
                 </Text>
diff --git a/app/soapbox/features/public-layout/components/sonar.tsx b/app/soapbox/features/public-layout/components/sonar.tsx
index 022fa6417..cefcf97d0 100644
--- a/app/soapbox/features/public-layout/components/sonar.tsx
+++ b/app/soapbox/features/public-layout/components/sonar.tsx
@@ -3,12 +3,12 @@ import React from 'react';
 const Sonar = () => (
   <div className='relative'>
     <div className='relative h-48 w-48'>
-      <div className='animate-sonar-scale-4 bg-primary-600/25 dark:bg-primary-600/25 pointer-events-none absolute top-0 left-0 h-full w-full rounded-full opacity-0' />
-      <div className='animate-sonar-scale-3 bg-primary-600/25 dark:bg-primary-600/25 pointer-events-none absolute top-0 left-0 h-full w-full rounded-full opacity-0' />
-      <div className='animate-sonar-scale-2 bg-primary-600/25 dark:bg-primary-600/25 pointer-events-none absolute top-0 left-0 h-full w-full rounded-full opacity-0' />
-      <div className='animate-sonar-scale-1 bg-primary-600/25 dark:bg-primary-600/25 pointer-events-none absolute top-0 left-0 h-full w-full rounded-full opacity-0' />
+      <div className='pointer-events-none absolute top-0 left-0 h-full w-full animate-sonar-scale-4 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' />
+      <div className='pointer-events-none absolute top-0 left-0 h-full w-full animate-sonar-scale-3 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' />
+      <div className='pointer-events-none absolute top-0 left-0 h-full w-full animate-sonar-scale-2 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' />
+      <div className='pointer-events-none absolute top-0 left-0 h-full w-full animate-sonar-scale-1 rounded-full bg-primary-600/25 opacity-0 dark:bg-primary-600/25' />
 
-      <div className='dark:bg-primary-900 absolute top-0 left-0 h-48 w-48 rounded-full bg-white' />
+      <div className='absolute top-0 left-0 h-48 w-48 rounded-full bg-white dark:bg-primary-900' />
     </div>
   </div>
 );
diff --git a/app/soapbox/features/soapbox-config/components/site-preview.tsx b/app/soapbox/features/soapbox-config/components/site-preview.tsx
index ce60f8078..5ef45ab87 100644
--- a/app/soapbox/features/soapbox-config/components/site-preview.tsx
+++ b/app/soapbox/features/soapbox-config/components/site-preview.tsx
@@ -39,7 +39,7 @@ const SitePreview: React.FC<ISitePreview> = ({ soapbox }) => {
       <style>{`.site-preview {${generateThemeCss(soapboxConfig)}}`}</style>
       <BackgroundShapes position='absolute' />
 
-      <div className='bg-accent-500 absolute z-20 self-center overflow-hidden rounded-lg p-2 text-white'>
+      <div className='absolute z-20 self-center overflow-hidden rounded-lg bg-accent-500 p-2 text-white'>
         <FormattedMessage id='site_preview.preview' defaultMessage='Preview' />
       </div>
 
diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index 4e2c7faff..86039244c 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@@ -483,7 +483,7 @@ const Thread: React.FC<IThread> = (props) => {
 
           {!isUnderReview ? (
             <>
-              <hr className='dark:border-primary-800 mb-2 border-t-2' />
+              <hr className='mb-2 border-t-2 dark:border-primary-800' />
 
               <StatusActionBar
                 status={status}
@@ -497,7 +497,7 @@ const Thread: React.FC<IThread> = (props) => {
       </HotKeys>
 
       {hasDescendants && (
-        <hr className='dark:border-primary-800 mt-2 border-t-2' />
+        <hr className='mt-2 border-t-2 dark:border-primary-800' />
       )}
     </div>
   );
diff --git a/app/soapbox/features/ui/components/floating-action-button.tsx b/app/soapbox/features/ui/components/floating-action-button.tsx
index 482222377..8800cf444 100644
--- a/app/soapbox/features/ui/components/floating-action-button.tsx
+++ b/app/soapbox/features/ui/components/floating-action-button.tsx
@@ -27,7 +27,7 @@ const FloatingActionButton: React.FC<IFloatingActionButton> = () => {
       onClick={handleOpenComposeModal}
       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',
+        'border-transparent bg-secondary-500 text-gray-100 hover:bg-secondary-400 focus:bg-secondary-500 focus:ring-secondary-300',
       )}
       aria-label={intl.formatMessage(messages.publish)}
     >
diff --git a/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx b/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
index eb08e751b..0bd8d34d4 100644
--- a/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/compose-event-modal/compose-event-modal.tsx
@@ -214,7 +214,7 @@ const ComposeEventModal: React.FC<IComposeEventModal> = ({ onClose }) => {
       <FormGroup
         labelText={<FormattedMessage id='compose_event.fields.banner_label' defaultMessage='Event banner' />}
       >
-        <div className='dark:sm:shadow-inset bg-primary-100 text-primary-500 relative flex h-24 items-center justify-center overflow-hidden rounded-lg dark:bg-gray-800 dark:text-white sm:h-32 sm:shadow'>
+        <div className='dark:sm:shadow-inset relative flex h-24 items-center justify-center overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-white sm:h-32 sm:shadow'>
           {banner ? (
             <>
               <img className='h-full w-full object-cover' src={banner.url} alt='' />
diff --git a/app/soapbox/features/ui/components/modals/compose-event-modal/upload-button.tsx b/app/soapbox/features/ui/components/modals/compose-event-modal/upload-button.tsx
index 5dcfbce80..057794b6c 100644
--- a/app/soapbox/features/ui/components/modals/compose-event-modal/upload-button.tsx
+++ b/app/soapbox/features/ui/components/modals/compose-event-modal/upload-button.tsx
@@ -27,7 +27,7 @@ const UploadButton: React.FC<IUploadButton> = ({ disabled, onSelectFile }) => {
   };
 
   return (
-    <HStack className='text-primary-500 dark:text-accent-blue h-full w-full cursor-pointer' space={3} alignItems='center' justifyContent='center' element='label'>
+    <HStack className='h-full w-full cursor-pointer text-primary-500 dark:text-accent-blue' space={3} alignItems='center' justifyContent='center' element='label'>
       <Icon
         src={require('@tabler/icons/photo-plus.svg')}
         className='h-7 w-7'
diff --git a/app/soapbox/features/ui/components/modals/hotkeys-modal.tsx b/app/soapbox/features/ui/components/modals/hotkeys-modal.tsx
index bee2590a5..5e3836cdc 100644
--- a/app/soapbox/features/ui/components/modals/hotkeys-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/hotkeys-modal.tsx
@@ -9,7 +9,7 @@ interface IHotkeysModal {
 }
 
 const Hotkey: React.FC<{ children: React.ReactNode }> = ({ children }) => (
-  <kbd className='border-primary-200 bg-primary-50 rounded-md border border-solid px-1.5 py-1 font-sans text-xs dark:border-gray-700 dark:bg-gray-800'>
+  <kbd className='rounded-md border border-solid border-primary-200 bg-primary-50 px-1.5 py-1 font-sans text-xs dark:border-gray-700 dark:bg-gray-800'>
     {children}
   </kbd>
 );
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 c337fb137..fb3c842f1 100644
--- a/app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
+++ b/app/soapbox/features/ui/components/modals/manage-group-modal/steps/details-step.tsx
@@ -30,7 +30,7 @@ const messages = defineMessages({
 const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
   return (
     <label
-      className='dark:sm:shadow-inset bg-primary-100 text-primary-500 dark:text-accent-blue relative h-24 w-full cursor-pointer overflow-hidden rounded-lg dark:bg-gray-800 sm:h-36 sm:shadow'
+      className='dark:sm:shadow-inset relative h-24 w-full cursor-pointer overflow-hidden rounded-lg bg-primary-100 text-primary-500 dark:bg-gray-800 dark:text-accent-blue sm:h-36 sm:shadow'
     >
       {src && <img className='h-full w-full object-cover' src={src} alt='' />}
       <HStack
@@ -65,7 +65,7 @@ const HeaderPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }
 
 const AvatarPicker: React.FC<IMediaInput> = ({ src, onChange, accept, disabled }) => {
   return (
-    <label className='bg-primary-500 dark:ring-primary-900 absolute left-1/2 bottom-0 h-[72px] w-[72px] -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full ring-2 ring-white'>
+    <label className='absolute left-1/2 bottom-0 h-[72px] w-[72px] -translate-x-1/2 translate-y-1/2 cursor-pointer rounded-full bg-primary-500 ring-2 ring-white dark:ring-primary-900'>
       {src && <Avatar src={src} size={72} />}
       <HStack
         alignItems='center'
diff --git a/app/soapbox/features/ui/components/modals/policy-modal.tsx b/app/soapbox/features/ui/components/modals/policy-modal.tsx
index 180e492c2..7a1d263e5 100644
--- a/app/soapbox/features/ui/components/modals/policy-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/policy-modal.tsx
@@ -15,7 +15,7 @@ const DirectMessageUpdates = () => {
 
   return (
     <Stack space={3}>
-      <Stack space={4} className='border-primary-200 dark:border-primary-800 rounded-lg border-2 border-solid p-4'>
+      <Stack space={4} className='rounded-lg border-2 border-solid border-primary-200 p-4 dark:border-primary-800'>
         <HStack alignItems='center' space={3}>
           <svg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'>
             <path d='M0 22.5306C0 10.0873 10.0873 0 22.5306 0H26.4828C38.3664 0 48 9.6336 48 21.5172V21.5172C48 36.1433 36.1433 48 21.5172 48H18.4615C8.26551 48 0 39.7345 0 29.5385V22.5306Z' fill='url(#paint0_linear_2190_131524)' fillOpacity='0.2' />
@@ -43,7 +43,7 @@ const DirectMessageUpdates = () => {
         </Text>
       </Stack>
 
-      <Stack space={4} className='border-primary-200 dark:border-primary-800 rounded-lg border-2 border-solid p-4'>
+      <Stack space={4} className='rounded-lg border-2 border-solid border-primary-200 p-4 dark:border-primary-800'>
         <HStack alignItems='center' space={3}>
           <svg width='48' height='48' viewBox='0 0 48 48' fill='none' xmlns='http://www.w3.org/2000/svg'>
             <path d='M0 25.7561C0 22.2672 0 20.5228 0.197492 19.0588C1.52172 9.24259 9.24259 1.52172 19.0588 0.197492C20.5228 0 22.2672 0 25.7561 0H30.1176C39.9938 0 48 8.0062 48 17.8824C48 34.5159 34.5159 48 17.8824 48H15.3192C15.0228 48 14.8747 48 14.7494 47.9979C6.66132 47.8627 0.137263 41.3387 0.0020943 33.2506C0 33.1253 0 32.9772 0 32.6808V25.7561Z' fill='url(#paint0_linear_2190_131532)' fillOpacity='0.2' />
@@ -61,21 +61,21 @@ const DirectMessageUpdates = () => {
 
         <ul className='space-y-2'>
           <li className='flex items-center space-x-2'>
-            <span className='text-primary-500 dark:text-primary-300 flex h-8 w-8 items-center justify-center rounded-full border-2 border-solid border-gray-200 text-sm font-bold dark:border-gray-800'>
+            <span className='flex h-8 w-8 items-center justify-center rounded-full border-2 border-solid border-gray-200 text-sm font-bold text-primary-500 dark:border-gray-800 dark:text-primary-300'>
               1
             </span>
 
             <Text theme='muted'>Consolidates previously-separate policies</Text>
           </li>
           <li className='flex items-center space-x-2'>
-            <span className='text-primary-500 dark:text-primary-300 flex h-8 w-8 items-center justify-center rounded-full border-2 border-solid border-gray-200 text-sm font-bold dark:border-gray-800'>
+            <span className='flex h-8 w-8 items-center justify-center rounded-full border-2 border-solid border-gray-200 text-sm font-bold text-primary-500 dark:border-gray-800 dark:text-primary-300'>
               2
             </span>
 
             <Text theme='muted'>Reaffirms jurisdiction-specific requirements</Text>
           </li>
           <li className='flex items-center space-x-2'>
-            <span className='text-primary-500 dark:text-primary-300 flex h-8 w-8 items-center justify-center rounded-full border-2 border-solid border-gray-200 text-sm font-bold dark:border-gray-800'>
+            <span className='flex h-8 w-8 items-center justify-center rounded-full border-2 border-solid border-gray-200 text-sm font-bold text-primary-500 dark:border-gray-800 dark:text-primary-300'>
               3
             </span>
 
@@ -85,7 +85,7 @@ const DirectMessageUpdates = () => {
 
         {links.get('privacyPolicy') ? (
           <a
-            className='text-primary-600 dark:text-accent-blue text-center font-bold hover:underline'
+            className='text-center font-bold text-primary-600 hover:underline dark:text-accent-blue'
             href={links.get('privacyPolicy')}
             target='_blank'
           >
diff --git a/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx b/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
index a2c1f1130..ed9c5c411 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/report-modal.tsx
@@ -195,7 +195,7 @@ const ReportModal = ({ onClose }: IReportModal) => {
               <Avatar src={account.avatar} className='h-8 w-8' />
             </div>
 
-            <div className='dark:bg-primary-800 grow rounded-md bg-gray-200 p-4'>
+            <div className='grow rounded-md bg-gray-200 p-4 dark:bg-primary-800'>
               <Text dangerouslySetInnerHTML={{ __html: selectedChatMessage?.content as string }} />
             </div>
           </HStack>
diff --git a/app/soapbox/features/ui/components/modals/report-modal/steps/confirmation-step.tsx b/app/soapbox/features/ui/components/modals/report-modal/steps/confirmation-step.tsx
index e44599686..eebb3d717 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/steps/confirmation-step.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/steps/confirmation-step.tsx
@@ -25,7 +25,7 @@ const renderTermsOfServiceLink = (href: string) => (
   <a
     href={href}
     target='_blank'
-    className='text-primary-600 hover:text-primary-800 dark:text-accent-blue dark:hover:text-accent-blue hover:underline'
+    className='text-primary-600 hover:text-primary-800 hover:underline dark:text-accent-blue dark:hover:text-accent-blue'
   >
     {termsOfServiceText}
   </a>
diff --git a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
index ff1496ff4..af73d8485 100644
--- a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
+++ b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx
@@ -131,7 +131,7 @@ const ReasonStep = (_props: IReasonStep) => {
                       value={rule.id}
                       checked={isSelected}
                       readOnly
-                      className='text-primary-600 checked:bg-primary-500 focus:ring-primary-500 dark:checked:bg-primary-500 dark:focus:ring-primary-500 h-4 w-4 rounded border-2 border-gray-300 dark:border-gray-800 dark:bg-gray-900'
+                      className='h-4 w-4 rounded border-2 border-gray-300 text-primary-600 checked:bg-primary-500 focus:ring-primary-500 dark:border-gray-800 dark:bg-gray-900 dark:checked:bg-primary-500 dark:focus:ring-primary-500'
                     />
                   </button>
                 );
diff --git a/app/soapbox/features/ui/components/navbar.tsx b/app/soapbox/features/ui/components/navbar.tsx
index cdcf2f623..66b35dd73 100644
--- a/app/soapbox/features/ui/components/navbar.tsx
+++ b/app/soapbox/features/ui/components/navbar.tsx
@@ -63,7 +63,7 @@ const Navbar = () => {
   if (mfaToken) return <Redirect to={`/login?token=${encodeURIComponent(mfaToken)}`} />;
 
   return (
-    <nav className='dark:bg-primary-900 sticky top-0 z-50 bg-white shadow' ref={node} data-testid='navbar'>
+    <nav className='sticky top-0 z-50 bg-white shadow dark:bg-primary-900' ref={node} data-testid='navbar'>
       <div className='mx-auto max-w-7xl px-2 sm:px-6 lg:px-8'>
         <div className='relative flex h-12 justify-between lg:h-16'>
           {account && (
diff --git a/app/soapbox/features/ui/components/profile-info-panel.tsx b/app/soapbox/features/ui/components/profile-info-panel.tsx
index 491806962..546b0df6d 100644
--- a/app/soapbox/features/ui/components/profile-info-panel.tsx
+++ b/app/soapbox/features/ui/components/profile-info-panel.tsx
@@ -218,7 +218,7 @@ const ProfileInfoPanel: React.FC<IProfileInfoPanel> = ({ account, username }) =>
               <div className='max-w-[300px]'>
                 <Text size='sm' truncate>
                   {isSafeUrl(account.website) ? (
-                    <a className='text-primary-600 dark:text-accent-blue hover:underline' href={account.website} target='_blank'>{account.website}</a>
+                    <a className='text-primary-600 hover:underline dark:text-accent-blue' href={account.website} target='_blank'>{account.website}</a>
                   ) : (
                     account.website
                   )}
diff --git a/app/soapbox/features/verification/email-passthru.tsx b/app/soapbox/features/verification/email-passthru.tsx
index e141907af..86152f12d 100644
--- a/app/soapbox/features/verification/email-passthru.tsx
+++ b/app/soapbox/features/verification/email-passthru.tsx
@@ -49,7 +49,7 @@ const Success = () => {
 
   return (
     <Stack space={4} alignItems='center'>
-      <Icon src={require('@tabler/icons/circle-check.svg')} className='text-primary-600 dark:text-primary-400 h-10 w-10' />
+      <Icon src={require('@tabler/icons/circle-check.svg')} className='h-10 w-10 text-primary-600 dark:text-primary-400' />
       <Text size='3xl' weight='semibold' align='center'>
         {intl.formatMessage(messages.emailConfirmedHeading)}
       </Text>
@@ -65,7 +65,7 @@ const GenericFail = () => {
 
   return (
     <Stack space={4} alignItems='center'>
-      <Icon src={require('@tabler/icons/circle-x.svg')} className='text-danger-600 h-10 w-10' />
+      <Icon src={require('@tabler/icons/circle-x.svg')} className='h-10 w-10 text-danger-600' />
       <Text size='3xl' weight='semibold' align='center'>
         {intl.formatMessage(messages.genericFailHeading)}
       </Text>
@@ -81,7 +81,7 @@ const TokenNotFound = () => {
 
   return (
     <Stack space={4} alignItems='center'>
-      <Icon src={require('@tabler/icons/circle-x.svg')} className='text-danger-600 h-10 w-10' />
+      <Icon src={require('@tabler/icons/circle-x.svg')} className='h-10 w-10 text-danger-600' />
       <Text size='3xl' weight='semibold' align='center'>
         {intl.formatMessage(messages.tokenNotFoundHeading)}
       </Text>
@@ -98,7 +98,7 @@ const TokenExpired = () => {
 
   return (
     <Stack space={4} alignItems='center'>
-      <Icon src={require('@tabler/icons/circle-x.svg')} className='text-danger-600 h-10 w-10' />
+      <Icon src={require('@tabler/icons/circle-x.svg')} className='h-10 w-10 text-danger-600' />
       <Text size='3xl' weight='semibold' align='center'>
         {intl.formatMessage(messages.tokenExpiredHeading)}
       </Text>
diff --git a/app/soapbox/features/verification/registration.tsx b/app/soapbox/features/verification/registration.tsx
index 2590a2021..bee939ec4 100644
--- a/app/soapbox/features/verification/registration.tsx
+++ b/app/soapbox/features/verification/registration.tsx
@@ -132,7 +132,7 @@ const Registration = () => {
                   defaultMessage='By registering, you agree to the {terms} and {privacy}.'
                   values={{
                     terms: (
-                      <a href={links.get('termsOfService')} target='_blank' className='text-primary-600 dark:text-primary-400 hover:underline'>
+                      <a href={links.get('termsOfService')} target='_blank' className='text-primary-600 hover:underline dark:text-primary-400'>
                         <FormattedMessage
                           id='registration.tos'
                           defaultMessage='Terms of Service'
@@ -140,7 +140,7 @@ const Registration = () => {
                       </a>
                     ),
                     privacy: (
-                      <a href={links.get('privacyPolicy')} target='_blank' className='text-primary-600 dark:text-primary-400 hover:underline'>
+                      <a href={links.get('privacyPolicy')} target='_blank' className='text-primary-600 hover:underline dark:text-primary-400'>
                         <FormattedMessage
                           id='registration.privacy'
                           defaultMessage='Privacy Policy'
diff --git a/app/soapbox/features/verification/steps/email-verification.tsx b/app/soapbox/features/verification/steps/email-verification.tsx
index a1a22599e..b2d90345d 100644
--- a/app/soapbox/features/verification/steps/email-verification.tsx
+++ b/app/soapbox/features/verification/steps/email-verification.tsx
@@ -45,7 +45,7 @@ const EmailSent: React.FC<IEmailSent> = ({ handleSubmit }) => {
 
   return (
     <div className='mx-auto flex flex-col items-center justify-center sm:pt-10'>
-      <Icon src={require('@tabler/icons/send.svg')} className='text-primary-600 dark:text-primary-400 mb-5 h-12 w-12' />
+      <Icon src={require('@tabler/icons/send.svg')} className='mb-5 h-12 w-12 text-primary-600 dark:text-primary-400' />
 
       <div className='mb-4 space-y-2 text-center'>
         <Text weight='bold' size='3xl'>We sent you an email</Text>
diff --git a/app/styles/application.scss b/app/styles/application.scss
index e9b87db19..e8af218ed 100644
--- a/app/styles/application.scss
+++ b/app/styles/application.scss
@@ -1,4 +1,3 @@
-@import 'mixins';
 @import 'variables';
 @import 'fonts';
 @import 'basics';