nicolium: some style updates

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

packages/nicolium/src/actions/moderation.tsx

@@ -3,7 +3,6 @@ import { defineMessages, FormattedMessage, type IntlShape } from 'react-intl';
 
 import { deactivateUser, deleteUser, deleteStatus, toggleStatusSensitivity } from '@/actions/admin';
 import OutlineBox from '@/components/outline-box';
-import Stack from '@/components/ui/stack';
 import Text from '@/components/ui/text';
 import AccountContainer from '@/containers/account-container';
 import { selectAccount } from '@/queries/accounts/selectors';
@@ -102,7 +101,7 @@ const deactivateUserModal =
     const name = selectAccount(accountId)!.username;
 
     const message = (
-      <Stack space={4}>
+      <div className='flex flex-col gap-4'>
         <OutlineBox>
           <AccountContainer id={accountId} hideActions />
         </OutlineBox>
@@ -114,7 +113,7 @@ const deactivateUserModal =
             values={{ acct }}
           />
         </Text>
-      </Stack>
+      </div>
     );
 
     useModalsStore.getState().actions.openModal('CONFIRM', {
@@ -142,7 +141,7 @@ const deleteUserModal =
     const local = account.local;
 
     const message = (
-      <Stack space={4}>
+      <div className='flex flex-col gap-4'>
         <OutlineBox>
           <AccountContainer id={accountId} hideActions />
         </OutlineBox>
@@ -154,7 +153,7 @@ const deleteUserModal =
             values={{ acct }}
           />
         </Text>
-      </Stack>
+      </div>
     );
 
     const confirm = intl.formatMessage(messages.deleteUserConfirm, { name });

packages/nicolium/src/columns/timeline.tsx

@@ -9,10 +9,8 @@ import ScrollableList, { type IScrollableList } from '@/components/scrollable-li
 import Status, { StatusFollowedTagInfo } from '@/components/statuses/status';
 import StatusInfo from '@/components/statuses/status-info';
 import Tombstone from '@/components/statuses/tombstone';
-import Button from '@/components/ui/button';
 import Icon from '@/components/ui/icon';
 import Portal from '@/components/ui/portal';
-import Stack from '@/components/ui/stack';
 import Emojify from '@/features/emoji/emojify';
 import PlaceholderStatus from '@/features/placeholder/components/placeholder-status';
 import PendingStatus from '@/features/ui/components/pending-status';
@@ -175,19 +173,15 @@ const TimelineGap: React.FC<ITimelineGap> = ({ gap, onFillGap, firstEntry }) =>
   };
 
   return (
-    <Stack className='⁂-timeline-gap mx-auto items-stretch'>
-      <Button
-        theme='transparent'
-        icon={require('@phosphor-icons/core/regular/caret-double-down.svg')}
-        onClick={() => handleFill('down')}
-        disabled={isLoading}
-      >
+    <div className='⁂-timeline-gap'>
+      <button onClick={() => handleFill('down')} disabled={isLoading}>
+        <Icon src={require('@phosphor-icons/core/regular/caret-double-down.svg')} aria-hidden />
         {firstEntry ? (
           <FormattedMessage id='timeline.gap.load_recent' defaultMessage='Load recent posts' />
         ) : (
           <FormattedMessage id='timeline.gap.load_older' defaultMessage='Load older posts' />
         )}
-      </Button>
+      </button>
       <div className='⁂-timeline-gap__separator'>
         <span
           title={intl.formatMessage(
@@ -197,15 +191,11 @@ const TimelineGap: React.FC<ITimelineGap> = ({ gap, onFillGap, firstEntry }) =>
           {renderTimeDistance()}
         </span>
       </div>
-      <Button
-        theme='transparent'
-        icon={require('@phosphor-icons/core/regular/caret-double-up.svg')}
-        onClick={() => handleFill('up')}
-        disabled={isLoading}
-      >
+      <button onClick={() => handleFill('up')} disabled={isLoading}>
+        <Icon src={require('@phosphor-icons/core/regular/caret-double-up.svg')} aria-hidden />
         <FormattedMessage id='timeline.gap.load_newer' defaultMessage='Load newer posts' />
-      </Button>
-    </Stack>
+      </button>
+    </div>
   );
 };
 

packages/nicolium/src/styles/new/statuses.scss

@@ -664,12 +664,23 @@
 }
 
 .⁂-timeline-gap {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+  margin: 1rem auto;
   border-top-width: 1px;
   border-bottom-width: 1px;
   border-color: rgb(var(--color-gray-200));
 
+  button {
+    @include mixins.button($theme: transparent, $size: xs);
+
+    svg {
+      width: 1rem;
+      height: 1rem;
+    }
+  }
+
   .dark & {
     border-color: rgb(var(--color-gray-800));
   }