From 27a9ba62227d5507df4bace83a026e533fd1d112 Mon Sep 17 00:00:00 2001 From: prathameshkurunkar7 Date: Thu, 18 Jan 2024 22:46:31 +0530 Subject: [PATCH] fix: emoji picker search text not visible in dark mode[#614] --- raven-app/src/components/common/EmojiPicker/EmojiPicker.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/raven-app/src/components/common/EmojiPicker/EmojiPicker.tsx b/raven-app/src/components/common/EmojiPicker/EmojiPicker.tsx index 27adeabce..280963aff 100644 --- a/raven-app/src/components/common/EmojiPicker/EmojiPicker.tsx +++ b/raven-app/src/components/common/EmojiPicker/EmojiPicker.tsx @@ -1,13 +1,14 @@ import { createElement, useEffect, useRef } from "react" import 'emoji-picker-element' import './emojiPicker.styles.css' +import { useTheme } from "@/ThemeProvider" const EmojiPicker = ({ onSelect }: { onSelect: (emoji: string) => void }) => { const ref = useRef(null) + const { appearance } = useTheme() useEffect(() => { - const handler = (event: any) => { onSelect(event.detail.unicode) } @@ -15,7 +16,7 @@ const EmojiPicker = ({ onSelect }: { onSelect: (emoji: string) => void }) => { ref.current.skinToneEmoji = '👍' const style = document.createElement('style'); - style.textContent = `.picker { border-radius: var(--radius-4); box-shadow: var(--shadow-6); }` + style.textContent = `.picker { border-radius: var(--radius-4); box-shadow: var(--shadow-6); } input.search{ color: ${appearance === 'light' ? '#020617' : '#f1f5f9' } }` ref.current.shadowRoot.appendChild(style); return () => {