Change "thread" and "status--wrapper" to custom Tailwind

src/components/status.tsx

@@ -333,7 +333,7 @@ const Status: React.FC<IStatus> = (props) => {
 
     return (
       <HotKeys handlers={minHandlers}>
-        <div className={clsx('status__wrapper text-center', { focusable })} tabIndex={focusable ? 0 : undefined} ref={node}>
+        <div className={clsx('status--wrapper text-center', { focusable })} tabIndex={focusable ? 0 : undefined} ref={node}>
           {/* eslint-disable formatjs/no-literal-string-in-jsx */}
           <Text theme='muted'>
             <FormattedMessage id='status.filtered' defaultMessage='Filtered' />: {status.filtered.join(', ')}.
@@ -412,7 +412,7 @@ const Status: React.FC<IStatus> = (props) => {
       >
         <Card
           variant={variant}
-          className={clsx('status__wrapper space-y-4', `status-${actualStatus.visibility}`, {
+          className={clsx('status--wrapper space-y-4', `status-${actualStatus.visibility}`, {
             'py-6 sm:p-5': variant === 'rounded',
             'status-reply': !!status.in_reply_to_id,
             muted,
@@ -436,7 +436,7 @@ const Status: React.FC<IStatus> = (props) => {
             avatarSize={avatarSize}
           />
 
-          <div className='status__content-wrapper'>
+          <div className='status--content-wrapper'>
             <StatusReplyMentions status={actualStatus} hoverable={hoverable} />
 
             <Stack

src/features/event/event-discussion.tsx

@@ -178,7 +178,7 @@ const EventDiscussion: React.FC<IEventDiscussion> = (props) => {
       {me && <div className='border-b border-solid border-gray-200 p-2 pt-0 dark:border-gray-800'>
         <ComposeForm id={`reply:${status.id}`} autoFocus={false} event={status.id} />
       </div>}
-      <div ref={node} className='thread p-0 shadow-none sm:p-2'>
+      <div ref={node} className='thread p-0 shadow-none black:bg-black dark:bg-primary-900 sm:p-2'>
         <ScrollableList
           id='thread'
           ref={scroller}

src/features/placeholder/components/placeholder-status.tsx

@@ -33,7 +33,7 @@ const PlaceholderStatus: React.FC<IPlaceholderStatus> = ({ variant }) => (
         </HStack>
       </div>
 
-      <div className='status__content-wrapper mt-4'>
+      <div className='status--content-wrapper mt-4'>
         <PlaceholderStatusContent minLength={5} maxLength={120} />
       </div>
     </div>

src/features/scheduled-statuses/components/scheduled-status.tsx

@@ -31,7 +31,7 @@ const ScheduledStatus: React.FC<IScheduledStatus> = ({ statusId, ...other }) =>
   const account = status.account;
 
   return (
-    <div className={clsx('status__wrapper', `status__wrapper-${status.visibility}`, { 'status__wrapper-reply': !!status.in_reply_to_id })} tabIndex={0}>
+    <div className={clsx('status--wrapper', `status--wrapper-${status.visibility}`, { 'status--wrapper-reply': !!status.in_reply_to_id })} tabIndex={0}>
       <div className={clsx('status', `status-${status.visibility}`, { 'status-reply': !!status.in_reply_to_id })} data-id={status.id}>
         <div className='mb-4'>
           <HStack justifyContent='between' alignItems='start'>

src/features/ui/components/pending-status.tsx

@@ -78,7 +78,7 @@ const PendingStatus: React.FC<IPendingStatus> = ({ idempotencyKey, className, mu
             </HStack>
           </div>
 
-          <div className='status__content-wrapper'>
+          <div className='status--content-wrapper'>
             <StatusReplyMentions status={status} />
 
             <Stack space={4}>

src/styles/components/detailed-status.scss

@@ -4,12 +4,12 @@
   &__status {
     @apply relative pb-4;
 
-    .status__wrapper {
+    .status--wrapper {
       @apply shadow-none p-0;
     }
   }
 
-  .status__content-wrapper {
+  .status--content-wrapper {
     @apply pl-[calc(42px+12px)] rtl:pl-0 rtl:pr-[calc(42px+12px)];
   }
 }

src/styles/components/notification.scss

@@ -1,3 +1,3 @@
-.notification .status__wrapper {
+.notification .status--wrapper {
   @apply p-0 shadow-none rounded-none;
 }

src/styles/components/reply-mentions.scss

@@ -7,7 +7,7 @@
   }
 }
 
-.status__wrapper {
+.status--wrapper {
   .reply-mentions {
     display: block;
 

src/styles/components/status.scss

@@ -15,7 +15,7 @@
   }
 }
 
-[column-type='filled'] .status__wrapper,
+[column-type='filled'] .status--wrapper,
 [column-type='filled'] .status-placeholder {
   @apply bg-transparent dark:bg-transparent rounded-none shadow-none;
 }

src/styles/tailwind.css

@@ -3,6 +3,41 @@
 @tailwind utilities;
 
 @layer utilities {
+  .thread {
+    @apply bg-white;
+  
+    .status--content-wrapper {
+      @apply pl-[54px] rtl:pl-0 rtl:pr-[54px];
+    }
+  }
+
+  .thread__status {
+    @apply relative pb-4;
+
+    .status--wrapper {
+      @apply shadow-none p-0;
+    }
+  }
+
+  .notification .status--wrapper {
+    @apply p-0 shadow-none rounded-none;
+  }
+
+  .status--wrapper {
+    .reply-mentions {
+      display: block;
+  
+      span {
+        cursor: pointer;
+      }
+    }
+  }
+
+  [column-type='filled'] .status--wrapper,
+  [column-type='filled'] .status-placeholder {
+    @apply bg-transparent dark:bg-transparent rounded-none shadow-none;
+  }
+
   .search__icon {
     &::-moz-focus-inner {
       border: 0;