1. Styling of quick reactions

package-lock.json

@@ -1,11 +1,11 @@
 {
   "name": "keanuapp-weblite",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
-      "version": "0.1.9",
+      "version": "0.1.10",
       "dependencies": {
         "aes-js": "^3.1.2",
         "axios": "^0.21.0",
@@ -1994,7 +1994,6 @@
         "thread-loader": "^2.1.3",
         "url-loader": "^2.2.0",
         "vue-loader": "^15.9.2",
-        "vue-loader-v16": "npm:vue-loader@^16.1.0",
         "vue-style-loader": "^4.1.2",
         "webpack": "^4.0.0",
         "webpack-bundle-analyzer": "^3.8.0",
@@ -2092,7 +2091,6 @@
         "merge-source-map": "^1.1.0",
         "postcss": "^7.0.14",
         "postcss-selector-parser": "^6.0.2",
-        "prettier": "^1.18.2",
         "source-map": "~0.6.1",
         "vue-template-es2015-compiler": "^1.9.0"
       },
@@ -3522,7 +3520,6 @@
       "dependencies": {
         "anymatch": "~3.1.1",
         "braces": "~3.0.2",
-        "fsevents": "~2.3.1",
         "glob-parent": "~5.1.0",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
@@ -8330,9 +8327,6 @@
       "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
       "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
       "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.1.6"
-      },
       "optionalDependencies": {
         "graceful-fs": "^4.1.6"
       }
@@ -14318,10 +14312,8 @@
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",
       "integrity": "sha512-9P3MWk6SrKjHsGkLT2KHXdQ/9SNkyoJbabxnKOoJepsvJjJG8uYTR3yTPxPQvNDI3w4Nz1xnE0TLHK4RIVe/MQ==",
       "dependencies": {
-        "chokidar": "^3.4.1",
         "graceful-fs": "^4.1.2",
-        "neo-async": "^2.5.0",
+        "neo-async": "^2.5.0"
-        "watchpack-chokidar2": "^2.0.1"
       },
       "optionalDependencies": {
         "chokidar": "^3.4.1",
@@ -14378,7 +14370,6 @@
         "anymatch": "^2.0.0",
         "async-each": "^1.0.1",
         "braces": "^2.3.2",
-        "fsevents": "^1.2.7",
         "glob-parent": "^3.1.0",
         "inherits": "^2.0.3",
         "is-binary-path": "^1.0.0",
@@ -14690,7 +14681,6 @@
         "anymatch": "^2.0.0",
         "async-each": "^1.0.1",
         "braces": "^2.3.2",
-        "fsevents": "^1.2.7",
         "glob-parent": "^3.1.0",
         "inherits": "^2.0.3",
         "is-binary-path": "^1.0.0",
@@ -17040,7 +17030,6 @@
       "integrity": "sha512-8q67ORQ9O0Ms0nlqsXTVhaBefRBaLrzPxOewAZhdcO7onHwcO5/wRdWtHhZgfpCZlhY7NogkU16z3WnorSSkEA==",
       "dev": true,
       "requires": {
-        "@babel/core": "^7.11.0",
         "@babel/helper-compilation-targets": "^7.9.6",
         "@babel/helper-module-imports": "^7.8.3",
         "@babel/plugin-proposal-class-properties": "^7.8.3",
@@ -17053,7 +17042,6 @@
         "@vue/babel-plugin-jsx": "^1.0.3",
         "@vue/babel-preset-jsx": "^1.2.4",
         "babel-plugin-dynamic-import-node": "^2.3.3",
-        "core-js": "^3.6.5",
         "core-js-compat": "^3.6.5",
         "semver": "^6.1.0"
       }

src/assets/css/chat.scss

@@ -438,6 +438,7 @@ $admin-fg: white;
 .avatar-operations-strut {
     position: relative;
     height: 0px;
+
     z-index: 1;
 }
 
@@ -445,7 +446,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 {
@@ -457,6 +458,7 @@ $admin-fg: white;
     // }
 }
 
+
 .avatar-operations {
     position: absolute;
     width: fit-content;
@@ -881,7 +883,7 @@ $admin-fg: white;
     left: 20%;
     right: 20%;
     background-color: #888888;
-    height: 50px;
+    height: 40px;
     border-radius: 25px;
     color: white;
     text-align: center;
@@ -898,3 +900,8 @@ $admin-fg: white;
         }
     }
 }
+
+.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>

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">
+      <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>