matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: consistency tweaks, further migrations

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-10-19 22:32:00 +02:00
parent 587db5d56f
commit fc7cdea984
22 changed files with 51 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/pl-fe/src/columns/notifications.tsx
View File

@ -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,

2
packages/pl-fe/src/columns/search.tsx
View File

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

2
packages/pl-fe/src/columns/trends.tsx
View File

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

2
packages/pl-fe/src/components/status-list.tsx
View File

@ -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}

2
packages/pl-fe/src/features/admin/tabs/awaiting-approval.tsx
View File

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

2
packages/pl-fe/src/features/chats/components/chat-page/chat-page.tsx
View File

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

2
packages/pl-fe/src/features/conversations/components/conversations-list.tsx
View File

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

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

@ -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()}

2
packages/pl-fe/src/layouts/landing-layout.tsx
View File

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

2
packages/pl-fe/src/modals/compare-history-modal.tsx
View File

@ -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} />;

2
packages/pl-fe/src/modals/report-modal/steps/other-actions-step.tsx
View File

@ -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}

2
packages/pl-fe/src/pages/dashboard/moderation-log.tsx
View File

@ -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} />

2
packages/pl-fe/src/pages/groups/group-members.tsx
View File

@ -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 })}>

2
packages/pl-fe/src/pages/settings/domain-blocks.tsx
View File

@ -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} />,

2
packages/pl-fe/src/pages/status-lists/draft-statuses.tsx
View File

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

2
packages/pl-fe/src/pages/status-lists/scheduled-statuses.tsx
View File

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

1
packages/pl-fe/src/styles/application.scss
View File

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

3
packages/pl-fe/src/styles/components/notification.scss
View File

@ -1,3 +0,0 @@
.notification .status__wrapper {
@apply p-0;
}

2
packages/pl-fe/src/styles/components/video-player.scss
View File

@ -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;

7
packages/pl-fe/src/styles/new/components.scss
View File

@ -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 {

22
packages/pl-fe/src/styles/new/notifications.scss Normal file
View File

@ -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;
}
}

2
packages/pl-fe/src/styles/new/timelines.scss
View File

@ -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 {