From 80388d2cdc085f28da6d85e301d71e1494be8a58 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Wed, 6 Nov 2024 02:27:19 -0300
Subject: [PATCH] Change "thread" and "status--wrapper" to custom Tailwind

---
 src/components/status.tsx                     |  6 ++--
 src/features/event/event-discussion.tsx       |  2 +-
 .../components/placeholder-status.tsx         |  2 +-
 .../components/scheduled-status.tsx           |  2 +-
 src/features/ui/components/pending-status.tsx |  2 +-
 src/styles/components/detailed-status.scss    |  4 +--
 src/styles/components/notification.scss       |  2 +-
 src/styles/components/reply-mentions.scss     |  2 +-
 src/styles/components/status.scss             |  2 +-
 src/styles/tailwind.css                       | 35 +++++++++++++++++++
 10 files changed, 47 insertions(+), 12 deletions(-)

diff --git a/src/components/status.tsx b/src/components/status.tsx
index 022eab385..81665466c 100644
--- a/src/components/status.tsx
+++ b/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
diff --git a/src/features/event/event-discussion.tsx b/src/features/event/event-discussion.tsx
index cd11b1916..93d7168ef 100644
--- a/src/features/event/event-discussion.tsx
+++ b/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}
diff --git a/src/features/placeholder/components/placeholder-status.tsx b/src/features/placeholder/components/placeholder-status.tsx
index c6d7221ad..5db332c0c 100644
--- a/src/features/placeholder/components/placeholder-status.tsx
+++ b/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>
diff --git a/src/features/scheduled-statuses/components/scheduled-status.tsx b/src/features/scheduled-statuses/components/scheduled-status.tsx
index 6e71f7cbe..8fb1de473 100644
--- a/src/features/scheduled-statuses/components/scheduled-status.tsx
+++ b/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'>
diff --git a/src/features/ui/components/pending-status.tsx b/src/features/ui/components/pending-status.tsx
index 1ed4e5502..4a9f0a5d4 100644
--- a/src/features/ui/components/pending-status.tsx
+++ b/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}>
diff --git a/src/styles/components/detailed-status.scss b/src/styles/components/detailed-status.scss
index 2edea3294..ccefc753e 100644
--- a/src/styles/components/detailed-status.scss
+++ b/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)];
   }
 }
diff --git a/src/styles/components/notification.scss b/src/styles/components/notification.scss
index 63439e79a..d593c6f2e 100644
--- a/src/styles/components/notification.scss
+++ b/src/styles/components/notification.scss
@@ -1,3 +1,3 @@
-.notification .status__wrapper {
+.notification .status--wrapper {
   @apply p-0 shadow-none rounded-none;
 }
diff --git a/src/styles/components/reply-mentions.scss b/src/styles/components/reply-mentions.scss
index 002afe3e1..122f70874 100644
--- a/src/styles/components/reply-mentions.scss
+++ b/src/styles/components/reply-mentions.scss
@@ -7,7 +7,7 @@
   }
 }
 
-.status__wrapper {
+.status--wrapper {
   .reply-mentions {
     display: block;
 
diff --git a/src/styles/components/status.scss b/src/styles/components/status.scss
index 3c7863062..660f5127e 100644
--- a/src/styles/components/status.scss
+++ b/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;
 }
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index 49e73944e..f801dc04b 100644
--- a/src/styles/tailwind.css
+++ b/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;