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

pl-fe: styles

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-10-19 21:14:41 +02:00
parent 7d1fae36a9
commit c1805c1ff3
3 changed files with 9 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -203,6 +203,7 @@ const Status: React.FC<IStatus> = (props) => {
if (isReblog && showGroup && group) {
return (
<StatusInfo
className='-mb-1'
avatarSize={avatarSize}
icon={<Icon src={require('@phosphor-icons/core/regular/repeat.svg')} className='size-4 text-green-600' />}
text={
@ -264,6 +265,7 @@ const Status: React.FC<IStatus> = (props) => {
return (
<StatusInfo
className='-mb-1'
avatarSize={avatarSize}
icon={<Icon src={require('@phosphor-icons/core/regular/repeat.svg')} className='size-4 text-green-600' />}
text={
@ -286,6 +288,7 @@ const Status: React.FC<IStatus> = (props) => {
} else if (featured) {
return (
<StatusInfo
className='-mb-1'
avatarSize={avatarSize}
icon={<Icon src={require('@phosphor-icons/core/regular/push-pin.svg')} className='size-4 text-gray-600 dark:text-gray-400' />}
text={
@ -296,6 +299,7 @@ const Status: React.FC<IStatus> = (props) => {
} else if (showGroup && group) {
return (
<StatusInfo
className='-mb-1'
avatarSize={avatarSize}
icon={<Icon src={require('@phosphor-icons/core/regular/users-three.svg')} className='size-4 text-primary-600 dark:text-accent-blue' />}
text={

6
packages/pl-fe/src/components/statuses/status-info.tsx
View File

@ -1,3 +1,4 @@
import clsx from 'clsx';
import React from 'react';
import HStack from 'pl-fe/components/ui/hstack';
@ -7,11 +8,12 @@ interface IStatusInfo {
avatarSize: number;
icon: React.ReactNode;
text: React.ReactNode;
className?: string;
title?: string;
}
const StatusInfo = (props: IStatusInfo) => {
const { avatarSize, icon, text, title } = props;
const { avatarSize, icon, text, className, title } = props;
const onClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
event.stopPropagation();
@ -21,7 +23,7 @@ const StatusInfo = (props: IStatusInfo) => {
<HStack
space={2}
alignItems='center'
className='-mb-1 w-fit max-w-full cursor-default rounded-full border border-gray-200 bg-gray-100 px-3 py-1 black:border-gray-800 black:bg-gray-900 dark:border-transparent dark:bg-primary-800 rtl:space-x-reverse'
className={clsx('w-fit max-w-full cursor-default rounded-full border border-gray-200 bg-gray-100 px-3 py-1 black:border-gray-800 black:bg-gray-900 dark:border-transparent dark:bg-primary-800 rtl:space-x-reverse', className)}
onClick={onClick}
style={{ marginLeft: avatarSize - 25, maxWidth: `calc(100% - ${avatarSize - 25}px)` }}
title={title}

1
packages/pl-fe/src/features/status/components/detailed-status.tsx
View File

@ -45,6 +45,7 @@ const DetailedStatus: React.FC<IDetailedStatus> = ({
return (
<div className='mb-4'>
<StatusInfo
className='-mb-1'
avatarSize={42}
icon={
<Icon