Update Emoji Picker

src/components/@shared/Orbis/FloatingChat/ChatToolbar.module.css

@@ -49,14 +49,12 @@
   position: relative;
 }
 
-.inputWrap .button {
-  position: absolute;
-  right: calc(var(--spacer) / 42);
-  top: 50%;
-  transform: translateY(-50%);
+.inputWrap input {
+  transition: none;
+  padding-right: calc(var(--spacer) * 1.3);
 }
 
-.pickerBox {
+.emojiPicker {
   position: absolute;
   bottom: calc(var(--spacer) * 1.7);
   left: calc(var(--spacer) / 2);

src/components/@shared/Orbis/FloatingChat/ChatToolbar.tsx

@@ -1,40 +1,23 @@
-import React, { useEffect, useState } from 'react'
+import React, { useState } from 'react'
 import styles from './ChatToolbar.module.css'
 import SendIcon from '@images/send.svg'
-import EmojiIcon from '@images/emoji.svg'
 import Input from '@shared/FormInput'
 import { useOrbis } from '@context/Orbis'
-// import dynamic from 'next/dynamic'
-import Picker, { EmojiClickData, EmojiStyle, Theme } from 'emoji-picker-react'
+import EmojiPicker from './EmojiPicker'
+import { EmojiClickData } from 'emoji-picker-react'
 
 export default function ChatToolbar({
   callbackMessage
 }: {
   callbackMessage: (post: OrbisPostInterface) => void
 }) {
-  const { orbis, conversationId, account, convOpen } = useOrbis()
+  const { orbis, conversationId, account } = useOrbis()
   const [content, setContent] = useState<string>('')
-  const [showPicker, setShowPicker] = useState(false)
-
-  // const Picker = dynamic(
-  //   () => {
-  //     return import('emoji-picker-react')
-  //   },
-  //   { ssr: false }
-  // )
 
   const onEmojiClick = (emojiData: EmojiClickData) => {
     setContent((prevInput) => prevInput + emojiData.emoji)
-    setShowPicker(false)
   }
 
-  useEffect(() => {
-    console.log(convOpen)
-    if (!convOpen) {
-      setShowPicker(false)
-    }
-  }, [convOpen])
-
   const sendMessage = async () => {
     const _callbackMessage: OrbisPostInterface = {
       creator: account.did,
@@ -72,33 +55,14 @@ export default function ChatToolbar({
             size="small"
             placeholder="Type Message"
             value={content}
-            onInput={(e) => setContent(e.target.value)}
+            onChange={(e: any) => setContent(e.target.value)}
           />
-          <button
-            className={styles.button}
-            type="button"
-            onClick={() => setShowPicker((val) => !val)}
-          >
-            <EmojiIcon className={styles.buttonIcon} />
-          </button>
+          <EmojiPicker onEmojiClick={onEmojiClick} />
         </div>
         <button className={styles.button} onClick={sendMessage}>
           <SendIcon className={styles.buttonIcon} />
         </button>
       </div>
-      <div className={styles.pickerBox}>
-        {showPicker && (
-          <Picker
-            onEmojiClick={onEmojiClick}
-            theme={Theme.DARK}
-            emojiStyle={EmojiStyle.APPLE}
-            autoFocusSearch={false}
-            lazyLoadEmojis={true}
-            width={324}
-            height={400}
-          />
-        )}
-      </div>
     </div>
   )
 }

src/components/@shared/Orbis/FloatingChat/Conversation.module.css

@@ -84,27 +84,6 @@
   border-top-left-radius: 0;
 }
 
-/* .conversationItem .colBubble .chatBubbleItem .chatBubble {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0px;
-} */
-
-/* .conversationItem .colBubble .chatBubbleItem:first-of-type .chatBubble {
-  border-top-left-radius: 1rem;
-  border-bottom-left-radius: 0px;
-}
-
-.conversationSend .colBubble .chatBubbleItem .chatBubble {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0px;
-  text-align: left;
-}
-
-.conversationSend .colBubble .chatBubbleItem:first-of-type .chatBubble {
-  border-top-right-radius: 1rem;
-  border-bottom-left-radius: 0px;
-} */
-
 .chatStamp {
   font-size: var(--font-size-small);
   color: var(--color-secondary);

src/components/@shared/Orbis/FloatingChat/ConversationItem.module.css

@@ -1,5 +1,6 @@
 .conversationItem {
   display: flex;
+  align-items: center;
   padding: calc(var(--spacer) / 2) var(--spacer);
   border-bottom: 1px solid var(--border-color);
   cursor: pointer;

src/components/@shared/Orbis/FloatingChat/EmojiPicker.module.css

@@ -0,0 +1,20 @@
+.emojiToolTip {
+  position: absolute;
+  padding: calc(var(--spacer) / 4.5) calc(var(--spacer) / 3);
+  cursor: pointer;
+  white-space: nowrap;
+  top: 0;
+  right: 0;
+  width: auto !important;
+}
+.icon {
+  position: relative;
+  font-size: var(--font-size-title);
+  color: var(--font-color-text);
+  fill: currentColor;
+}
+.icon:hover,
+.icon:focus {
+  color: var(--color-primary);
+  fill: currentColor;
+}

src/components/@shared/Orbis/FloatingChat/EmojiPicker.tsx

@@ -0,0 +1,36 @@
+import React from 'react'
+import EmojiIcon from '@images/emoji.svg'
+import Picker, { EmojiStyle, Theme } from 'emoji-picker-react'
+import styles from './EmojiPicker.module.css'
+import useDarkMode from '@oceanprotocol/use-dark-mode'
+import { useMarketMetadata } from '@context/MarketMetadata'
+import Tooltip from '@shared/atoms/Tooltip'
+
+export default function EmojiPicker({ onEmojiClick }: { onEmojiClick: any }) {
+  const { appConfig } = useMarketMetadata()
+  const darkMode = useDarkMode(false, appConfig?.darkModeConfig)
+
+  return (
+    <Tooltip
+      content={
+        <Picker
+          onEmojiClick={onEmojiClick}
+          theme={darkMode.value ? Theme.DARK : Theme.LIGHT}
+          emojiStyle={EmojiStyle.NATIVE}
+          autoFocusSearch={false}
+          lazyLoadEmojis={true}
+          width={322}
+          height={399}
+        />
+      }
+      trigger="click focus"
+      zIndex={21}
+      placement={'top-end'}
+      className={styles.emojiToolTip}
+    >
+      <>
+        <EmojiIcon className={styles.icon} />
+      </>
+    </Tooltip>
+  )
+}

src/stylesGlobal/_emojipicker.css

@@ -0,0 +1,17 @@
+.EmojiPickerReact.epr-dark-theme {
+  --epr-bg-color: var(--background-content) !important;
+  --epr-category-label-bg-color: #141414e6 !important;
+}
+.EmojiPickerReact {
+  --epr-emoji-size: 24px !important;
+}
+
+.EmojiPickerReact .epr-search-container input.epr-search:focus {
+  background-color: var(--epr-search-input-bg-color-active);
+  border: 1px solid var(--border-color) !important;
+}
+
+.EmojiPickerReact .epr-category-nav > button.epr-cat-btn {
+  -webkit-filter: hue-rotate(110deg) saturate(2);
+  filter: hue-rotate(110deg) saturate(2);
+}

src/stylesGlobal/styles.css

@@ -158,6 +158,7 @@ table th {
 @import '_code.css';
 @import '_toast.css';
 @import '_web3modal.css';
+@import '_emojipicker.css';
 
 /* prevent background scrolling */
 .ReactModal__Body--open {