From e741765e221928a52114ded93cc70ac1795d3e08 Mon Sep 17 00:00:00 2001
From: Reinhart Previano Koentjoro <reinhart@reinhart1010.id>
Date: Sun, 3 Sep 2023 00:15:58 +0700
Subject: [PATCH] feat: Dynamic theming for emoji keyboard

---
 assets/l10n/intl_en.arb               |  5 +++++
 lib/pages/chat/chat_emoji_picker.dart | 23 +++++++++++++++++++++++
 2 files changed, 28 insertions(+)

diff --git a/assets/l10n/intl_en.arb b/assets/l10n/intl_en.arb
index dbe19d172..5269c493b 100644
--- a/assets/l10n/intl_en.arb
+++ b/assets/l10n/intl_en.arb
@@ -776,6 +776,11 @@
         "type": "text",
         "placeholders": {}
     },
+    "emoteKeyboardNoRecents": "Recently-used emotes will appear here...",
+    "@emoteKeyboardNoRecents": {
+        "type": "text",
+        "placeholders": {}
+    },
     "emotePacks": "Emote packs for room",
     "@emotePacks": {
         "type": "text",
diff --git a/lib/pages/chat/chat_emoji_picker.dart b/lib/pages/chat/chat_emoji_picker.dart
index 9a025c9c6..aaad97403 100644
--- a/lib/pages/chat/chat_emoji_picker.dart
+++ b/lib/pages/chat/chat_emoji_picker.dart
@@ -1,6 +1,7 @@
 import 'package:flutter/material.dart';
 
 import 'package:emoji_picker_flutter/emoji_picker_flutter.dart';
+import 'package:flutter_gen/gen_l10n/l10n.dart';
 
 import 'package:fluffychat/config/themes.dart';
 import 'chat.dart';
@@ -11,6 +12,7 @@ class ChatEmojiPicker extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
+    final ThemeData theme = Theme.of(context);
     return AnimatedContainer(
       duration: FluffyThemes.animationDuration,
       curve: FluffyThemes.animationCurve,
@@ -21,6 +23,27 @@ class ChatEmojiPicker extends StatelessWidget {
           ? EmojiPicker(
               onEmojiSelected: controller.onEmojiSelected,
               onBackspacePressed: controller.emojiPickerBackspace,
+              config: Config(
+                backspaceColor: theme.colorScheme.primary,
+                bgColor: Color.lerp(
+                  theme.colorScheme.background,
+                  theme.colorScheme.primaryContainer,
+                  0.25,
+                )!,
+                iconColor: theme.colorScheme.primary.withOpacity(0.5),
+                iconColorSelected: theme.colorScheme.primary,
+                indicatorColor: theme.colorScheme.primary,
+                noRecents: Text(
+                  L10n.of(context)!.emoteKeyboardNoRecents,
+                  style: theme.textTheme.bodyLarge,
+                ),
+                skinToneDialogBgColor: Color.lerp(
+                  theme.colorScheme.background,
+                  theme.colorScheme.primaryContainer,
+                  0.75,
+                )!,
+                skinToneIndicatorColor: theme.colorScheme.onBackground,
+              ),
             )
           : null,
     );