From 4a11d56832955689341790551d874390a4cb2c5b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Wed, 3 Apr 2024 23:34:03 +0200
Subject: [PATCH] Improve pending/scheduled statuses styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../compose/editor/nodes/emoji-node.tsx       |  2 +-
 .../scheduled-status-action-bar.tsx           | 14 ++++------
 .../components/scheduled-status.tsx           | 28 +++++++++----------
 src/features/scheduled-statuses/index.tsx     |  1 +
 src/features/ui/components/pending-status.tsx |  5 +++-
 5 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/src/features/compose/editor/nodes/emoji-node.tsx b/src/features/compose/editor/nodes/emoji-node.tsx
index d3f7a58bc..767731930 100644
--- a/src/features/compose/editor/nodes/emoji-node.tsx
+++ b/src/features/compose/editor/nodes/emoji-node.tsx
@@ -81,7 +81,7 @@ class EmojiNode extends DecoratorNode<JSX.Element> {
   decorate(): JSX.Element {
     const emoji = this.__emoji;
     if (isNativeEmoji(emoji)) {
-      return  <Component emoji={emoji.native} alt={emoji.colons} className='emojione h-4 w-4' />;
+      return <Component emoji={emoji.native} alt={emoji.colons} className='emojione h-4 w-4' />;
     } else {
       return <Component src={emoji.imageUrl} alt={emoji.colons} className='emojione h-4 w-4' />;
     }
diff --git a/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx b/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
index 9b32f8330..8462c45ff 100644
--- a/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
+++ b/src/features/scheduled-statuses/components/scheduled-status-action-bar.tsx
@@ -1,11 +1,10 @@
 import React from 'react';
-import { defineMessages, useIntl } from 'react-intl';
+import { FormattedMessage, defineMessages, useIntl } from 'react-intl';
 
 import { openModal } from 'soapbox/actions/modals';
 import { cancelScheduledStatus } from 'soapbox/actions/scheduled-statuses';
 import { getSettings } from 'soapbox/actions/settings';
-import IconButton from 'soapbox/components/icon-button';
-import { HStack } from 'soapbox/components/ui';
+import { Button, HStack } from 'soapbox/components/ui';
 import { useAppDispatch } from 'soapbox/hooks';
 
 import type { Status as StatusEntity } from 'soapbox/types/entities';
@@ -46,12 +45,9 @@ const ScheduledStatusActionBar: React.FC<IScheduledStatusActionBar> = ({ status
 
   return (
     <HStack justifyContent='end'>
-      <IconButton
-        title={intl.formatMessage(messages.cancel)}
-        text={intl.formatMessage(messages.cancel)}
-        src={require('@tabler/icons/outline/x.svg')}
-        onClick={handleCancelClick}
-      />
+      <Button theme='danger' size='sm' onClick={handleCancelClick}>
+        <FormattedMessage id='scheduled_status.cancel' defaultMessage='Cancel' />
+      </Button>
     </HStack>
   );
 };
diff --git a/src/features/scheduled-statuses/components/scheduled-status.tsx b/src/features/scheduled-statuses/components/scheduled-status.tsx
index 7243bffd4..6e71f7cbe 100644
--- a/src/features/scheduled-statuses/components/scheduled-status.tsx
+++ b/src/features/scheduled-statuses/components/scheduled-status.tsx
@@ -5,7 +5,7 @@ import Account from 'soapbox/components/account';
 import AttachmentThumbs from 'soapbox/components/attachment-thumbs';
 import StatusContent from 'soapbox/components/status-content';
 import StatusReplyMentions from 'soapbox/components/status-reply-mentions';
-import { HStack } from 'soapbox/components/ui';
+import { HStack, Stack } from 'soapbox/components/ui';
 import PollPreview from 'soapbox/features/ui/components/poll-preview';
 import { useAppSelector } from 'soapbox/hooks';
 
@@ -40,28 +40,28 @@ const ScheduledStatus: React.FC<IScheduledStatus> = ({ statusId, ...other }) =>
               account={account}
               timestamp={status.created_at}
               futureTimestamp
-              hideActions
+              action={<ScheduledStatusActionBar status={status} {...other} />}
             />
           </HStack>
         </div>
 
         <StatusReplyMentions status={status} />
 
-        <StatusContent
-          status={status}
-          collapsable
-        />
-
-        {status.media_attachments.size > 0 && (
-          <AttachmentThumbs
-            media={status.media_attachments}
-            sensitive={status.sensitive}
+        <Stack space={4}>
+          <StatusContent
+            status={status}
+            collapsable
           />
-        )}
 
-        {status.poll && <PollPreview pollId={status.poll as string} />}
+          {status.media_attachments.size > 0 && (
+            <AttachmentThumbs
+              media={status.media_attachments}
+              sensitive={status.sensitive}
+            />
+          )}
 
-        <ScheduledStatusActionBar status={status} {...other} />
+          {status.poll && <PollPreview pollId={status.poll as string} />}
+        </Stack>
       </div>
     </div>
   );
diff --git a/src/features/scheduled-statuses/index.tsx b/src/features/scheduled-statuses/index.tsx
index 781a06759..0a9b3dcae 100644
--- a/src/features/scheduled-statuses/index.tsx
+++ b/src/features/scheduled-statuses/index.tsx
@@ -39,6 +39,7 @@ const ScheduledStatuses = () => {
         isLoading={typeof isLoading === 'boolean' ? isLoading : true}
         onLoadMore={() => handleLoadMore(dispatch)}
         emptyMessage={emptyMessage}
+        listClassName='divide-y divide-solid divide-gray-200 dark:divide-gray-800'
       >
         {statusIds.map((id: string) => <ScheduledStatus key={id} statusId={id} />)}
       </ScrollableList>
diff --git a/src/features/ui/components/pending-status.tsx b/src/features/ui/components/pending-status.tsx
index 49dd2bcd8..1ed4e5502 100644
--- a/src/features/ui/components/pending-status.tsx
+++ b/src/features/ui/components/pending-status.tsx
@@ -60,7 +60,10 @@ 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('py-6 sm:p-5', `status-${status.visibility}`, { 'status-reply': !!status.in_reply_to_id })}
+          className={clsx(`status-${status.visibility}`, {
+            'py-6 sm:p-5': !thread,
+            'status-reply': !!status.in_reply_to_id,
+          })}
           variant={thread ? 'default' : 'rounded'}
         >
           <div className='mb-4'>