pl-fe: idk im drunk

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/pl-fe/src/components/status.tsx

@@ -367,8 +367,12 @@ const Status: React.FC<IStatus> = (props) => {
 
   const body = (
     <div
-      className={clsx('status cursor-pointer')}
+      className={clsx('⁂-status', {
+        '⁂-status--reply': !!status.in_reply_to_id,
+      })}
       data-featured={featured ? 'true' : null}
+      data-visibility={actualStatus.visibility}
+      data-id={status.id}
       aria-label={textForScreenReader(intl, actualStatus, rebloggedByText)}
       ref={node}
       onClick={handleClick}
@@ -376,13 +380,11 @@ const Status: React.FC<IStatus> = (props) => {
     >
       <Card
         variant={variant}
-        className={clsx('status__wrapper space-y-4', className, `status-${actualStatus.visibility}`, {
+        className={clsx('⁂-status__wrapper status-wrapper', className, {
           'py-6 sm:p-5': variant === 'rounded',
-          'status-reply': !!status.in_reply_to_id,
           muted,
           read: unread === false,
         })}
-        data-id={status.id}
       >
         {statusInfo}
 

packages/pl-fe/src/features/notifications/components/notification.tsx

@@ -359,6 +359,7 @@ const Notification: React.FC<INotification> = (props) => {
           avatarSize={avatarSize}
           contextType='notifications'
           showGroup={false}
+          variant='slim'
         />
       );
     }
@@ -418,6 +419,7 @@ const Notification: React.FC<INotification> = (props) => {
             avatarSize={avatarSize}
             contextType='notifications'
             showGroup={false}
+            variant='slim'
           />
         ) : null;
       default:

packages/pl-fe/src/features/ui/components/pending-status.tsx

@@ -58,7 +58,7 @@ const PendingStatus: React.FC<IPendingStatus> = ({ idempotencyKey, className, mu
 
   return (
     <div className={clsx('opacity-50', className)}>
-      <div className={clsx('status', { 'status-reply': !!status.in_reply_to_id, muted })} data-id={status.id}>
+      <div data-id={status.id}>
         <Card
           className={clsx(`status-${status.visibility}`, {
             'py-6 sm:p-5': variant === 'rounded',

packages/pl-fe/src/styles/components/status.scss

@@ -1,7 +1,3 @@
-.status {
-  @apply min-h-[54px] cursor-default;
-}
-
 [column-type='filled'] .status__wrapper,
 [column-type='filled'] .status-placeholder {
   @apply bg-transparent dark:bg-transparent rounded-none shadow-none;

packages/pl-fe/src/styles/new/notifications.scss

@@ -33,7 +33,7 @@
     @include mixins.text($size: xs, $theme: muted, $truncate: true);
   }
 
-  .status__wrapper {
+  .⁂-status__wrapper {
     padding: 0;
   }
 }

packages/pl-fe/src/styles/new/statuses.scss

@@ -1,3 +1,17 @@
+.⁂-status {
+  @apply cursor-pointer;
+
+  &__wrapper {
+    @apply space-y-4;
+  }
+}
+
+.thread__status {
+  .⁂-.status__wrapper {
+    @apply p-0;
+  }
+}
+
 .⁂-media-gallery {
   @apply overflow-hidden rounded-md rounded-lg box-border overflow-hidden isolate relative w-full h-auto;