From fc7cdea9842af55d6af5d1b7cf8f05b7860123ec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Sun, 19 Oct 2025 22:32:00 +0200
Subject: [PATCH] pl-fe: consistency tweaks, further migrations
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 packages/pl-fe/src/columns/notifications.tsx  |  1 +
 packages/pl-fe/src/columns/search.tsx         |  2 +-
 packages/pl-fe/src/columns/trends.tsx         |  2 +-
 packages/pl-fe/src/components/status-list.tsx |  2 +-
 .../features/admin/tabs/awaiting-approval.tsx |  2 +-
 .../chats/components/chat-page/chat-page.tsx  |  2 +-
 .../components/conversations-list.tsx         |  2 +-
 .../notifications/components/notification.tsx | 21 ++++++------------
 packages/pl-fe/src/layouts/landing-layout.tsx |  2 +-
 .../src/modals/compare-history-modal.tsx      |  2 +-
 .../report-modal/steps/other-actions-step.tsx |  2 +-
 .../src/pages/dashboard/moderation-log.tsx    |  2 +-
 .../pl-fe/src/pages/groups/group-members.tsx  |  2 +-
 .../src/pages/settings/domain-blocks.tsx      |  2 +-
 .../src/pages/status-lists/draft-statuses.tsx |  2 +-
 .../pages/status-lists/scheduled-statuses.tsx |  2 +-
 packages/pl-fe/src/styles/application.scss    |  1 -
 .../src/styles/components/notification.scss   |  3 ---
 .../src/styles/components/video-player.scss   |  2 +-
 packages/pl-fe/src/styles/new/components.scss |  7 ++++--
 .../pl-fe/src/styles/new/notifications.scss   | 22 +++++++++++++++++++
 packages/pl-fe/src/styles/new/timelines.scss  |  2 +-
 22 files changed, 51 insertions(+), 36 deletions(-)
 delete mode 100644 packages/pl-fe/src/styles/components/notification.scss
 create mode 100644 packages/pl-fe/src/styles/new/notifications.scss

diff --git a/packages/pl-fe/src/columns/notifications.tsx b/packages/pl-fe/src/columns/notifications.tsx
index 095b7719c..1652b9942 100644
--- a/packages/pl-fe/src/columns/notifications.tsx
+++ b/packages/pl-fe/src/columns/notifications.tsx
@@ -4,6 +4,7 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { createSelector } from 'reselect';
 
+import 'pl-fe/styles/new/notifications.scss';
 import {
   type FilterType,
   expandNotifications,
diff --git a/packages/pl-fe/src/columns/search.tsx b/packages/pl-fe/src/columns/search.tsx
index bce85b724..18decbeab 100644
--- a/packages/pl-fe/src/columns/search.tsx
+++ b/packages/pl-fe/src/columns/search.tsx
@@ -136,7 +136,7 @@ const SearchColumn: React.FC<ISearchColumn> = ({ type, query, accountId, multiCo
       onLoadMore={handleLoadMore}
       placeholderComponent={placeholderComponent}
       placeholderCount={20}
-      listClassName={type === 'statuses' ? 'divide-y divide-solid divide-gray-200 dark:divide-gray-800' : ''}
+      listClassName={type === 'statuses' ? 'divide-y divide-solid divide-gray-200 black:divide-gray-800 dark:divide-primary-800' : ''}
       itemClassName={clsx({
         'pb-4': type === 'accounts' || type === 'links',
         'pb-3': type === 'hashtags',
diff --git a/packages/pl-fe/src/columns/trends.tsx b/packages/pl-fe/src/columns/trends.tsx
index dc442a0b3..b6cb1c79d 100644
--- a/packages/pl-fe/src/columns/trends.tsx
+++ b/packages/pl-fe/src/columns/trends.tsx
@@ -71,7 +71,7 @@ const TrendsColumn: React.FC<ITrendsColumn> = ({ type, multiColumn }) => {
       showLoading={isLoading}
       placeholderComponent={placeholderComponent}
       placeholderCount={20}
-      listClassName={type === 'statuses' ? 'divide-y divide-solid divide-gray-200 dark:divide-gray-800' : ''}
+      listClassName={type === 'statuses' ? 'divide-y divide-solid divide-gray-200 black:divide-gray-800 dark:divide-primary-800' : ''}
       itemClassName={clsx({
         'pb-4': type === 'accounts' || type === 'links',
         'pb-3': type === 'hashtags',
diff --git a/packages/pl-fe/src/components/status-list.tsx b/packages/pl-fe/src/components/status-list.tsx
index ebf66415e..6bae23a42 100644
--- a/packages/pl-fe/src/components/status-list.tsx
+++ b/packages/pl-fe/src/components/status-list.tsx
@@ -196,7 +196,7 @@ const StatusList: React.FC<IStatusList> = ({
       placeholderComponent={() => <PlaceholderStatus variant='slim' />}
       placeholderCount={20}
       ref={node}
-      listClassName={clsx('divide-y divide-solid divide-gray-200 dark:divide-gray-800', className)}
+      listClassName={clsx('divide-y divide-solid divide-gray-200 black:divide-gray-800 dark:divide-primary-800', className)}
       {...other}
     >
       {scrollableContent}
diff --git a/packages/pl-fe/src/features/admin/tabs/awaiting-approval.tsx b/packages/pl-fe/src/features/admin/tabs/awaiting-approval.tsx
index 55ee6ef0f..bf32af292 100644
--- a/packages/pl-fe/src/features/admin/tabs/awaiting-approval.tsx
+++ b/packages/pl-fe/src/features/admin/tabs/awaiting-approval.tsx
@@ -24,7 +24,7 @@ const AwaitingApproval: React.FC = () => {
       isLoading={isFetching}
       showLoading={isPending}
       emptyMessageText={<FormattedMessage id='admin.awaiting_approval.empty_message' defaultMessage='There is nobody waiting for approval. When a new user signs up, you can review them here.' />}
-      listClassName='divide-y divide-solid divide-gray-200 dark:divide-gray-800'
+      listClassName='divide-y divide-solid divide-gray-200 black:divide-gray-800 dark:divide-primary-800'
     >
       {accountIds.map(id => (
         <div key={id} className='px-5 py-4'>
diff --git a/packages/pl-fe/src/features/chats/components/chat-page/chat-page.tsx b/packages/pl-fe/src/features/chats/components/chat-page/chat-page.tsx
index 44817cc69..4cc2a846a 100644
--- a/packages/pl-fe/src/features/chats/components/chat-page/chat-page.tsx
+++ b/packages/pl-fe/src/features/chats/components/chat-page/chat-page.tsx
@@ -59,7 +59,7 @@ const ChatPage: React.FC<IChatPage> = ({ chatId }) => {
       className='h-screen overflow-hidden bg-white text-gray-900 shadow-lg black:bg-transparent dark:bg-primary-900 dark:text-gray-100 dark:shadow-none sm:rounded-t-xl'
     >
       <div
-        className='grid h-full grid-cols-9 overflow-hidden dark:divide-solid dark:divide-gray-800 sm:black:divide-x sm:dark:divide-x-2'
+        className='grid h-full grid-cols-9 overflow-hidden dark:divide-solid black:divide-gray-800 dark:divide-primary-800 sm:black:divide-x sm:dark:divide-x-2'
         data-testid='chat-page'
       >
         <Stack
diff --git a/packages/pl-fe/src/features/conversations/components/conversations-list.tsx b/packages/pl-fe/src/features/conversations/components/conversations-list.tsx
index 2b3e5c801..64ef8be56 100644
--- a/packages/pl-fe/src/features/conversations/components/conversations-list.tsx
+++ b/packages/pl-fe/src/features/conversations/components/conversations-list.tsx
@@ -46,7 +46,7 @@ const ConversationsList: React.FC = () => {
       isLoading={isLoading}
       showLoading={isLoading && conversations.length === 0}
       emptyMessageText={<FormattedMessage id='empty_column.direct' defaultMessage="You don't have any direct messages yet. When you send or receive one, it will show up here." />}
-      listClassName='divide-y divide-solid divide-gray-200 dark:divide-gray-800'
+      listClassName='divide-y divide-solid divide-gray-200 black:divide-gray-800 dark:divide-primary-800'
     >
       {conversations.map((item: any) => (
         <Conversation
diff --git a/packages/pl-fe/src/features/notifications/components/notification.tsx b/packages/pl-fe/src/features/notifications/components/notification.tsx
index 7bcf23b8f..f54c0c482 100644
--- a/packages/pl-fe/src/features/notifications/components/notification.tsx
+++ b/packages/pl-fe/src/features/notifications/components/notification.tsx
@@ -448,28 +448,21 @@ const Notification: React.FC<INotification> = (props) => {
   return (
     <Hotkeys handlers={handlers} data-testid='notification'>
       <div
-        className='notification flex flex-col gap-2 p-4'
+        className='⁂-notification'
         tabIndex={0}
         aria-label={ariaLabel}
         ref={node}
       >
         {!['mention', 'status'].includes(notification.type) ? (
-          <HStack alignItems='center' space={3}>
-            <div className='min-w-0 flex-1'>
+          <div className='⁂-notification__header'>
+            <div className='⁂-notification__info'>
               {statusInfo}
             </div>
 
-            <div className='ml-auto flex-none'>
-              <Text
-                theme='muted'
-                size='xs'
-                truncate
-                data-testid='message'
-              >
-                <RelativeTimestamp timestamp={notification.latest_page_notification_at!} theme='muted' size='sm' className='whitespace-nowrap' />
-              </Text>
-            </div>
-          </HStack>
+            <p className='⁂-notification__timestamp'>
+              <RelativeTimestamp timestamp={notification.latest_page_notification_at!} theme='muted' size='sm' className='whitespace-nowrap' />
+            </p>
+          </div>
         ) : statusInfo}
 
         {renderContent()}
diff --git a/packages/pl-fe/src/layouts/landing-layout.tsx b/packages/pl-fe/src/layouts/landing-layout.tsx
index 3a6f4cbdc..95c6f966f 100644
--- a/packages/pl-fe/src/layouts/landing-layout.tsx
+++ b/packages/pl-fe/src/layouts/landing-layout.tsx
@@ -19,7 +19,7 @@ const LandingLayout: React.FC<ILandingLayout> = ({ children }) => {
 
   return (
     <>
-      <Layout.Main className='space-y-3 pt-3 dark:divide-gray-800 sm:pt-0'>
+      <Layout.Main className='space-y-3 pt-3 black:divide-gray-800 dark:divide-primary-800 sm:pt-0'>
         {children}
       </Layout.Main>
 
diff --git a/packages/pl-fe/src/modals/compare-history-modal.tsx b/packages/pl-fe/src/modals/compare-history-modal.tsx
index c0601459e..96b21bfbf 100644
--- a/packages/pl-fe/src/modals/compare-history-modal.tsx
+++ b/packages/pl-fe/src/modals/compare-history-modal.tsx
@@ -33,7 +33,7 @@ const CompareHistoryModal: React.FC<BaseModalProps & CompareHistoryModalProps> =
     body = <Spinner />;
   } else {
     body = (
-      <div className='divide-y divide-solid divide-gray-200 dark:divide-gray-800'>
+      <div className='divide-y divide-solid divide-gray-200 black:divide-gray-800 dark:divide-primary-800'>
         {versions?.map((version) => {
           const content = <ParsedContent html={version.content} mentions={status?.mentions} hasQuote={!!status?.quote_id} emojis={version.emojis} speakAsCat={status.account.speak_as_cat} />;
 
diff --git a/packages/pl-fe/src/modals/report-modal/steps/other-actions-step.tsx b/packages/pl-fe/src/modals/report-modal/steps/other-actions-step.tsx
index 82844162e..61c8e4fc2 100644
--- a/packages/pl-fe/src/modals/report-modal/steps/other-actions-step.tsx
+++ b/packages/pl-fe/src/modals/report-modal/steps/other-actions-step.tsx
@@ -79,7 +79,7 @@ const OtherActionsStep = ({
         <FormGroup labelText={intl.formatMessage(messages.addAdditionalStatuses)}>
           {showAdditionalStatuses ? (
             <Stack space={2}>
-              <div className='divide-y divide-solid divide-gray-200 dark:divide-gray-800'>
+              <div className='divide-y divide-solid divide-gray-200 black:divide-gray-800 dark:divide-primary-800'>
                 {statusIds.map((statusId) => (
                   <StatusCheckBox
                     id={statusId}
diff --git a/packages/pl-fe/src/pages/dashboard/moderation-log.tsx b/packages/pl-fe/src/pages/dashboard/moderation-log.tsx
index 3a13b6159..e78a3e243 100644
--- a/packages/pl-fe/src/pages/dashboard/moderation-log.tsx
+++ b/packages/pl-fe/src/pages/dashboard/moderation-log.tsx
@@ -38,7 +38,7 @@ const ModerationLogPage = () => {
         emptyMessageText={<FormattedMessage id='admin.moderation_log.empty_message' defaultMessage='You have not performed any moderation actions yet. When you do, a history will be shown here.' />}
         hasMore={hasNextPage}
         onLoadMore={handleLoadMore}
-        listClassName='divide-y divide-solid divide-gray-200 dark:divide-gray-800'
+        listClassName='divide-y divide-solid divide-gray-200 black:divide-gray-800 dark:divide-primary-800'
       >
         {data.map(item => item && (
           <LogItem key={item.id} log={item} />
diff --git a/packages/pl-fe/src/pages/groups/group-members.tsx b/packages/pl-fe/src/pages/groups/group-members.tsx
index 335956b7b..ad36da058 100644
--- a/packages/pl-fe/src/pages/groups/group-members.tsx
+++ b/packages/pl-fe/src/pages/groups/group-members.tsx
@@ -41,7 +41,7 @@ const GroupMembers: React.FC<IGroupMembers> = (props) => {
         showLoading={!group || isFetchingPending || isLoading && members.length === 0}
         placeholderComponent={PlaceholderAccount}
         placeholderCount={3}
-        className='divide-y divide-solid divide-gray-200 dark:divide-gray-800'
+        className='divide-y divide-solid divide-gray-200 black:divide-gray-800 dark:divide-primary-800'
         itemClassName='py-3 last:pb-0'
         prepend={(pendingCount > 0) && (
           <div className={clsx('py-3', { 'border-b border-gray-200 dark:border-gray-800': members.length })}>
diff --git a/packages/pl-fe/src/pages/settings/domain-blocks.tsx b/packages/pl-fe/src/pages/settings/domain-blocks.tsx
index 7b716211e..2eaddff0d 100644
--- a/packages/pl-fe/src/pages/settings/domain-blocks.tsx
+++ b/packages/pl-fe/src/pages/settings/domain-blocks.tsx
@@ -41,7 +41,7 @@ const DomainBlocksPage: React.FC = () => {
         onLoadMore={handleLoadMore}
         hasMore={hasNextPage}
         emptyMessageText={emptyMessage}
-        listClassName='divide-y divide-gray-200 dark:divide-gray-800'
+        listClassName='divide-y divide-gray-200 black:divide-gray-800 dark:divide-primary-800'
       >
         {domains.map((domain) =>
           <Domain key={domain} domain={domain} />,
diff --git a/packages/pl-fe/src/pages/status-lists/draft-statuses.tsx b/packages/pl-fe/src/pages/status-lists/draft-statuses.tsx
index d6cd7c263..1b91b96a7 100644
--- a/packages/pl-fe/src/pages/status-lists/draft-statuses.tsx
+++ b/packages/pl-fe/src/pages/status-lists/draft-statuses.tsx
@@ -22,7 +22,7 @@ const DraftStatusesPage = () => {
       <ScrollableList
         scrollKey='draftStatuses'
         emptyMessageText={emptyMessage}
-        listClassName='divide-y divide-solid divide-gray-200 dark:divide-gray-800'
+        listClassName='divide-y divide-solid divide-gray-200 black:divide-gray-800 dark:divide-primary-800'
       >
         {drafts.toReversed().map((draft) => <DraftStatus key={draft.draft_id} draftStatus={draft} />)}
       </ScrollableList>
diff --git a/packages/pl-fe/src/pages/status-lists/scheduled-statuses.tsx b/packages/pl-fe/src/pages/status-lists/scheduled-statuses.tsx
index 4d43015e6..d87823cc4 100644
--- a/packages/pl-fe/src/pages/status-lists/scheduled-statuses.tsx
+++ b/packages/pl-fe/src/pages/status-lists/scheduled-statuses.tsx
@@ -25,7 +25,7 @@ const ScheduledStatusesPage = () => {
         isLoading={typeof isLoading === 'boolean' ? isLoading : true}
         onLoadMore={() => fetchNextPage({ cancelRefetch: false })}
         emptyMessageText={emptyMessage}
-        listClassName='divide-y divide-solid divide-gray-200 dark:divide-gray-800'
+        listClassName='divide-y divide-solid divide-gray-200 black:divide-gray-800 dark:divide-primary-800'
       >
         {scheduledStatuses.map((status) => <ScheduledStatus key={status.id} scheduledStatus={status} />)}
       </ScrollableList>
diff --git a/packages/pl-fe/src/styles/application.scss b/packages/pl-fe/src/styles/application.scss
index cc8887e87..29661b3ce 100644
--- a/packages/pl-fe/src/styles/application.scss
+++ b/packages/pl-fe/src/styles/application.scss
@@ -10,7 +10,6 @@
 @use 'components/compose-form';
 @use 'components/status';
 @use 'components/detailed-status';
-@use 'components/notification';
 @use 'components/columns';
 @use 'components/video-player';
 @use 'components/icon';
diff --git a/packages/pl-fe/src/styles/components/notification.scss b/packages/pl-fe/src/styles/components/notification.scss
deleted file mode 100644
index 020b368ff..000000000
--- a/packages/pl-fe/src/styles/components/notification.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-.notification .status__wrapper {
-  @apply p-0;
-}
diff --git a/packages/pl-fe/src/styles/components/video-player.scss b/packages/pl-fe/src/styles/components/video-player.scss
index b645edac4..53b424cf7 100644
--- a/packages/pl-fe/src/styles/components/video-player.scss
+++ b/packages/pl-fe/src/styles/components/video-player.scss
@@ -12,7 +12,7 @@
 
 .video-player {
   &__controls {
-    @apply bg-primary-200 dark:bg-primary-700 box-border ring-0 transition-all duration-300 ease-in-out;
+    @apply bg-primary-200 dark:bg-primary-700 black:bg-primary-800 box-border ring-0 transition-all duration-300 ease-in-out;
     position: absolute;
     left: 0.75rem;
     right: 0.75rem;
diff --git a/packages/pl-fe/src/styles/new/components.scss b/packages/pl-fe/src/styles/new/components.scss
index 994785c68..6c458f641 100644
--- a/packages/pl-fe/src/styles/new/components.scss
+++ b/packages/pl-fe/src/styles/new/components.scss
@@ -62,7 +62,10 @@
 }
 
 .⁂-icon {
-  @apply relative flex shrink-0 flex-col;
+  display: flex;
+  position: relative;
+  flex-shrink: 0;
+  flex-direction: column;
 
   &__counter {
     @apply absolute -right-3 -top-2 flex h-5 min-w-[20px] shrink-0 items-center justify-center whitespace-nowrap break-words;
@@ -161,7 +164,7 @@ a.⁂-list-item,
 }
 
 .⁂-card-title {
-  @include mixins.text($size: xl, $weight: bold, $truncate: truncate);
+  @include mixins.text($size: xl, $weight: bold, $truncate: true);
 }
 
 .⁂-animated-number {
diff --git a/packages/pl-fe/src/styles/new/notifications.scss b/packages/pl-fe/src/styles/new/notifications.scss
new file mode 100644
index 000000000..18bc9ca1d
--- /dev/null
+++ b/packages/pl-fe/src/styles/new/notifications.scss
@@ -0,0 +1,22 @@
+@use 'mixins'; 
+
+.⁂-notification {
+  @apply flex flex-col gap-2 p-4;
+
+  &__header {
+    @apply flex items-center gap-3;
+  }
+
+  &__info {
+    @apply min-w-0 flex-1;
+  }
+
+  &__timestamp {
+    @apply ml-auto flex-none;
+    @include mixins.text($size: xs, $theme: muted, $truncate: true);
+  }
+
+  .status__wrapper {
+    @apply p-0;
+  }
+}
\ No newline at end of file
diff --git a/packages/pl-fe/src/styles/new/timelines.scss b/packages/pl-fe/src/styles/new/timelines.scss
index c8f68d462..81ab913ff 100644
--- a/packages/pl-fe/src/styles/new/timelines.scss
+++ b/packages/pl-fe/src/styles/new/timelines.scss
@@ -1,7 +1,7 @@
 @use 'mixins';
 
 .⁂-layout__main--home {
-  @apply black:space-y-0 dark:divide-gray-800 sm:space-y-3;
+  @apply black:space-y-0 black:divide-gray-800 dark:divide-primary-800 sm:space-y-3;
 }
 
 .⁂-compose-block {