From 69de2aad552a02a003d00deeef5f1895aa0091cb Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Fri, 1 Apr 2022 11:42:07 -0500
Subject: [PATCH] Restyle emoji components

---
 .../components/ui/emoji-selector/emoji-selector.tsx | 13 ++++++-------
 app/soapbox/components/ui/emoji/emoji.tsx           |  3 +--
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
index 15fbe595a..d4006562e 100644
--- a/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
+++ b/app/soapbox/components/ui/emoji-selector/emoji-selector.tsx
@@ -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>
   );
 };
 
diff --git a/app/soapbox/components/ui/emoji/emoji.tsx b/app/soapbox/components/ui/emoji/emoji.tsx
index d06b44d15..9bbaa0dec 100644
--- a/app/soapbox/components/ui/emoji/emoji.tsx
+++ b/app/soapbox/components/ui/emoji/emoji.tsx
@@ -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`)}
     />