PLT-6127/PLT-6135/PLT-6137 Added EmojiPickerOverlay component to better position emoji picker (#6352)

* Cleaned up emoji picker CSS

* Fixed border of emoji picker when reacting to comments in the RHS

* PLT-6135 Made EmojiPicker automatically position itself above/below the [...] menu

* PLT-6135 Changed post textbox emoji picker to use a RootCloseWrapper

* PLT-6135 Changed comment textbox emoji picker to use a RootCloseWrapper

* PLT-6135 Changed RHS post components to use EmojiPickerOverlay

* Removed react-outside-event package

* Fixed merge conflict

* Fixed emoji picker position on posts in RHS

* Removed unused CSS classes

* Fixed not being able to react to posts with emoji picker

3 files changed, 50 insertions, 130 deletions

diff --git a/webapp/sass/components/_emoticons.scss b/webapp/sass/components/_emoticons.scss
index 210c8620b..24d53eef3 100644
--- a/webapp/sass/components/_emoticons.scss
+++ b/webapp/sass/components/_emoticons.scss
@@ -8,7 +8,6 @@
     top: 2px;
     vertical-align: middle;
     visibility: hidden;
-
 }
 
 .emoticon {
@@ -48,100 +47,6 @@
     vertical-align: middle;
 }
 
-.emoji-picker__popover {
-    padding: 0px;
-
-    .popover-content {
-        padding: 0px;
-    }
-}
-
-.emoji-picker-react-rhs-comment {
-    position: absolute;
-    width: 278px;
-    border: 1px solid;
-    min-height: 298px;
-    border-radius: 3px;
-    top: 21px;
-    right:59px;
-    z-index: 100;
-    .emoji-picker__search-container {
-        position: relative;
-
-        .emoji-picker__search-icon {
-            padding-left: 6px;
-            padding-top: 6px;
-            position: absolute;
-            font-size: 13px;
-        }
-
-
-    }
-}
-
-.emoji-picker-react {
-    position: absolute;
-    width: 278px;
-    border: 1px solid;
-    min-height: 298px;
-    border-radius: 3px;
-    top: 42px;
-    right:59px;
-    z-index: 100;
-    .emoji-picker__search-container {
-        position: relative;
-
-        .emoji-picker__search-icon {
-            padding-left: 6px;
-            padding-top: 6px;
-            position: absolute;
-            font-size: 13px;
-        }
-
-
-    }
-}
-
-
-.emoji-picker-bottom {
-    display: flex;
-    flex-direction: column;
-    @include user-select(none);
-    position: absolute;
-    z-index: 40;
-    right: 0%;
-    width: 278px;
-    border: 1px solid;
-    min-height: 298px;
-    border-radius: 3px;
-
-    .emoji-picker__search-container {
-        position: relative;
-
-        .emoji-picker__search-icon {
-            padding-left: 6px;
-            padding-top: 6px;
-            position: absolute;
-            font-size: 13px;
-        }
-
-
-    }
-}
-
-.emoji-picker__search {
-    border-width: 1px 0px 1px 0px;
-    border-style: solid;
-    padding: 2px 0 2px 25px;
-    width: 100%;
-    height: 25px;
-    font-size: 12px;
-
-    &:focus{
-        outline: none;
-    }
-}
-
 .emoji-picker {
     @include user-select(none);
     border-radius: 3px;
@@ -149,23 +54,9 @@
     display: flex;
     flex-direction: column;
     position: absolute;
-    right: 0;
-    top: -361px;
+    height: 362px;
     width: 278px;
     z-index: 8;
-
-    .emoji-picker__search-container {
-        position: relative;
-
-        .emoji-picker__search-icon {
-            padding-left: 6px;
-            padding-top: 6px;
-            position: absolute;
-            font-size: 13px;
-        }
-
-
-    }
 }
 
 .emoji-picker__categories {
@@ -187,6 +78,30 @@
     }
 }
 
+.emoji-picker__search-container {
+    position: relative;
+
+    .emoji-picker__search-icon {
+        padding-left: 6px;
+        padding-top: 6px;
+        position: absolute;
+        font-size: 13px;
+    }
+
+    .emoji-picker__search {
+        border-width: 1px 0px 1px 0px;
+        border-style: solid;
+        padding: 2px 0 2px 25px;
+        width: 100%;
+        height: 25px;
+        font-size: 12px;
+
+        &:focus{
+            outline: none;
+        }
+    }
+}
+
 .emoji-picker__items {
     max-height: 262px;
     overflow-x: hidden;
@@ -194,15 +109,12 @@
     padding: 0px 8px 8px 8px;
     position: relative;
 
-
-
     .emoji-picker__category-header {
         font-size: 12px;
         font-weight: bold;
         margin-bottom: 6px;
         margin-top: 3px;
         padding-top: 3px;
-        // padding-bottom: 10px;
     }
 
     .emoji-picker__preview_sprite {
@@ -238,25 +150,21 @@
         }
     }
 
-    .emoji-picker__item {
-        font-size: 18px;
-        margin: 3px;
-    }
-    .emoticon {
-        max-height: 21px;
-        max-width: 21px;
-        min-height: 0;
-        min-width: 0;
-        width: auto;
-        height: auto;
-        margin: 0 auto;
+    .emoji-picker__item-wrapper {
+        .emoji-picker__item {
+            font-size: 18px;
+            margin: 3px;
+            max-height: 21px;
+            max-width: 21px;
+            min-height: 0;
+            min-width: 0;
+            width: auto;
+            height: auto;
+            margin: 0 auto;
+        }
     }
 }
 
-.emojisprite-wrapper {
-    cursor: pointer;
-}
-
 .emoji-picker__preview {
     border-top: 1px solid;
     display: flex;
@@ -294,6 +202,7 @@
             font-weight: bold;
         }
     }
+
     .emoji-picker__preview-image-box {
         display: flex;
         align-items: center;
@@ -318,5 +227,4 @@
         max-height: 36px;
         max-width: 42px;
     }
-
 }
diff --git a/webapp/sass/layout/_post-right.scss b/webapp/sass/layout/_post-right.scss
index 531638ec7..85dd20f53 100644
--- a/webapp/sass/layout/_post-right.scss
+++ b/webapp/sass/layout/_post-right.scss
@@ -92,6 +92,12 @@
             margin-right: 10px;
             padding: 6px 0;
         }
+
+        .emoji-picker {
+            position: absolute;
+            top: -361px;
+            right: 0px;
+        }
     }
 }
 
diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss
index 85a4bb2cd..73253f4be 100644
--- a/webapp/sass/layout/_post.scss
+++ b/webapp/sass/layout/_post.scss
@@ -393,6 +393,12 @@
         }
     }
 
+    .emoji-picker {
+        position: absolute;
+        top: -361px;
+        right: 0px;
+    }
+
     .post-create.scroll {
         .btn-file {
             right: 10px;