add purple circle chatbox on new message

Author: supalarry

frontend/src/components/app/matches/Chat.vue

@@ -2,14 +2,9 @@
   <!--  eslint-disable max-len -->
   <div class="chat md:w-full md:max-w-2xl md:shadow-md md:rounded-md md:p-4 md:flex md:flex-col md:justify-start">
     <div class="flex items-center justify-center">
-      <div v-if="user" class="text-center flex">
-        <div class="flex-row">
-          <ChatUser class="mx-auto" v-bind:match="user"></ChatUser>
-          <h1 class="text-gray-matcha opacity-75 text-sm">{{user.first_name}}</h1>
-        </div>
-        <div v-if="newMessageCount" class="ml-4 flex items-center justify-center">
-          <h1 class="text-purple-matcha text-sm font-bold">{{newMessageCount}}</h1>
-        </div>
+      <div v-if="user" class="text-center flex-row">
+        <ChatUser class="mx-auto" v-bind:match="user" v-bind:newmessage="newMessage"></ChatUser>
+        <h1 class="text-gray-matcha opacity-75 text-sm">{{user.first_name}}</h1>
       </div>
       <div class="md:hidden absolute right-0 cursor-pointer text-lg lg:text-2xl w-10 h-10 flex items-center justify-center"
            v-on:click="closeChat()">
@@ -63,7 +58,7 @@ export default {
     user: null,
     message: '',
     loggedInUserId: null,
-    newMessageCount: null,
+    newMessage: false,
     fetchMessagesIntervalId: null,
   }),
   methods: {
@@ -97,7 +92,10 @@ export default {
         for (let i = this.messages.length; i < newMessages.length; i += 1) {
           this.messages.push(newMessages[i]);
         }
-        this.scrollChatToBottom();
+        this.newMessage = true;
+        setTimeout(() => {
+          this.newMessage = false;
+        }, 2000);
       }
     },
   },

frontend/src/components/app/matches/ChatUser.vue

@@ -1,4 +1,5 @@
 <template>
+  <!-- eslint-disable max-len -->
   <div v-bind:style="{
       'background-repeat': 'no-repeat',
       'background-position': 'center center',
@@ -14,6 +15,8 @@
       'w-3': true,
       'h-3': true}">
     </div>
+    <div v-if="newmessage" class="bg-purple-matcha absolute right-0 bottom-0 w-4 h-4 rounded-full">
+    </div>
   </div>
 </template>
 
@@ -24,7 +27,7 @@ import imageWoman from '../../../assets/recommendations/avatars/woman1.png';
 import imageOther from '../../../assets/recommendations/avatars/other.png';
 
 export default {
-  props: ['match'],
+  props: ['match', 'newmessage'],
   methods: {
     getImage() {
       const { images } = this.match;