show notifications front

front/src/views/room/Message.vue

@@ -98,15 +98,17 @@ const displayAddresses = (addressesId) => {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
-    background-color: blue;
-    padding: 3px;
+    background-color: var(--quaternary-background);
+    padding: 3px 10px;
     margin-bottom: 6px;
+    border-radius: 4px;
 }
 
 iframe {
     overflow-y: auto;
     max-height: 300px;
     width: 100%;
+    border: none;
     padding: 2px 10px;
     max-width: 750px; /* template width being 600px to 640px up to 750px (experiment and test) */
     background-color: rgb(234, 234, 234);

front/src/views/sidebar/rooms/Room.vue

@@ -34,9 +34,8 @@ const router = useRouter();
                 <div class="sender">{{ props.data.user }}</div>
                 <div class="object">{{ props.data.roomName }}</div>
             </div>
-            <Badge class="badge" v-if="props.data.unseen > 0"
-                ><template v-slot:body>{{ props.data.unseen }}</template>
-            </Badge>
+            {{ props.data.unseen }}
+            <Badge class="badge" v-if="props.data.notSeen > 0" :value="props.data.notSeen" type="badge-number" />
         </div>
         <ThreadList :threadIds="props.data.threadIds" />
     </div>

front/src/views/sidebar/rooms/threads/Thread.vue

@@ -18,6 +18,7 @@ const router = useRouter();
         class="room"
     >
         {{ room.roomName }}
+        <Badge class="badge" v-if="room.notSeen > 0" :value="room.notSeen" type="badge-number" />
     </div>
 </template>