From 1d7297d5d76cc6e61b52e314f726c22ee4da2334 Mon Sep 17 00:00:00 2001
From: Ginsu Eddy <ginsu.eddy@gmail.com>
Date: Thu, 6 Jul 2023 11:24:12 -0400
Subject: [PATCH] [native] fix emoji keyboard theme colors

Summary:
Small follow up diff to address comments in D8310.

In this diff I removed all the instances of the panel color family and the emoji keyboard specific colors and committed to using the modal color family. Please note I tried really hard to reuse existing color variables and to not introduce any new variables for this; however, this did lead me to using some variables that didn't "fit" the proper description even though it was the best fitting color. I will highlight this using inline comments and offer an alternate solution if we think the current variable name is not fitting well.

Test Plan:
Please see the screenshots below to confirm that the color themes for both dark and light mode okay. Also had @ted take a look irl

{F623989}

{F623988}

Reviewers: atul, kamil, ashoat

Reviewed By: kamil

Subscribers: ashoat, tomek, ted

Differential Revision: https://phab.comm.dev/D8433
---
 native/components/emoji-keyboard.react.js | 36 +++++++++++------------
 native/themes/colors.js                   | 12 ++++----
 2 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/native/components/emoji-keyboard.react.js b/native/components/emoji-keyboard.react.js
index d1466260b4..b9609e183a 100644
--- a/native/components/emoji-keyboard.react.js
+++ b/native/components/emoji-keyboard.react.js
@@ -92,35 +92,35 @@ function EmojiKeyboard(props: Props): React.Node {
 
   const theme = React.useMemo(
     () => ({
-      knob: colors.emojiKeyboardKnob,
+      knob: colors.modalKnob,
       container: colors.modalForeground,
       header: colors.modalBackgroundLabel,
       category: {
-        icon: colors.emojiKeyboardCategoryIcon,
-        iconActive: colors.panelForegroundLabel,
-        container: colors.panelInputBackground,
-        containerActive: colors.emojiKeyboardContainerActive,
+        icon: colors.modalButtonLabel,
+        iconActive: colors.modalButtonLabel,
+        container: colors.modalInputBackground,
+        containerActive: colors.modalInputForeground,
       },
       search: {
-        text: colors.panelForegroundLabel,
-        placeholder: colors.panelInputSecondaryForeground,
-        icon: colors.panelInputSecondaryForeground,
-        background: colors.panelInputBackground,
+        text: colors.modalForegroundLabel,
+        placeholder: colors.modalForegroundSecondaryLabel,
+        icon: colors.modalForegroundSecondaryLabel,
+        background: colors.modalInputBackground,
       },
       emoji: {
-        selected: colors.panelSecondaryForegroundBorder,
+        selected: colors.modalButton,
       },
     }),
     [
-      colors.emojiKeyboardCategoryIcon,
-      colors.emojiKeyboardKnob,
-      colors.emojiKeyboardContainerActive,
-      colors.modalBackgroundLabel,
+      colors.modalKnob,
       colors.modalForeground,
-      colors.panelForegroundLabel,
-      colors.panelInputBackground,
-      colors.panelInputSecondaryForeground,
-      colors.panelSecondaryForegroundBorder,
+      colors.modalBackgroundLabel,
+      colors.modalButtonLabel,
+      colors.modalInputBackground,
+      colors.modalInputForeground,
+      colors.modalForegroundLabel,
+      colors.modalForegroundSecondaryLabel,
+      colors.modalButton,
     ],
   );
 
diff --git a/native/themes/colors.js b/native/themes/colors.js
index d5f951d434..24dee89628 100644
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -95,6 +95,9 @@ const light = Object.freeze({
   modalIosHighlightUnderlay: '#CCCCCCDD',
   modalSubtext: designSystemColors.shadesWhite60,
   modalSubtextLabel: designSystemColors.shadesBlack70,
+  modalInputBackground: designSystemColors.shadesWhite60,
+  modalInputForeground: designSystemColors.shadesWhite90,
+  modalKnob: designSystemColors.shadesWhite90,
   navigationCard: designSystemColors.shadesWhite100,
   navigationChevron: designSystemColors.shadesWhite60,
   panelBackground: designSystemColors.shadesWhite90,
@@ -141,9 +144,6 @@ const light = Object.freeze({
   secondaryButtonBorder: designSystemColors.shadesWhite100,
   inviteLinkLinkColor: designSystemColors.shadesBlack100,
   inviteLinkButtonBackground: designSystemColors.shadesWhite60,
-  emojiKeyboardKnob: designSystemColors.shadesWhite90,
-  emojiKeyboardCategoryIcon: designSystemColors.shadesBlack70,
-  emojiKeyboardContainerActive: designSystemColors.shadesWhite90,
 });
 export type Colors = $Exact<typeof light>;
 
@@ -192,6 +192,9 @@ const dark: Colors = Object.freeze({
   modalIosHighlightUnderlay: '#AAAAAA88',
   modalSubtext: designSystemColors.shadesBlack80,
   modalSubtextLabel: '#AAAAAA',
+  modalInputBackground: designSystemColors.shadesBlack80,
+  modalInputForeground: designSystemColors.shadesBlack60,
+  modalKnob: designSystemColors.shadesWhite90,
   navigationCard: '#2A2A2A',
   navigationChevron: designSystemColors.shadesBlack70,
   panelBackground: designSystemColors.shadesBlack100,
@@ -241,9 +244,6 @@ const dark: Colors = Object.freeze({
   secondaryButtonBorder: designSystemColors.shadesWhite100,
   inviteLinkLinkColor: designSystemColors.shadesWhite80,
   inviteLinkButtonBackground: designSystemColors.shadesBlack80,
-  emojiKeyboardKnob: designSystemColors.shadesWhite100,
-  emojiKeyboardCategoryIcon: designSystemColors.shadesWhite70,
-  emojiKeyboardContainerActive: designSystemColors.shadesBlack60,
 });
 const colors = { light, dark };