From ea9719be5117f7375e62087725caa7b99f81fc82 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Wed, 6 Nov 2024 16:04:05 -0300
Subject: [PATCH] Remove unused or non-existent class names and change 'status'
 to custom Tailwind

---
 src/components/status.tsx                           |  7 ++-----
 .../placeholder/components/placeholder-card.tsx     |  2 +-
 .../components/scheduled-status.tsx                 |  4 ++--
 src/features/ui/components/pending-status.tsx       |  2 +-
 src/styles/tailwind.css                             | 13 +++++++++++++
 tailwind.config.ts                                  |  5 +++++
 6 files changed, 24 insertions(+), 9 deletions(-)

diff --git a/src/components/status.tsx b/src/components/status.tsx
index d9152bb66..bbdb504e4 100644
--- a/src/components/status.tsx
+++ b/src/components/status.tsx
@@ -412,11 +412,8 @@ const Status: React.FC<IStatus> = (props) => {
       >
         <Card
           variant={variant}
-          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,
-            read: unread === false,
+          className={clsx('status--wrapper space-y-4', {
+            'py-6 sm:p-5': variant === 'rounded', muted, read: unread === false,
           })}
           data-id={status.id}
         >
diff --git a/src/features/placeholder/components/placeholder-card.tsx b/src/features/placeholder/components/placeholder-card.tsx
index 5e18ecf34..4e5130d57 100644
--- a/src/features/placeholder/components/placeholder-card.tsx
+++ b/src/features/placeholder/components/placeholder-card.tsx
@@ -5,7 +5,7 @@ import { randomIntFromInterval, generateText } from '../utils';
 
 /** Fake link preview to display while data is loading. */
 const PlaceholderCard: React.FC = () => (
-  <div className={clsx('status-card', {
+  <div className={clsx('flex overflow-hidden rounded-lg border border-solid border-gray-200 text-sm text-gray-800 no-underline dark:border-gray-800 dark:text-gray-200', {
     'animate-pulse': true,
   })}
   >
diff --git a/src/features/scheduled-statuses/components/scheduled-status.tsx b/src/features/scheduled-statuses/components/scheduled-status.tsx
index 8fb1de473..83f13f58f 100644
--- a/src/features/scheduled-statuses/components/scheduled-status.tsx
+++ b/src/features/scheduled-statuses/components/scheduled-status.tsx
@@ -31,8 +31,8 @@ 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', `status-${status.visibility}`, { 'status-reply': !!status.in_reply_to_id })} data-id={status.id}>
+    <div className={clsx('status--wrapper')} tabIndex={0}>
+      <div className={clsx('status', { 'status-reply': !!status.in_reply_to_id })} data-id={status.id}>
         <div className='mb-4'>
           <HStack justifyContent='between' alignItems='start'>
             <Account
diff --git a/src/features/ui/components/pending-status.tsx b/src/features/ui/components/pending-status.tsx
index 4a9f0a5d4..189a0afab 100644
--- a/src/features/ui/components/pending-status.tsx
+++ b/src/features/ui/components/pending-status.tsx
@@ -60,7 +60,7 @@ const PendingStatus: React.FC<IPendingStatus> = ({ idempotencyKey, className, mu
     <div className={clsx('opacity-50', className)}>
       <div className={clsx('status', { 'status-reply': !!status.in_reply_to_id, muted })} data-id={status.id}>
         <Card
-          className={clsx(`status-${status.visibility}`, {
+          className={clsx({
             'py-6 sm:p-5': !thread,
             'status-reply': !!status.in_reply_to_id,
           })}
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
index f801dc04b..18b5b5070 100644
--- a/src/styles/tailwind.css
+++ b/src/styles/tailwind.css
@@ -3,6 +3,19 @@
 @tailwind utilities;
 
 @layer utilities {
+  .status {
+    @apply min-h-[54px] cursor-default animate-fade opacity-100;
+  }
+
+  body.rtl {
+    direction: rtl;
+  
+    .status {
+      padding-left: 10px;
+      padding-right: 68px;
+    }
+  }
+
   .thread {
     @apply bg-white;
   
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 707639804..004be35ca 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -69,6 +69,7 @@ const config: Config = {
         'greentext': true,
       }),
       animation: {
+        fade: 'fade 150ms linear',
         'sonar-scale-4': 'sonar-scale-4 3s linear infinite',
         'sonar-scale-3': 'sonar-scale-3 3s 0.5s linear infinite',
         'sonar-scale-2': 'sonar-scale-2 3s 1s linear infinite',
@@ -77,6 +78,10 @@ const config: Config = {
         'leave': 'leave 150ms ease-in forwards',
       },
       keyframes: {
+        fade: {
+          '0%': { opacity: '0' },
+          '100%': { opacity: '1' },
+        },
         'sonar-scale-4': {
           from: { opacity: '0.4', transform: 'scale(1)' },
           to: { opacity: '0', transform: 'scale(4)' },