moon
/
soapbox
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Restyle emoji components

This commit is contained in:
Alex Gleason 2022-04-01 11:42:07 -05:00
parent f03fb5b73c
commit 69de2aad55
No known key found for this signature in database
GPG Key ID: 7211D1F99744FBB7
2 changed files with 7 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
View File

@ -1,7 +1,7 @@
import classNames from 'classnames';
import React from 'react';
import { Emoji } from 'soapbox/components/ui';
import { Emoji, HStack } from 'soapbox/components/ui';
interface IEmojiButton {
emoji: string,
@ -13,7 +13,7 @@ interface IEmojiButton {
const EmojiButton: React.FC<IEmojiButton> = ({ emoji, className, onClick, tabIndex }): JSX.Element => {
return (
<button className={classNames(className)} onClick={onClick} tabIndex={tabIndex}>
<Emoji className='w-8 h-8' emoji={emoji} />
<Emoji className='w-8 h-8 duration-100 hover:scale-125' emoji={emoji} />
</button>
);
};
@ -36,10 +36,9 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({ emojis, onReact, visible = fa
};
return (
<div
className={classNames('flex absolute bg-white dark:bg-slate-500 px-2 py-3 rounded-full shadow-md opacity-0 pointer-events-none duration-100 w-max', {
'opacity-100 pointer-events-auto z-[999]': visible || focused,
})}
<HStack
space={2}
className={classNames('bg-white dark:bg-slate-900 p-3 rounded-full shadow-md w-max')}
>
{emojis.map((emoji, i) => (
<EmojiButton
@ -49,7 +48,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({ emojis, onReact, visible = fa
tabIndex={(visible || focused) ? 0 : -1}
/>
))}
</div>
</HStack>
);
};

3
app/soapbox/components/ui/emoji/emoji.tsx
View File

@ -1,4 +1,3 @@
import classNames from 'classnames';
import React from 'react';
import { joinPublicPath } from 'soapbox/utils/static';
@ -44,7 +43,7 @@ const Emoji: React.FC<IEmoji> = ({ className, emoji }): JSX.Element | null => {
return (
<img
draggable='false'
className={classNames('emojione', className)}
className={className}
alt={emoji}
src={joinPublicPath(`packs/emoji/${filename}.svg`)}
/>