bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

pl-fe: emoji picker button theme

Browse source 
Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
This commit is contained in:
marcin mikołajczak 2024-09-12 12:50:28 +02:00
parent a88b8711e9
commit 143600fc23
2 changed files with 15 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
packages/pl-fe/src/components/status-action-bar.tsx
View file

@ -756,7 +756,10 @@ const StatusActionBar: React.FC<IStatusActionBar> = ({
)} )}
{me && expandable && (features.emojiReacts || features.emojiReactsMastodon) && ( {me && expandable && (features.emojiReacts || features.emojiReactsMastodon) && (
<EmojiPickerDropdown onPickEmoji={handlePickEmoji} /> <EmojiPickerDropdown
onPickEmoji={handlePickEmoji}
theme={statusActionButtonTheme}
/>
)} )}
{canShare && ( {canShare && (

15
packages/pl-fe/src/features/emoji/containers/emoji-picker-dropdown-container.tsx
View file

@ -1,4 +1,5 @@
import { useFloating, shift, flip } from '@floating-ui/react'; import { useFloating, shift, flip } from '@floating-ui/react';
import clsx from 'clsx';
import React, { KeyboardEvent, useState } from 'react'; import React, { KeyboardEvent, useState } from 'react';
import { defineMessages, useIntl } from 'react-intl'; import { defineMessages, useIntl } from 'react-intl';
@ -11,9 +12,12 @@ const messages = defineMessages({
emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' }, emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
}); });
const EmojiPickerDropdownContainer = ( interface IEmojiPickerDropdownContainer extends Pick<IEmojiPickerDropdown, 'onPickEmoji' | 'condensed' | 'withCustom'> {
{ children, ...props }: Pick<IEmojiPickerDropdown, 'onPickEmoji' | 'condensed' | 'withCustom'> & { children?: JSX.Element }, children?: JSX.Element;
) => { theme?: 'default' | 'inverse';
}
const EmojiPickerDropdownContainer: React.FC<IEmojiPickerDropdownContainer> = ({ theme = 'default', children, ...props }) => {
const intl = useIntl(); const intl = useIntl();
const title = intl.formatMessage(messages.emoji); const title = intl.formatMessage(messages.emoji);
const [visible, setVisible] = useState(false); const [visible, setVisible] = useState(false);
@ -50,7 +54,10 @@ const EmojiPickerDropdownContainer = (
}) })
) : ( ) : (
<IconButton <IconButton
className='emoji-picker-dropdown text-gray-600 hover:text-gray-700 dark:hover:text-gray-500' className={clsx('emoji-picker-dropdown', {
'text-gray-600 hover:text-gray-700 dark:hover:text-gray-500': theme === 'default',
'text-white/80 hover:text-white bg-transparent dark:bg-transparent': theme === 'inverse',
})}
ref={refs.setReference} ref={refs.setReference}
src={require('@tabler/icons/outline/mood-smile.svg')} src={require('@tabler/icons/outline/mood-smile.svg')}
title={title} title={title}