updated icon. added server member presence

public/index.html

@@ -12,8 +12,9 @@
   <link rel="icon" type="image/png" sizes="16x16" href="<%= BASE_URL %>favicon-16x16.png">
   <link rel="manifest" href="<%= BASE_URL %>site.webmanifest">
   <link rel="mask-icon" href="<%= BASE_URL %>safari-pinned-tab.svg" color="#5bbad5">
-  <meta name="msapplication-TileColor" content="#da532c">
-  <meta name="theme-color" content="#ffffff">
+  <meta name="msapplication-TileColor" content="#2d89ef">
+  <meta name="msapplication-config" content="<%= BASE_URL %>browserconfig.xml">
+  <meta name="theme-color" content="#3fa9f5">
 
 
 

public/safari-pinned-tab.svg

@@ -1,77 +1 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="500.000000pt" height="500.000000pt" viewBox="0 0 500.000000 500.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.11, written by Peter Selinger 2001-2013
-</metadata>
-<g transform="translate(0.000000,500.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M2269 4985 c-6 -6 -74 -16 -116 -17 -18 -1 -33 -4 -33 -7 0 -4 -15
--7 -32 -8 -71 -4 -104 -9 -118 -18 -8 -5 -21 -10 -30 -11 -65 -9 -131 -25
--162 -38 -9 -4 -21 -5 -26 -2 -6 3 -12 0 -15 -8 -3 -8 -32 -20 -64 -26 -31 -7
--73 -21 -93 -31 -19 -11 -38 -19 -43 -19 -13 0 -179 -82 -264 -131 -45 -26
--84 -44 -87 -41 -4 3 -6 0 -6 -6 0 -7 -5 -12 -10 -12 -6 0 -16 -5 -23 -10 -40
--34 -107 -80 -116 -80 -6 0 -11 -4 -11 -10 0 -5 -6 -10 -14 -10 -8 0 -16 -3
--18 -7 -1 -5 -28 -28 -58 -53 -30 -25 -75 -64 -100 -87 -25 -23 -57 -51 -73
--63 -15 -12 -25 -25 -22 -30 3 -5 -3 -11 -14 -15 -11 -3 -31 -21 -46 -40 -14
--20 -42 -50 -61 -69 -18 -18 -34 -36 -34 -40 0 -3 -8 -14 -17 -24 -35 -37 -62
--72 -113 -146 -28 -42 -56 -78 -61 -82 -5 -3 -7 -9 -5 -13 3 -4 -4 -17 -14
--29 -11 -12 -20 -23 -20 -26 0 -3 -13 -28 -30 -56 -16 -28 -30 -57 -30 -65 0
--8 -3 -15 -8 -15 -8 0 -42 -73 -42 -90 0 -6 -4 -10 -10 -10 -5 0 -10 -4 -10
--9 0 -5 -5 -22 -12 -38 -6 -15 -12 -30 -13 -33 -1 -3 -10 -23 -20 -45 -10 -22
--17 -44 -16 -49 1 -4 -4 -14 -10 -22 -6 -8 -8 -14 -4 -14 4 0 2 -7 -5 -15 -7
--8 -9 -15 -6 -15 4 0 1 -10 -6 -22 -7 -13 -13 -27 -14 -33 0 -5 -2 -13 -4 -17
--1 -5 -4 -12 -5 -18 -1 -5 -4 -11 -5 -12 -1 -2 -4 -12 -6 -23 -1 -11 -5 -31
--9 -45 -3 -14 -8 -36 -11 -50 -8 -35 -10 -43 -17 -60 -3 -8 -6 -22 -6 -30 -1
--8 -9 -69 -20 -135 -28 -181 -28 -506 -1 -696 12 -79 23 -153 25 -164 8 -44
-37 -161 43 -175 3 -8 7 -19 8 -25 2 -14 2 -13 28 -90 13 -38 22 -73 19 -77 -2
--5 0 -8 6 -8 8 0 26 -37 23 -50 -1 -3 5 -14 12 -25 7 -11 16 -32 20 -47 3 -16
-11 -28 16 -28 6 0 10 -6 10 -13 0 -18 81 -180 94 -189 6 -4 7 -8 3 -8 -4 0 -3
--6 2 -13 6 -6 39 -55 73 -107 83 -128 193 -264 298 -369 109 -110 190 -184
-190 -176 0 4 12 -7 26 -24 14 -17 30 -31 34 -31 5 0 24 -14 42 -30 18 -16 37
--30 43 -30 7 0 22 -11 35 -25 12 -13 27 -22 32 -19 4 3 11 -2 14 -10 3 -9 10
--14 14 -11 5 3 11 1 15 -4 7 -13 118 -76 128 -73 4 1 7 -2 7 -6 0 -4 35 -25
-78 -46 42 -21 89 -45 104 -52 15 -8 44 -21 65 -29 21 -7 63 -23 93 -34 30 -12
-63 -21 72 -21 10 0 18 -5 18 -12 0 -6 3 -8 6 -5 4 3 16 1 28 -5 11 -7 24 -11
-28 -10 4 1 23 -5 43 -14 20 -8 40 -12 45 -9 6 4 16 3 23 -2 6 -4 20 -8 30 -9
-9 -1 19 -3 22 -4 3 -1 10 -4 15 -5 6 -1 13 -4 18 -5 4 -1 12 -3 17 -5 6 -1 12
--3 15 -5 3 -1 19 -3 35 -5 17 -2 53 -6 80 -10 28 -3 66 -8 85 -10 19 -2 35 -4
-35 -6 0 -7 110 -12 255 -12 195 0 290 4 290 12 0 4 19 7 43 8 38 1 104 7 165
-16 13 2 27 8 30 13 4 5 18 10 32 12 52 6 66 8 100 20 19 6 47 13 61 14 15 2
-33 9 40 15 8 5 25 13 39 16 80 19 120 31 120 38 0 4 24 15 52 25 29 9 59 23
-66 31 7 7 22 13 32 13 10 0 21 4 24 9 3 4 19 11 36 15 18 3 29 10 25 16 -3 5
-3 10 14 10 11 0 22 4 25 9 3 5 18 12 33 16 15 3 32 14 39 23 7 9 17 18 23 18
-6 1 14 2 19 3 4 0 18 11 32 24 14 12 42 30 62 40 20 9 38 21 40 25 2 4 30 27
-63 51 60 45 86 66 132 109 13 12 27 22 32 22 4 0 20 14 34 30 15 17 31 30 35
-30 4 0 16 14 26 30 9 17 22 28 27 25 5 -4 9 -2 9 4 0 5 14 22 30 38 17 15 30
-33 30 39 0 7 16 24 35 38 19 15 35 33 35 41 0 7 9 16 20 20 11 3 19 10 17 14
--2 7 43 68 74 101 8 9 14 21 12 27 -2 6 5 14 16 18 12 3 21 15 21 25 0 11 6
-23 13 27 7 4 21 27 32 50 11 24 24 43 28 43 5 0 6 4 3 9 -3 5 0 11 8 14 8 3
-17 19 21 36 5 22 11 28 22 24 13 -5 14 -3 3 17 -7 12 -8 20 -2 16 9 -5 20 10
-27 37 2 4 4 10 5 15 1 4 2 10 1 14 0 5 4 8 10 8 5 0 8 4 5 8 -3 5 4 16 15 26
-12 9 18 24 15 31 -3 8 -1 17 5 20 5 4 7 11 4 16 -4 5 -1 9 5 9 7 0 10 7 6 15
--3 9 0 15 8 15 9 0 20 26 31 70 9 39 22 70 27 70 6 0 8 9 5 20 -3 11 -2 20 2
-20 8 0 41 144 41 178 0 12 4 22 9 22 11 0 21 47 28 130 3 36 9 67 13 70 9 6
-11 690 2 705 -4 5 -7 21 -8 35 -3 31 -12 104 -20 148 -4 17 -10 32 -15 32 -5
-0 -9 8 -9 18 0 29 -33 162 -41 162 -4 0 -5 9 -2 20 3 11 0 20 -6 20 -6 0 -11
-7 -11 15 0 24 -24 95 -32 95 -4 0 -5 7 -2 15 4 8 2 15 -3 15 -5 0 -14 20 -21
-45 -7 25 -17 45 -23 45 -5 0 -7 5 -4 10 3 6 1 10 -4 10 -6 0 -11 8 -11 18 0
-10 -3 22 -7 26 -5 4 -8 11 -8 14 -1 4 -8 21 -18 38 -9 17 -14 34 -11 37 3 3
--3 10 -14 16 -11 6 -23 22 -26 36 -4 14 -11 25 -16 25 -5 0 -7 7 -4 15 4 8 1
-15 -5 15 -7 0 -19 16 -27 35 -8 19 -18 35 -22 35 -5 0 -16 16 -25 35 -9 19
--22 35 -28 35 -6 0 -8 9 -4 21 5 14 3 19 -3 15 -11 -6 -38 32 -34 47 1 4 -4 7
--12 7 -17 0 -48 39 -40 51 2 4 -5 10 -16 14 -11 3 -23 17 -26 31 -3 13 -9 24
--13 24 -12 0 -101 89 -101 100 0 14 -71 80 -87 80 -7 0 -13 7 -13 15 0 8 -4
-15 -9 15 -5 0 -24 16 -42 35 -19 19 -38 35 -43 35 -5 0 -18 9 -30 20 -43 42
--89 80 -95 80 -3 0 -24 15 -46 34 -22 19 -42 33 -46 30 -4 -2 -18 7 -33 21
--15 13 -30 25 -34 26 -15 2 -62 34 -62 42 0 4 -4 5 -10 2 -5 -3 -10 -2 -10 3
-0 5 -18 15 -40 22 -21 7 -37 16 -35 20 3 4 -25 18 -62 30 -37 12 -72 28 -79
-34 -6 7 -31 18 -55 26 -24 8 -46 17 -49 20 -3 4 -32 14 -65 24 -33 10 -64 23
--70 30 -5 6 -19 12 -30 14 -26 3 -54 9 -82 16 -41 11 -68 17 -93 22 -13 3 -29
-9 -35 13 -11 9 -19 10 -87 14 -27 1 -48 5 -48 8 0 4 -15 7 -32 7 -18 0 -35 1
--38 2 -33 16 -520 25 -520 11 0 -7 -9 -7 -26 -1 -29 12 -29 11 -35 5z"/>
-</g>
-</svg>
+<svg version="1" xmlns="http://www.w3.org/2000/svg" width="637.333" height="637.333" viewBox="0 0 478.000000 478.000000"><path d="M227.8.5c-.2.1-4.3.5-9.2.9-17.9 1.3-37.7 5.3-55.7 11.4-6.4 2.2-13.1 4.7-15 5.5-1.9.9-6.5 2.9-10.3 4.6-39 17.4-78.4 52.6-102 91.4-14.1 23-26.5 54.3-30.2 75.7-.6 3.1-2.4 13.7-2.9 17-1.9 11-2.5 40.7-1.1 55 .8 7.8 4.4 29.9 5.1 31 .2.4.7 2.2 1 4.1 1.3 7.9 11.2 34.4 17.5 47.4 8.7 17.6 20.9 36.3 32.5 49.5 4.2 4.8 22.3 22.9 26.6 26.7 13.4 11.6 35.9 26.1 52.4 33.8 15.1 7.1 36.6 14.7 45.4 16.1 1.9.3 4.4.9 5.6 1.4 1.8.7 7.3 1.6 20.5 3.6 15.4 2.3 50.9 2.3 63 0 1.4-.3 5.2-.9 8.5-1.5s7.1-1.2 8.5-1.5c5.4-.9 19-4.7 28.5-7.9 66.9-22.9 120.8-75.2 146-141.9 3.8-10.2 8.4-26 10.1-34.8.2-1.4.7-3.6.9-5 5.3-26.1 5.2-62.5-.2-89-.8-4.1-1.7-8.5-1.9-9.6-1-5.3-5.8-20.8-9.1-29.4-12.9-33.9-29.8-59.7-55.7-85.5-26.1-26-56.5-44.7-91.6-56.5-8-2.7-15.6-5.1-17-5.4-1.4-.3-5.7-1.2-9.6-2-3.9-.9-8.8-1.8-11-2.1-2.1-.4-5-.8-6.4-1-8.9-1.3-42.2-2.9-43.2-2z"/></svg>

src/components/HeaderLoginTemplate.vue

@@ -1,8 +1,8 @@
 <template>
   <transition name="fade-in" appear >
     <div class="header">
-      <div :class="{animation: true, night: !isDay }" id="animation">
-        <div :class="{map: true, 'night-map': !isDay }"></div>
+      <div class="cat">
+        <div class="eyes"></div>
       </div>
       <div class="title">Nertivia</div>
     </div>
@@ -73,47 +73,46 @@ export default {
   z-index: 99999;
   flex-shrink: 0;
 }
-.animation {
+.cat {
   height: 200px;
   width: 200px;
-  background-color: #2cb4ff;
-  border-radius: 50%;
-  box-shadow: 0px 0px 96px -4px rgba(69, 212, 255, 1);
+  background-position: center;
+  background-size: 100%;
+  background-repeat: no-repeat;
+  background-image: url(./../assets/logo.svg);
   overflow: hidden;
-  transition: 10s;
+  position: relative;
   margin: auto;
   margin-bottom: 0;
 }
-.map {
-  height: 200px;
-  width: 200px;
-  background-position: -490px center;
-  background-size: 170%;
-  background-repeat: no-repeat;
-  background-image: url(./../assets/LogoAnimation/map.png);
-  animation: rotateGlobe;
-  animation-timing-function: linear;
-  animation-duration: 10s;
-  animation-fill-mode: forwards;
+.eyes {
+  position: absolute;
+  left: 110px;
+  top: 101px;
+  height: 0px;
+  width: 25px;
+  background: white;
+  animation: blink 5s;
   animation-iteration-count: infinite;
-  transition: 10s;
 }
-.night-map {
-  filter: grayscale(90%);
+@keyframes blink {
+  20%, 100% {
+    height: 0px;
+  }
+  0% {
+    height: 0 px;
+  }
+  10% {
+    height: 27px;
+  }
 }
 
+
 .night {
   background: rgb(0, 48, 73);
   box-shadow: 0px 0px 96px -4px rgb(0, 48, 73);
 }
-@keyframes rotateGlobe {
-  from {
-    background-position: -400px center;
-  }
-  to {
-    background-position: 190px center;
-  }
-}
+
 .header .title {
   color: white;
   font-size: 40px;

src/components/ProfilePictureTemplate.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="outer-profile-picture">
     <div
-      :class="`profile-picture ${adminType ? adminType.name : ''}`"
+      :class="`profile-picture ${admin && adminType ? adminType.name : ''}`"
       :style="`padding: ${$props.animationPadding || '3px'}`"
     >
       <img
@@ -12,15 +12,16 @@
       >
       <div
         :class="`inner-profile-picture ${$props.hover ? 'hoverable' : ''}`"
-        :style="`height: ${$props.size}; width: ${$props.size}; background-image: url(${$props.url})`"
+        :style="`${status || status === 0 ? 'border: solid 3px ' + statusColor.statusColor : ''}; height: ${$props.size}; width: ${$props.size}; background-image: url(${$props.url})`"
       ></div>
     </div>
   </div>
 </template>
 
 <script>
+import statuses from '@/utils/statuses';
 export default {
-  props: ["url", "size", "emoteSize", "admin", "hover", "animationPadding"],
+  props: ["url", "size", "emoteSize", "admin", "hover", "animationPadding", "status", "uniqueID"],
   data() {
     return {
       crown: require("twemoji/2/svg/1f451.svg"),
@@ -46,6 +47,15 @@ export default {
           emotePath: this.heart
         };
       return ""
+    },
+    statusColor() {
+      let status = this.status;
+      return {
+        statusName: statuses[parseInt(status)].name,
+        statusURL: statuses[parseInt(status)].url,
+        statusColor: statuses[parseInt(status)].color,
+        bgColor: statuses[parseInt(status)].bgColor
+      }
     }
   }
 };

src/components/app/ConnectingScreen.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="connecting-screen">
     <div class="center-box">
-      <div class="animation">
-        <div class="map"></div>
-        <div class="flash-message"></div>
+      <div class="cat-face">
+        <div class="eyes"></div>
+        <div class="animation"></div>
       </div>
       <div class="message">Connecting...</div>
     </div>
@@ -25,72 +25,54 @@
   margin: auto;
 }
 
-.animation{
+.cat-face{
   height: 300px;
   width: 300px;
-  background-color: #2CB4FF;
-  border-radius: 50%;
-  box-shadow: 0px 0px 96px -4px rgba(69,212,255,1);
-  overflow: hidden;
-}
-.map {
-  height: 300px;
-  width: 300px;
-  background-position: -490px center;
-  background-size: 170%;
-  background-repeat: no-repeat;
-  background-image: url(./../../assets/LogoAnimation/map.png);
-  animation: rotateGlobe;
-  animation-timing-function: linear;
-  animation-duration: 4s;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  
-}
-
-@keyframes rotateGlobe {
-  from {
-    background-position: -490px center;
-  }
-  to {
-  background-position: 300px center;
-  }
-}
-
-.flash-message {
-  height: 300px;
-  width: 300px;
-  margin-top: -300px;
   background-position: center;
-  background-size: 50%;
+  background-size: 100%;
   background-repeat: no-repeat;
-  background-image: url(./../../assets/LogoAnimation/message.png);
-  animation: flashMessage;
-  animation-timing-function: linear;
-  animation-duration: 1s;
-  animation-fill-mode: forwards;
-  animation-iteration-count: infinite;
-  opacity: 0.5;
+  background-image: url(./../../assets/logo.png);
+  display: flex;
+  position: relative;
+}
+.animation {
+  height: 280px;
+  width: 280px;
+  border: 16px solid #3498db;
+  border-top: 16px solid white; 
+  border-radius: 50%;
+  animation: spin 2s linear infinite;
+  flex-shrink: 0;
 }
 
-@keyframes flashMessage {
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.eyes {
+  position: absolute;
+  left: 180px;
+  top: 166px;
+  height: 0px;
+  width: 25px;
+  background: white;
+  animation: blink 5s cubic-bezier(0.17, 0.41, 0.76, 0.98);
+  animation-iteration-count: infinite;
+}
+@keyframes blink {
+  20%, 100% {
+    height: 0px;
+  }
   0% {
-    opacity: 0;
+    height: 0 px;
   }
   10% {
-    background-size: 55%;
-  }
-  30% {
-    background-size: 50%;
-  }
-  50% {
-    opacity: 0.5;
-  }
-  100% {
-    opacity: 0;
+    height: 35px;
   }
 }
 
+
 .message{
   text-align: center;
   margin-top: 20px;

src/components/app/MemberTemplate.vue

@@ -4,6 +4,8 @@
       class="avatar"
       :url="userAvatar"
       size="35px"
+      :uniqueID="user.uniqueID"
+      :status="presense"
     />
     <div class="information">
       <div class="username">{{user.username}}</div>
@@ -27,7 +29,16 @@ export default {
   computed: {
     userAvatar() {
       return config.domain + "/avatars/" + this.avatar  
-    } 
+    },
+    presense(){
+      //attach presense
+      if (this.user.uniqueID === this.$store.getters.user.uniqueID) {
+        return this.$store.getters.user.status || 0
+      }
+      const presences = this.$store.getters['members/presences'];
+      const userPresense = presences[this.user.uniqueID]
+      return userPresense || 0
+    }
   }
   
 }
@@ -71,7 +82,7 @@ export default {
 }
 
 .avatar {
- 
+
 }
 
 </style>

src/components/app/MessagePanel.vue

@@ -335,10 +335,8 @@ export default {
     },
     hideTypingStatus(data) {
       if (this.user.uniqueID === data.message.creator.uniqueID) return;
-      clearTimeout(
-        this.typingRecipients[data.channelID][data.message.creator.uniqueID]
-          .timer
-      );
+      if (!this.typingRecipients[data.channelID] || !this.typingRecipients[data.channelID][data.message.creator.uniqueID]) return;
+      clearTimeout( this.typingRecipients[data.channelID][data.message.creator.uniqueID].timer );
       this.$delete(
         this.typingRecipients[data.channelID],
         data.message.creator.uniqueID

src/components/app/MessageTemplate.vue

@@ -273,7 +273,6 @@ export default {
   transition: 1s;
   overflow: hidden;
 }
-
 .image-content {
   margin-top: 10px;
   padding: 5px;
@@ -321,7 +320,6 @@ export default {
   overflow-wrap: anywhere;
   margin-top: 3px;
 }
-
 .message .sending-status {
   display: flex;
   justify-content: flex-end;
@@ -336,6 +334,9 @@ export default {
 </style>
 
 <style>
+.msg-link {
+  color: rgb(50, 138, 253);
+}
 .message .sending-status .material-icons {
   font-size: 15px;
   color: rgb(306, 306, 306);

src/components/app/Popouts/Popouts/AddServer.vue

@@ -33,7 +33,7 @@
           <profile-picture class="avatar" size="100px" :url="tempImage"/>
           <div class="server-name">{{server.name}}</div>
           <div class="buttons">
-            <div class="button join-button" @click="joinButton" v-if="!servers[server.server_id]">Join {{server.name}}</div>
+            <div class="button join-button" @click="joinButton" v-if="!servers[server.server_id]">Join</div>
             <div class="button join-button button-clicked" v-if="servers[server.server_id]">Joined</div>
             <div
               class="button cancel-button"

src/components/app/Popouts/Popouts/GDriveLinkMenu.vue

@@ -78,7 +78,7 @@ export default {
 }
 .inner {
   margin: auto;
-  height: 400px;
+  height: 420px;
   width: 400px;
   background: rgb(32, 32, 32);
   display: flex;
@@ -110,8 +110,7 @@ export default {
 .nertivia-img {
   background-image: url(./../../../../assets/logo.png);
   border-radius: 50%;
-  background-size: calc(100% + 34px);
-  box-shadow: 0px 0px 66px -4px rgba(69, 212, 255, 1);
+  background-size: 100%;
 }
 .arrow {
   font-size: 40px;

src/components/app/ServerTemplate/ServerTemplate.vue

@@ -5,7 +5,7 @@
       <div class="add-icon" v-if="mode === 'ADD_SERVER'">
         <i class="material-icons">add</i>
       </div>
-      <div class="server-name">{{mode === 'ADD_SERVER'? 'Add Server' : ServerData.name }}</div>
+      <div class="server-name">{{mode === 'ADD_SERVER'? 'Create / Join Server' : ServerData.name }}</div>
       <div
         ref="contextMenuButton"
         class="options-context-button"
@@ -15,7 +15,7 @@
         <i class="material-icons">more_vert</i>
       </div>
       <div class="options-context-menu" v-if="showContextMenu" v-click-outside="closeContextMenu">
-        <div class="menu-button" @click="createInvite(ServerData.server_id)">Create Invite</div>
+        <div class="menu-button" @click="createInvite(ServerData.server_id)">Manage Invites</div>
         <div
           class="menu-button warn"
           @click="leaveServer(ServerData.server_id)"

src/components/app/Tabs/Servers.vue

@@ -101,6 +101,8 @@ export default {
   .left-panel {
     position: absolute;
     background-color: rgba(39, 39, 39, 0.97);
+    bottom: 0;
+    height: calc(100% - 40px);
   }
 }
 </style>

src/components/app/relationships/OfflineFriends.vue

@@ -3,7 +3,7 @@
     <div class="tab" @click="expanded = !expanded">
       <Tab :expanded="expanded" tabname="Offline" />
     </div>
-    <transition name="list" appear>
+    <transition name="list">
       <div class="list" v-if="expanded">
         <FriendsTemplate v-for="(friend, key) of friends" :key="key" :channelID="friend.channelID" :recipient="friends[key].recipient" />
       </div>

src/components/app/relationships/OnlineFriends.vue

@@ -3,7 +3,7 @@
     <div class="tab" @click="expanded = !expanded">
       <Tab :expanded="expanded" tabname="Online" />
     </div>
-    <transition name="list" appear>
+    <transition name="list">
       <div class="list" v-if="expanded">
         <FriendsTemplate v-for="(friend, key) of friends" :key="key" :channelID="friend.channelID" :recipient="friends[key].recipient"/>
       </div>

src/components/app/relationships/PendingFriends.vue

@@ -3,7 +3,7 @@
     <div class="tab" @click="expanded = !expanded">
       <Tab :expanded="expanded" tabname="Pending requests" />
     </div>
-    <transition name="list" appear>
+    <transition name="list">
       <div class="list" v-if="expanded">
         <PendingTemplate v-for="(friend, key) of friends"  :key="key" :uniqueID="friend.recipient.uniqueID" :status="friend.status" :username="friend.recipient.username" :tag="friend.recipient.tag"/>
       </div>

src/components/app/relationships/RecentFriends.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="recents">
-    <transition name="list" appear>
+    <transition name="list">
       <div class="list">
         <FriendsTemplate v-for="(channel, key) of channels" :key="key" :channelID="channel.channelID" :recipient="channel.recipients[0]"/>
       </div>

src/store/modules/serversModule.js

@@ -48,10 +48,21 @@ const actions = {
   },
   addServerMember(context, serverMember) {
     context.commit('ADD_SERVER_MEMBER', serverMember)
+  },
+  removePresences(context, server_id) {
+    const members = context.getters.serverMembers.filter(m => m.server_id === server_id)
+    const friends = context.rootGetters.user.friends;
+    for (let member of members) {
+      if (!friends[member.uniqueID]) {
+        context.dispatch('members/updatePresence', {uniqueID: member.uniqueID, status: null}, {root: true})
+      }
+      context.commit('REMOVE_SERVER_MEMBER', {uniqueID: member.uniqueID, server_id})
+    }
   }
 };
 
 const mutations = {
+
   SET_CHANNELS_IDS(state, {serverID, channelsIDs}) {
     const previousChannels = state.channelsIDs[serverID] || []
     Vue.set(state.channelsIDs, serverID, [...new Set([...previousChannels, ...channelsIDs])]);

src/store/modules/socketIOModule.js

@@ -220,14 +220,16 @@ const actions = {
 
   },
   ['socket_server:leave'](context, {server_id}) {
+    context.dispatch('servers/removePresences', server_id);
     context.dispatch('servers/removeServer', server_id)
   },
-  ['socket_server:memberAdd'](context, {serverMember}) { // member_add
+  ['socket_server:memberAdd'](context, {serverMember, presence}) { // member_add
     let sm = Object.assign({}, serverMember);
     const member = sm.member;
     delete sm.member;
     sm.uniqueID = member.uniqueID;
 
+    context.dispatch('members/updatePresence', {uniqueID: member.uniqueID, status: presence})
     context.dispatch('members/addMember', member)
     context.dispatch('servers/addServerMember', sm)
 
@@ -237,7 +239,7 @@ const actions = {
     context.dispatch('servers/removeServerMember', {uniqueID, server_id})
     console.log("Someone left")
   },
-  ['socket_server:members'](context, {serverMembers}) { // members
+  ['socket_server:members'](context, {serverMembers, memberPresences}) { // members
     let serverMembersArr = [];
     let members = {};
     for (let serverMember of serverMembers) {
@@ -249,7 +251,11 @@ const actions = {
     }
     context.dispatch('members/addMembers', members);
     context.dispatch('servers/addServerMembers', serverMembers)
-    console.log("server members ")
+    let presences = {};
+    for (const _presence of memberPresences) {
+      presences[_presence[0]] = _presence[1];
+    }
+    context.dispatch('members/addPresences', presences);
   },
 }
 

src/utils/changelog.js

@@ -3,7 +3,7 @@
     version: 4,
     title: "",
     shortTitle: "",
-    date: "23/05/2019",
+    date: "1/06/2019",
     headColor: "rgba(155, 244, 66, 0.77)",
     new: [
       "",
@@ -13,6 +13,20 @@
   }
 
 const config = [
+  {
+    version: 4.8,
+    title: "Server Members Status and new Logo!",
+    shortTitle: "",
+    date: "1/06/2019",
+    headColor: "rgba(0, 156, 170, 0.77)",
+    new: [
+      "Nertivia has a new cat logo! (Thanks to Fullipsp for the design!)",
+      "You can now see online status of server members!",
+      "You can now click on links that start with 'http'",
+    ],
+    next: ["Create multiple channels in a server."],
+    msg: `You might be wondering, where did the official Nertivia server go? Well, I accidentally deleted it :/ sorry. Here's the new one though! <a style="color: #00b6ff;" href="http://nertivia.supertiger.tk/invites/Db3p5n">http://nertivia.supertiger.tk/invites/Db3p5n</a>`
+  },
   {
     version: 4.7,
     title: "Bug fixes",

src/utils/messageFormatter.js

@@ -22,6 +22,7 @@ function owo (text) {
 	return `<img class="emoji" draggable="false" alt=":${split[0]}:" src="${config.domain + "/files/" + url}">`
 }
 
+
 futoji.addTransformer({
 	name: 'custom emoji',
 	symbol: ':',
@@ -35,6 +36,18 @@ futoji.addTransformer({
 	}
 })
 
+
+
+futoji.addTransformer({
+	name: 'url',
+	open: 'http',
+	close: ' ',
+	recursive: false,
+	validate: text => /(https?:\/\/[^\s]+)/g.test('http' + text),
+	transformer: text => '<a class="msg-link" target="_blank" href="http' + text + '">http' + text + '</a> '
+})
+
+
 futoji.addTransformer({
 	name: 'bold-and-italic',
 	symbol: '***',
@@ -85,12 +98,16 @@ futoji.addTransformer({
 
 export default (message) => {
 
-	message = futoji.format(escapeHtml(message));
+	message = futoji.format(escapeHtml(message + ' ')).trim();
+
 	message = emojiParser.replaceEmojis(message);
 
 	return message;
 }
 
+
+
+
 /**
  * format code to add syntax highlighting
  */

src/views/HomePage.vue

@@ -245,6 +245,7 @@ body {
   margin-top: auto;
   margin-bottom: auto;
   margin-left: 10px;
+  background-repeat: no-repeat;
 }
 .name {
   margin-top: auto;