chore: Update the design for emoji picker (#4244)

Co-authored-by: Nithin David Thomas <1277421+nithindavid@users.noreply.github.com>
Co-authored-by: Pranav Raj S <pranav@chatwoot.com>

app/javascript/shared/components/emoji/EmojiInput.vue

@@ -5,21 +5,21 @@
         <li
           v-for="category in Object.keys(emojis)"
           :key="category"
-          :class="{ active: selectedKey === category }"
           @click="changeCategory(category)"
         >
           <button
             v-dompurify-html="emojis[category][0]"
             class="emoji--item"
+            :class="{ active: selectedKey === category }"
             @click="changeCategory(category)"
           />
         </li>
       </ul>
     </header>
+    <h5 class="emoji-category--title">
+      {{ selectedKey }}
+    </h5>
     <div class="emoji--row">
-      <h5 class="emoji-category--title">
-        {{ selectedKey }}
-      </h5>
       <button
         v-for="emoji in emojis[selectedKey]"
         :key="emoji"
@@ -64,16 +64,18 @@ export default {
 
 $space-smaller: 4px;
 $space-small: 8px;
-$space-one: 10px;
 $space-slab: 12px;
 $space-normal: 16px;
 $space-two: 20px;
 $space-medium: 24px;
 
+$font-size-tiny: 12px;
 $font-size-small: 14px;
 $font-size-default: 16px;
 $font-size-medium: 18px;
 
+$color-bg: #ebf0f5;
+
 .emoji-dialog {
   @include elegant-card;
   background: $color-white;
@@ -81,8 +83,8 @@ $font-size-medium: 18px;
   box-sizing: content-box;
   position: absolute;
   right: 0;
-  top: -22 * $space-one;
-  width: 32 * $space-one;
+  top: -220px;
+  width: 332px;
   z-index: 1;
 
   &::before {
@@ -97,35 +99,44 @@ $font-size-medium: 18px;
     background: transparent;
     border: 0;
     font-size: $font-size-medium;
+    height: $space-medium;
+    border-radius: $space-smaller;
     margin: 0;
-    padding: 0;
+    padding: 0 $space-smaller;
+
+    &:hover {
+      background: $color-bg;
+    }
   }
 
   .emoji--row {
+    display: flex;
     box-sizing: border-box;
-    height: $space-one * 18;
+    height: 200px;
     overflow-y: auto;
-    padding: $space-smaller $space-normal;
+    padding: $space-smaller;
+    flex-wrap: wrap;
 
     .emoji--item {
-      float: left;
       margin: $space-smaller;
       line-height: 1.5;
     }
   }
+}
 
-  .emoji-category--title {
-    color: $color-heading;
-    font-size: $font-size-small;
-    font-weight: 500;
-    line-height: 1.5;
-    margin: 0;
-    text-transform: capitalize;
-  }
+.emoji-category--title {
+  color: $color-heading;
+  font-size: $font-size-small;
+  font-weight: 500;
+  line-height: 1.5;
+  margin: 0;
+  padding: $space-smaller $space-small;
+  margin-top: $space-smaller;
+  text-transform: capitalize;
 }
 
 .emoji-dialog--header {
-  background-color: $color-body;
+  background-color: $color-bg;
   border-top-left-radius: $space-small;
   border-top-right-radius: $space-small;
   padding: 0 $space-smaller;
@@ -135,21 +146,25 @@ $font-size-medium: 18px;
     list-style: none;
     overflow: auto;
     margin: 0;
-    padding: $space-smaller 0 0;
+    padding: $space-smaller 0;
 
     > li {
       align-items: center;
       cursor: pointer;
       display: flex;
-      height: 2.4 * $space-one;
       justify-content: center;
-      padding: $space-smaller $space-small;
+      padding: $space-smaller;
     }
 
-    > .active {
+    li .active {
       background: $color-white;
-      border-top-left-radius: $space-smaller;
-      border-top-right-radius: $space-smaller;
+    }
+    .emoji--item {
+      font-size: $font-size-small;
+
+      &:hover {
+        background: $color-bg;
+      }
     }
   }
 }

app/javascript/widget/components/ChatInputWrap.vue

@@ -189,7 +189,8 @@ export default {
 }
 
 .emoji-dialog {
-  right: space-smaller;
+  right: $space-smaller;
+  top: -278px;
 
   &::before {
     right: $space-one;