Styling changes

Also, add "x is typing"

src/assets/css/chat.scss

@@ -140,7 +140,7 @@ $chat-text-size: 0.7pt;
     margin-left: 30% !important;
     text-align: right;
     .bubble {
-        background-color: #00eea0;
+        background-color: #88eec0;
         border-radius: 10px 10px 0 10px;
         padding: 8px;
     }
@@ -148,8 +148,23 @@ $chat-text-size: 0.7pt;
         padding: 0px;
         overflow: hidden;
     }
-    .message {
+    .sender {
-        color: white;
+        font-family: 'Titillium Web', sans-serif;
+        font-weight: 400;
+        font-style: normal;
+        font-size: 10 * $chat-text-size;
+        color: rgba(#000000, 0.6);
+        display: inline-block;
+        margin-left: 40px;
+        margin-right: 8px;
+    }
+    .time {
+        font-family: 'Titillium Web', sans-serif;
+        font-weight: 400;
+        font-style: normal;
+        font-size: 10 * $chat-text-size;
+        color: rgba(#000000, 0.6);
+        display: inline-block;
     }
 }
 
@@ -159,12 +174,16 @@ $chat-text-size: 0.7pt;
     text-align: left;
     position: relative;
     .bubble {
-        background-color: white;
+        background-color: #eeeeee;
-        border-radius: 10px 10px 10px 0;
+        border-radius: 0px 10px 10px 10px;
         padding: 8px;
         border-width: 1px !important;
         border-style: solid !important;
-        border-color: #cccccc !important;
+        border-color: #eeeeee !important;
+        margin-left: 40px;
+    }
+    .audio-bubble {
+        margin-left: 40px;
     }
     .bubble.image-bubble {
         padding: 0px;
@@ -177,8 +196,22 @@ $chat-text-size: 0.7pt;
         border: 2px solid white;
     }
     .sender {
-        position: relative;
+        font-family: 'Titillium Web', sans-serif;
-        left: 40px;
+        font-weight: 400;
+        font-style: normal;
+        font-size: 10 * $chat-text-size;
+        color: rgba(#000000, 0.6);
+        display: inline-block;
+        margin-left: 40px;
+        margin-right: 8px;
+    }
+    .time {
+        font-family: 'Titillium Web', sans-serif;
+        font-weight: 400;
+        font-style: normal;
+        font-size: 10 * $chat-text-size;
+        color: rgba(#000000, 0.6);
+        display: inline-block;
     }
 }
 
@@ -193,7 +226,7 @@ $chat-text-size: 0.7pt;
 .message {
     font-family: 'Titillium Web', sans-serif;
     font-weight: 400;
-    font-size: 22 * $chat-text-size;
+    font-size: 14 * $chat-text-size;
     color: #000000;
     overflow-wrap: break-word;
     .edit-marker {
@@ -207,8 +240,8 @@ $chat-text-size: 0.7pt;
     font-weight: 300;
     font-style: italic;
     font-size: 15 * $chat-text-size;
-    text-align: center;
     color: #1c242a;
+    display: inline-block;
 }
 
 .statusEvent {

src/assets/css/main.scss

@@ -1,3 +1,3 @@
-$background: #008860;
+$background: #ffffff;
 
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@700&display=swap');

src/components/Chat.vue

@@ -60,7 +60,7 @@
       <v-row class="ma-0 pa-0">
         <!-- CONTACT IS TYPING -->
         <div class="typing">
-          {{ contactIsTyping ? "Someone is typing..." : "" }}
+          {{ typingMembersString }}
         </div>
       </v-row>
       <v-row class="input-area-inner">
@@ -215,7 +215,7 @@ export default {
     return {
       events: [],
       currentInput: "",
-      contactIsTyping: false,
+      typingMembers: [],
       timelineWindow: null,
       scrollPosition: null,
       currentImageInput: null,
@@ -261,6 +261,16 @@ export default {
     sendButtonDisabled() {
       return this.currentInput.length == 0;
     },
+    typingMembersString() {
+      const count = this.typingMembers.length;
+      if (count > 1) {
+        return "" + count + " members are typing";
+      } else if (count > 0) {
+        return this.typingMembers[0].name + " is typing";
+      } else {
+        return "";
+      }
+    }
   },
 
   watch: {
@@ -271,7 +281,7 @@ export default {
         // Clear old events
         this.events = [];
         this.timelineWindow = null;
-        this.contactIsTyping = false;
+        this.typingMembers = [];
         
         if (!room) {
           return; // no room
@@ -437,11 +447,21 @@ export default {
       }
     },
 
-    onUserTyping(event) {
+    onUserTyping(event, member) {
-      if (event.getRoomId() !== this.roomId) {
+      if (member.roomId !== this.roomId) {
         return; // Not for this room
       }
-      console.log("Typing:", event);
+      if (member.typing) {
+        if (!this.typingMembers.includes(member)) {
+          this.typingMembers.push(member);
+        }
+      } else {
+        const index = this.typingMembers.indexOf(member);
+        if (index > -1) {
+          this.typingMembers.splice(index, 1);   
+        }
+      }
+      console.log("Typing: ", this.typingMembers);
     },
 
     sendMessage() {

src/components/ChatHeader.vue

@@ -4,7 +4,7 @@
       <v-col
         class="chat-header-members text-center flex-grow-0 flex-shrink-1 ma-0 pa-0"
       >
-        <v-avatar>
+        <v-avatar size="40">
           <v-img :src="room.avatar" />
         </v-avatar>
       </v-col>

src/components/messages/MessageIncomingAudio.vue

@@ -1,12 +1,10 @@
 <template>
-  <div>
   <div class="messageIn">
-      <div class="sender">{{ messageEventDisplayName(event) }}</div>
       <div class="audio-bubble">
         <audio controls :src="src">Audio file</audio>
         <QuickReactions :event="event" :reactions="reactions" />
       </div>
-      <v-avatar class="avatar" size="40" color="grey">
+      <v-avatar class="avatar" size="32" color="#ededed">
         <img
           v-if="messageEventAvatar(event)"
           :src="messageEventAvatar(event)"
@@ -15,7 +13,7 @@
           messageEventDisplayName(event).substring(0, 1).toUpperCase()
         }}</span>
       </v-avatar>
-    </div>
+      <div class="sender">{{ messageEventDisplayName(event) }}</div>
     <div class="time">
       {{ formatTime(event.event.origin_server_ts) }}
     </div>

src/components/messages/MessageIncomingImage.vue

@@ -1,7 +1,5 @@
 <template>
-  <div>
   <div class="messageIn">
-      <div class="sender">{{ messageEventDisplayName(event) }}</div>
       <div class="bubble image-bubble">
         <v-img :aspect-ratio="16 / 9" ref="image" :src="src" cover />
         <QuickReactions :event="event" :reactions="reactions" />
@@ -15,7 +13,7 @@
           messageEventDisplayName(event).substring(0, 1).toUpperCase()
         }}</span>
       </v-avatar>
-    </div>
+      <div class="sender">{{ messageEventDisplayName(event) }}</div>
     <div class="time">
       {{ formatTime(event.event.origin_server_ts) }}
     </div>

src/components/messages/MessageIncomingText.vue

@@ -1,8 +1,6 @@
 <template>
-  <div>
   <div class="messageIn">
-      <div class="sender">{{ messageEventDisplayName(event) }}</div>
+      <v-avatar class="avatar" size="32" color="#ededed">
-      <v-avatar class="avatar" size="40" color="grey">
         <img
           v-if="messageEventAvatar(event)"
           :src="messageEventAvatar(event)"
@@ -18,7 +16,7 @@
         </div>
         <QuickReactions :event="event" :reactions="reactions" />
       </div>
-    </div>
+      <div class="sender">{{ messageEventDisplayName(event) }}</div>
     <div class="time">
       {{ formatTime(event.event.origin_server_ts) }}
     </div>

src/components/messages/MessageOutgoingAudio.vue

@@ -1,16 +1,14 @@
 <template>
-  <div>
   <div class="messageOut">
-      <div class="sender">{{ "You" }}</div>
       <div class="audio-bubble">
         <audio controls :src="src">Audio file</audio>
         <QuickReactions :event="event" :reactions="reactions" />
       </div>
-      <div class="status">{{ event.status }}</div>
+      <!-- <div class="sender">{{ "You" }}</div> -->
-    </div>
     <div class="time">
       {{ formatTime(event.event.origin_server_ts) }}
     </div>
+      <div class="status">{{ event.status }}</div>
   </div>
 </template>
 

src/components/messages/MessageOutgoingImage.vue

@@ -1,15 +1,13 @@
 <template>
-  <div>
   <div class="messageOut">
-      <div class="sender">{{ "You" }}</div>
       <div class="bubble image-bubble">
         <v-img :aspect-ratio="16/9" ref="image" :src="src" cover />
         <QuickReactions :event="event" :reactions="reactions" />
       </div>
-      <div class="status">{{ event.status }}</div>
+      <!-- <div class="sender">{{ "You" }}</div> -->
-    </div>
     <div class="time">
       {{ formatTime(event.event.origin_server_ts) }}
+      <div class="status">{{ event.status }}</div>
     </div>
   </div>
 </template>

src/components/messages/MessageOutgoingText.vue

@@ -1,18 +1,16 @@
 <template>
-  <div>
   <div class="messageOut">
-      <div class="sender">{{ "You" }}</div>
       <div class="bubble">
         <div class="message">{{ event.getContent().body }}
           <span class="edit-marker" v-if="event.replacingEventId()">(edited)</span>
         </div>
         <QuickReactions :event="event" :reactions="reactions" />
       </div>
-      <div class="status">{{ event.status }}</div>
+      <!-- <div class="sender">{{ "You" }}</div> -->
-    </div>
     <div class="time">
       {{ formatTime(event.event.origin_server_ts) }}
     </div>
+      <div class="status">{{ event.status }}</div>
   </div>
 </template>