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 classNames from 'classnames';
import React from 'react'; import React from 'react';
import { Emoji } from 'soapbox/components/ui'; import { Emoji, HStack } from 'soapbox/components/ui';
interface IEmojiButton { interface IEmojiButton {
emoji: string, emoji: string,
@ -13,7 +13,7 @@ interface IEmojiButton {
const EmojiButton: React.FC<IEmojiButton> = ({ emoji, className, onClick, tabIndex }): JSX.Element => { const EmojiButton: React.FC<IEmojiButton> = ({ emoji, className, onClick, tabIndex }): JSX.Element => {
return ( return (
<button className={classNames(className)} onClick={onClick} tabIndex={tabIndex}> <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> </button>
); );
}; };
@ -36,10 +36,9 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({ emojis, onReact, visible = fa
}; };
return ( return (
<div <HStack
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', { space={2}
'opacity-100 pointer-events-auto z-[999]': visible || focused, className={classNames('bg-white dark:bg-slate-900 p-3 rounded-full shadow-md w-max')}
})}
> >
{emojis.map((emoji, i) => ( {emojis.map((emoji, i) => (
<EmojiButton <EmojiButton
@ -49,7 +48,7 @@ const EmojiSelector: React.FC<IEmojiSelector> = ({ emojis, onReact, visible = fa
tabIndex={(visible || focused) ? 0 : -1} 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 React from 'react';
import { joinPublicPath } from 'soapbox/utils/static'; import { joinPublicPath } from 'soapbox/utils/static';
@ -44,7 +43,7 @@ const Emoji: React.FC<IEmoji> = ({ className, emoji }): JSX.Element | null => {
return ( return (
<img <img
draggable='false' draggable='false'
className={classNames('emojione', className)} className={className}
alt={emoji} alt={emoji}
src={joinPublicPath(`packs/emoji/${filename}.svg`)} src={joinPublicPath(`packs/emoji/${filename}.svg`)}
/> />