From 494e6e4f7a382426973f15aeb16c54f31138b9ed Mon Sep 17 00:00:00 2001
From: PaulDremanovich <pauldremanovich@gmail.com>
Date: Wed, 6 Mar 2024 12:33:18 +0400
Subject: [PATCH 1/5] fix: windows, ubuntu: emojiPicker glitches when opening

---
 src/components/Chat/ChatEmojis.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/Chat/ChatEmojis.vue b/src/components/Chat/ChatEmojis.vue
index 0cb18e0c0..d4b49974a 100644
--- a/src/components/Chat/ChatEmojis.vue
+++ b/src/components/Chat/ChatEmojis.vue
@@ -1,6 +1,7 @@
 <template>
   <v-menu
     :model-value="open"
+    :eager="true"
     @update:model-value="toggleMenu"
     :close-on-content-click="false"
     transition="slide-y-reverse-transition"
@@ -9,7 +10,7 @@
       <v-icon class="chat-emojis__icon" icon="mdi-emoticon-outline" size="28" v-bind="props" />
     </template>
 
-    <emoji-picker @emoji:select="getEmoji"></emoji-picker>
+    <emoji-picker @emoji:select="getEmoji" :elevation="true"></emoji-picker>
   </v-menu>
 </template>
 <script>

From 8761a70a763c36933828b5cbc11e62ae2a4f4304 Mon Sep 17 00:00:00 2001
From: PaulDremanovich <pauldremanovich@gmail.com>
Date: Wed, 6 Mar 2024 16:04:02 +0400
Subject: [PATCH 2/5] fix: emojiPicker borders

---
 src/components/Chat/ChatEmojis.vue | 2 +-
 src/components/EmojiPicker.vue     | 9 +++++++++
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/src/components/Chat/ChatEmojis.vue b/src/components/Chat/ChatEmojis.vue
index d4b49974a..98d2e480e 100644
--- a/src/components/Chat/ChatEmojis.vue
+++ b/src/components/Chat/ChatEmojis.vue
@@ -10,7 +10,7 @@
       <v-icon class="chat-emojis__icon" icon="mdi-emoticon-outline" size="28" v-bind="props" />
     </template>
 
-    <emoji-picker @emoji:select="getEmoji" :elevation="true"></emoji-picker>
+    <emoji-picker @emoji:select="getEmoji"></emoji-picker>
   </v-menu>
 </template>
 <script>
diff --git a/src/components/EmojiPicker.vue b/src/components/EmojiPicker.vue
index 700290a83..1a713061f 100644
--- a/src/components/EmojiPicker.vue
+++ b/src/components/EmojiPicker.vue
@@ -1,6 +1,7 @@
 <template>
   <div
     :class="{
+      'is-dark': $vuetify.theme.current.dark,
       [classes.root]: true,
       'elevation-9': elevation
     }"
@@ -64,6 +65,11 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
+.emoji-picker.is-dark {
+  em-emoji-picker {
+    border-color: #3c3c3c;
+  }
+}
 .emoji-picker {
   border-radius: 8px;
 
@@ -71,6 +77,9 @@ export default defineComponent({
     width: 264px;
     height: 264px;
     border-radius: 8px;
+    border-color: #d7d7d7;
+    border-width: 1px;
+    border-style: solid;
 
     #root {
       border-top-left-radius: 0;

From f640010fa1e2f5f33d5b67eb2c0cfcd6e2a4ef21 Mon Sep 17 00:00:00 2001
From: PaulDremanovich <pauldremanovich@gmail.com>
Date: Thu, 7 Mar 2024 12:17:26 +0400
Subject: [PATCH 3/5] fix: emojiPicker border style

---
 src/assets/styles/settings/_colors.scss |  4 +++-
 src/components/EmojiPicker.vue          | 15 ++++++++-------
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/assets/styles/settings/_colors.scss b/src/assets/styles/settings/_colors.scss
index 9d0118dbc..ee1bde459 100644
--- a/src/assets/styles/settings/_colors.scss
+++ b/src/assets/styles/settings/_colors.scss
@@ -13,5 +13,7 @@ $adm-colors: (
   'secondary2-transparent': rgba(245, 245, 245, 0.3),
   'secondary2-slightly-transparent': rgba(245, 245, 245, 0.13),
   'grey': #9e9e9e,
-  'grey-transparent': rgba(255, 255, 255, 0.7)
+  'grey-transparent': rgba(255, 255, 255, 0.7),
+  'dark-theme-border': rgba(255, 255, 255, var(--v-border-opacity)),
+  'light-theme-border': rgba(0, 0, 0, var(--v-border-opacity))
 );
diff --git a/src/components/EmojiPicker.vue b/src/components/EmojiPicker.vue
index 1a713061f..75deabd45 100644
--- a/src/components/EmojiPicker.vue
+++ b/src/components/EmojiPicker.vue
@@ -1,7 +1,6 @@
 <template>
   <div
     :class="{
-      'is-dark': $vuetify.theme.current.dark,
       [classes.root]: true,
       'elevation-9': elevation
     }"
@@ -65,11 +64,8 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-.emoji-picker.is-dark {
-  em-emoji-picker {
-    border-color: #3c3c3c;
-  }
-}
+@import 'vuetify/settings';
+@import '../assets/styles/settings/_colors.scss';
 .emoji-picker {
   border-radius: 8px;
 
@@ -77,7 +73,7 @@ export default defineComponent({
     width: 264px;
     height: 264px;
     border-radius: 8px;
-    border-color: #d7d7d7;
+    border-color: map-get($adm-colors, 'light-theme-border');
     border-width: 1px;
     border-style: solid;
 
@@ -87,4 +83,9 @@ export default defineComponent({
     }
   }
 }
+.v-theme--dark {
+  em-emoji-picker {
+    border-color: map-get($adm-colors, 'dark-theme-border');
+  }
+}
 </style>

From ed84ae16876d6a7c4464fcb987a00730354b13d9 Mon Sep 17 00:00:00 2001
From: PaulDremanovich <pauldremanovich@gmail.com>
Date: Sat, 9 Mar 2024 13:50:19 +0400
Subject: [PATCH 4/5] =?UTF-8?q?fix:=20=D1=81hanged=20location=20of=20color?=
 =?UTF-8?q?=20constants=20for=20emojiPicker?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/settings/_colors.scss | 2 --
 src/components/EmojiPicker.vue          | 9 ++++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/assets/styles/settings/_colors.scss b/src/assets/styles/settings/_colors.scss
index ee1bde459..d1883ee9f 100644
--- a/src/assets/styles/settings/_colors.scss
+++ b/src/assets/styles/settings/_colors.scss
@@ -14,6 +14,4 @@ $adm-colors: (
   'secondary2-slightly-transparent': rgba(245, 245, 245, 0.13),
   'grey': #9e9e9e,
   'grey-transparent': rgba(255, 255, 255, 0.7),
-  'dark-theme-border': rgba(255, 255, 255, var(--v-border-opacity)),
-  'light-theme-border': rgba(0, 0, 0, var(--v-border-opacity))
 );
diff --git a/src/components/EmojiPicker.vue b/src/components/EmojiPicker.vue
index 75deabd45..fc4ab2842 100644
--- a/src/components/EmojiPicker.vue
+++ b/src/components/EmojiPicker.vue
@@ -65,7 +65,10 @@ export default defineComponent({
 
 <style lang="scss">
 @import 'vuetify/settings';
-@import '../assets/styles/settings/_colors.scss';
+
+$dark-theme-border-color: rgba(map-get($shades, 'white'), var(--v-border-opacity));
+$light-theme-border-color: rgba(map-get($shades, 'black'), var(--v-border-opacity));
+
 .emoji-picker {
   border-radius: 8px;
 
@@ -73,7 +76,7 @@ export default defineComponent({
     width: 264px;
     height: 264px;
     border-radius: 8px;
-    border-color: map-get($adm-colors, 'light-theme-border');
+    border-color: $light-theme-border-color;
     border-width: 1px;
     border-style: solid;
 
@@ -85,7 +88,7 @@ export default defineComponent({
 }
 .v-theme--dark {
   em-emoji-picker {
-    border-color: map-get($adm-colors, 'dark-theme-border');
+    border-color: $dark-theme-border-color;
   }
 }
 </style>

From 57db3c9d9da5daeae903a61bbe642bff6d1161ad Mon Sep 17 00:00:00 2001
From: PaulDremanovich <pauldremanovich@gmail.com>
Date: Tue, 12 Mar 2024 12:21:22 +0400
Subject: [PATCH 5/5] fix: simplified styles on emojiPicker

---
 src/components/EmojiPicker.vue | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/EmojiPicker.vue b/src/components/EmojiPicker.vue
index fc4ab2842..41fbbc351 100644
--- a/src/components/EmojiPicker.vue
+++ b/src/components/EmojiPicker.vue
@@ -66,9 +66,6 @@ export default defineComponent({
 <style lang="scss">
 @import 'vuetify/settings';
 
-$dark-theme-border-color: rgba(map-get($shades, 'white'), var(--v-border-opacity));
-$light-theme-border-color: rgba(map-get($shades, 'black'), var(--v-border-opacity));
-
 .emoji-picker {
   border-radius: 8px;
 
@@ -76,7 +73,6 @@ $light-theme-border-color: rgba(map-get($shades, 'black'), var(--v-border-opacit
     width: 264px;
     height: 264px;
     border-radius: 8px;
-    border-color: $light-theme-border-color;
     border-width: 1px;
     border-style: solid;
 
@@ -86,9 +82,14 @@ $light-theme-border-color: rgba(map-get($shades, 'black'), var(--v-border-opacit
     }
   }
 }
+.v-theme--light {
+  em-emoji-picker {
+    border-color: rgba(map-get($shades, 'black'), var(--v-border-opacity));
+  }
+}
 .v-theme--dark {
   em-emoji-picker {
-    border-color: $dark-theme-border-color;
+    border-color: rgba(map-get($shades, 'white'), var(--v-border-opacity));
   }
 }
 </style>