added supporter badge

src/components/ProfilePictureTemplate.vue

@@ -24,7 +24,8 @@ export default {
   data() {
     return {
       crown: require("twemoji/2/svg/1f451.svg"),
-      flower: require("twemoji/2/svg/1f33a.svg")
+      flower: require("twemoji/2/svg/1f33a.svg"),
+      heart: require("twemoji/2/svg/2764.svg"),
     };
   },
   computed: {
@@ -39,6 +40,11 @@ export default {
           name: "cute",
           emotePath: this.flower
         };
+      if (this.$props.admin == 5)
+        return {
+          name: "supporter",
+          emotePath: this.heart
+        };
       return ""
     }
   }
@@ -77,9 +83,25 @@ export default {
   flex-shrink: 0;
   margin: auto;
   background: #ffd828 100%;
-
-
 }
+
+.supporter {
+  margin-right: 5px;
+  margin-left: 0;
+  flex-shrink: 0;
+  margin: auto;
+  background: #ff2828 100%;
+}
+
+.supporter .emote {
+  z-index: 999;
+  top: -3px;
+  left: -3px;
+}
+.supporter .emote:after {
+  z-index: 999;
+}
+
 .cute {
   margin-right: 5px;
   margin-left: 0;
@@ -87,6 +109,7 @@ export default {
   margin: auto;
   background: #ffb7ed;
 }
+
 .cute .emote {
   z-index: 999;
   top: -3px;

src/components/app/MessagePanel.vue

@@ -559,7 +559,7 @@ export default {
 }
 .message-logs,
 .message-logs .scroll {
-  transform: scale(1, -1);
+  transform: scale(1, -1) translate3d(0,0,0);
   margin-right: 5px;
 }
 

src/components/app/MessageTemplate.vue

@@ -1,14 +1,18 @@
 <template>
   <div class="container">
-    <div v-if="!type || type === 0" :class="{message: true,  ownMessage: user.uniqueID === $props.uniqueID, ownMessageLeft: user.uniqueID === $props.uniqueID && (apperance && apperance.own_message_right === true)} " >
+    <div
-      <profile-picture
+      v-if="!type || type === 0"
-        class="avatar"
+      :class="{message: true,  ownMessage: user.uniqueID === $props.uniqueID, ownMessageLeft: user.uniqueID === $props.uniqueID && (apperance && apperance.own_message_right === true)} "
-        :admin="$props.admin"
+    >
-        :url="userAvatar"
+      <div class="avatar">
-        size="50px"
+        <profile-picture
-        :hover="true"
+          :admin="$props.admin"
-        @click.native="openUserInformation"
+          :url="userAvatar"
-      />
+          size="50px"
+          :hover="true"
+          @click.native="openUserInformation"
+        />
+      </div>
       <div class="triangle">
         <div class="triangle-inner"></div>
       </div>
@@ -37,7 +41,10 @@
       </div>
       <div class="sending-status" v-html="statusMessage"></div>
     </div>
-    <div v-if="type && (type === 1 || type === 2)" :class="{'presence-message': true,  green: type === 1, red: type === 2}" >
+    <div
+      v-if="type && (type === 1 || type === 2)"
+      :class="{'presence-message': true,  green: type === 1, red: type === 2}"
+    >
       <span>
         <span class="username" @click="openUserInformation">{{this.$props.username}}</span>
         <span class="text" v-if="type === 1">has joined the server!</span>
@@ -135,7 +142,6 @@ export default {
 
 
 <style scoped>
-
 .presence-message {
   margin: 10px;
   padding: 10px;

src/store/modules/socketIOModule.js

@@ -76,6 +76,7 @@ const actions = {
     if (context.getters.channels[data.message.channelID]){
       context.dispatch('updateChannelLastMessage', data.message.channelID);
     }
+    console.log(data)
     if (context.getters.messages[data.message.channelID]) {
       context.dispatch('addMessage', {
         message: data.message,