Page MenuHomePhabricator
Files F2904180

D8310.diff
No OneTemporary
Actions

D8310.diff
View Options

diff --git a/native/components/emoji-keyboard.react.js b/native/components/emoji-keyboard.react.js
--- a/native/components/emoji-keyboard.react.js
+++ b/native/components/emoji-keyboard.react.js
@@ -8,6 +8,8 @@
import EmojiPicker, { useRecentPicksPersistence } from 'rn-emoji-keyboard';
import emojisData from 'rn-emoji-keyboard/src/assets/emojis.json';
+import { useColors } from '../themes/colors.js';
+
const STORAGE_KEY = 'EMOJI_KEYBOARD_RECENT';
const categoryOrder = [
@@ -90,6 +92,42 @@
useRecentPicksPersistence(useRecentPicksPersistenceArgs);
+ const colors = useColors();
+
+ const theme = React.useMemo(
+ () => ({
+ knob: colors.emojiKeyboardKnob,
+ container: colors.modalForeground,
+ header: colors.modalBackgroundLabel,
+ category: {
+ icon: colors.emojiKeyboardCategoryIcon,
+ iconActive: colors.panelForegroundLabel,
+ container: colors.panelInputBackground,
+ containerActive: colors.emojiKeyboardContainerActive,
+ },
+ search: {
+ text: colors.panelForegroundLabel,
+ placeholder: colors.panelInputSecondaryForeground,
+ icon: colors.panelInputSecondaryForeground,
+ background: colors.panelInputBackground,
+ },
+ emoji: {
+ selected: colors.panelSecondaryForegroundBorder,
+ },
+ }),
+ [
+ colors.emojiKeyboardCategoryIcon,
+ colors.emojiKeyboardKnob,
+ colors.emojiKeyboardContainerActive,
+ colors.modalBackgroundLabel,
+ colors.modalForeground,
+ colors.panelForegroundLabel,
+ colors.panelInputBackground,
+ colors.panelInputSecondaryForeground,
+ colors.panelSecondaryForegroundBorder,
+ ],
+ );
+
return (
<EmojiPicker
onEmojiSelected={handleOnEmojiSelected}
@@ -100,6 +138,7 @@
enableRecentlyUsed
categoryOrder={categoryOrder}
selectedEmojis={currentlySelected}
+ theme={theme}
styles={emojiKeyboardStyles}
/>
);
diff --git a/native/themes/colors.js b/native/themes/colors.js
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -141,6 +141,9 @@
secondaryButtonBorder: designSystemColors.shadesWhite100,
inviteLinkLinkColor: designSystemColors.shadesBlack100,
inviteLinkButtonBackground: designSystemColors.shadesWhite60,
+ emojiKeyboardKnob: designSystemColors.shadesWhite90,
+ emojiKeyboardCategoryIcon: designSystemColors.shadesBlack70,
+ emojiKeyboardContainerActive: designSystemColors.shadesWhite90,
});
export type Colors = $Exact<typeof light>;
@@ -238,6 +241,9 @@
secondaryButtonBorder: designSystemColors.shadesWhite100,
inviteLinkLinkColor: designSystemColors.shadesWhite80,
inviteLinkButtonBackground: designSystemColors.shadesBlack80,
+ emojiKeyboardKnob: designSystemColors.shadesWhite100,
+ emojiKeyboardCategoryIcon: designSystemColors.shadesWhite70,
+ emojiKeyboardContainerActive: designSystemColors.shadesBlack60,
});
const colors = { light, dark };

File Metadata

Mime Type
text/plain
Expires
Mon, Oct 7, 12:21 AM (22 h, 2 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2251737
Default Alt Text
D8310.diff (2 KB)

Event Timeline