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

pl-fe: improve contrast, remove unused code

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-09-25 10:14:13 +02:00
parent c56df66c4c
commit ffdaa35abb
1 changed files with 14 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
packages/pl-fe/src/components/status-action-button.tsx
View File

@ -1,7 +1,6 @@
import clsx from 'clsx';
import React from 'react';
import Emoji from 'pl-fe/components/ui/emoji';
import Icon from 'pl-fe/components/ui/icon';
import Text from 'pl-fe/components/ui/text';
import { useLongPress } from 'pl-fe/hooks/use-long-press';
@ -9,8 +8,6 @@ import { useSettings } from 'pl-fe/hooks/use-settings';
import AnimatedNumber from './animated-number';
import type { EmojiReaction } from 'pl-api';
const COLORS = {
accent: 'accent',
success: 'success',
@ -40,14 +37,13 @@ interface IStatusActionButton extends React.ButtonHTMLAttributes<HTMLButtonEleme
active?: boolean;
color?: Color;
filled?: boolean;
emoji?: EmojiReaction;
text?: React.ReactNode;
theme?: 'default' | 'inverse';
onLongPress?: (event: React.MouseEvent | React.TouchEvent) => void;
}
const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButton>((props, ref): JSX.Element => {
const { icon, className, iconClassName, active, color, filled = false, count = 0, emoji, text, theme = 'default', onLongPress, ...filteredProps } = props;
const { icon, className, iconClassName, active, color, filled = false, count = 0, text, theme = 'default', onLongPress, ...filteredProps } = props;
const longPressBind = useLongPress((e) => {
if (!onLongPress || e.type !== 'touchstart') return;
@ -59,25 +55,17 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
});
const renderIcon = () => {
if (emoji) {
return (
<span className='flex size-6 items-center justify-center'>
<Emoji className='size-full p-0.5' emoji={emoji.name} src={emoji.url} />
</span>
);
} else {
return (
<Icon
src={icon}
className={clsx(
{
'fill-accent-300 text-accent-300 hover:fill-accent-300': active && filled && color === COLORS.accent,
},
iconClassName,
)}
/>
);
}
return (
<Icon
src={icon}
className={clsx(
{
'fill-accent-300 text-accent-300 hover:fill-accent-300': active && filled && color === COLORS.accent,
},
iconClassName,
)}
/>
);
};
const renderText = () => {
@ -104,10 +92,9 @@ const StatusActionButton = React.forwardRef<HTMLButtonElement, IStatusActionButt
{
'text-gray-600 hover:text-gray-800 dark:hover:text-white bg-transparent hover:bg-primary-100 dark:hover:bg-primary-800 black:hover:bg-gray-800': theme === 'default',
'text-white/80 hover:text-white bg-transparent dark:bg-transparent': theme === 'inverse',
'text-black dark:text-white': active && emoji,
'hover:text-gray-600 dark:hover:text-white': !filteredProps.disabled,
'text-accent-300 hover:text-accent-300 dark:hover:text-accent-300': active && !emoji && color === COLORS.accent,
'text-success-600 hover:text-success-600 dark:hover:text-success-600': active && !emoji && color === COLORS.success,
'text-accent-300 hover:text-accent-300 dark:hover:text-accent-300': active && color === COLORS.accent,
'text-success-600 dark:text-success-400 hover:text-success-600 dark:hover:text-success-400': active && color === COLORS.success,
'space-x-1': !text,
'space-x-2': text,
},