Merge branch 'scheduled-action-style' into 'main'

Improve pending/scheduled statuses styles

See merge request soapbox-pub/soapbox!2976

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 { Button, HStack } from 'soapbox/components/ui';
-import { 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
+      <Button theme='danger' size='sm' onClick={handleCancelClick}>
-        title={intl.formatMessage(messages.cancel)}
+        <FormattedMessage id='scheduled_status.cancel' defaultMessage='Cancel' />
-        text={intl.formatMessage(messages.cancel)}
+      </Button>
-        src={require('@tabler/icons/outline/x.svg')}
-        onClick={handleCancelClick}
-      />
     </HStack>
   );
 };

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,13 +40,14 @@ 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} />
 
+        <Stack space={4}>
           <StatusContent
             status={status}
             collapsable
@@ -60,8 +61,7 @@ const ScheduledStatus: React.FC<IScheduledStatus> = ({ statusId, ...other }) =>
           )}
 
           {status.poll && <PollPreview pollId={status.poll as string} />}
-
+        </Stack>
-        <ScheduledStatusActionBar status={status} {...other} />
       </div>
     </div>
   );

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>

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'>