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