Remove unused or non-existent class names and change 'status' to custom Tailwind

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}`, {
+          className={clsx('status--wrapper space-y-4', {
-            'py-6 sm:p-5': variant === 'rounded',
+            'py-6 sm:p-5': variant === 'rounded', muted, read: unread === false,
-            'status-reply': !!status.in_reply_to_id,
-            muted,
-            read: unread === false,
           })}
           data-id={status.id}
         >

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,
   })}
   >

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--wrapper')} tabIndex={0}>
-      <div className={clsx('status', `status-${status.visibility}`, { 'status-reply': !!status.in_reply_to_id })} data-id={status.id}>
+      <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

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,
           })}

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;
   

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)' },