From 0514de959b17818e9e9662c203c54de2cb885c1b Mon Sep 17 00:00:00 2001
From: Zakarya Tolba <zakarya.tolba@ynov.com>
Date: Tue, 31 May 2022 14:43:46 +0200
Subject: [PATCH] Added darkTheme argument to popup-emoji widget

When set as "true" dark theme will be enabled, dark theme is disabled by default
---
 .../TwemojiPicker/TwemojiPicker.vue           | 22 ++++++++++++++-----
 src/components/TwemojiPicker/props.ts         | 10 ++++++++-
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/components/TwemojiPicker/TwemojiPicker.vue b/src/components/TwemojiPicker/TwemojiPicker.vue
index be763029..5237e936 100644
--- a/src/components/TwemojiPicker/TwemojiPicker.vue
+++ b/src/components/TwemojiPicker/TwemojiPicker.vue
@@ -9,6 +9,7 @@
       :arrowEnabled="pickerArrowEnabled"
       :closeOnClickaway="pickerCloseOnClickaway"
       :extraPaddingOffset="pickerPaddingOffset"
+      :darkTheme="darkTheme"
       @popperOpenChanged="popperOpenChanged"
       ref="popupEmoji"
     >
@@ -16,9 +17,12 @@
         <div id="emoji-container">
           <div
             id="emoji-popup"
-            :style="{ width: calculatedPickerWidth + 'px' }"
+            :style="{
+              width: calculatedPickerWidth + 'px',
+              backgroundColor: pickerTheme,
+            }"
           >
-            <div id="emoji-popover-search" v-if="searchEmojisFeat">
+            <div id="emoji-popover-search" v-if="searchEmojisFeat" :style="{ backgroundColor: pickerTheme }">
               <div
                 id="search-header"
                 :class="{ 'is-focused': isSearchFocused }"
@@ -34,7 +38,7 @@
               </div>
             </div>
 
-            <div id="emoji-popover-header" class="scroll-min">
+            <div id="emoji-popover-header" class="scroll-min" :style="{ backgroundColor: pickerTheme }">
               <span
                 v-if="recentEmojisFeat && recentEmojis.length !== 0"
                 v-html="getEmojiImgFromUnicode('🕒')"
@@ -56,6 +60,7 @@
             <div
               class="emoji-popover-inner"
               :style="{
+                backgroundColor: pickerTheme,
                 width: calculatedPickerWidth + 'px',
                 height: pickerHeight + 'px',
               }"
@@ -201,7 +206,7 @@
     .emoji-popover-inner {
       overflow-y: auto;
       overflow-x: hidden;
-      background-color: #f7f7f7;
+      /**background-color: #f7f7f7; **/
 
       &::-webkit-scrollbar-track {
         border-radius: 10px;
@@ -244,7 +249,7 @@
     }
 
     #emoji-popover-search {
-      background-color: #f7f7f7;
+      /* background-color: #f7f7f7; */
       border-radius: 3px;
       margin: 5px 0;
 
@@ -408,6 +413,13 @@ export default Vue.extend({
   },
 
   computed: {
+    pickerTheme(): string {
+      if (this.darkTheme) {
+        return '#696761';
+      } else {
+        return '#f7f7f7';
+      }
+    },
     randomEmojiImg(): string {
       this.triggerShowEmoji();
       return EmojiService.getEmojiImgFromUnicode(
diff --git a/src/components/TwemojiPicker/props.ts b/src/components/TwemojiPicker/props.ts
index fb9a2c01..58ca8717 100644
--- a/src/components/TwemojiPicker/props.ts
+++ b/src/components/TwemojiPicker/props.ts
@@ -216,4 +216,12 @@ export default {
     default: false,
     type: Boolean
   },
-}
\ No newline at end of file
+  theme: {
+    default: '',
+    type: String,
+  },
+  darkTheme: {
+    default: false,
+    type: Boolean,
+  },
+}