new message count UI

Author: supalarry

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

@@ -2,9 +2,14 @@
   <!--  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="w-1/2 flex items-center justify-between ml-auto">
-      <div v-if="user" class="-ml-6 text-center">
-        <ChatUser v-bind:match="user"></ChatUser>
-        <h1 class="text-gray-matcha opacity-75 text-sm">{{user.first_name}}</h1>
+      <div v-if="user" class="-ml-6 text-center flex">
+        <div>
+          <ChatUser 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>
       <div class="md:hidden cursor-pointer text-lg lg:text-2xl w-10 h-10 flex items-center justify-center"
            v-on:click="closeChat()">
@@ -58,6 +63,7 @@ export default {
     user: null,
     message: '',
     loggedInUserId: null,
+    newMessageCount: null,
   }),
   methods: {
     closeChat() {