Merge branch 'styling-of-quick-reaction'

src/assets/css/chat.scss

@@ -483,6 +483,7 @@ $admin-fg: white;
 .avatar-operations-strut {
     position: relative;
     height: 0px;
+
     z-index: 1;
 }
 
@@ -490,7 +491,7 @@ $admin-fg: white;
     position: absolute;
     width: fit-content;
     background-color: white;
-    height: 40px;
+    height: 45px;
     border-radius: 20px;
     box-shadow: 4px 4px 8px #888888;
     // &.incoming {
@@ -953,7 +954,7 @@ $admin-fg: white;
     left: 20%;
     right: 20%;
     background-color: #888888;
-    height: 50px;
+    height: 40px;
     border-radius: 25px;
     color: white;
     text-align: center;
@@ -989,3 +990,7 @@ $admin-fg: white;
         text-decoration: none !important;
     }
 }
+
+.recent-emoji {
+    color: black;
+}

src/components/Chat.vue

@@ -355,7 +355,8 @@
       </v-dialog>
     </div>
 
-    <MessageOperationsBottomSheet ref="messageOperationsSheet">
+    <MessageOperationsBottomSheet ref="messageOperationsSheet"
+    style="background-color:#f776777;">
       <MessageOperationsPicker
         v-on:close="showEmojiPicker = false"
         v-if="selectedEvent"
@@ -369,7 +370,7 @@
       />
       <VEmojiPicker
         ref="emojiPicker"
-        style="width: 100%"
+        style="width: 100%;background-color:#ffffff;"
         @select="emojiSelected"
       />
     </MessageOperationsBottomSheet>
@@ -1663,6 +1664,9 @@ export default {
     updateRecentEmojis() {
       if (this.$refs.emojiPicker) {
         this.recentEmojis = this.$refs.emojiPicker.mapEmojis["Frequently"];
+        if (this.recentEmojis.length < 20){
+          this.recentEmojis.push(this.$refs.emojiPicker.mapEmojis["Peoples"]);
+        }
         return;
       }
       this.recentEmojis = [];

src/components/MessageOperationsBottomSheet.vue

@@ -10,7 +10,7 @@
           left: 0;
           bottom: 0;
           right: 0;
-          background-color: rgba(0, 0, 0, 0.3);
+          background-color: rgba(0, 0, 0, 0.15);
         "
       />
     </v-fade-transition>

src/components/messages/MessageOperations.vue

@@ -1,14 +1,14 @@
 <template>
   <div :class="{'message-operations':true,'incoming':incoming,'outgoing':!incoming}">
     <template v-for="(item,index) in emojis">
-      <v-btn v-if="index < maxRecents" :key="item.data" icon @click.stop="addQuickReaction(item.data)" class="ma-0 pa-0">
-        <span class="recent-emoji" >{{ item.data }}</span>
+      <v-btn v-if="index < maxRecents" :key="item.data" icon @click.stop="addQuickReaction(item.data)" class="ma-0 pa-0" dense>
+        <span class="recent-emoji">{{ item.data }}</span>
       </v-btn>
     </template>
-    <v-btn v-if="incoming" icon @click.stop="addReply" class="ma-0 pa-0">
+    <v-btn v-if="incoming" icon @click.stop="addReply" class="ma-0 pa-0" large>
       <v-icon>reply</v-icon>
     </v-btn>
-    <v-btn icon @click.stop="more" class="ma-0 pa-0">
+    <v-btn icon @click.stop="more" class="ma-0 pa-0" large>
       <v-icon>more_horiz</v-icon>
     </v-btn>  </div>
 </template>
@@ -46,9 +46,4 @@ export default {
 
 <style lang="scss">
 @import "@/assets/css/chat.scss";
-
-// .recent-emoji {
-//   width: 30px;
-// }
-
 </style>