Style messages sent by admin differently

src/assets/css/chat.scss

@@ -1,5 +1,8 @@
 @import "@/assets/css/main.scss";
 
+$admin-bg: black;
+$admin-fg: white;
+
 .chat-root {
     position: absolute;
     left: 0px;
@@ -151,6 +154,9 @@
         position: relative;
         max-width: 70%;
     }
+    &.from-admin .bubble {
+        background-color: $admin-bg;
+    }
     .audio-bubble {
         overflow: scroll;
         display: inline-block;
@@ -264,6 +270,9 @@
         font-size: 0.8rem;
         color: #888888;
     }
+    .from-admin & {
+        color: $admin-fg;
+    }
 }
 
 .original-message {
@@ -332,15 +341,16 @@
 .quick-reaction-container {
     position: absolute;
     background-color: #000000;
-    border: 3px solid white;
+    border: 2px solid white;
-    border-radius: 15px;
+    border-radius: 13px;
-    height: 30px;
+    height: 26px;
     width: fit-content;
     right: 10px;
-    top: -12px;
+    top: -15px;
+    padding: 0px 6px;
     .quick-reaction {
-        margin: 0px 6px;
+        margin: 0px 0px;
-        padding: 2px;
+        padding: 1px;
         font-size: 10px;
         &:hover {
             border: 1px solid #888888;

src/components/messages/MessageIncomingAudio.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="messageIn">
+  <div :class="messageClasses">
     <v-avatar class="avatar" size="32" color="#ededed">
       <img v-if="messageEventAvatar(event)" :src="messageEventAvatar(event)" />
       <span v-else class="white--text headline">{{

src/components/messages/MessageIncomingImage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="messageIn">
+  <div :class="messageClasses">
     <v-avatar class="avatar" size="32" color="#ededed">
       <img v-if="messageEventAvatar(event)" :src="messageEventAvatar(event)" />
       <span v-else class="white--text headline">{{

src/components/messages/MessageIncomingText.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="messageIn">
+  <div :class="messageClasses">
     <v-avatar class="avatar" size="32" color="#ededed">
       <img v-if="messageEventAvatar(event)" :src="messageEventAvatar(event)" />
       <span v-else class="white--text headline">{{

src/components/messages/messageMixin.js

@@ -111,6 +111,14 @@ export default {
         return lines.join('\n');
       }
       return this.event.getContent().body;
+    },
+
+    /**
+     * Classes to set for the message. Currently only for "messageIn", TODO: - detect messageIn or messageOut.
+     */
+  
+    messageClasses() {
+      return {'messageIn':true,'from-admin':this.senderIsAdminOrModerator(this.event)}
     }
   },
   methods: {
@@ -154,6 +162,19 @@ export default {
       return null;
     },
 
+    /**
+     * Return true if the event sender has a powel level > 0, e.g. is moderator or admin of some sort.
+     */
+    senderIsAdminOrModerator(event) {
+      if (this.room) {
+        const member = this.room.getMember(event.getSender());
+        if (member) {
+          return member.powerLevel > 0;
+        }
+      }
+      return false;
+    },
+
     formatTime(time) {
       const date = new Date();
       date.setTime(time);