From 48d8ab41f19fb02b166e8e93f3b5ec67187af81a Mon Sep 17 00:00:00 2001
From: brecert <11599528+Brecert@users.noreply.github.com>
Date: Tue, 9 Jul 2019 17:32:10 -0400
Subject: [PATCH] fix essential lint errors and lint format files

---
 .eslintrc.js                                  |   1 +
 package.json                                  |   4 +-
 src/Main.vue                                  |   2 +-
 src/components/Button.vue                     |  14 +-
 src/components/ChangeLog.vue                  |  50 +++-
 src/components/ElectronJS/FrameButtons.vue    |  15 +-
 src/components/HeaderLoginTemplate.vue        |  11 +-
 src/components/ParticlesJS.vue                |   2 +-
 src/components/ProfilePictureTemplate.vue     |   2 +-
 src/components/Recaptcha.vue                  |   7 +-
 src/components/Spinner.vue                    |  12 +-
 src/components/app/ConnectingScreen.vue       |   8 +-
 src/components/app/EmojiPanels/emojiPanel.vue |  84 ++++--
 .../app/EmojiPanels/emojiSuggestions.vue      |  50 ++--
 src/components/app/FriendsList.vue            |  28 +-
 src/components/app/MemberTemplate.vue         |  28 +-
 src/components/app/MembersList.vue            |  17 +-
 src/components/app/MessagePanel/Heading.vue   |  31 +-
 src/components/app/MessageTemplate.vue        |  68 ++++-
 src/components/app/MyMiniInformation.vue      |  90 ++++--
 .../app/Popouts/Popouts/AddServer.vue         | 146 +++++++--
 .../Popouts/DragDropFileUploadDialog.vue      |   4 +-
 .../app/Popouts/Popouts/GDriveLinkMenu.vue    |  44 ++-
 .../Popouts/Popouts/ServerInvitePopout.vue    |  53 ++--
 .../SettingsPanels/DropDownTemplate.vue       |  61 ++--
 .../Popouts/SettingsPanels/ManageEmojis.vue   |  59 +++-
 .../Popouts/SettingsPanels/MessageDesign.vue  |  71 +++--
 .../Popouts/SettingsPanels/MyProfile.vue      |  53 +++-
 .../Popouts/Popouts/SettingsPanels/survey.vue | 135 +++++----
 .../app/Popouts/Popouts/TakeSurveyPopout.vue  |  22 +-
 .../app/Popouts/Popouts/imageLargePreview.vue |  19 +-
 .../app/Popouts/Popouts/uploadDialog.vue      |  97 +++---
 .../Popouts/Popouts/userInformationPopout.vue | 257 ++++++++++------
 src/components/app/ServerList.vue             |  31 +-
 .../app/ServerTemplate/ChannelTemplate.vue    |   8 +-
 .../app/ServerTemplate/ChannelsList.vue       |  55 ++--
 .../app/ServerTemplate/ServerTemplate.vue     |  89 ++++--
 src/components/app/Tabs/DirectMessage.vue     |  22 +-
 src/components/app/Tabs/News.vue              |  42 ++-
 src/components/app/Tabs/Servers.vue           |  32 +-
 src/components/app/TypingStatus.vue           |  36 ++-
 .../app/relationships/AddFriendPanel.vue      |  52 +++-
 .../app/relationships/FriendsTemplate.vue     |  75 +++--
 .../app/relationships/OfflineFriends.vue      |  24 +-
 .../app/relationships/OnlineFriends.vue       |  30 +-
 .../app/relationships/PendingFriends.vue      |  26 +-
 .../app/relationships/PendingTemplate.vue     |  40 ++-
 .../app/relationships/RecentFriends.vue       |   7 +-
 src/components/app/relationships/Tab.vue      |   2 +-
 src/components/app/statusList.vue             |  54 +++-
 src/components/app/uploadsQueue.vue           |  23 +-
 src/components/homePage/Popout.vue            |  31 +-
 src/router.js                                 |   3 +-
 src/views/GDriveCallback.vue                  |   6 +-
 src/views/HomePage - Legacy.vue               |  95 ++++--
 src/views/HomePage.vue                        | 115 +++++--
 src/views/Invites.vue                         |  78 +++--
 src/views/LoginPage.vue                       |  81 +++--
 src/views/RegisterPage.vue                    |  85 ++++--
 yarn.lock                                     | 280 +++++-------------
 60 files changed, 1972 insertions(+), 995 deletions(-)

diff --git a/.eslintrc.js b/.eslintrc.js
index 5fac39c..0cced76 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -14,6 +14,7 @@ module.exports = {
         "SharedArrayBuffer": "readonly"
     },
     "parserOptions": {
+        "parser": "babel-eslint",
         "ecmaVersion": 2018
     },
     "plugins": [
diff --git a/package.json b/package.json
index 2296f55..e492832 100644
--- a/package.json
+++ b/package.json
@@ -30,13 +30,13 @@
     "vuex": "^3.0.1"
   },
   "devDependencies": {
+    "@babel/core": "^7.5.0",
     "@babel/plugin-syntax-dynamic-import": "^7.2.0",
     "@vue/cli-plugin-babel": "^3.0.5",
     "@vue/cli-plugin-eslint": "^3.0.5",
     "@vue/cli-service": "^3.6.0",
     "@vue/eslint-plugin": "^4.2.0",
-    "babel-eslint": "^10.0.1",
-    "eslint": "^5.8.0",
+    "babel-eslint": "^10.0.2",
     "eslint-plugin-vue": "^5.0.0-0",
     "vue-template-compiler": "^2.5.17"
   },
diff --git a/src/Main.vue b/src/Main.vue
index 1470236..33daea3 100644
--- a/src/Main.vue
+++ b/src/Main.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <router-view></router-view>
+    <router-view />
   </div>
 </template>
 
diff --git a/src/components/Button.vue b/src/components/Button.vue
index a6459ab..04a25e6 100644
--- a/src/components/Button.vue
+++ b/src/components/Button.vue
@@ -1,7 +1,15 @@
 <template>
-  <button type="submit" :disabled="$props.loading">
-    <div class="loading-icon" v-if="$props.loading" ></div>
-    <div class="text">{{$props.message}}</div>
+  <button
+    type="submit"
+    :disabled="$props.loading"
+  >
+    <div
+      v-if="$props.loading"
+      class="loading-icon"
+    />
+    <div class="text">
+      {{ $props.message }}
+    </div>
   </button>
 </template>
 
diff --git a/src/components/ChangeLog.vue b/src/components/ChangeLog.vue
index c971bfe..cb600ee 100644
--- a/src/components/ChangeLog.vue
+++ b/src/components/ChangeLog.vue
@@ -1,42 +1,70 @@
 <template>
   <div class="change-log">
     <div class="inner">
-      <div class="close-button" @click="close">
+      <div
+        class="close-button"
+        @click="close"
+      >
         <i class="material-icons">
           close
         </i>
       </div>
-      <div class="change-title">Change Log <div class="changelog-icon"><i class="material-icons ">update</i></div></div>
+      <div class="change-title">
+        Change Log <div class="changelog-icon">
+          <i class="material-icons ">update</i>
+        </div>
+      </div>
       <div class="change-list">
-
-        <div class="change" v-for="change in changelog" :key="change.title">
-          <div class="date">{{change.date}}</div>
-          <div class="changes-title">{{change.title}}</div>
+        <div
+          v-for="change in changelog"
+          :key="change.title"
+          class="change"
+        >
+          <div class="date">
+            {{ change.date }}
+          </div>
+          <div class="changes-title">
+            {{ change.title }}
+          </div>
           <div class="information">
             <div v-if="change.new">
               <strong>What's new?</strong><br>
               <ul>
-                <li v-for="(wnew, index) in change.new" :key="index">{{wnew}}</li>
+                <li
+                  v-for="(wnew, index) in change.new"
+                  :key="index"
+                >
+                  {{ wnew }}
+                </li>
               </ul>
             </div>
             <div v-if="change.fix">
               <strong>Issues fixed</strong><br>
               <ul>
-                <li v-for="(wfix, index) in change.fix" :key="index">{{wfix}}</li>
+                <li
+                  v-for="(wfix, index) in change.fix"
+                  :key="index"
+                >
+                  {{ wfix }}
+                </li>
               </ul>
             </div>
             <div v-if="change.next">
               <strong>Up next</strong><br>
               <ul>
-                <li v-for="(wnext, index) in change.next" :key="index">{{wnext}}</li>
+                <li
+                  v-for="(wnext, index) in change.next"
+                  :key="index"
+                >
+                  {{ wnext }}
+                </li>
               </ul>
             </div>
             <div v-if="change.msg">
-              {{change.msg}}
+              {{ change.msg }}
             </div>
           </div>
         </div>
-
       </div>
     </div>
   </div>
diff --git a/src/components/ElectronJS/FrameButtons.vue b/src/components/ElectronJS/FrameButtons.vue
index ca9572b..9013e31 100644
--- a/src/components/ElectronJS/FrameButtons.vue
+++ b/src/components/ElectronJS/FrameButtons.vue
@@ -1,12 +1,21 @@
 <template>
   <div class="frame-buttons">
-    <div class="minimize" @click="minimizeWindow()">
+    <div
+      class="minimize"
+      @click="minimizeWindow()"
+    >
       <i class="material-icons">minimize</i>
     </div>
-    <div class="res-max" @click="maximizeWindow()">
+    <div
+      class="res-max"
+      @click="maximizeWindow()"
+    >
       <i class="material-icons">check_box_outline_blank</i>
     </div>
-    <div class="close" @click="closeWindow()">
+    <div
+      class="close"
+      @click="closeWindow()"
+    >
       <i class="material-icons">close</i>
     </div>
   </div>
diff --git a/src/components/HeaderLoginTemplate.vue b/src/components/HeaderLoginTemplate.vue
index a6389de..213893c 100644
--- a/src/components/HeaderLoginTemplate.vue
+++ b/src/components/HeaderLoginTemplate.vue
@@ -1,10 +1,15 @@
 <template>
-  <transition name="fade-in" appear >
+  <transition
+    name="fade-in"
+    appear
+  >
     <div class="header">
       <div class="cat">
-        <div class="eyes"></div>
+        <div class="eyes" />
+      </div>
+      <div class="title">
+        Nertivia
       </div>
-      <div class="title">Nertivia</div>
     </div>
   </transition>
 </template>
diff --git a/src/components/ParticlesJS.vue b/src/components/ParticlesJS.vue
index f1c1121..cb36058 100644
--- a/src/components/ParticlesJS.vue
+++ b/src/components/ParticlesJS.vue
@@ -1,5 +1,5 @@
 <template>
-  <div id="particles-js"></div>
+  <div id="particles-js" />
 </template>
 
 <script>
diff --git a/src/components/ProfilePictureTemplate.vue b/src/components/ProfilePictureTemplate.vue
index 25b813f..6cd14e8 100644
--- a/src/components/ProfilePictureTemplate.vue
+++ b/src/components/ProfilePictureTemplate.vue
@@ -13,7 +13,7 @@
       <div
         :class="`inner-profile-picture ${$props.hover ? 'hoverable' : ''}`"
         :style="`${status || status === 0 ? 'border: solid 3px ' + statusColor.statusColor : ''}; height: ${$props.size}; width: ${$props.size}; background-image: url(${$props.url})`"
-      ></div>
+      />
     </div>
   </div>
 </template>
diff --git a/src/components/Recaptcha.vue b/src/components/Recaptcha.vue
index 45323ac..f1315c6 100644
--- a/src/components/Recaptcha.vue
+++ b/src/components/Recaptcha.vue
@@ -1,5 +1,10 @@
 <template>
-  <vue-recaptcha ref="recaptcha" :sitekey="sitekey" theme="dark" @verify="submit"></vue-recaptcha>
+  <vue-recaptcha
+    ref="recaptcha"
+    :sitekey="sitekey"
+    theme="dark"
+    @verify="submit"
+  />
 </template>
  
 <script>
diff --git a/src/components/Spinner.vue b/src/components/Spinner.vue
index c0ed0e3..f7f8621 100644
--- a/src/components/Spinner.vue
+++ b/src/components/Spinner.vue
@@ -1,7 +1,15 @@
 <template>
   <div class="loading-screen">
-    <div class="loading-animation" :style="`height: ${size}px ; width: ${size}px ;`"></div>
-    <div class="title" v-if="msg">{{$props.msg}}</div>
+    <div
+      class="loading-animation"
+      :style="`height: ${size}px ; width: ${size}px ;`"
+    />
+    <div
+      v-if="msg"
+      class="title"
+    >
+      {{ $props.msg }}
+    </div>
   </div>
 </template>
 
diff --git a/src/components/app/ConnectingScreen.vue b/src/components/app/ConnectingScreen.vue
index 78e0989..c596b19 100644
--- a/src/components/app/ConnectingScreen.vue
+++ b/src/components/app/ConnectingScreen.vue
@@ -2,10 +2,12 @@
   <div class="connecting-screen">
     <div class="center-box">
       <div class="cat-face">
-        <div class="eyes"></div>
-        <div class="animation"></div>
+        <div class="eyes" />
+        <div class="animation" />
+      </div>
+      <div class="message">
+        Connecting...
       </div>
-      <div class="message">Connecting...</div>
     </div>
   </div>
 </template>
diff --git a/src/components/app/EmojiPanels/emojiPanel.vue b/src/components/app/EmojiPanels/emojiPanel.vue
index d244528..da8f1eb 100644
--- a/src/components/app/EmojiPanels/emojiPanel.vue
+++ b/src/components/app/EmojiPanels/emojiPanel.vue
@@ -1,20 +1,25 @@
 <template>
-  <div class="emoji-panel" v-click-outside="closePanel">
+  <div
+    v-click-outside="closePanel"
+    class="emoji-panel"
+  >
     <div class="emoji-panel-inner">
       <div class="emojis-list">
         <!-- Recent Emojis Category  -->
         <div class="category">
-          <div class="category-name">Recent</div>
+          <div class="category-name">
+            Recent
+          </div>
           <div class="list">
             <div
-              class="emoji-item"
               v-for="(recentEmoji, index) in this.recentEmojisList"
               :key="index"
+              class="emoji-item"
               @click="emojiClickEvent(recentEmoji)"
             >
               <img
-                class="panel emoji"
                 v-lazyload
+                class="panel emoji"
                 :data-url=" getCustomEmoji(recentEmoji) || emojiShortcodeToPath(':' + recentEmoji + ':')"
               >
             </div>
@@ -23,55 +28,86 @@
 
         <!-- Custom Emojis Category  -->
         <div class="category">
-          <div class="category-name">Custom Emojis</div>
+          <div class="category-name">
+            Custom Emojis
+          </div>
           <div class="list">
             <div
-              class="emoji-item"
               v-for="(customEmoji, index) in this.customEmojisList"
               :key="index"
+              class="emoji-item"
               @click="customEmojiClickEvent(customEmoji)"
             >
-              <img class="panel emoji" v-lazyload :data-url="customEmojiPath + customEmoji.emojiID">
+              <img
+                v-lazyload
+                class="panel emoji"
+                :data-url="customEmojiPath + customEmoji.emojiID"
+              >
             </div>
           </div>
         </div>
 
-        <div class="category" v-for="(group, index) in groups" :key="group">
-          <div class="category-name">{{group}}</div>
+        <div
+          v-for="(group, index) in groups"
+          :key="group"
+          class="category"
+        >
+          <div class="category-name">
+            {{ group }}
+          </div>
           <div class="list">
             <div
-              class="emoji-item"
               v-for="emojiSorted in emojiByGroup(index)"
               :key="emojiSorted.shortcodes[0]"
+              class="emoji-item"
               @click="emojiClickEvent(emojiSorted.shortcodes[0])"
             >
-              <img class="panel emoji" v-lazyload :data-url="parseEmojiPath(emojiSorted.unicode)">
+              <img
+                v-lazyload
+                class="panel emoji"
+                :data-url="parseEmojiPath(emojiSorted.unicode)"
+              >
             </div>
           </div>
         </div>
       </div>
       <div class="tabs">
-        <div class="tab" @click="scrollToCategory(0)">
+        <div
+          class="tab"
+          @click="scrollToCategory(0)"
+        >
           <i class="material-icons">history</i>
-          <div class="tooltip">Recent</div>
-        </div>
-        <div class="tab" @click="scrollToCategory(1)">
-          <i class="material-icons">face</i>
-          <div class="tooltip">Custom Emojis</div>
+          <div class="tooltip">
+            Recent
+          </div>
         </div>
         <div
           class="tab"
+          @click="scrollToCategory(1)"
+        >
+          <i class="material-icons">face</i>
+          <div class="tooltip">
+            Custom Emojis
+          </div>
+        </div>
+        <div
           v-for="(emoji, index) in groupUnicodes"
           :key="index"
+          class="tab"
           @mouseenter="mouseHover(emoji, $event)"
           @click="scrollToCategory(index + 2)"
         >
-          <img class="panel-emoji" :src="selectRandom(emoji)">
-          <div class="tooltip">{{ groups[index]}}</div>
+          <img
+            class="panel-emoji"
+            :src="selectRandom(emoji)"
+          >
+          <div class="tooltip">
+            {{ groups[index] }}
+          </div>
         </div>
       </div>
     </div>
-    <div class="triangle"></div>
+    <div class="triangle" />
   </div>
 </template>
 
@@ -346,6 +382,10 @@ export default {
 
     };
   },
+  beforeMount() {
+    this.recentEmojisList = this.recentEmojis
+    this.customEmojisList = this.customEmojis
+  },
   methods: {
     getCustomEmoji(shortCode){
       const customEmoji = emojiParser.getCustomEmojisByShortCode(shortCode)
@@ -382,10 +422,6 @@ export default {
       const elements = document.querySelectorAll(".category-name");
       elements[index].scrollIntoView();
     }
-  },
-  beforeMount() {
-    this.recentEmojisList = this.recentEmojis
-    this.customEmojisList = this.customEmojis
   }, 
   computed: {
     ...mapState('settingsModule', ['recentEmojis', 'customEmojis'])
diff --git a/src/components/app/EmojiPanels/emojiSuggestions.vue b/src/components/app/EmojiPanels/emojiSuggestions.vue
index 7f8d1f9..647f4dc 100644
--- a/src/components/app/EmojiPanels/emojiSuggestions.vue
+++ b/src/components/app/EmojiPanels/emojiSuggestions.vue
@@ -2,18 +2,26 @@
   <div class="emoji-suggetions-list">
     <div
       v-for="(emoji, index) in $props.emojiArray.slice(0,10)"
+      :key="emoji.hexcode || emoji.emojiID"
       :class="{emojiItem: true, selected: index === emojiIndex}"
       @mouseenter="hoverEvent"
       @click="clickEvent"
-      :key="emoji.hexcode || emoji.emojiID"
     >
       <div class="preview">
-        <span v-if="emoji.unicode" v-html="emojiParser(emoji.unicode)"></span>
-        <span v-else >
-          <img class="custom-emoji" :src="customEmojiPath + emoji.emojiID" >
+        <span
+          v-if="emoji.unicode"
+          v-html="emojiParser(emoji.unicode)"
+        />
+        <span v-else>
+          <img
+            class="custom-emoji"
+            :src="customEmojiPath + emoji.emojiID"
+          >
         </span>
       </div>
-      <div class="short-code">:{{emoji.name || emoji.shortcodes[0]}}:</div>
+      <div class="short-code">
+        :{{ emoji.name || emoji.shortcodes[0] }}:
+      </div>
     </div>
   </div>
 </template>
@@ -29,6 +37,22 @@ export default {
       customEmojiPath: config.domain + "/files/"
     }
   },
+  computed: {
+    emojiIndex() {
+      return this.$store.getters.getEmojiIndex;
+    }
+  },
+  watch: {
+    emojiArray() {
+      this.$store.dispatch("changeIndex", 0);
+    }
+  },
+  mounted() {
+    bus.$on("emojiSuggestions:key", this.KeySwitch);
+  },
+  destroyed() {
+    bus.$off("emojiSuggestions:key", this.KeySwitch);
+  },
   methods: {
     emojiParser(emoji) {
       return emojiParser.replaceEmojis(emoji);
@@ -59,22 +83,6 @@ export default {
     clickEvent() {
       bus.$emit('emojiSuggestions:Selected')
     }
-  },
-  mounted() {
-    bus.$on("emojiSuggestions:key", this.KeySwitch);
-  },
-  destroyed() {
-    bus.$off("emojiSuggestions:key", this.KeySwitch);
-  },
-  watch: {
-    emojiArray() {
-      this.$store.dispatch("changeIndex", 0);
-    }
-  },
-  computed: {
-    emojiIndex() {
-      return this.$store.getters.getEmojiIndex;
-    }
   }
 };
 </script>
diff --git a/src/components/app/FriendsList.vue b/src/components/app/FriendsList.vue
index 3a6daaf..bbda493 100644
--- a/src/components/app/FriendsList.vue
+++ b/src/components/app/FriendsList.vue
@@ -2,19 +2,35 @@
   <div class="left-panel">
     <MyMiniInformation />
     <div class="tabs">
-      <div :class="{selector: true, right: !isFriendsTab}"></div>
-      <div class="tab" @click="isFriendsTab = true">Friends</div>
-      <div class="tab" @click="isFriendsTab = false">Recents</div>
+      <div :class="{selector: true, right: !isFriendsTab}" />
+      <div
+        class="tab"
+        @click="isFriendsTab = true"
+      >
+        Friends
+      </div>
+      <div
+        class="tab"
+        @click="isFriendsTab = false"
+      >
+        Recents
+      </div>
     </div>
-    <div class="list" v-if="isFriendsTab">
+    <div
+      v-if="isFriendsTab"
+      class="list"
+    >
       <pending-friends />
       <online-friends />
       <offline-friends />
     </div>
-    <div class="list" v-else>
+    <div
+      v-else
+      class="list"
+    >
       <recent-friends />
     </div>
-    <AddFriendPanel/>
+    <AddFriendPanel />
   </div>
 </template>
 
diff --git a/src/components/app/MemberTemplate.vue b/src/components/app/MemberTemplate.vue
index 72b19ff..2cdefdf 100644
--- a/src/components/app/MemberTemplate.vue
+++ b/src/components/app/MemberTemplate.vue
@@ -1,16 +1,26 @@
 <template>
-  <div class="member" @click="openUserInformation()">
+  <div
+    class="member"
+    @click="openUserInformation()"
+  >
     <Profile-picture 
       class="avatar"
       :url="userAvatar"
       size="35px"
-      :uniqueID="user.uniqueID"
+      :unique-i-d="user.uniqueID"
       :status="presense"
     />
     <div class="information">
-      <div class="username">{{user.username}}</div>
+      <div class="username">
+        {{ user.username }}
+      </div>
+    </div>
+    <div
+      v-if="type === 'OWNER'"
+      class="type-box"
+    >
+      Owner
     </div>
-    <div v-if="type === 'OWNER'" class="type-box">Owner</div>
   </div>
 </template>
 
@@ -21,11 +31,6 @@ import config from '@/config';
 export default {
   components: { ProfilePicture },
   props: ['user', 'avatar', 'type'],
-  methods: {
-    openUserInformation() {
-      this.$store.dispatch('setUserInformationPopout', this.user.uniqueID)
-    },
-  },
   computed: {
     userAvatar() {
       return config.domain + "/avatars/" + this.avatar  
@@ -39,6 +44,11 @@ export default {
       const userPresense = presences[this.user.uniqueID]
       return userPresense || 0
     }
+  },
+  methods: {
+    openUserInformation() {
+      this.$store.dispatch('setUserInformationPopout', this.user.uniqueID)
+    },
   }
   
 }
diff --git a/src/components/app/MembersList.vue b/src/components/app/MembersList.vue
index acccbe5..3314463 100644
--- a/src/components/app/MembersList.vue
+++ b/src/components/app/MembersList.vue
@@ -1,12 +1,19 @@
 <template>
   <div class="members-list">
     <div class="header">
-      <div class="title">Members ({{members.length}})</div>
-
-    </div>
-      <div class="members">
-        <member-template v-for="(member, index) in members" :key="index" :type="member.type" :avatar="member.member.avatar" :user="member.member" />
+      <div class="title">
+        Members ({{ members.length }})
       </div>
+    </div>
+    <div class="members">
+      <member-template
+        v-for="(member, index) in members"
+        :key="index"
+        :type="member.type"
+        :avatar="member.member.avatar"
+        :user="member.member"
+      />
+    </div>
   </div>
 </template>
 
diff --git a/src/components/app/MessagePanel/Heading.vue b/src/components/app/MessagePanel/Heading.vue
index bc24ad3..d4692a5 100644
--- a/src/components/app/MessagePanel/Heading.vue
+++ b/src/components/app/MessagePanel/Heading.vue
@@ -1,16 +1,29 @@
 <template>
   <div class="heading">
-    <div class="show-menu-button" @click="toggleLeftMenu">
+    <div
+      class="show-menu-button"
+      @click="toggleLeftMenu"
+    >
       <i class="material-icons">menu</i>
     </div>
     <div
       v-if="type === 1"
       class="user-status"
-      :style="`box-shadow: 0px 0px 14px 3px ${statusColor}; background-color: ${statusColor};`"/>
+      :style="`box-shadow: 0px 0px 14px 3px ${statusColor}; background-color: ${statusColor};`"
+    />
     <div class="information">
-      <div :class="{name: true, clickable: !!uniqueID }" @click="openUserInfoPanel">{{name}}</div>
+      <div
+        :class="{name: true, clickable: !!uniqueID }"
+        @click="openUserInfoPanel"
+      >
+        {{ name }}
+      </div>
     </div>
-    <div v-if="type === 2 && selectedServerID" class="show-members-button" @click="toggleMembersPanel">
+    <div
+      v-if="type === 2 && selectedServerID"
+      class="show-members-button"
+      @click="toggleMembersPanel"
+    >
       <i class="material-icons">view_list</i>
     </div>
   </div>
@@ -25,6 +38,11 @@ export default {
     "name",
     "uniqueID"
   ],
+  computed: {
+    selectedServerID() {
+      return this.$store.getters['servers/selectedServerID'];
+    }
+  },
   methods: {
     openUserInfoPanel() {
       if (this.uniqueID)
@@ -36,11 +54,6 @@ export default {
     toggleMembersPanel() {
       bus.$emit("toggleMembersPanel");
     }
-  },
-  computed: {
-    selectedServerID() {
-      return this.$store.getters['servers/selectedServerID'];
-    }
   }
 };
 </script>
diff --git a/src/components/app/MessageTemplate.vue b/src/components/app/MessageTemplate.vue
index 592bfb9..2b4244f 100644
--- a/src/components/app/MessageTemplate.vue
+++ b/src/components/app/MessageTemplate.vue
@@ -2,7 +2,7 @@
   <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)} "
+      :class="{message: true, ownMessage: user.uniqueID === $props.uniqueID, ownMessageLeft: user.uniqueID === $props.uniqueID && (apperance && apperance.own_message_right === true)} "
     >
       <div class="avatar">
         <profile-picture
@@ -14,42 +14,78 @@
         />
       </div>
       <div class="triangle">
-        <div class="triangle-inner"></div>
+        <div class="triangle-inner" />
       </div>
       <div class="content">
         <div class="user-info">
-          <div class="username" @click="openUserInformation">{{this.$props.username}}</div>
-          <div class="date">{{getDate}}</div>
+          <div
+            class="username"
+            @click="openUserInformation"
+          >
+            {{ this.$props.username }}
+          </div>
+          <div class="date">
+            {{ getDate }}
+          </div>
         </div>
-        <div class="content-message" v-html="formatMessage"></div>
+        <div
+          class="content-message"
+          v-html="formatMessage"
+        />
 
-        <div class="file-content" v-if="getFile">
+        <div
+          v-if="getFile"
+          class="file-content"
+        >
           <div class="icon">
             <i class="material-icons">insert_drive_file</i>
           </div>
           <div class="information">
-            <div class="info">{{getFile.fileName}}</div>
-            <a :href="getFile.url" target="_blank">
+            <div class="info">
+              {{ getFile.fileName }}
+            </div>
+            <a
+              :href="getFile.url"
+              target="_blank"
+            >
               <div class="download-button">Download</div>
             </a>
           </div>
         </div>
 
-        <div class="image-content" v-if="getImage">
-          <img :src="getImage" @click="imageClicked">
+        <div
+          v-if="getImage"
+          class="image-content"
+        >
+          <img
+            :src="getImage"
+            @click="imageClicked"
+          >
         </div>
       </div>
-      <div class="sending-status" v-html="statusMessage"></div>
+      <div
+        class="sending-status"
+        v-html="statusMessage"
+      />
     </div>
     <div
       v-if="type && (type === 1 || type === 2)"
-      :class="{'presence-message': true,  green: type === 1, red: 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>
-        <span class="text" v-if="type === 2">has left the server.</span>
-        <span class="date">{{getDate}}</span>
+        <span
+          class="username"
+          @click="openUserInformation"
+        >{{ this.$props.username }}</span>
+        <span
+          v-if="type === 1"
+          class="text"
+        >has joined the server!</span>
+        <span
+          v-if="type === 2"
+          class="text"
+        >has left the server.</span>
+        <span class="date">{{ getDate }}</span>
       </span>
     </div>
   </div>
diff --git a/src/components/app/MyMiniInformation.vue b/src/components/app/MyMiniInformation.vue
index a0bad37..423119e 100644
--- a/src/components/app/MyMiniInformation.vue
+++ b/src/components/app/MyMiniInformation.vue
@@ -1,30 +1,56 @@
 <template>
-  <div class="my-mini-information" :style="{backgroundColor: getStatusColor}">
+  <div
+    class="my-mini-information"
+    :style="{backgroundColor: getStatusColor}"
+  >
     <div class="profile-pic-outer">
-      <profile-picture :url="avatar" :admin="user.admin" size="50px" :hover="true" @click.native="openUserInformation"/>
+      <profile-picture
+        :url="avatar"
+        :admin="user.admin"
+        size="50px"
+        :hover="true"
+        @click.native="openUserInformation"
+      />
     </div>
     <div class="information">
-      <div class="name">{{user.username}}</div>
-      <div class="tag">@{{user.tag}}</div>
+      <div class="name">
+        {{ user.username }}
+      </div>
+      <div class="tag">
+        @{{ user.tag }}
+      </div>
 
-      <div class="status" v-on:click="status.isPoppedOut = !status.isPoppedOut">
-        <img class="current-status" :src="getStatus">
+      <div
+        class="status"
+        @click="status.isPoppedOut = !status.isPoppedOut"
+      >
+        <img
+          class="current-status"
+          :src="getStatus"
+        >
         <i class="material-icons expand-status-icon">expand_more</i>
         <transition name="show-status-list">
-          <statusList v-if="status.isPoppedOut" v-click-outside="closeMenus" class="status-popout"/>
+          <statusList
+            v-if="status.isPoppedOut"
+            v-click-outside="closeMenus"
+            class="status-popout"
+          />
         </transition>
       </div>
     </div>
     <div
-      class="setting-icon survay-button"
       v-if="!user.survey_completed || user.survey_completed === false"
+      class="setting-icon survay-button"
       @click="openSurvey"
     >
       <div class="survay-inner">
         <i class="material-icons">error</i>
       </div>
     </div>
-    <div class="setting-icon" @click="openSettings">
+    <div
+      class="setting-icon"
+      @click="openSettings"
+    >
       <i class="material-icons">settings</i>
     </div>
   </div>
@@ -50,6 +76,29 @@ export default {
       }
     };
   },
+  computed: {
+    user() {
+      return this.$store.getters.user;
+    },
+    avatar() {
+      return config.domain + "/avatars/" + this.$store.getters.user.avatar;
+    },
+    getStatus() {
+      return require(`./../../assets/status/${this.$store.getters.user.status ||
+        0}.svg`);
+    },
+    getStatusColor() {
+      const status = this.$store.getters.user.status || 0
+      return statuses[parseInt(status)].bgColor
+    }
+  },
+  created() {
+    //When user changes their own status (statusList.vue)
+    bus.$on("status-change", this.changeStatus);
+  },
+  beforeDestroy() {
+    bus.$off("status-change", this.changeStatus);
+  },
   methods: {
     openUserInformation() {
       this.$store.dispatch('setUserInformationPopout', this.user.uniqueID)
@@ -77,29 +126,6 @@ export default {
         visibility: true
       });
     }
-  },
-  created() {
-    //When user changes their own status (statusList.vue)
-    bus.$on("status-change", this.changeStatus);
-  },
-  beforeDestroy() {
-    bus.$off("status-change", this.changeStatus);
-  },
-  computed: {
-    user() {
-      return this.$store.getters.user;
-    },
-    avatar() {
-      return config.domain + "/avatars/" + this.$store.getters.user.avatar;
-    },
-    getStatus() {
-      return require(`./../../assets/status/${this.$store.getters.user.status ||
-        0}.svg`);
-    },
-    getStatusColor() {
-      const status = this.$store.getters.user.status || 0
-      return statuses[parseInt(status)].bgColor
-    }
   }
 };
 </script>
diff --git a/src/components/app/Popouts/Popouts/AddServer.vue b/src/components/app/Popouts/Popouts/AddServer.vue
index fdd645d..9c3ee8e 100644
--- a/src/components/app/Popouts/Popouts/AddServer.vue
+++ b/src/components/app/Popouts/Popouts/AddServer.vue
@@ -1,44 +1,128 @@
 <template>
-  <div class="dark-background" @mousedown="backgroundClick">
+  <div
+    class="dark-background"
+    @mousedown="backgroundClick"
+  >
     <div class="inner">
       <div class="tabs">
-        <div :class="{tab: true, selected: tab == 0}" @click="tab = 0; slideBack(); ">Create</div>
-        <div :class="{tab: true, selected: tab == 1 || tab == 2}" @click="tab = 1; slideForward();">Join</div>
-      </div>
-      <transition-group tag="div" class="slider" :name="slideInDirection">
-        <div class="content" v-if="tab == 0" key="add-server">
-          <div class="title">Set your server's avatar</div>
-          <profile-picture class="avatar" size="90px" :url="tempImage"/>
-          <div class="button">Browse Avatar Coming Soon!</div>
-          <div class="input">
-            <div class="input-name">Server Name</div>
-            <input type="text" v-model="serverName" placeholder="Server Name">
-          </div>
-          <span v-if="serverNameError" class="warn">{{serverNameError}}</span>
-          <div class="button create-button" @click="createButton">Create</div>
+        <div
+          :class="{tab: true, selected: tab == 0}"
+          @click="tab = 0; slideBack(); "
+        >
+          Create
         </div>
-        <div class="content" v-if="tab == 1" key="check-invite">
+        <div
+          :class="{tab: true, selected: tab == 1 || tab == 2}"
+          @click="tab = 1; slideForward();"
+        >
+          Join
+        </div>
+      </div>
+      <transition-group
+        tag="div"
+        class="slider"
+        :name="slideInDirection"
+      >
+        <div
+          v-if="tab == 0"
+          key="add-server"
+          class="content"
+        >
+          <div class="title">
+            Set your server's avatar
+          </div>
+          <profile-picture
+            class="avatar"
+            size="90px"
+            :url="tempImage"
+          />
+          <div class="button">
+            Browse Avatar Coming Soon!
+          </div>
+          <div class="input">
+            <div class="input-name">
+              Server Name
+            </div>
+            <input
+              v-model="serverName"
+              type="text"
+              placeholder="Server Name"
+            >
+          </div>
+          <span
+            v-if="serverNameError"
+            class="warn"
+          >{{ serverNameError }}</span>
+          <div
+            class="button create-button"
+            @click="createButton"
+          >
+            Create
+          </div>
+        </div>
+        <div
+          v-if="tab == 1"
+          key="check-invite"
+          class="content"
+        >
           <i class="material-icons icon">forum</i>
-          <div class="title">Join A Server</div>
+          <div class="title">
+            Join A Server
+          </div>
           <div class="input">
             <div class="input-name">
               Invite Code
-              <span v-if="inviteCodeError" class="warn">- {{inviteCodeError}}</span>
+              <span
+                v-if="inviteCodeError"
+                class="warn"
+              >- {{ inviteCodeError }}</span>
             </div>
-            <input type="text" v-model="inviteCode" placeholder="Invite code">
+            <input
+              v-model="inviteCode"
+              type="text"
+              placeholder="Invite code"
+            >
+          </div>
+          <div
+            class="button check-button"
+            @click="checkInviteCode"
+          >
+            Check
           </div>
-          <div class="button check-button" @click="checkInviteCode">Check</div>
         </div>
-        <div class="content server" v-if="tab == 2" key="join-server">
-          <profile-picture class="avatar" size="100px" :url="tempImage"/>
-          <div class="server-name">{{server.name}}</div>
+        <div
+          v-if="tab == 2"
+          key="join-server"
+          class="content server"
+        >
+          <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</div>
-            <div class="button join-button button-clicked" v-if="servers[server.server_id]">Joined</div>
+            <div
+              v-if="!servers[server.server_id]"
+              class="button join-button"
+              @click="joinButton"
+            >
+              Join
+            </div>
+            <div
+              v-if="servers[server.server_id]"
+              class="button join-button button-clicked"
+            >
+              Joined
+            </div>
             <div
               class="button cancel-button"
               @click="server = null; inviteCode = ''; tab = 1; slideBack();"
-            >Cancel</div>
+            >
+              Cancel
+            </div>
           </div>
         </div>
       </transition-group>
@@ -67,6 +151,11 @@ export default {
       slideInDirection: "slide-forward"
     };
   },
+  computed: {
+    servers() {
+      return this.$store.getters['servers/servers'];
+    }
+  },
   methods: {
     closeMenu() {
       this.$store.dispatch("setPopoutVisibility", {
@@ -137,11 +226,6 @@ export default {
         this.closeMenu();
       }
     }
-  },
-  computed: {
-    servers() {
-      return this.$store.getters['servers/servers'];
-    }
   }
 };
 </script>
diff --git a/src/components/app/Popouts/Popouts/DragDropFileUploadDialog.vue b/src/components/app/Popouts/Popouts/DragDropFileUploadDialog.vue
index 0fa830e..32ab3aa 100644
--- a/src/components/app/Popouts/Popouts/DragDropFileUploadDialog.vue
+++ b/src/components/app/Popouts/Popouts/DragDropFileUploadDialog.vue
@@ -2,7 +2,9 @@
   <div class="drop-background">
     <div class="box">
       <i class="material-icons">insert_drive_file</i>
-			<div class="info">Drop file</div>
+      <div class="info">
+        Drop file
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/app/Popouts/Popouts/GDriveLinkMenu.vue b/src/components/app/Popouts/Popouts/GDriveLinkMenu.vue
index 4a6a535..9825d93 100644
--- a/src/components/app/Popouts/Popouts/GDriveLinkMenu.vue
+++ b/src/components/app/Popouts/Popouts/GDriveLinkMenu.vue
@@ -1,19 +1,43 @@
 <template>
-  <div class="dark-background" @click="backgroundClick">
+  <div
+    class="dark-background"
+    @click="backgroundClick"
+  >
     <div class="inner">
       <div
         class="text"
-      >To upload files, images or set avatars, You must link your Google Drive account with your Nertivia account.</div>
-      <div class="images">
-        <div class="image GDrive-img"></div>
-        <div class="arrow">></div>
-        <div class="image nertivia-img"></div>
+      >
+        To upload files, images or set avatars, You must link your Google Drive account with your Nertivia account.
+      </div>
+      <div class="images">
+        <div class="image GDrive-img" />
+        <div class="arrow">
+          >
+        </div>
+        <div class="image nertivia-img" />
+      </div>
+      <div class="text">
+        If you would like to see Nertivia grow, and have its own storage CDN, donations would be appriciated.
       </div>
-      <div class="text">If you would like to see Nertivia grow, and have its own storage CDN, donations would be appriciated.</div>
       <div class="buttons">
-        <div class="button donate" @click="donateButton">Donate</div>
-        <div class="button deny" @click="closeMenu">No thanks</div>
-        <div class="button" @click="link">Link me</div>
+        <div
+          class="button donate"
+          @click="donateButton"
+        >
+          Donate
+        </div>
+        <div
+          class="button deny"
+          @click="closeMenu"
+        >
+          No thanks
+        </div>
+        <div
+          class="button"
+          @click="link"
+        >
+          Link me
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/components/app/Popouts/Popouts/ServerInvitePopout.vue b/src/components/app/Popouts/Popouts/ServerInvitePopout.vue
index ee94f06..170adc6 100644
--- a/src/components/app/Popouts/Popouts/ServerInvitePopout.vue
+++ b/src/components/app/Popouts/Popouts/ServerInvitePopout.vue
@@ -1,14 +1,33 @@
 <template>
-  <div class="dark-background" @mousedown="backgroundClick">
+  <div
+    class="dark-background"
+    @mousedown="backgroundClick"
+  >
     <div class="inner">
       <div class="top">
-        <div class="button" @click="createInviteButton">Create New Invite</div>
+        <div
+          class="button"
+          @click="createInviteButton"
+        >
+          Create New Invite
+        </div>
       </div>
       <div class="bottom">
-        <div class="title">Invites created by you:</div>
-        <spinner v-if="invites === null"/>
-        <div class="invite-list" v-if="invites !== null">
-          <div class="invite" v-for="invite in invites.slice().reverse()" :key="invite">{{invite}}</div>
+        <div class="title">
+          Invites created by you:
+        </div>
+        <spinner v-if="invites === null" />
+        <div
+          v-if="invites !== null"
+          class="invite-list"
+        >
+          <div
+            v-for="invite in invites.slice().reverse()"
+            :key="invite"
+            class="invite"
+          >
+            {{ invite }}
+          </div>
         </div>
       </div>
     </div>
@@ -29,6 +48,17 @@ export default {
       invites: null
     };
   },
+  async mounted() {
+    // get invites created by you
+    const {ok, error, result} = await ServerService.getInvites(this.serverID);
+    if (ok) {
+      let invites = [];
+      for (let invite of result.data) {
+        invites.push(invite.invite_code)
+      } 
+      this.invites = invites;
+    }
+  },
   methods: {
     closeMenu() {
       this.$store.dispatch("setPopoutVisibility", {
@@ -53,17 +83,6 @@ export default {
 
     }
   },
-  async mounted() {
-    // get invites created by you
-    const {ok, error, result} = await ServerService.getInvites(this.serverID);
-    if (ok) {
-      let invites = [];
-      for (let invite of result.data) {
-        invites.push(invite.invite_code)
-      } 
-      this.invites = invites;
-    }
-  },
   computed: {
     ...mapState({
       serverID: state => state.popoutsModule.serverIDContextMenu
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/DropDownTemplate.vue b/src/components/app/Popouts/Popouts/SettingsPanels/DropDownTemplate.vue
index 3c1b104..010a401 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/DropDownTemplate.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/DropDownTemplate.vue
@@ -1,27 +1,40 @@
 <template>
   <div class="drop-down">
-    <div class="main-name">{{name}}</div>
-    <div class="box" @click="opened = !opened">
+    <div class="main-name">
+      {{ name }}
+    </div>
+    <div
+      class="box"
+      @click="opened = !opened"
+    >
       <div class="selected">
         <div
-          class="emoji"
           v-if="selected !== null && updateItems[selected]"
+          class="emoji"
           v-html="updateItems[selected].emoji || ''"
-        ></div>
-        {{selected === null ? 'Select One' : updateItems[selected].name}}
+        />
+        {{ selected === null ? 'Select One' : updateItems[selected].name }}
       </div>
       <i class="material-icons">expand_more</i>
     </div>
-    <div class="drop-down-menu" v-if="opened">
+    <div
+      v-if="opened"
+      class="drop-down-menu"
+    >
       <div
-        class="item"
         v-for="(item, index) in updateItems"
         :key="index"
+        class="item"
         @click="itemClickEvent(index)"
       >
         <div class="content">
-          <div class="emoji" v-html="item.emoji"></div>
-          <div class="name">{{item.name}}</div>
+          <div
+            class="emoji"
+            v-html="item.emoji"
+          />
+          <div class="name">
+            {{ item.name }}
+          </div>
         </div>
       </div>
     </div>
@@ -43,21 +56,6 @@ export default {
       selected: this.default || null
     };
   },
-  methods: {
-    itemClickEvent(index) {
-      this.selected = index;
-      this.$emit("change", index);
-      this.opened = false;
-    }
-  },
-  watch: {
-    updateItems() {
-      this.selected = null;
-    },
-    itemSelected() {
-      this.selected = this.itemSelected;
-    }
-  },
   computed: {
     updateItems() {
       this.$emit("change", null);
@@ -75,6 +73,21 @@ export default {
       }
       return newArr;
     }
+  },
+  watch: {
+    updateItems() {
+      this.selected = null;
+    },
+    itemSelected() {
+      this.selected = this.itemSelected;
+    }
+  },
+  methods: {
+    itemClickEvent(index) {
+      this.selected = index;
+      this.$emit("change", index);
+      this.opened = false;
+    }
   }
 };
 </script>
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/ManageEmojis.vue b/src/components/app/Popouts/Popouts/SettingsPanels/ManageEmojis.vue
index aceba95..3867548 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/ManageEmojis.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/ManageEmojis.vue
@@ -3,15 +3,27 @@
     <div class="info">
       <div
         class="title"
-      >Upload your own pretty emojis for free! Emojis must be 1MB or less. (png, jpg, gif)</div>
-      <div class="button" @click="addEmojiBtn">
+      >
+        Upload your own pretty emojis for free! Emojis must be 1MB or less. (png, jpg, gif)
+      </div>
+      <div
+        class="button"
+        @click="addEmojiBtn"
+      >
         <i class="material-icons">add_box</i>Add Emoji
       </div>
     </div>
 
     <div class="emojis-list">
-      <div class="emoji" v-for="emoji in customEmojis" :key="emoji.emojiID">
-        <img class="preview" :src="`${domain}${emoji.emojiID}`">
+      <div
+        v-for="emoji in customEmojis"
+        :key="emoji.emojiID"
+        class="emoji"
+      >
+        <img
+          class="preview"
+          :src="`${domain}${emoji.emojiID}`"
+        >
         <div class="emoji-name">
           <input
             type="text"
@@ -20,21 +32,44 @@
             @blur="blurEvent(emoji.emojiID, $event)"
           >
         </div>
-        <div class="delete-button" @click="removeEmoji(emoji.emojiID)">
-          <div class="material-icons">close</div>
-          <div class="inner"></div>
+        <div
+          class="delete-button"
+          @click="removeEmoji(emoji.emojiID)"
+        >
+          <div class="material-icons">
+            close
+          </div>
+          <div class="inner" />
         </div>
       </div>
     </div>
-    <input type="file" accept="image/*" ref="emojiBrowser" @change="emojiBrowse" class="hidden">
+    <input
+      ref="emojiBrowser"
+      type="file"
+      accept="image/*"
+      class="hidden"
+      @change="emojiBrowse"
+    >
     <!-- <div class="option" @click="changePassword">Change Password</div> -->
 
-    <div class="alert-outer" v-if="alert.show">
+    <div
+      v-if="alert.show"
+      class="alert-outer"
+    >
       <div class="alert">
-        <div class="alert-title">Error</div>
-        <div class="alert-content">{{alert.content}}</div>
+        <div class="alert-title">
+          Error
+        </div>
+        <div class="alert-content">
+          {{ alert.content }}
+        </div>
         <div class="alert-buttons">
-          <div class="alert-button" @click="alert.show = false">Okay</div>
+          <div
+            class="alert-button"
+            @click="alert.show = false"
+          >
+            Okay
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/MessageDesign.vue b/src/components/app/Popouts/Popouts/SettingsPanels/MessageDesign.vue
index 7d92700..220612e 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/MessageDesign.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/MessageDesign.vue
@@ -1,20 +1,53 @@
 <template>
   <div class="my-profile-panel">
-    <div class="title">Message Example</div>
-    <div class="message-example">
-      <message-template message="Hi" :username="user.username" :date="Date.now()" :uniqueID="user.uniqueID" :admin="user.admin" :avatar="user.avatar" />
-      <message-template message="Hello." username="Cool Dude" :date="Date.now()"/>
-      <message-template message="Whaddup" :username="user.username" :date="Date.now()" :uniqueID="user.uniqueID" :admin="user.admin" :avatar="user.avatar" />
-      <message-template message="Nothing, bye." username="Cool Dude" :date="Date.now()"/>
+    <div class="title">
+      Message Example
     </div>
-    <div class="title">Options</div>  
+    <div class="message-example">
+      <message-template
+        message="Hi"
+        :username="user.username"
+        :date="Date.now()"
+        :unique-i-d="user.uniqueID"
+        :admin="user.admin"
+        :avatar="user.avatar"
+      />
+      <message-template
+        message="Hello."
+        username="Cool Dude"
+        :date="Date.now()"
+      />
+      <message-template
+        message="Whaddup"
+        :username="user.username"
+        :date="Date.now()"
+        :unique-i-d="user.uniqueID"
+        :admin="user.admin"
+        :avatar="user.avatar"
+      />
+      <message-template
+        message="Nothing, bye."
+        username="Cool Dude"
+        :date="Date.now()"
+      />
+    </div>
+    <div class="title">
+      Options
+    </div>  
     <div class="switches">
-      <div class="checkbox" @click="toggleAppearance">
-        <div :class="`checkbox-box ${apperance && apperance.own_message_right && apperance.own_message_right === true ? 'selected' : '' }`"></div>
-        <div class="checkbox-name">Show my messages on the right side.</div>
+      <div
+        class="checkbox"
+        @click="toggleAppearance"
+      >
+        <div :class="`checkbox-box ${apperance && apperance.own_message_right && apperance.own_message_right === true ? 'selected' : '' }`" />
+        <div class="checkbox-name">
+          Show my messages on the right side.
+        </div>
       </div>
     </div>
-    <div class="title">Message Themes (Soon!)</div>  
+    <div class="title">
+      Message Themes (Soon!)
+    </div>  
   </div>
 </template>
 
@@ -33,6 +66,14 @@ export default {
 
     };
   },
+  computed: {
+    apperance() {
+      return this.$store.getters['settingsModule/settings'].apperance;
+    },
+    user() {
+      return this.$store.getters.user
+    }
+  },
   methods: {
     toggleAppearance() {
       if (!this.apperance || !this.apperance.own_message_right || this.apperance.own_message_right === false) {
@@ -43,14 +84,6 @@ export default {
       SettingsService.setApperance("own_message_right", false)
 
     }
-  },
-  computed: {
-    apperance() {
-      return this.$store.getters['settingsModule/settings'].apperance;
-    },
-    user() {
-      return this.$store.getters.user
-    }
   }
 };
 </script>
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue b/src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue
index 5ac4c6e..26327a3 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue
@@ -6,39 +6,66 @@
         :url="avatar"
         :admin="user.admin"
         size="100px"
-        emoteSize="30px"
-        animationPadding="5px"
+        emote-size="30px"
+        animation-padding="5px"
       />
       <div class="information">
         <div class="username">
           <strong>Username:</strong>
-          {{user.username}}
+          {{ user.username }}
         </div>
         <div class="tag">
           <strong>Tag:</strong>
-          @{{user.tag}}
+          @{{ user.tag }}
         </div>
       </div>
       <div class="options">
         <input
+          ref="avatarBrowser"
           type="file"
           accept="image/*"
-          ref="avatarBrowser"
-          @change="avatarBrowse"
           class="hidden"
+          @change="avatarBrowse"
         >
-        <div class="option" @click="editAvatarBtn">Edit Avatar</div>
-        <div class="option" @click="changePassword">Change Password</div>
-        <div class="option red" @click="logout">Logout</div>
+        <div
+          class="option"
+          @click="editAvatarBtn"
+        >
+          Edit Avatar
+        </div>
+        <div
+          class="option"
+          @click="changePassword"
+        >
+          Change Password
+        </div>
+        <div
+          class="option red"
+          @click="logout"
+        >
+          Logout
+        </div>
       </div>
     </div>
     <survey />
-    <div class="alert-outer" v-if="alert.show">
+    <div
+      v-if="alert.show"
+      class="alert-outer"
+    >
       <div class="alert">
-        <div class="alert-title">Error</div>
-        <div class="alert-content">{{alert.content}}</div>
+        <div class="alert-title">
+          Error
+        </div>
+        <div class="alert-content">
+          {{ alert.content }}
+        </div>
         <div class="alert-buttons">
-          <div class="alert-button" @click="alert.show = false">Okay</div>
+          <div
+            class="alert-button"
+            @click="alert.show = false"
+          >
+            Okay
+          </div>
         </div>
       </div>
     </div>
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue b/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue
index 8c96916..b3690c4 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue
@@ -1,57 +1,90 @@
 <template>
-  <div class="survey" v-show="previousLoaded">
+  <div
+    v-show="previousLoaded"
+    class="survey"
+  >
     <div class="title">
       <i class="material-icons">error</i>
       Take Survey
     </div>
-    <div class="notice">Note: Everyone will be able to see your survey in your profile.</div>
+    <div class="notice">
+      Note: Everyone will be able to see your survey in your profile.
+    </div>
     <div class="survey-inner">
       <!-- name -->
       <div class="survey-box">
-        <div class="survey-title">What's your name?</div>
-        <input class="survey-input" v-model="selected.name" type="text" placeholder="Name">
+        <div class="survey-title">
+          What's your name?
+        </div>
+        <input
+          v-model="selected.name"
+          class="survey-input"
+          type="text"
+          placeholder="Name"
+        >
       </div>
       <!-- Gender -->
       <div class="survey-box">
         <drop-down
-          name="What is your gender?"
           v-model="selected.gender"
+          name="What is your gender?"
           :items="surveyItems.gender"
         />
       </div>
       <!-- Age -->
       <div class="survey-box">
-        <drop-down name="What is your age?" v-model="selected.age" :items="surveyItems.age"/>
+        <drop-down
+          v-model="selected.age"
+          name="What is your age?"
+          :items="surveyItems.age"
+        />
       </div>
       <!-- Continent -->
       <div class="survey-box">
         <drop-down
-          name="Pick a continent"
           v-model="selected.continent"
+          name="Pick a continent"
           :items="surveyItems.continents"
         />
       </div>
       <!-- Countries -->
       <div class="survey-box">
         <drop-down
-          name="Pick a country"
           v-if="selected.continent != null"
           v-model="selected.country"
+          name="Pick a country"
           :items="filterCountry"
         />
       </div>
       <!-- About me -->
       <div class="survey-box">
-        <div class="survey-title">About me (Formatting allowed)</div>
+        <div class="survey-title">
+          About me (Formatting allowed)
+        </div>
         <textarea
-          class="survey-input textarea"
           v-model="selected.about_me"
+          class="survey-input textarea"
           placeholder="Hobbies, games, animals"
-        ></textarea>
+        />
+      </div>
+      <div
+        v-if="surveyErrorMessage"
+        class="survey-warning"
+      >
+        {{ surveyErrorMessage }}
+      </div>
+      <div
+        v-if="surveyValidMessage"
+        class="survey-valid"
+      >
+        {{ surveyValidMessage }}
+      </div>
+      <div
+        class="button"
+        @click="surveySubmitButton"
+      >
+        Save
       </div>
-      <div class="survey-warning" v-if="surveyErrorMessage">{{surveyErrorMessage}}</div>
-      <div class="survey-valid" v-if="surveyValidMessage">{{surveyValidMessage}}</div>
-      <div class="button" @click="surveySubmitButton">Save</div>
     </div>
   </div>
 </template>
@@ -78,6 +111,43 @@ export default {
       }
     };
   },
+  computed: {
+    filterCountry() {
+      const selectedContinentIndex = this.selected.continent;
+      const selectedContinent = this.surveyItems.continents[
+        selectedContinentIndex
+      ];
+      const code = selectedContinent.code;
+
+      return this.surveyItems.countries.filter(element => {
+        return element.code == code || !element.code;
+      });
+    }
+  },
+  async mounted() {
+    const { ok, error, result } = await userService.getSurvey();
+    if (ok) {
+      this.selected.continent = result.data.result.continent;
+      this.selected.age = result.data.result.age;
+      this.selected.name = result.data.result.name;
+      this.selected.about_me = result.data.result.about_me;
+      this.selected.gender = result.data.result.gender;
+      //filter the country
+      if (result.data.result.country) {
+        setTimeout(() => {
+          const continentCode =
+            surveyItems.continents[this.selected.continent].code;
+          const filter = surveyItems.countries.filter(
+            e => e.code === continentCode
+          );
+          const countryName =
+            surveyItems.countries[result.data.result.country].name;
+          this.selected.country = filter.findIndex(e => e.name === countryName);
+        }, 500);
+      }
+    }
+    this.previousLoaded = true;
+  },
   methods: {
     async surveySubmitButton() {
       this.surveyValidMessage = null;
@@ -134,43 +204,6 @@ export default {
         this.surveyErrorMessage = error.response.data.message;
       }
     }
-  },
-  async mounted() {
-    const { ok, error, result } = await userService.getSurvey();
-    if (ok) {
-      this.selected.continent = result.data.result.continent;
-      this.selected.age = result.data.result.age;
-      this.selected.name = result.data.result.name;
-      this.selected.about_me = result.data.result.about_me;
-      this.selected.gender = result.data.result.gender;
-      //filter the country
-      if (result.data.result.country) {
-        setTimeout(() => {
-          const continentCode =
-            surveyItems.continents[this.selected.continent].code;
-          const filter = surveyItems.countries.filter(
-            e => e.code === continentCode
-          );
-          const countryName =
-            surveyItems.countries[result.data.result.country].name;
-          this.selected.country = filter.findIndex(e => e.name === countryName);
-        }, 500);
-      }
-    }
-    this.previousLoaded = true;
-  },
-  computed: {
-    filterCountry() {
-      const selectedContinentIndex = this.selected.continent;
-      const selectedContinent = this.surveyItems.continents[
-        selectedContinentIndex
-      ];
-      const code = selectedContinent.code;
-
-      return this.surveyItems.countries.filter(element => {
-        return element.code == code || !element.code;
-      });
-    }
   }
 };
 </script>
diff --git a/src/components/app/Popouts/Popouts/TakeSurveyPopout.vue b/src/components/app/Popouts/Popouts/TakeSurveyPopout.vue
index eea8e78..3923d9e 100644
--- a/src/components/app/Popouts/Popouts/TakeSurveyPopout.vue
+++ b/src/components/app/Popouts/Popouts/TakeSurveyPopout.vue
@@ -4,11 +4,25 @@
       <div class="survay-icon">
         <i class="material-icons">error</i>
       </div>
-      <div class="text">There is a survey you can complete about yourself. Would you like to take it?</div>
-      <div class="text">You can always take the survey again by going to settings.</div>
+      <div class="text">
+        There is a survey you can complete about yourself. Would you like to take it?
+      </div>
+      <div class="text">
+        You can always take the survey again by going to settings.
+      </div>
       <div class="buttons">
-        <div class="button warning" @click="laterButtonClickEvent">Later</div>
-        <div class="button valid" @click="TakeThereClickEvent">Take Me There</div>
+        <div
+          class="button warning"
+          @click="laterButtonClickEvent"
+        >
+          Later
+        </div>
+        <div
+          class="button valid"
+          @click="TakeThereClickEvent"
+        >
+          Take Me There
+        </div>
       </div>
     </div>
   </div>
diff --git a/src/components/app/Popouts/Popouts/imageLargePreview.vue b/src/components/app/Popouts/Popouts/imageLargePreview.vue
index 7868b67..341ced0 100644
--- a/src/components/app/Popouts/Popouts/imageLargePreview.vue
+++ b/src/components/app/Popouts/Popouts/imageLargePreview.vue
@@ -1,5 +1,8 @@
 <template>
-  <div ref="background" class="drop-background">
+  <div
+    ref="background"
+    class="drop-background"
+  >
     <div class="img-outer">
       <img :src="$store.getters.popouts.ImagePreviewURL">
     </div>
@@ -7,13 +10,6 @@
 </template>
 <script>
 export default {
-  methods: {
-    backgroundClickEvent(event) {
-      if(event.target.matches('.img-outer') || event.target.matches('.drop-background')){
-        this.$store.dispatch('setImagePreviewURL', event.target.src)
-      }
-    }
-  },
   mounted() {
     this.$refs["background"].addEventListener(
       "click",
@@ -25,6 +21,13 @@ export default {
       "click",
       this.backgroundClickEvent
     );
+  },
+  methods: {
+    backgroundClickEvent(event) {
+      if(event.target.matches('.img-outer') || event.target.matches('.drop-background')){
+        this.$store.dispatch('setImagePreviewURL', event.target.src)
+      }
+    }
   }
 };
 </script>
diff --git a/src/components/app/Popouts/Popouts/uploadDialog.vue b/src/components/app/Popouts/Popouts/uploadDialog.vue
index b32d55d..33bf616 100644
--- a/src/components/app/Popouts/Popouts/uploadDialog.vue
+++ b/src/components/app/Popouts/Popouts/uploadDialog.vue
@@ -2,33 +2,56 @@
   <div class="dark-background">
     <div class="inner">
       <div class="info">
-        <div class="preview-image" v-show="image" ref="preview-image"></div>
-        <div class="file-icon" v-if="!image">
+        <div
+          v-show="image"
+          ref="preview-image"
+          class="preview-image"
+        />
+        <div
+          v-if="!image"
+          class="file-icon"
+        >
           <i class="material-icons">insert_drive_file</i>
         </div>
         <div class="data">
           <div class="name">
             <strong>Name:</strong>
-            {{name}}
+            {{ name }}
           </div>
           <div class="size">
             <strong>Size:</strong>
-            {{size}}
+            {{ size }}
           </div>
         </div>
       </div>
-      <div class="message">Add a message</div>
+      <div class="message">
+        Add a message
+      </div>
       <div class="message-area">
-        <textarea class="chat-input" v-model="message" placeholder></textarea>
+        <textarea
+          v-model="message"
+          class="chat-input"
+          placeholder
+        />
       </div>
       <div class="bottom-panel">
-        <div class="close-button button" @click="closeButton">
+        <div
+          class="close-button button"
+          @click="closeButton"
+        >
           <i class="material-icons">close</i>
-          <div class="text">Cancel</div>
+          <div class="text">
+            Cancel
+          </div>
         </div>
-        <div class="send-button button" @click="send">
+        <div
+          class="send-button button"
+          @click="send"
+        >
           <i class="material-icons">send</i>
-          <div class="text">Send</div>
+          <div class="text">
+            Send
+          </div>
         </div>
       </div>
     </div>
@@ -51,6 +74,33 @@ export default {
       image: false
     };
   },
+  beforeMount() {
+    if (this.popouts.fileToUpload.size == 0) {
+      this.$store.dispatch("setPopoutVisibility", {
+        name: "uploadDialog",
+        visibility: false
+      });
+    }
+    if (!this.GDriveLinked) {
+      this.$store.dispatch("setPopoutVisibility", {
+        name: "uploadDialog",
+        visibility: false
+      });
+      this.$store.dispatch("setPopoutVisibility", {
+        name: "GDLinkMenu",
+        visibility: true
+      });
+    }
+  },
+  mounted() {
+    (this.name = this.popouts.fileToUpload.name),
+      (this.size = filesize(this.popouts.fileToUpload.size)),
+      this.loadFileInfo(this.popouts.fileToUpload);
+    document.addEventListener("keydown", this.keyDownEvent);
+  },
+  destroyed() {
+    document.removeEventListener("keydown", this.keyDownEvent);
+  },
   methods: {
     generateNum(n) {
       var add = 1,
@@ -134,33 +184,6 @@ export default {
       }
     }
   },
-  beforeMount() {
-    if (this.popouts.fileToUpload.size == 0) {
-      this.$store.dispatch("setPopoutVisibility", {
-        name: "uploadDialog",
-        visibility: false
-      });
-    }
-    if (!this.GDriveLinked) {
-      this.$store.dispatch("setPopoutVisibility", {
-        name: "uploadDialog",
-        visibility: false
-      });
-      this.$store.dispatch("setPopoutVisibility", {
-        name: "GDLinkMenu",
-        visibility: true
-      });
-    }
-  },
-  mounted() {
-    (this.name = this.popouts.fileToUpload.name),
-      (this.size = filesize(this.popouts.fileToUpload.size)),
-      this.loadFileInfo(this.popouts.fileToUpload);
-    document.addEventListener("keydown", this.keyDownEvent);
-  },
-  destroyed() {
-    document.removeEventListener("keydown", this.keyDownEvent);
-  },
   computed: {
     ...mapState('settingsModule', ['GDriveLinked']),
     selectedChannelID() {
diff --git a/src/components/app/Popouts/Popouts/userInformationPopout.vue b/src/components/app/Popouts/Popouts/userInformationPopout.vue
index 490e44a..b415621 100644
--- a/src/components/app/Popouts/Popouts/userInformationPopout.vue
+++ b/src/components/app/Popouts/Popouts/userInformationPopout.vue
@@ -1,113 +1,196 @@
 <template>
-  <div class="drop-background" @click="backgroundClickEvent">
+  <div
+    class="drop-background"
+    @click="backgroundClickEvent"
+  >
     <div class="box">
-      <spinner v-if="!user"/>
-      <div class="inner" v-else>
+      <spinner v-if="!user" />
+      <div
+        v-else
+        class="inner"
+      >
         <div class="top">
-
-            <profile-picture
-              class="avatar"
-              size="90px"
-              emoteSize="28px"
-              animationPadding="5px"
-              :admin="user.admin"
-              :url="`${avatarDomain}${user.avatar}`"
-            />
+          <profile-picture
+            class="avatar"
+            size="90px"
+            emote-size="28px"
+            animation-padding="5px"
+            :admin="user.admin"
+            :url="`${avatarDomain}${user.avatar}`"
+          />
 
           <div class="info">
-            <div class="username">{{user.username}}</div>
-            <div class="tag">@{{user.tag}}</div>
+            <div class="username">
+              {{ user.username }}
+            </div>
+            <div class="tag">
+              @{{ user.tag }}
+            </div>
           </div>
         </div>
-        <div class="bottom" v-if="selfUniqueID !== user.uniqueID">
-          <div class="button valid" v-if="this.relationshipStatus == null" @click="AddFriendButton">
-            <div class="material-icons">person_add</div>Add friend
+        <div
+          v-if="selfUniqueID !== user.uniqueID"
+          class="bottom"
+        >
+          <div
+            v-if="this.relationshipStatus == null"
+            class="button valid"
+            @click="AddFriendButton"
+          >
+            <div class="material-icons">
+              person_add
+            </div>Add friend
           </div>
 
-          <div class="button valid" v-if="this.relationshipStatus == 0" @click="RemoveFriendButton">
-            <div class="material-icons">person_add</div>Request Sent!
+          <div
+            v-if="this.relationshipStatus == 0"
+            class="button valid"
+            @click="RemoveFriendButton"
+          >
+            <div class="material-icons">
+              person_add
+            </div>Request Sent!
           </div>
 
-          <div class="button valid" v-if="this.relationshipStatus == 1" @click="AcceptFriendButton">
-            <div class="material-icons">person_add</div>Accept Friend
+          <div
+            v-if="this.relationshipStatus == 1"
+            class="button valid"
+            @click="AcceptFriendButton"
+          >
+            <div class="material-icons">
+              person_add
+            </div>Accept Friend
           </div>
 
-          <div class="button warn" v-if="this.relationshipStatus == 2" @click="RemoveFriendButton">
-            <div class="material-icons">person_add_disabled</div>End Friendship
+          <div
+            v-if="this.relationshipStatus == 2"
+            class="button warn"
+            @click="RemoveFriendButton"
+          >
+            <div class="material-icons">
+              person_add_disabled
+            </div>End Friendship
           </div>
 
-          <div class="button" @click="openChat">
-            <div class="material-icons">chat</div>Send Message
+          <div
+            class="button"
+            @click="openChat"
+          >
+            <div class="material-icons">
+              chat
+            </div>Send Message
           </div>
           <div class="button warn">
-            <div class="material-icons">block</div>Block
+            <div class="material-icons">
+              block
+            </div>Block
           </div>
         </div>
-        <div v-else class="cross"><i class="material-icons">close</i></div>
+        <div
+          v-else
+          class="cross"
+        >
+          <i class="material-icons">close</i>
+        </div>
       </div>
-      <div class="about-me-box" v-if="user && user.about_me">
-        <div class="title">About {{user.username}}</div>
+      <div
+        v-if="user && user.about_me"
+        class="about-me-box"
+      >
+        <div class="title">
+          About {{ user.username }}
+        </div>
         <div class="about-me-inner">
-          <div class="about-me-detail" v-if="user.about_me.name">
+          <div
+            v-if="user.about_me.name"
+            class="about-me-detail"
+          >
             <div class="about-me-title">
-              <div class="main-title-about-me">Name:</div>
-              <div class="emoji-about-me"></div>
-              {{user.about_me.name}}
-            </div>
-          </div>
-
-          <div class="about-me-detail" v-if="user.about_me.gender == 0 || user.about_me.gender">
-            <div class="about-me-title">
-              <div class="main-title-about-me">Gender:</div>
-              <div
-                class="emoji-about-me"
-                v-html="emojiParse(surveyItems.gender[user.about_me.gender].emoji)"
-              ></div>
-              {{surveyItems.gender[user.about_me.gender].name}}
-            </div>
-          </div>
-
-          <div class="about-me-detail" v-if="user.about_me.age == 0 || user.about_me.age">
-            <div class="about-me-title">
-              <div class="main-title-about-me">Age:</div>
-              <div
-                class="emoji-about-me"
-                v-html="emojiParse(surveyItems.age[user.about_me.age].emoji)"
-              ></div>
-              {{surveyItems.age[user.about_me.age].name}}
+              <div class="main-title-about-me">
+                Name:
+              </div>
+              <div class="emoji-about-me" />
+              {{ user.about_me.name }}
             </div>
           </div>
 
           <div
+            v-if="user.about_me.gender == 0 || user.about_me.gender"
             class="about-me-detail"
-            v-if="user.about_me.continent == 0 || user.about_me.continent"
           >
             <div class="about-me-title">
-              <div class="main-title-about-me">Continent:</div>
+              <div class="main-title-about-me">
+                Gender:
+              </div>
+              <div
+                class="emoji-about-me"
+                v-html="emojiParse(surveyItems.gender[user.about_me.gender].emoji)"
+              />
+              {{ surveyItems.gender[user.about_me.gender].name }}
+            </div>
+          </div>
+
+          <div
+            v-if="user.about_me.age == 0 || user.about_me.age"
+            class="about-me-detail"
+          >
+            <div class="about-me-title">
+              <div class="main-title-about-me">
+                Age:
+              </div>
+              <div
+                class="emoji-about-me"
+                v-html="emojiParse(surveyItems.age[user.about_me.age].emoji)"
+              />
+              {{ surveyItems.age[user.about_me.age].name }}
+            </div>
+          </div>
+
+          <div
+            v-if="user.about_me.continent == 0 || user.about_me.continent"
+            class="about-me-detail"
+          >
+            <div class="about-me-title">
+              <div class="main-title-about-me">
+                Continent:
+              </div>
               <div
                 class="emoji-about-me"
                 v-html="emojiParse(surveyItems.continents[user.about_me.continent].emoji)"
-              ></div>
-              {{surveyItems.continents[user.about_me.continent].name}}
+              />
+              {{ surveyItems.continents[user.about_me.continent].name }}
             </div>
           </div>
 
-          <div class="about-me-detail" v-if="user.about_me.country == 0 || user.about_me.country">
+          <div
+            v-if="user.about_me.country == 0 || user.about_me.country"
+            class="about-me-detail"
+          >
             <div class="about-me-title">
-              <div class="main-title-about-me">Country:</div>
+              <div class="main-title-about-me">
+                Country:
+              </div>
               <div
                 class="emoji-about-me"
                 v-html="emojiParse(surveyItems.countries[user.about_me.country].emoji)"
-              ></div>
-              {{surveyItems.countries[user.about_me.country].name}}
+              />
+              {{ surveyItems.countries[user.about_me.country].name }}
             </div>
           </div>
 
-          <div class="about-me-detail" v-if="user.about_me.about_me">
+          <div
+            v-if="user.about_me.about_me"
+            class="about-me-detail"
+          >
             <div class="about-me-title about_me">
-              <div class="main-title-about-me">About Me:</div>
-              <div class="emoji-about-me"></div>
-              <div class="about-me-format" v-html="formatAboutMe(user.about_me.about_me)"></div>
+              <div class="main-title-about-me">
+                About Me:
+              </div>
+              <div class="emoji-about-me" />
+              <div
+                class="about-me-format"
+                v-html="formatAboutMe(user.about_me.about_me)"
+              />
             </div>
           </div>
         </div>
@@ -133,6 +216,26 @@ export default {
       avatarDomain: config.domain + "/avatars/"
     };
   },
+  computed: {
+    selfUniqueID() {
+      return this.$store.getters.user.uniqueID;
+    },
+    uniqueID() {
+      return this.$store.getters.popouts.userInformationPopoutID;
+    },
+    relationshipStatus() {
+      const userUniqueID = this.$store.getters.popouts.userInformationPopoutID;
+      const allFriend = this.$store.getters.user.friends;
+      if (!allFriend[userUniqueID]) return null;
+      return allFriend[userUniqueID].status;
+    }
+  },
+  async mounted() {
+    const { ok, error, result } = await userService.get(this.uniqueID);
+    if (ok) {
+      this.user = result.data.user;
+    }
+  },
   methods: {
     backgroundClickEvent(event) {
       if (event.target.classList.contains("drop-background")) {
@@ -169,26 +272,6 @@ export default {
     formatAboutMe(string) {
       return messageFormatter(string);
     }
-  },
-  async mounted() {
-    const { ok, error, result } = await userService.get(this.uniqueID);
-    if (ok) {
-      this.user = result.data.user;
-    }
-  },
-  computed: {
-    selfUniqueID() {
-      return this.$store.getters.user.uniqueID;
-    },
-    uniqueID() {
-      return this.$store.getters.popouts.userInformationPopoutID;
-    },
-    relationshipStatus() {
-      const userUniqueID = this.$store.getters.popouts.userInformationPopoutID;
-      const allFriend = this.$store.getters.user.friends;
-      if (!allFriend[userUniqueID]) return null;
-      return allFriend[userUniqueID].status;
-    }
   }
 };
 </script>
diff --git a/src/components/app/ServerList.vue b/src/components/app/ServerList.vue
index 4b96fc8..c36aad1 100644
--- a/src/components/app/ServerList.vue
+++ b/src/components/app/ServerList.vue
@@ -1,9 +1,18 @@
 <template>
   <div class="left-panel">
-    <MyMiniInformation/>
+    <MyMiniInformation />
     <div class="list">
-      <server v-for="(data, index) in servers" :key="index.server_id" :server-data="data" @click.native="toggleChannel(data.server_id, $event)" :open-channel="openedServer !== null && openedServer === data.server_id"/>
-      <server mode="ADD_SERVER" @click.native="openAddServer"/>
+      <server
+        v-for="(data, index) in servers"
+        :key="index.server_id"
+        :server-data="data"
+        :open-channel="openedServer !== null && openedServer === data.server_id"
+        @click.native="toggleChannel(data.server_id, $event)"
+      />
+      <server
+        mode="ADD_SERVER"
+        @click.native="openAddServer"
+      />
     </div>
   </div>
 </template>
@@ -22,6 +31,14 @@ export default {
       openedServer: null
     };
   },
+  computed: {
+    servers() {
+      const data = this.$store.getters['servers/servers'];
+      return Object.keys(data).map(key => {
+        return data[key];
+      }).slice().reverse()
+    }
+  },
   methods: {
     openAddServer() {
       this.$store.dispatch("setPopoutVisibility", {
@@ -40,14 +57,6 @@ export default {
         this.$store.dispatch('servers/setSelectedServerID', serverID)
       }
     }
-  },
-  computed: {
-    servers() {
-      const data = this.$store.getters['servers/servers'];
-      return Object.keys(data).map(key => {
-        return data[key];
-      }).slice().reverse()
-    }
   }
 };
 </script>
diff --git a/src/components/app/ServerTemplate/ChannelTemplate.vue b/src/components/app/ServerTemplate/ChannelTemplate.vue
index a5c7d37..53beab7 100644
--- a/src/components/app/ServerTemplate/ChannelTemplate.vue
+++ b/src/components/app/ServerTemplate/ChannelTemplate.vue
@@ -1,13 +1,15 @@
 <template>
-  <div :class="{channel: true,  notifyAnimation: hasNotifications}">
+  <div :class="{channel: true, notifyAnimation: hasNotifications}">
     <i class="material-icons">storage</i>
-    <div class="channel-name">{{ChannelData.name}}</div>
+    <div class="channel-name">
+      {{ ChannelData.name }}
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  props: ["ChannelData"],
+  props: ["channelData"],
   computed: {
     hasNotifications() {
       const notifications = this.$store.getters.notifications;
diff --git a/src/components/app/ServerTemplate/ChannelsList.vue b/src/components/app/ServerTemplate/ChannelsList.vue
index 635dc86..e988974 100644
--- a/src/components/app/ServerTemplate/ChannelsList.vue
+++ b/src/components/app/ServerTemplate/ChannelsList.vue
@@ -1,8 +1,19 @@
 <template>
   <div class="channels-list">
-    <spinner v-if="channels === undefined" size="40"/>
-    <div class="wrapper" v-if="channels">
-      <ChannelTemplate v-for="channel in channels" :key="channel.name" :channel-data="channel" @click.native="openChannel(channel)"/>
+    <spinner
+      v-if="channels === undefined"
+      size="40"
+    />
+    <div
+      v-if="channels"
+      class="wrapper"
+    >
+      <ChannelTemplate
+        v-for="channel in channels"
+        :key="channel.name"
+        :channel-data="channel"
+        @click.native="openChannel(channel)"
+      />
     </div>
   </div>
 </template>
@@ -16,16 +27,18 @@ import {bus} from '@/main.js'
 export default {
   components: { ChannelTemplate, Spinner },
   props: ["serverID"],
-  methods: {
-    openChannel(channel) {
-      const notificationExists = this.$store.getters.notifications.find(n => n.channelID === channel.channelID)
-
-      if (notificationExists && document.hasFocus()) {
-        this.$socket.emit('notification:dismiss', {channelID: channel.channelID});
+  computed: {
+    channels() {
+      const channelsIds = this.$store.getters["servers/channelsIDs"][this.serverID];
+      if (channelsIds) {
+        let channels = [];
+        for ( let channelID of channelsIds ){
+          channels.push(this.$store.getters.channels[channelID])
+        }
+        return channels;
+      } else {
+        return false;
       }
-      
-      bus.$emit('closeLeftMenu');
-      this.$store.dispatch('openChannel', channel)
     }
   },
 
@@ -51,16 +64,16 @@ export default {
       });
     }
   },
-  computed: {
-    channels() {
-      const channelsIds = this.$store.getters["servers/channelsIDs"][this.serverID];
-      if (channelsIds) {
-        let channels = [];
-        for ( let channelID of channelsIds ){
-          channels.push(this.$store.getters.channels[channelID])
-        }
-        return channels;
+  methods: {
+    openChannel(channel) {
+      const notificationExists = this.$store.getters.notifications.find(n => n.channelID === channel.channelID)
+
+      if (notificationExists && document.hasFocus()) {
+        this.$socket.emit('notification:dismiss', {channelID: channel.channelID});
       }
+      
+      bus.$emit('closeLeftMenu');
+      this.$store.dispatch('openChannel', channel)
     }
   }
 };
diff --git a/src/components/app/ServerTemplate/ServerTemplate.vue b/src/components/app/ServerTemplate/ServerTemplate.vue
index 70ec5a8..614a925 100644
--- a/src/components/app/ServerTemplate/ServerTemplate.vue
+++ b/src/components/app/ServerTemplate/ServerTemplate.vue
@@ -1,35 +1,60 @@
 <template>
   <div :class="{server: true, 'add-server': mode === 'ADD_SERVER'}">
     <div :class="{'small-view': true, notifyAnimation: notification}">
-      <profile-picture size="50px" v-if="!mode" :url="tempImage"/>
-      <div class="add-icon" v-if="mode === 'ADD_SERVER'">
+      <profile-picture
+        v-if="!mode"
+        size="50px"
+        :url="tempImage"
+      />
+      <div
+        v-if="mode === 'ADD_SERVER'"
+        class="add-icon"
+      >
         <i class="material-icons">add</i>
       </div>
-      <div class="server-name">{{mode === 'ADD_SERVER'? 'Create / Join Server' : ServerData.name }}</div>
+      <div class="server-name">
+        {{ mode === 'ADD_SERVER'? 'Create / Join Server' : ServerData.name }}
+      </div>
       <div
+        v-if="mode !== 'ADD_SERVER'"
         ref="contextMenuButton"
         class="options-context-button"
-        v-if="mode !== 'ADD_SERVER'"
         @click="showContextMenu = !showContextMenu"
       >
         <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)">Manage Invites</div>
+      <div
+        v-if="showContextMenu"
+        v-click-outside="closeContextMenu"
+        class="options-context-menu"
+      >
+        <div
+          class="menu-button"
+          @click="createInvite(ServerData.server_id)"
+        >
+          Manage Invites
+        </div>
         <div
-          class="menu-button warn"
-          @click="leaveServer(ServerData.server_id)"
           v-if="ServerData.creator.uniqueID !== user.uniqueID"
-        >Leave Server</div>
-        <div
           class="menu-button warn"
           @click="leaveServer(ServerData.server_id)"
+        >
+          Leave Server
+        </div>
+        <div
           v-if="ServerData.creator.uniqueID === user.uniqueID"
-        >Delete Server</div>
+          class="menu-button warn"
+          @click="leaveServer(ServerData.server_id)"
+        >
+          Delete Server
+        </div>
       </div>
     </div>
     <div ref="container">
-      <channels-list v-if="openChannel" :serverID="ServerData.server_id"/>
+      <channels-list
+        v-if="openChannel"
+        :server-i-d="ServerData.server_id"
+      />
     </div>
   </div>
 </template>
@@ -42,9 +67,9 @@ import ServerService from "@/services/ServerService";
 import smoothReflow from "vue-smooth-reflow";
 
 export default {
-  mixins: [smoothReflow],
-  props: ["ServerData", "openChannel", "mode"],
   components: { ProfilePicture, ChannelsList },
+  mixins: [smoothReflow],
+  props: ["serverData", "openChannel", "mode"],
   data() {
     return {
       showContextMenu: false,
@@ -52,6 +77,24 @@ export default {
       tempImage: config.domain + "/avatars/noob"
     };
   },
+  computed: {
+    user() {
+      return this.$store.getters.user;
+    },
+    notification() {
+      const notifications = this.$store.getters.notifications;
+      const channels = this.$store.getters.channels
+      const notification = notifications.find(e => {
+        return channels[e.channelID] && channels[e.channelID].server_id && this.ServerData && channels[e.channelID].server_id === this.ServerData.server_id 
+      })
+      return notification;
+    }
+  },
+  mounted() {
+    this.$smoothReflow({
+      el: this.$refs.container
+    });
+  },
   methods: {
     createInvite(serverID) {
       this.showContextMenu = false;
@@ -73,24 +116,6 @@ export default {
       this.showContextMenu = false;
       const {ok, error, result} = await ServerService.leaveServer(serverID);
     }
-  },
-  mounted() {
-    this.$smoothReflow({
-      el: this.$refs.container
-    });
-  },
-  computed: {
-    user() {
-      return this.$store.getters.user;
-    },
-    notification() {
-      const notifications = this.$store.getters.notifications;
-      const channels = this.$store.getters.channels
-      const notification = notifications.find(e => {
-        return channels[e.channelID] && channels[e.channelID].server_id && this.ServerData && channels[e.channelID].server_id === this.ServerData.server_id 
-      })
-      return notification;
-    }
   }
 };
 </script>
diff --git a/src/components/app/Tabs/DirectMessage.vue b/src/components/app/Tabs/DirectMessage.vue
index 4efdc53..93fafa3 100644
--- a/src/components/app/Tabs/DirectMessage.vue
+++ b/src/components/app/Tabs/DirectMessage.vue
@@ -2,12 +2,12 @@
   <div class="direct-message-tab">
     <transition name="slidein">
       <friends-list
-        class="left-panel"
-        v-click-outside="hideLeftPanel"
         v-show="$mq === 'mobile' && showLeftPanel || ($mq !== 'mobile')"
+        v-click-outside="hideLeftPanel"
+        class="left-panel"
       />
     </transition>
-    <message-panel/>
+    <message-panel />
   </div>
 </template>
 
@@ -27,6 +27,14 @@ export default {
       showLeftPanel: false
     };
   },
+  mounted() {
+    bus.$on("toggleLeftMenu", () => {
+      this.showLeftPanel = !this.showLeftPanel;
+    });
+    bus.$on("closeLeftMenu", () => {
+      this.showLeftPanel = false;
+    });
+  },
   methods: {
     hideLeftPanel(event) {
       if (this.showLeftPanel) {
@@ -35,14 +43,6 @@ export default {
         }
       }
     }
-  },
-  mounted() {
-    bus.$on("toggleLeftMenu", () => {
-      this.showLeftPanel = !this.showLeftPanel;
-    });
-    bus.$on("closeLeftMenu", () => {
-      this.showLeftPanel = false;
-    });
   }
 };
 </script>
diff --git a/src/components/app/Tabs/News.vue b/src/components/app/Tabs/News.vue
index 70fd19b..10658cf 100644
--- a/src/components/app/Tabs/News.vue
+++ b/src/components/app/Tabs/News.vue
@@ -3,34 +3,60 @@
     <div class="change-log">
       <span class="news-title">Changes in this release</span>
 
-      <div class="change" v-for="change in changelog" :key="change.title">
-        <div class="heading" :style="change.headColor ? `background-color: ${change.headColor}` : ``">
-          <div class="date">{{change.date}}</div>
-          <div class="changes-title">{{change.title}}</div>
+      <div
+        v-for="change in changelog"
+        :key="change.title"
+        class="change"
+      >
+        <div
+          class="heading"
+          :style="change.headColor ? `background-color: ${change.headColor}` : ``"
+        >
+          <div class="date">
+            {{ change.date }}
+          </div>
+          <div class="changes-title">
+            {{ change.title }}
+          </div>
         </div>
         <div class="information">
           <div v-if="change.new">
             <strong>What's new?</strong>
             <br>
             <ul>
-              <li v-for="(wnew, index) in change.new" :key="index" v-html="wnew"></li>
+              <li
+                v-for="(wnew, index) in change.new"
+                :key="index"
+                v-html="wnew"
+              />
             </ul>
           </div>
           <div v-if="change.fix">
             <strong>Issues fixed</strong>
             <br>
             <ul>
-              <li v-for="(wfix, index) in change.fix" :key="index" v-html="wfix"></li>
+              <li
+                v-for="(wfix, index) in change.fix"
+                :key="index"
+                v-html="wfix"
+              />
             </ul>
           </div>
           <div v-if="change.next">
             <strong>Up next</strong>
             <br>
             <ul>
-              <li v-for="(wnext, index) in change.next" :key="index" v-html="wnext"></li>
+              <li
+                v-for="(wnext, index) in change.next"
+                :key="index"
+                v-html="wnext"
+              />
             </ul>
           </div>
-          <div v-if="change.msg" v-html="change.msg"></div>
+          <div
+            v-if="change.msg"
+            v-html="change.msg"
+          />
         </div>
       </div>
     </div>
diff --git a/src/components/app/Tabs/Servers.vue b/src/components/app/Tabs/Servers.vue
index 3963b72..8a97e8b 100644
--- a/src/components/app/Tabs/Servers.vue
+++ b/src/components/app/Tabs/Servers.vue
@@ -2,17 +2,17 @@
   <div class="direct-message-tab">
     <transition name="slide-left">
       <server-list
-        class="left-panel"
-        v-click-outside="hideLeftPanel"
         v-show="$mq === 'mobile' && showLeftPanel || ($mq !== 'mobile')"
+        v-click-outside="hideLeftPanel"
+        class="left-panel"
       />
     </transition>
-    <message-panel/>
+    <message-panel />
     <transition name="slide-right">
       <members-list
-        class="members-panel"
-        v-click-outside="hideMembersPanel"
         v-show="($mq === 'members_panel' || $mq === 'mobile') && showMembersPanel || ($mq === 'desktop')"
+        v-click-outside="hideMembersPanel"
+        class="members-panel"
       />
     </transition>
   </div>
@@ -37,6 +37,17 @@ export default {
       showMembersPanel: false
     };
   },
+  mounted() {
+    bus.$on("toggleLeftMenu", () => {
+      this.showLeftPanel = !this.showLeftPanel;
+    });
+    bus.$on("toggleMembersPanel", () => {
+      this.showMembersPanel = !this.showMembersPanel;
+    });
+    bus.$on("closeLeftMenu", () => {
+      this.showLeftPanel = false;
+    });
+  },
   methods: {
     hideLeftPanel(event) {
       if (this.showLeftPanel) {
@@ -52,17 +63,6 @@ export default {
         }
       }
     }
-  },
-  mounted() {
-    bus.$on("toggleLeftMenu", () => {
-      this.showLeftPanel = !this.showLeftPanel;
-    });
-    bus.$on("toggleMembersPanel", () => {
-      this.showMembersPanel = !this.showMembersPanel;
-    });
-    bus.$on("closeLeftMenu", () => {
-      this.showLeftPanel = false;
-    });
   }
 };
 </script>
diff --git a/src/components/app/TypingStatus.vue b/src/components/app/TypingStatus.vue
index 95d638a..1ee9434 100644
--- a/src/components/app/TypingStatus.vue
+++ b/src/components/app/TypingStatus.vue
@@ -1,8 +1,18 @@
 <template>
   <transition name="typing-animate">
-    <div class="typing-status" v-if="formatedRecipients">
-      <object class="animation" type="image/svg+xml" :data="animation"></object>
-      <div class="text" v-html="formatedRecipients"></div>
+    <div
+      v-if="formatedRecipients"
+      class="typing-status"
+    >
+      <object
+        class="animation"
+        type="image/svg+xml"
+        :data="animation"
+      />
+      <div
+        class="text"
+        v-html="formatedRecipients"
+      />
     </div>
   </transition>
 </template>
@@ -15,16 +25,6 @@ export default {
       animation: require("@/assets/typing-indicator.svg")
     };
   },
-  methods: {
-    escapeHtml(unsafe) {
-      return unsafe
-        .replace(/&/g, "&amp;")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;")
-        .replace(/"/g, "&quot;")
-        .replace(/'/g, "&#039;");
-    }
-  },
   computed: {
     formatedRecipients() {
       const arr = Object.values(this.recipients);
@@ -55,6 +55,16 @@ export default {
       }
       return arr;
     }
+  },
+  methods: {
+    escapeHtml(unsafe) {
+      return unsafe
+        .replace(/&/g, "&amp;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#039;");
+    }
   }
 };
 </script>
diff --git a/src/components/app/relationships/AddFriendPanel.vue b/src/components/app/relationships/AddFriendPanel.vue
index 8246925..c4c617a 100644
--- a/src/components/app/relationships/AddFriendPanel.vue
+++ b/src/components/app/relationships/AddFriendPanel.vue
@@ -1,24 +1,52 @@
 <template>
   <div class="add-friend-panel">
-    <div class="panel-title" @click="expanded = !expanded">
+    <div
+      class="panel-title"
+      @click="expanded = !expanded"
+    >
       <div>
-        <i class="material-icons" v-if="!expanded">
+        <i
+          v-if="!expanded"
+          class="material-icons"
+        >
           person_add
         </i>
-        <span>{{expanded ? "Hide" : "Add friend"}}</span>
+        <span>{{ expanded ? "Hide" : "Add friend" }}</span>
       </div>
     </div>
-    <transition name="slide" appear>
-      <div class="add-friend" v-if="expanded">
-        <div class="title">Add friend</div>
-        <div class="info">Type in your friends username and tag. eg: someone@jt4g</div>
-        <div class="infoC">Creators tag: Fishie@azK0</div>
-        <form action="#" @submit.prevent="addFriend">
-          <input type="text" placeholder="username@tag" v-model="input">
-          <loadingButton :loading="currentButtonMessage == 1" :message="buttonMessages[currentButtonMessage]" />
+    <transition
+      name="slide"
+      appear
+    >
+      <div
+        v-if="expanded"
+        class="add-friend"
+      >
+        <div class="title">
+          Add friend
+        </div>
+        <div class="info">
+          Type in your friends username and tag. eg: someone@jt4g
+        </div>
+        <div class="infoC">
+          Creators tag: Fishie@azK0
+        </div>
+        <form
+          action="#"
+          @submit.prevent="addFriend"
+        >
+          <input
+            v-model="input"
+            type="text"
+            placeholder="username@tag"
+          >
+          <loadingButton
+            :loading="currentButtonMessage == 1"
+            :message="buttonMessages[currentButtonMessage]"
+          />
         </form>
         <div :class="{message: true, warning: errorMessage.isError}">
-          {{errorMessage.message}}
+          {{ errorMessage.message }}
         </div>
       </div>
     </transition>
diff --git a/src/components/app/relationships/FriendsTemplate.vue b/src/components/app/relationships/FriendsTemplate.vue
index 8f42a2f..a06690c 100644
--- a/src/components/app/relationships/FriendsTemplate.vue
+++ b/src/components/app/relationships/FriendsTemplate.vue
@@ -1,15 +1,36 @@
 <template>
-  <div :class="{friend: true, notifyAnimation: (notifications && notifications > 0) }" :style="`background: ${status.bgColor};`" @click="openChat">
-    <div class="profile-picture" @click="openUserInformation" :style="`border-color: ${status.statusColor}; background-image: url(${userAvatar})`">
-      <div class="status" :style="`background-image: url(${status.statusURL})`" ></div>
+  <div
+    :class="{friend: true, notifyAnimation: (notifications && notifications > 0) }"
+    :style="`background: ${status.bgColor};`"
+    @click="openChat"
+  >
+    <div
+      class="profile-picture"
+      :style="`border-color: ${status.statusColor}; background-image: url(${userAvatar})`"
+      @click="openUserInformation"
+    >
+      <div
+        class="status"
+        :style="`background-image: url(${status.statusURL})`"
+      />
     </div>
     <div class="information">
-      <div class="username">{{recipient.username}}</div>
-      <div class="status-name" :style="`color: ${status.statusColor}`">{{status.statusName}}</div>
+      <div class="username">
+        {{ recipient.username }}
+      </div>
+      <div
+        class="status-name"
+        :style="`color: ${status.statusColor}`"
+      >
+        {{ status.statusName }}
+      </div>
     </div>
-    <div class="notification" v-if="notifications && notifications >0">
+    <div
+      v-if="notifications && notifications >0"
+      class="notification"
+    >
       <div class="notification-inner">
-        {{notifications}}
+        {{ notifications }}
       </div>
     </div>
   </div>
@@ -24,26 +45,6 @@ import {bus} from '@/main'
 
 export default {
   props: ['username', 'tag',  'channelID',  'uniqueID', 'recipient'],
-  methods: {
-
-    async openChat(event) {
-      if (event.target.closest(".profile-picture")) return;
-      bus.$emit('closeLeftMenu');
-      // dismiss notification if exists 
-      // TODO move this into openchat or something :/
-      if (this.notifications && this.notifications >= 1 && document.hasFocus()) {
-        this.$socket.emit('notification:dismiss', {channelID: this.channelID});
-      }
-      this.$store.dispatch('openChat', {
-        uniqueID: this.recipient.uniqueID,
-        channelID: this.channelID,
-        channelName: this.recipient.username
-      })
-    },
-    openUserInformation() {
-      this.$store.dispatch('setUserInformationPopout', this.recipient.uniqueID)
-    }
-  },
   computed: {
     notifications () {
       const channelID = this.$props.channelID;
@@ -72,6 +73,26 @@ export default {
         bgColor: statuses[parseInt(status)].bgColor
       }
     }
+  },
+  methods: {
+
+    async openChat(event) {
+      if (event.target.closest(".profile-picture")) return;
+      bus.$emit('closeLeftMenu');
+      // dismiss notification if exists 
+      // TODO move this into openchat or something :/
+      if (this.notifications && this.notifications >= 1 && document.hasFocus()) {
+        this.$socket.emit('notification:dismiss', {channelID: this.channelID});
+      }
+      this.$store.dispatch('openChat', {
+        uniqueID: this.recipient.uniqueID,
+        channelID: this.channelID,
+        channelName: this.recipient.username
+      })
+    },
+    openUserInformation() {
+      this.$store.dispatch('setUserInformationPopout', this.recipient.uniqueID)
+    }
   }
 }
 </script>
diff --git a/src/components/app/relationships/OfflineFriends.vue b/src/components/app/relationships/OfflineFriends.vue
index 106db14..7f3efb3 100644
--- a/src/components/app/relationships/OfflineFriends.vue
+++ b/src/components/app/relationships/OfflineFriends.vue
@@ -1,11 +1,25 @@
 <template>
-  <div class="friends" >
-    <div class="tab" @click="expanded = !expanded">
-      <Tab :expanded="expanded" tabname="Offline" />
+  <div class="friends">
+    <div
+      class="tab"
+      @click="expanded = !expanded"
+    >
+      <Tab
+        :expanded="expanded"
+        tabname="Offline"
+      />
     </div>
     <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
+        v-if="expanded"
+        class="list"
+      >
+        <FriendsTemplate
+          v-for="(friend, key) of friends"
+          :key="key"
+          :channel-i-d="friend.channelID"
+          :recipient="friends[key].recipient"
+        />
       </div>
     </transition>
   </div>
diff --git a/src/components/app/relationships/OnlineFriends.vue b/src/components/app/relationships/OnlineFriends.vue
index 6fd9267..f9617eb 100644
--- a/src/components/app/relationships/OnlineFriends.vue
+++ b/src/components/app/relationships/OnlineFriends.vue
@@ -1,11 +1,25 @@
 <template>
-  <div class="friends" >
-    <div class="tab" @click="expanded = !expanded">
-      <Tab :expanded="expanded" tabname="Online" />
+  <div class="friends">
+    <div
+      class="tab"
+      @click="expanded = !expanded"
+    >
+      <Tab
+        :expanded="expanded"
+        tabname="Online"
+      />
     </div>
     <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
+        v-if="expanded"
+        class="list"
+      >
+        <FriendsTemplate
+          v-for="(friend, key) of friends"
+          :key="key"
+          :channel-i-d="friend.channelID"
+          :recipient="friends[key].recipient"
+        />
       </div>
     </transition>
   </div>
@@ -23,9 +37,6 @@ export default {
     return {
       expanded: true
     } 
-  },
-  methods: {
-
   },
   computed: {
     friends() {
@@ -51,6 +62,9 @@ export default {
       });
       return result.filter(friend => friend.status == 2 && (presences[friend.uniqueID] && presences[friend.uniqueID] > 0 ));
     }
+  },
+  methods: {
+
   }
 }
 </script>
diff --git a/src/components/app/relationships/PendingFriends.vue b/src/components/app/relationships/PendingFriends.vue
index c1d5396..3214b4a 100644
--- a/src/components/app/relationships/PendingFriends.vue
+++ b/src/components/app/relationships/PendingFriends.vue
@@ -1,11 +1,27 @@
 <template>
-  <div class="pending-friends" >
-    <div class="tab" @click="expanded = !expanded">
-      <Tab :expanded="expanded" tabname="Pending requests" />
+  <div class="pending-friends">
+    <div
+      class="tab"
+      @click="expanded = !expanded"
+    >
+      <Tab
+        :expanded="expanded"
+        tabname="Pending requests"
+      />
     </div>
     <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
+        v-if="expanded"
+        class="list"
+      >
+        <PendingTemplate
+          v-for="(friend, key) of friends"
+          :key="key"
+          :unique-i-d="friend.recipient.uniqueID"
+          :status="friend.status"
+          :username="friend.recipient.username"
+          :tag="friend.recipient.tag"
+        />
       </div>
     </transition>
   </div>
diff --git a/src/components/app/relationships/PendingTemplate.vue b/src/components/app/relationships/PendingTemplate.vue
index 8efa26b..2807b5a 100644
--- a/src/components/app/relationships/PendingTemplate.vue
+++ b/src/components/app/relationships/PendingTemplate.vue
@@ -1,17 +1,31 @@
 <template>
   <div class="pending-friend">
-    <div class="profile-picture" @click="openUserInformation" :style="`background-image: url(${userAvatar})`"></div>
+    <div
+      class="profile-picture"
+      :style="`background-image: url(${userAvatar})`"
+      @click="openUserInformation"
+    />
     <div class="information">
-      <div class="username">{{$props.username}}</div>
-      <div class="tag">@{{$props.tag}}</div>
+      <div class="username">
+        {{ $props.username }}
+      </div>
+      <div class="tag">
+        @{{ $props.tag }}
+      </div>
     </div>
     <div class="buttons">
-      <div :class="{button: true, accept: true, hide: $props.status == 0}" @click="accept" >
+      <div
+        :class="{button: true, accept: true, hide: $props.status == 0}"
+        @click="accept"
+      >
         <i class="material-icons">
           check
         </i>
       </div>
-      <div class="button decline" @click="deny">
+      <div
+        class="button decline"
+        @click="deny"
+      >
         <i class="material-icons">
           not_interested
         </i>
@@ -26,6 +40,14 @@ import config from '@/config.js'
 
 export default {
   props: ['username', 'tag', 'status', 'uniqueID'],
+  computed: {
+    user() {
+      return this.$store.getters.user.friends[this.$props.uniqueID].recipient;
+    },
+    userAvatar() {
+      return config.domain + "/avatars/" + this.user.avatar
+    },
+  },
   methods: {
     deny() {
       RelationshipService.delete(this.$props.uniqueID)
@@ -36,14 +58,6 @@ export default {
     openUserInformation() {
       this.$store.dispatch('setUserInformationPopout', this.uniqueID)
     }
-  },
-  computed: {
-    user() {
-      return this.$store.getters.user.friends[this.$props.uniqueID].recipient;
-    },
-    userAvatar() {
-      return config.domain + "/avatars/" + this.user.avatar
-    },
   }
 }
 </script>
diff --git a/src/components/app/relationships/RecentFriends.vue b/src/components/app/relationships/RecentFriends.vue
index 2baf4d1..cf61928 100644
--- a/src/components/app/relationships/RecentFriends.vue
+++ b/src/components/app/relationships/RecentFriends.vue
@@ -2,7 +2,12 @@
   <div class="recents">
     <transition name="list">
       <div class="list">
-        <FriendsTemplate v-for="(channel, key) of channels" :key="key" :channelID="channel.channelID" :recipient="channel.recipients[0]"/>
+        <FriendsTemplate
+          v-for="(channel, key) of channels"
+          :key="key"
+          :channel-i-d="channel.channelID"
+          :recipient="channel.recipients[0]"
+        />
       </div>
     </transition>
   </div>
diff --git a/src/components/app/relationships/Tab.vue b/src/components/app/relationships/Tab.vue
index 9f1461a..8fe83e9 100644
--- a/src/components/app/relationships/Tab.vue
+++ b/src/components/app/relationships/Tab.vue
@@ -4,7 +4,7 @@
       expand_more
     </i>
     <div class="tab-name">
-      {{$props.tabname}}
+      {{ $props.tabname }}
     </div>
   </div>
 </template>
diff --git a/src/components/app/statusList.vue b/src/components/app/statusList.vue
index 9c2afc9..6f919f6 100644
--- a/src/components/app/statusList.vue
+++ b/src/components/app/statusList.vue
@@ -1,13 +1,51 @@
 <template>
-    <div class="status-popout">
-        <div class="status-list" @click="changeStatus(1)"><span class="status-icon"><img class="icon" :src="getStatusLogo(1)" /></span><span class="text">Online</span></div>
-        <div class="status-list" @click="changeStatus(2)"><span class="status-icon"><img class="icon" :src="getStatusLogo(2)" /></span><span class="text">Away</span></div>
-        <div class="status-list" @click="changeStatus(3)"><span class="status-icon"><img class="icon" :src="getStatusLogo(3)" /></span><span class="text">Busy</span></div>
-        <div class="status-list" @click="changeStatus(4)"><span class="status-icon"><img class="icon" :src="getStatusLogo(4)" /></span><span class="text">Looking to play</span></div>
-        <div class="status-list" @click="changeStatus(0)"><span class="status-icon"><img class="icon" :src="getStatusLogo(0)" /></span><span class="text">Offline</span></div>
-      
-    
+  <div class="status-popout">
+    <div
+      class="status-list"
+      @click="changeStatus(1)"
+    >
+      <span class="status-icon"><img
+        class="icon"
+        :src="getStatusLogo(1)"
+      ></span><span class="text">Online</span>
     </div>
+    <div
+      class="status-list"
+      @click="changeStatus(2)"
+    >
+      <span class="status-icon"><img
+        class="icon"
+        :src="getStatusLogo(2)"
+      ></span><span class="text">Away</span>
+    </div>
+    <div
+      class="status-list"
+      @click="changeStatus(3)"
+    >
+      <span class="status-icon"><img
+        class="icon"
+        :src="getStatusLogo(3)"
+      ></span><span class="text">Busy</span>
+    </div>
+    <div
+      class="status-list"
+      @click="changeStatus(4)"
+    >
+      <span class="status-icon"><img
+        class="icon"
+        :src="getStatusLogo(4)"
+      ></span><span class="text">Looking to play</span>
+    </div>
+    <div
+      class="status-list"
+      @click="changeStatus(0)"
+    >
+      <span class="status-icon"><img
+        class="icon"
+        :src="getStatusLogo(0)"
+      ></span><span class="text">Offline</span>
+    </div>
+  </div>
 </template>
 
 <script>
diff --git a/src/components/app/uploadsQueue.vue b/src/components/app/uploadsQueue.vue
index 8b17309..f207b53 100644
--- a/src/components/app/uploadsQueue.vue
+++ b/src/components/app/uploadsQueue.vue
@@ -1,17 +1,30 @@
 <template>
   <div class="uploads-queue">
-    <div class="upload" v-for="(upload, index) in $props.queue" :key="index">
+    <div
+      v-for="(upload, index) in $props.queue"
+      :key="index"
+      class="upload"
+    >
       <div class="icon">
         <i class="material-icons">insert_drive_file</i>
       </div>
       <div class="information">
-        <div class="info">{{upload.name}}</div>
-        <div class="info size">{{upload.size}}</div>
+        <div class="info">
+          {{ upload.name }}
+        </div>
+        <div class="info size">
+          {{ upload.size }}
+        </div>
         <div class="progress">
           <div class="progress-bar">
-            <div class="progress-bar-inner" :style="{width: `${upload.percent}%`}"></div>
+            <div
+              class="progress-bar-inner"
+              :style="{width: `${upload.percent}%`}"
+            />
+          </div>
+          <div class="percent">
+            {{ upload.percent }}%
           </div>
-          <div class="percent">{{upload.percent}}%</div>
         </div>
       </div>
     </div>
diff --git a/src/components/homePage/Popout.vue b/src/components/homePage/Popout.vue
index cd3fe7d..0714e2a 100644
--- a/src/components/homePage/Popout.vue
+++ b/src/components/homePage/Popout.vue
@@ -1,17 +1,34 @@
 <template>
   <div class="profile-popout">
-    <div class="triangle"></div>
+    <div class="triangle" />
     <div class="inner">
-      <profile-picture v-if="user" class="avatar" :url="avatarDomain + user.avatar" :admin="user.admin" size="40px" emoteSize="17px" />
+      <profile-picture
+        v-if="user"
+        class="avatar"
+        :url="avatarDomain + user.avatar"
+        :admin="user.admin"
+        size="40px"
+        emote-size="17px"
+      />
       <div class="information">
         <div
           class="username"
-        >{{user.username}}</div>
-        <div class="tag">@{{user.tag}}</div>
+        >
+          {{ user.username }}
+        </div>
+        <div class="tag">
+          @{{ user.tag }}
+        </div>
       </div>
       <div class="buttons">
-        <i class="material-icons warn" @click="logOut">exit_to_app</i>
-        <i class="material-icons" @click="openApp">message</i>
+        <i
+          class="material-icons warn"
+          @click="logOut"
+        >exit_to_app</i>
+        <i
+          class="material-icons"
+          @click="openApp"
+        >message</i>
       </div>
     </div>
   </div>
@@ -22,8 +39,8 @@ import ProfilePicture from "@/components/ProfilePictureTemplate.vue";
 import config from "@/config.js";
 
 export default {
-  props: ["user"],
   components: { ProfilePicture },
+  props: ["user"],
   data() {
     return {
       avatarDomain: config.domain + "/avatars/"
diff --git a/src/router.js b/src/router.js
index 926094c..7d30d4b 100644
--- a/src/router.js
+++ b/src/router.js
@@ -4,7 +4,7 @@ Vue.use(VueRouter);
 import { store } from "./store/index";
 import VueSocketio from "vue-socket.io-extended";
 import io from "socket.io-client";
-import config from "./config";
+import config from "./config.js";
 import VueMq from "vue-mq";
 
 // import MainApp from '../src/views/App.vue'
@@ -58,6 +58,7 @@ export const router = new VueRouter({
         if (!localStorage.getItem("hauthid")) {
           return router.push({ path: "/login" });
         }
+
         Vue.use(
           VueSocketio,
           io(config.socketIP, {
diff --git a/src/views/GDriveCallback.vue b/src/views/GDriveCallback.vue
index 24eaf1e..ba1607d 100644
--- a/src/views/GDriveCallback.vue
+++ b/src/views/GDriveCallback.vue
@@ -1,7 +1,7 @@
 <template>
-    <div>
-        Redirecting...
-    </div>
+  <div>
+    Redirecting...
+  </div>
 </template>
 
 <script>
diff --git a/src/views/HomePage - Legacy.vue b/src/views/HomePage - Legacy.vue
index a92eaac..21eeaba 100644
--- a/src/views/HomePage - Legacy.vue	
+++ b/src/views/HomePage - Legacy.vue	
@@ -1,46 +1,77 @@
 <template>
-<div id="app">
-  <vue-headful title="Nertivia" description="Nertivia Chat Client"/>
-  <div class="background-image"></div>
-  <div class="layout">
-    <div class="small-view-nav-bar">
-      <div class="small-logo"></div>
-      <div class="small-title">Nertivia</div>
-      <div class="show-menu-button" @click="showMobileMenu = !showMobileMenu">
+  <div id="app">
+    <vue-headful
+      title="Nertivia"
+      description="Nertivia Chat Client"
+    />
+    <div class="background-image" />
+    <div class="layout">
+      <div class="small-view-nav-bar">
+        <div class="small-logo" />
+        <div class="small-title">
+          Nertivia
+        </div>
+        <div
+          class="show-menu-button"
+          @click="showMobileMenu = !showMobileMenu"
+        >
           <i class="material-icons">
-              menu
+            menu
           </i>
+        </div>
       </div>
-    </div>
-    <div class="panels">
+      <div class="panels">
         <div class="left-panel">
-
-          <div class="title">The best chat client that wont restrict you from important and fun features.</div>
-          <img src="../assets/graphics/HomeGraphics.png" class="graphic-app" />
-          <div class="change-log-mini" @click="showChangeLog = true">
-            <div class="change-title">Change log <span style="font-size: 15px; color: rgba(211, 211, 211, 0.774);">Click for details</span></div>
+          <div class="title">
+            The best chat client that wont restrict you from important and fun features.
+          </div>
+          <img
+            src="../assets/graphics/HomeGraphics.png"
+            class="graphic-app"
+          >
+          <div
+            class="change-log-mini"
+            @click="showChangeLog = true"
+          >
+            <div class="change-title">
+              Change log <span style="font-size: 15px; color: rgba(211, 211, 211, 0.774);">Click for details</span>
+            </div>
             <div class="change-list">
-              <div class="change" v-for="change in changelogFiltered" :key="change.title">
-                <div class="notable-changes">{{change.shortTitle}}</div>
-                <div class="change-date">{{change.date}}</div>
+              <div
+                v-for="change in changelogFiltered"
+                :key="change.title"
+                class="change"
+              >
+                <div class="notable-changes">
+                  {{ change.shortTitle }}
+                </div>
+                <div class="change-date">
+                  {{ change.date }}
+                </div>
               </div>
             </div>
           </div>
           <div class="twitter-outer">
             <twitter class="twitter">
-              <div slot="loading">loading .....</div>
-              <a class="twitter-timeline" data-height="500" data-theme="dark" href="https://twitter.com/NertiviaApp?ref_src=twsrc%5Etfw">Tweets by NertiviaApp</a>
+              <div slot="loading">
+                loading .....
+              </div>
+              <a
+                class="twitter-timeline"
+                data-height="500"
+                data-theme="dark"
+                href="https://twitter.com/NertiviaApp?ref_src=twsrc%5Etfw"
+              >Tweets by NertiviaApp</a>
             </twitter>
           </div>
-
         </div>
-        <RightPanel  :class="{'show-menu-content': showMobileMenu }" />
+        <RightPanel :class="{'show-menu-content': showMobileMenu }" />
+      </div>
     </div>
+    <transition name="fade">
+      <ChangeLog v-if="showChangeLog" />
+    </transition>
   </div>
-  <transition name="fade">
-    <ChangeLog v-if="showChangeLog"/>
-  </transition>
-</div>
 </template>
 
 <script>
@@ -63,15 +94,15 @@ export default {
       changelog
     }
   },
-  mounted() {
-    bus.$on('closeChangeLog', () => {
-      this.showChangeLog = false;
-    })
-  },
   computed: {
     changelogFiltered() {
       return this.changelog.slice(0, 3)
     }
+  },
+  mounted() {
+    bus.$on('closeChangeLog', () => {
+      this.showChangeLog = false;
+    })
   }
 
 }
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 8cc9b47..245b847 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -1,48 +1,113 @@
 <template>
   <div id="app">
-    <vue-headful title="Nertivia" description="Nertivia Chat Client"/>
-    <div class="background-image" ref="backgroundImage"></div>
-    <spinner v-if="!showPage"/>
-    <div class="content" v-if="showPage">
-      <transition name="fall-down" appear>
+    <vue-headful
+      title="Nertivia"
+      description="Nertivia Chat Client"
+    />
+    <div
+      ref="backgroundImage"
+      class="background-image"
+    />
+    <spinner v-if="!showPage" />
+    <div
+      v-if="showPage"
+      class="content"
+    >
+      <transition
+        name="fall-down"
+        appear
+      >
         <div class="header">
-          <div class="logo"></div>
-          <div class="name">Nertivia</div>
+          <div class="logo" />
+          <div class="name">
+            Nertivia
+          </div>
           <div class="links">
-            <div class="link" @click="signupPage" v-if="!loggedIn">Sign up</div>
-            <div class="link" @click="loginPage" v-if="!loggedIn">Login</div>
-            <spinner class="spinner-profile" :size="50" v-if="loggedIn && !user" />
-            <profile-picture class="avatar" v-if="loggedIn && user" @click.native="showPopout = !showPopout" :hover='true' :url="avatarDomain + user.avatar" :admin="user.admin" size="40px" emoteSize="17px"/>
+            <div
+              v-if="!loggedIn"
+              class="link"
+              @click="signupPage"
+            >
+              Sign up
+            </div>
+            <div
+              v-if="!loggedIn"
+              class="link"
+              @click="loginPage"
+            >
+              Login
+            </div>
+            <spinner
+              v-if="loggedIn && !user"
+              class="spinner-profile"
+              :size="50"
+            />
+            <profile-picture
+              v-if="loggedIn && user"
+              class="avatar"
+              :hover="true"
+              :url="avatarDomain + user.avatar"
+              :admin="user.admin"
+              size="40px"
+              emote-size="17px"
+              @click.native="showPopout = !showPopout"
+            />
             <transition name="fall-down-fast">
-              <Popout v-if="user && loggedIn && showPopout" @logout="logOut" :user="user" v-click-outside="closePopout"/>
+              <Popout
+                v-if="user && loggedIn && showPopout"
+                v-click-outside="closePopout"
+                :user="user"
+                @logout="logOut"
+              />
             </transition>
           </div>
         </div>
       </transition>
-      <transition name="side-in" appear>
+      <transition
+        name="side-in"
+        appear
+      >
         <div class="inner-content">
           <div
             class="title"
-          >The best chat client that won't restrict you from important and fun features.</div>
-          <img class="graphic" src="@/assets/graphics/HomeGraphics2.png">
+          >
+            The best chat client that won't restrict you from important and fun features.
+          </div>
+          <img
+            class="graphic"
+            src="@/assets/graphics/HomeGraphics2.png"
+          >
           <div class="buttons">
-            <div class="button" @click="openApp">Open In Browser</div>
+            <div
+              class="button"
+              @click="openApp"
+            >
+              Open In Browser
+            </div>
             <!-- <div class="button" >Download App</div> -->
           </div>
           <div class="features-list">
-            <div class="title">Things you can do in Nertivia</div>
+            <div class="title">
+              Things you can do in Nertivia
+            </div>
             <div class="list">
               <div class="feature">
                 <i class="material-icons">insert_drive_file</i>
-                <div class="description">1GB per file limit, upload huge files!</div>
+                <div class="description">
+                  1GB per file limit, upload huge files!
+                </div>
               </div>
               <div class="feature">
                 <i class="material-icons">face</i>
-                <div class="description">Free custom gif emojis and profile picture.</div>
+                <div class="description">
+                  Free custom gif emojis and profile picture.
+                </div>
               </div>
               <div class="feature">
                 <i class="material-icons">storage</i>
-                <div class="description">Make your own servers with channels.</div>
+                <div class="description">
+                  Make your own servers with channels.
+                </div>
               </div>
             </div>
           </div>
@@ -70,6 +135,11 @@ export default {
       avatarDomain: config.domain + '/avatars/'
     };
   },
+  async mounted() {
+    if (this.loggedIn) this.getUser();
+    this.preloadImages();
+
+  },
   methods: {
     closePopout(event) {
       if (!event.target.closest('.avatar'))
@@ -135,11 +205,6 @@ export default {
         this.user = result.data.user;
       }
     }
-  },
-  async mounted() {
-    if (this.loggedIn) this.getUser();
-    this.preloadImages();
-
   }
 };
 </script>
diff --git a/src/views/Invites.vue b/src/views/Invites.vue
index 84e2723..43e1cb5 100644
--- a/src/views/Invites.vue
+++ b/src/views/Invites.vue
@@ -1,20 +1,46 @@
 <template>
   <div id="app">
     <div class="app-content">
-      <header-login v-on:isDay="isDayEvent"/>
+      <header-login @isDay="isDayEvent" />
       <div class="content">
-        <transition appear name="fade-up">
-          <div :class="{box: true, red: server === undefined}" >
-            <spinner v-if="server === null"/>
+        <transition
+          appear
+          name="fade-up"
+        >
+          <div :class="{box: true, red: server === undefined}">
+            <spinner v-if="server === null" />
             <div v-if="server === undefined">
-              <div class="invalid">{{errorMsg}}</div>
+              <div class="invalid">
+                {{ errorMsg }}
+              </div>
             </div>
-            <div class="server" v-if="server">
-              <profile-picture class="avatar" size="100px" :url="tempImage"/>
-              <div class="server-name">{{server.name}}</div>
+            <div
+              v-if="server"
+              class="server"
+            >
+              <profile-picture
+                class="avatar"
+                size="100px"
+                :url="tempImage"
+              />
+              <div class="server-name">
+                {{ server.name }}
+              </div>
               <div class="buttons">
-                <div class="button join-button" @click="joinServerButton" v-if="loggedIn">Join {{server.name}}</div>
-                <div class="button join-button" v-else @click="loginButton">Login to join</div>
+                <div
+                  v-if="loggedIn"
+                  class="button join-button"
+                  @click="joinServerButton"
+                >
+                  Join {{ server.name }}
+                </div>
+                <div
+                  v-else
+                  class="button join-button"
+                  @click="loginButton"
+                >
+                  Login to join
+                </div>
               </div>
             </div>
           </div>
@@ -23,9 +49,9 @@
     </div>
     <div class="background">
       <div :class="{background: true, 'night-background': true, chosen: !isDay}">
-        <particlesJS class="particles"/>
+        <particlesJS class="particles" />
       </div>
-      <div class="background day-background"></div>
+      <div class="background day-background" />
     </div>
   </div>
 </template>
@@ -48,6 +74,20 @@ export default {
       errorMsg: ""
     };
   },
+  async mounted() {
+    const inviteID = this.$route.params.invite_id;
+    const { ok, error, result } = await ServerService.getInviteDetail(inviteID);
+    if (ok) {
+      this.server = result.data;
+    } else {
+      if (error.response === undefined) {
+        this.errorMsg = "Cannot connect to server. Try again later.";
+      } else {
+        this.errorMsg = "The invite code is either invalid, expired or blocked.";
+      }
+      this.server = undefined;
+    }
+  },
   methods: {
     isDayEvent(data) {
       this.isDay = data;
@@ -84,20 +124,6 @@ export default {
       const inviteID = this.$route.params.invite_id;
       this.$router.push(`/login?to=invites&id=${inviteID}`);
     }
-  },
-  async mounted() {
-    const inviteID = this.$route.params.invite_id;
-    const { ok, error, result } = await ServerService.getInviteDetail(inviteID);
-    if (ok) {
-      this.server = result.data;
-    } else {
-      if (error.response === undefined) {
-        this.errorMsg = "Cannot connect to server. Try again later.";
-      } else {
-        this.errorMsg = "The invite code is either invalid, expired or blocked.";
-      }
-      this.server = undefined;
-    }
   }
 };
 </script>
diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
index fe40231..90df8fd 100644
--- a/src/views/LoginPage.vue
+++ b/src/views/LoginPage.vue
@@ -1,50 +1,95 @@
 <template>
   <div id="app">
     <div class="app-content">
-      <header-login v-on:isDay="isDayEvent"/>
+      <header-login @isDay="isDayEvent" />
       <div class="content">
-        <transition appear name="fade-up">
-          <div class="box" v-if="visible">
+        <transition
+          appear
+          name="fade-up"
+        >
+          <div
+            v-if="visible"
+            class="box"
+          >
             <div class="title">
               <i class="material-icons">account_circle</i>
               Login
             </div>
-            <div class="info">Login to access Nertivia</div>
-            <form action="#" @submit.prevent="submitForm" v-if="!showCaptcha">
+            <div class="info">
+              Login to access Nertivia
+            </div>
+            <form
+              v-if="!showCaptcha"
+              action="#"
+              @submit.prevent="submitForm"
+            >
               <div class="input">
                 <div class="input-text">
                   Email
-                  <span class="error" v-if="email.alert">- {{email.alert}}</span>
+                  <span
+                    v-if="email.alert"
+                    class="error"
+                  >- {{ email.alert }}</span>
                 </div>
-                <input type="email" v-model="email.value" placeholder="Email">
+                <input
+                  v-model="email.value"
+                  type="email"
+                  placeholder="Email"
+                >
               </div>
               <div class="input">
                 <div class="input-text">
                   Password
-                  <span class="error" v-if="password.alert">- {{password.alert}}</span>
+                  <span
+                    v-if="password.alert"
+                    class="error"
+                  >- {{ password.alert }}</span>
                 </div>
                 <input
-                  type="password"
                   v-model="password.value"
+                  type="password"
                   autocomplete="password"
                   placeholder="Password"
                 >
               </div>
 
-              <span class="error" style="text-align: center;" v-if="otherError">{{otherError}}</span>
+              <span
+                v-if="otherError"
+                class="error"
+                style="text-align: center;"
+              >{{ otherError }}</span>
               <div class="buttons">
-                <button type="submit" :class="{button: true, deactive: deactive}">Login</button>
-                <button class="button register-button" @click.prevent="registerButton">I'm new!</button>
+                <button
+                  type="submit"
+                  :class="{button: true, deactive: deactive}"
+                >
+                  Login
+                </button>
+                <button
+                  class="button register-button"
+                  @click.prevent="registerButton"
+                >
+                  I'm new!
+                </button>
               </div>
             </form>
-            <div class="captcha-box" v-if="showCaptcha">
+            <div
+              v-if="showCaptcha"
+              class="captcha-box"
+            >
               <div class="input captcha-input">
                 <div class="input-text">
                   Beep Boop
-                  <span class="error" v-if="reCaptcha.alert">- {{reCaptcha.alert}}</span>
+                  <span
+                    v-if="reCaptcha.alert"
+                    class="error"
+                  >- {{ reCaptcha.alert }}</span>
                 </div>
                 <div class="captcha">
-                  <Recaptcha ref="recaptcha" @verify="captchaSubmit"/>
+                  <Recaptcha
+                    ref="recaptcha"
+                    @verify="captchaSubmit"
+                  />
                 </div>
               </div>
             </div>
@@ -53,8 +98,10 @@
       </div>
     </div>
     <div class="background">
-      <div :class="{background: true, 'night-background': true, chosen: !isDay}"><particlesJS class="particles"/></div>
-      <div class="background day-background"></div>
+      <div :class="{background: true, 'night-background': true, chosen: !isDay}">
+        <particlesJS class="particles" />
+      </div>
+      <div class="background day-background" />
     </div>
   </div>
 </template>
diff --git a/src/views/RegisterPage.vue b/src/views/RegisterPage.vue
index 877bee2..8afd741 100644
--- a/src/views/RegisterPage.vue
+++ b/src/views/RegisterPage.vue
@@ -1,32 +1,55 @@
 <template>
   <div id="app">
     <div class="app-content">
-      <header-login v-on:isDay="isDayEvent"/>
+      <header-login @isDay="isDayEvent" />
       <div class="content">
-        <transition appear name="fade-up">
-          <div class="box" v-if="visible">
+        <transition
+          appear
+          name="fade-up"
+        >
+          <div
+            v-if="visible"
+            class="box"
+          >
             <div class="title">
               <i class="material-icons">account_circle</i>
               Register
             </div>
-            <div class="info">Welcome, new user! Hope you enjoy Nertivia!</div>
-            <form action="#" @submit.prevent="formSubmit" v-if="!showCaptcha">
+            <div class="info">
+              Welcome, new user! Hope you enjoy Nertivia!
+            </div>
+            <form
+              v-if="!showCaptcha"
+              action="#"
+              @submit.prevent="formSubmit"
+            >
               <div class="input">
                 <div class="input-text">
                   Email
-                  <span class="error" v-if="email.alert">- {{email.alert}}</span>
+                  <span
+                    v-if="email.alert"
+                    class="error"
+                  >- {{ email.alert }}</span>
                 </div>
-                <input type="email" v-model="email.value" placeholder="Email" autocomplete="off">
+                <input
+                  v-model="email.value"
+                  type="email"
+                  placeholder="Email"
+                  autocomplete="off"
+                >
               </div>
 
               <div class="input">
                 <div class="input-text">
                   Username
-                  <span class="error" v-if="username.alert">- {{username.alert}}</span>
+                  <span
+                    v-if="username.alert"
+                    class="error"
+                  >- {{ username.alert }}</span>
                 </div>
                 <input
-                  type="text"
                   v-model="username.value"
+                  type="text"
                   placeholder="Username"
                   autocomplete="off"
                 >
@@ -35,29 +58,51 @@
               <div class="input">
                 <div class="input-text">
                   Password
-                  <span class="error" v-if="password.alert">- {{password.alert}}</span>
+                  <span
+                    v-if="password.alert"
+                    class="error"
+                  >- {{ password.alert }}</span>
                 </div>
                 <input
-                  type="password"
                   v-model="password.value"
+                  type="password"
                   autocomplete="off"
                   placeholder="Password"
                 >
               </div>
-              <span class="error" style="text-align: center;" v-if="otherError">{{otherError}}</span>
+              <span
+                v-if="otherError"
+                class="error"
+                style="text-align: center;"
+              >{{ otherError }}</span>
               <div class="buttons">
-                <button type="submit" :class="{button: true, deactive: deactive}">Register</button>
+                <button
+                  type="submit"
+                  :class="{button: true, deactive: deactive}"
+                >
+                  Register
+                </button>
                 <button
                   class="button register-button"
                   @click.prevent="loginButton"
-                >I'm already a user!</button>
+                >
+                  I'm already a user!
+                </button>
               </div>
             </form>
-            <div class="captcha-box" v-if="showCaptcha">
+            <div
+              v-if="showCaptcha"
+              class="captcha-box"
+            >
               <div class="input captcha-input">
-                <div class="input-text">Beep Boop</div>
+                <div class="input-text">
+                  Beep Boop
+                </div>
                 <div class="captcha">
-                  <Recaptcha ref="recaptcha" @verify="captchaSubmit"/>
+                  <Recaptcha
+                    ref="recaptcha"
+                    @verify="captchaSubmit"
+                  />
                 </div>
               </div>
             </div>
@@ -66,8 +111,10 @@
       </div>
     </div>
     <div class="background">
-      <div :class="{background: true, 'night-background': true, chosen: !isDay}"><particlesJS class="particles"/></div>
-      <div class="background day-background"></div>
+      <div :class="{background: true, 'night-background': true, chosen: !isDay}">
+        <particlesJS class="particles" />
+      </div>
+      <div class="background day-background" />
     </div>
   </div>
 </template>
diff --git a/yarn.lock b/yarn.lock
index a8a3d19..0a88db6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -29,6 +29,26 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
+"@babel/core@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.5.0.tgz#6ed6a2881ad48a732c5433096d96d1b0ee5eb734"
+  integrity sha512-6Isr4X98pwXqHvtigw71CKgmhL1etZjPs5A67jL/w0TkLM9eqmFR40YrnJvEc1WnMZFsskjsmid8bHZyxKEAnw==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/generator" "^7.5.0"
+    "@babel/helpers" "^7.5.0"
+    "@babel/parser" "^7.5.0"
+    "@babel/template" "^7.4.4"
+    "@babel/traverse" "^7.5.0"
+    "@babel/types" "^7.5.0"
+    convert-source-map "^1.1.0"
+    debug "^4.1.0"
+    json5 "^2.1.0"
+    lodash "^4.17.11"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
 "@babel/generator@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.4.4.tgz#174a215eb843fc392c7edcaabeaa873de6e8f041"
@@ -40,6 +60,17 @@
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
+"@babel/generator@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.5.0.tgz#f20e4b7a91750ee8b63656073d843d2a736dca4a"
+  integrity sha512-1TTVrt7J9rcG5PMjvO7VEG3FrEoEJNHxumRq66GemPmzboLWtIjjcJgk8rokuAS7IiRSpgVSu5Vb9lc99iJkOA==
+  dependencies:
+    "@babel/types" "^7.5.0"
+    jsesc "^2.5.1"
+    lodash "^4.17.11"
+    source-map "^0.5.0"
+    trim-right "^1.0.1"
+
 "@babel/helper-annotate-as-pure@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.0.0.tgz#323d39dd0b50e10c7c06ca7d7638e6864d8c5c32"
@@ -216,6 +247,15 @@
     "@babel/traverse" "^7.4.4"
     "@babel/types" "^7.4.4"
 
+"@babel/helpers@^7.5.0":
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.5.2.tgz#97424dc82fc0041f4c751119b4d2b1ec68cdb5ba"
+  integrity sha512-NDkkTqDvgFUeo8djXBOiwO/mFjownznOWvmP9hvNdfiFUmx0nwNOqxuaTTbxjH744eQsD9M5ubC7gdANBvIWPw==
+  dependencies:
+    "@babel/template" "^7.4.4"
+    "@babel/traverse" "^7.5.0"
+    "@babel/types" "^7.5.0"
+
 "@babel/highlight@^7.0.0":
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0.tgz#f710c38c8d458e6dd9a201afb637fcb781ce99e4"
@@ -230,6 +270,11 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.4.5.tgz#04af8d5d5a2b044a2a1bffacc1e5e6673544e872"
   integrity sha512-9mUqkL1FF5T7f0WDFfAoDdiMVPWsdD1gZYzSnaXsxUCUqzuch/8of9G3VUSNiZmMBoRxT3neyVsqeiL/ZPcjew==
 
+"@babel/parser@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.5.0.tgz#3e0713dff89ad6ae37faec3b29dcfc5c979770b7"
+  integrity sha512-I5nW8AhGpOXGCCNYGc+p7ExQIBxRFnS2fd/d862bNOKvmoEPjYPcfIjsfdy0ujagYOIYPczKgD9l3FsgTkAzKA==
+
 "@babel/plugin-proposal-async-generator-functions@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.2.0.tgz#b289b306669dce4ad20b0252889a15768c9d417e"
@@ -658,6 +703,21 @@
     globals "^11.1.0"
     lodash "^4.17.11"
 
+"@babel/traverse@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.5.0.tgz#4216d6586854ef5c3c4592dab56ec7eb78485485"
+  integrity sha512-SnA9aLbyOCcnnbQEGwdfBggnc142h/rbqqsXcaATj2hZcegCl903pUD/lfpsNBlBSuWow/YDfRyJuWi2EPR5cg==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    "@babel/generator" "^7.5.0"
+    "@babel/helper-function-name" "^7.1.0"
+    "@babel/helper-split-export-declaration" "^7.4.4"
+    "@babel/parser" "^7.5.0"
+    "@babel/types" "^7.5.0"
+    debug "^4.1.0"
+    globals "^11.1.0"
+    lodash "^4.17.11"
+
 "@babel/types@^7.0.0", "@babel/types@^7.2.0", "@babel/types@^7.4.4":
   version "7.4.4"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.4.4.tgz#8db9e9a629bb7c29370009b4b779ed93fe57d5f0"
@@ -667,6 +727,15 @@
     lodash "^4.17.11"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.5.0.tgz#e47d43840c2e7f9105bc4d3a2c371b4d0c7832ab"
+  integrity sha512-UFpDVqRABKsW01bvw7/wSUe56uy6RXM5+VJibVVAybDGxEW25jdwiFJEf7ASvSaC7sN7rbE/l3cLp2izav+CtQ==
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.17.11"
+    to-fast-properties "^2.0.0"
+
 "@hapi/address@2.x.x":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@hapi/address/-/address-2.0.0.tgz#9f05469c88cb2fd3dcd624776b54ee95c312126a"
@@ -1229,7 +1298,7 @@ ajv@^5.2.3, ajv@^5.3.0:
     fast-json-stable-stringify "^2.0.0"
     json-schema-traverse "^0.3.0"
 
-ajv@^6.1.0, ajv@^6.5.5, ajv@^6.9.1:
+ajv@^6.1.0, ajv@^6.5.5:
   version "6.10.0"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.10.0.tgz#90d0d54439da587cd7e843bfb7045f50bd22bdf1"
   integrity sha512-nffhOpkymDECQyR0mnsUtoCE8RlX38G0rYP+wgLWFyZuUyuuojSSvi/+euOiQBIn63whYwYVIIH1TvE3tu4OEg==
@@ -1249,7 +1318,7 @@ ansi-colors@^3.0.0:
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.4.tgz#e3a3da4bfbae6c86a9c285625de124a234026fbf"
   integrity sha512-hHUXGagefjN2iRrID63xckIvotOXOojhQKWIPUZ4mNUZ9nLZW+7FMNoE1lOkEhNWYsx/7ysGIuJYCiMAA9FnrA==
 
-ansi-escapes@^3.0.0, ansi-escapes@^3.2.0:
+ansi-escapes@^3.0.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/ansi-escapes/-/ansi-escapes-3.2.0.tgz#8780b98ff9dbf5638152d1f1fe5c1d7b4442976b"
   integrity sha512-cBhpre4ma+U0T1oM5fXg7Dy1Jw7zzwv7lt/GoCpr+hDQJoYnKVPLL4dCvSEFMmQurOQvSrwT7SL/DAlhBI97RQ==
@@ -1420,11 +1489,6 @@ assign-symbols@^1.0.0:
   resolved "https://registry.yarnpkg.com/assign-symbols/-/assign-symbols-1.0.0.tgz#59667f41fadd4f20ccbc2bb96b8d4f7f78ec0367"
   integrity sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=
 
-astral-regex@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
-  integrity sha512-+Ryf6g3BKoRc7jfp7ad8tM4TtMiaWvbF/1/sQcZPkkS7ag3D5nMBCe2UfOTONtAkaG0tO0ij3C5Lwmf1EiyjHg==
-
 async-each@^1.0.1:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/async-each/-/async-each-1.0.3.tgz#b727dbf87d7651602f06f4d4ac387f47d91b0cbf"
@@ -1490,7 +1554,7 @@ babel-code-frame@^6.22.0, babel-code-frame@^6.26.0:
     esutils "^2.0.2"
     js-tokens "^3.0.2"
 
-babel-eslint@^10.0.1:
+babel-eslint@^10.0.1, babel-eslint@^10.0.2:
   version "10.0.2"
   resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.0.2.tgz#182d5ac204579ff0881684b040560fdcc1558456"
   integrity sha512-UdsurWPtgiPgpJ06ryUnuaSXC2s0WoSZnQmEpbAH65XZSdwowgN5MvyP7e88nW07FYXv72erVtpBkxyDVKhH1Q==
@@ -1902,11 +1966,6 @@ callsites@^2.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-2.0.0.tgz#06eb84f00eea413da86affefacbffb36093b3c50"
   integrity sha1-BuuE8A7qQT2oav/vrL/7Ngk7PFA=
 
-callsites@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
-  integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
-
 camel-case@3.0.x:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
@@ -1975,11 +2034,6 @@ chardet@^0.4.0:
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
   integrity sha1-tUc7M9yXxCTl2Y3IfVXU2KKci/I=
 
-chardet@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.7.0.tgz#90094849f0937f2eedc2425d0d28a9e5f0cbad9e"
-  integrity sha512-mT8iDcrh03qDGRRmoA2hmBJnxpllMR+0/0qlzjqZES6NdiWDcZkCNAk4rPFZ9Q85r27unkiNNg8ZOiwZXBHwcA==
-
 check-types@^7.3.0:
   version "7.4.0"
   resolved "https://registry.yarnpkg.com/check-types/-/check-types-7.4.0.tgz#0378ec1b9616ec71f774931a3c6516fad8c152f4"
@@ -2406,7 +2460,7 @@ cross-spawn@^5.0.1, cross-spawn@^5.1.0:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
-cross-spawn@^6.0.0, cross-spawn@^6.0.5:
+cross-spawn@^6.0.0:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
   integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
@@ -2663,7 +2717,7 @@ debug@^3.1.0, debug@^3.2.5, debug@^3.2.6:
   dependencies:
     ms "^2.1.1"
 
-debug@^4.0.1, debug@^4.1.0, debug@^4.1.1, debug@~4.1.0:
+debug@^4.1.0, debug@^4.1.1, debug@~4.1.0:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/debug/-/debug-4.1.1.tgz#3b72260255109c6b589cee050f1d516139664791"
   integrity sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==
@@ -2851,13 +2905,6 @@ doctrine@^2.1.0:
   dependencies:
     esutils "^2.0.2"
 
-doctrine@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
-  integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
-  dependencies:
-    esutils "^2.0.2"
-
 dom-converter@^0.2:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
@@ -3148,7 +3195,7 @@ eslint-scope@^3.7.1:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
-eslint-scope@^4.0.0, eslint-scope@^4.0.3:
+eslint-scope@^4.0.0:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/eslint-scope/-/eslint-scope-4.0.3.tgz#ca03833310f6889a3264781aa82e63eb9cfe7848"
   integrity sha512-p7VutNr1O/QrxysMo3E45FjYDTeXBy0iTltPFNSqKAIfjDSXC+4dj+qfyuD8bfAXrW/y6lW3O76VaYNPKfpKrg==
@@ -3156,11 +3203,6 @@ eslint-scope@^4.0.0, eslint-scope@^4.0.3:
     esrecurse "^4.1.0"
     estraverse "^4.1.1"
 
-eslint-utils@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/eslint-utils/-/eslint-utils-1.3.1.tgz#9a851ba89ee7c460346f97cf8939c7298827e512"
-  integrity sha512-Z7YjnIldX+2XMcjr7ZkgEsOj/bREONV60qYeB/bjMAqqqZ4zxKyWX+BOUkdmRmA9riiIPVvo5x86m5elviOk0Q==
-
 eslint-visitor-keys@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d"
@@ -3210,48 +3252,6 @@ eslint@^4.19.1:
     table "4.0.2"
     text-table "~0.2.0"
 
-eslint@^5.8.0:
-  version "5.16.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-5.16.0.tgz#a1e3ac1aae4a3fbd8296fcf8f7ab7314cbb6abea"
-  integrity sha512-S3Rz11i7c8AA5JPv7xAH+dOyq/Cu/VXHiHXBPOU1k/JAM5dXqQPt3qcrhpHSorXmrpu2g0gkIBVXAqCpzfoZIg==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    ajv "^6.9.1"
-    chalk "^2.1.0"
-    cross-spawn "^6.0.5"
-    debug "^4.0.1"
-    doctrine "^3.0.0"
-    eslint-scope "^4.0.3"
-    eslint-utils "^1.3.1"
-    eslint-visitor-keys "^1.0.0"
-    espree "^5.0.1"
-    esquery "^1.0.1"
-    esutils "^2.0.2"
-    file-entry-cache "^5.0.1"
-    functional-red-black-tree "^1.0.1"
-    glob "^7.1.2"
-    globals "^11.7.0"
-    ignore "^4.0.6"
-    import-fresh "^3.0.0"
-    imurmurhash "^0.1.4"
-    inquirer "^6.2.2"
-    js-yaml "^3.13.0"
-    json-stable-stringify-without-jsonify "^1.0.1"
-    levn "^0.3.0"
-    lodash "^4.17.11"
-    minimatch "^3.0.4"
-    mkdirp "^0.5.1"
-    natural-compare "^1.4.0"
-    optionator "^0.8.2"
-    path-is-inside "^1.0.2"
-    progress "^2.0.0"
-    regexpp "^2.0.1"
-    semver "^5.5.1"
-    strip-ansi "^4.0.0"
-    strip-json-comments "^2.0.1"
-    table "^5.2.3"
-    text-table "^0.2.0"
-
 espree@^3.5.2, espree@^3.5.4:
   version "3.5.4"
   resolved "https://registry.yarnpkg.com/espree/-/espree-3.5.4.tgz#b0f447187c8a8bed944b815a660bddf5deb5d1a7"
@@ -3269,15 +3269,6 @@ espree@^4.1.0:
     acorn-jsx "^5.0.0"
     eslint-visitor-keys "^1.0.0"
 
-espree@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/espree/-/espree-5.0.1.tgz#5d6526fa4fc7f0788a5cf75b15f30323e2f81f7a"
-  integrity sha512-qWAZcWh4XE/RwzLJejfcofscgMc9CamR6Tn1+XRXNzrvUSSbiAjGOI/fggztjIi7y9VLPqnICMIPiGyr8JaZ0A==
-  dependencies:
-    acorn "^6.0.7"
-    acorn-jsx "^5.0.0"
-    eslint-visitor-keys "^1.0.0"
-
 esprima@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
@@ -3446,15 +3437,6 @@ external-editor@^2.0.4:
     iconv-lite "^0.4.17"
     tmp "^0.0.33"
 
-external-editor@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.0.3.tgz#5866db29a97826dbe4bf3afd24070ead9ea43a27"
-  integrity sha512-bn71H9+qWoOQKyZDo25mOMVpSmXROAsTJVVVYzrrtol3d4y+AsKjf4Iwl2Q+IuT0kFSQ1qo166UuIwqYq7mGnA==
-  dependencies:
-    chardet "^0.7.0"
-    iconv-lite "^0.4.24"
-    tmp "^0.0.33"
-
 extglob@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543"
@@ -3550,13 +3532,6 @@ file-entry-cache@^2.0.0:
     flat-cache "^1.2.1"
     object-assign "^4.0.1"
 
-file-entry-cache@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/file-entry-cache/-/file-entry-cache-5.0.1.tgz#ca0f6efa6dd3d561333fb14515065c2fafdf439c"
-  integrity sha512-bCg29ictuBaKUwwArK4ouCaqDgLZcysCFLmM/Yn/FDoqndh/9vNuQfXRDvTuXKLxfD/JtZQGKFT8MGcJBK644g==
-  dependencies:
-    flat-cache "^2.0.1"
-
 file-loader@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-3.0.1.tgz#f8e0ba0b599918b51adfe45d66d1e771ad560faa"
@@ -3665,20 +3640,6 @@ flat-cache@^1.2.1:
     rimraf "~2.6.2"
     write "^0.2.1"
 
-flat-cache@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-2.0.1.tgz#5d296d6f04bda44a4630a301413bdbc2ec085ec0"
-  integrity sha512-LoQe6yDuUMDzQAEH8sgmh4Md6oZnc/7PjtwjNFSzveXqSHt6ka9fPBuso7IGf9Rz4uqnSnWiFH2B/zj24a5ReA==
-  dependencies:
-    flatted "^2.0.0"
-    rimraf "2.6.3"
-    write "1.0.3"
-
-flatted@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.0.tgz#55122b6536ea496b4b44893ee2608141d10d9916"
-  integrity sha512-R+H8IZclI8AAkSBRQJLVOsxwAoHd6WC40b4QTNWIjzAa6BXOBfQcM587MXDTVPeYaopFNWHUFLx7eNmHDSxMWg==
-
 flush-write-stream@^1.0.0:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
@@ -3872,7 +3833,7 @@ glob@^7.0.3, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
-globals@^11.0.1, globals@^11.1.0, globals@^11.7.0:
+globals@^11.0.1, globals@^11.1.0:
   version "11.12.0"
   resolved "https://registry.yarnpkg.com/globals/-/globals-11.12.0.tgz#ab8795338868a0babd8525758018c2a7eb95c42e"
   integrity sha512-WOBp/EEGUiIsJSp7wcv/y6MO+lV9UoncWqxuFfm8eBwzWNgyfBd6Gz+IeKQ9jCmyhoH99g15M3T+QaVHFjizVA==
@@ -4214,7 +4175,7 @@ https-browserify@^1.0.0:
   resolved "https://registry.yarnpkg.com/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
   integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
 
-iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.24, iconv-lite@^0.4.4:
+iconv-lite@0.4.24, iconv-lite@^0.4.17, iconv-lite@^0.4.4:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
   integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@@ -4255,7 +4216,7 @@ ignore@^3.3.3, ignore@^3.3.5:
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-3.3.10.tgz#0a97fb876986e8081c631160f8f9f389157f0043"
   integrity sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==
 
-ignore@^4.0.3, ignore@^4.0.6:
+ignore@^4.0.3:
   version "4.0.6"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-4.0.6.tgz#750e3db5862087b4737ebac8207ffd1ef27b25fc"
   integrity sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==
@@ -4275,14 +4236,6 @@ import-fresh@^2.0.0:
     caller-path "^2.0.0"
     resolve-from "^3.0.0"
 
-import-fresh@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/import-fresh/-/import-fresh-3.0.0.tgz#a3d897f420cab0e671236897f75bc14b4885c390"
-  integrity sha512-pOnA9tfM3Uwics+SaBLCNyZZZbK+4PTu0OPZtLlMIrv17EdBoC15S9Kn8ckJ9TZTyKb3ywNE5y1yeDxxGA7nTQ==
-  dependencies:
-    parent-module "^1.0.0"
-    resolve-from "^4.0.0"
-
 import-from@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-from/-/import-from-2.1.0.tgz#335db7f2a7affd53aaa471d4b8021dee36b7f3b1"
@@ -4361,25 +4314,6 @@ inquirer@^3.0.6:
     strip-ansi "^4.0.0"
     through "^2.3.6"
 
-inquirer@^6.2.2:
-  version "6.4.1"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.4.1.tgz#7bd9e5ab0567cd23b41b0180b68e0cfa82fc3c0b"
-  integrity sha512-/Jw+qPZx4EDYsaT6uz7F4GJRNFMRdKNeUZw3ZnKV8lyuUgz/YWRCSUAJMZSVhSq4Ec0R2oYnyi6b3d4JXcL5Nw==
-  dependencies:
-    ansi-escapes "^3.2.0"
-    chalk "^2.4.2"
-    cli-cursor "^2.1.0"
-    cli-width "^2.0.0"
-    external-editor "^3.0.3"
-    figures "^2.0.0"
-    lodash "^4.17.11"
-    mute-stream "0.0.7"
-    run-async "^2.2.0"
-    rxjs "^6.4.0"
-    string-width "^2.1.0"
-    strip-ansi "^5.1.0"
-    through "^2.3.6"
-
 internal-ip@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/internal-ip/-/internal-ip-4.3.0.tgz#845452baad9d2ca3b69c635a137acb9a0dad0907"
@@ -4733,7 +4667,7 @@ js-tokens@^3.0.2:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
   integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls=
 
-js-yaml@^3.13.0, js-yaml@^3.13.1, js-yaml@^3.9.1:
+js-yaml@^3.13.1, js-yaml@^3.9.1:
   version "3.13.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
   integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
@@ -5831,13 +5765,6 @@ param-case@2.1.x:
   dependencies:
     no-case "^2.2.0"
 
-parent-module@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
-  integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
-  dependencies:
-    callsites "^3.0.0"
-
 parse-asn1@^5.0.0:
   version "5.1.4"
   resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.4.tgz#37f6628f823fbdeb2273b4d540434a22f3ef1fcc"
@@ -6659,11 +6586,6 @@ regexpp@^1.0.1:
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-1.1.0.tgz#0e3516dd0b7904f413d2d4193dce4618c3a689ab"
   integrity sha512-LOPw8FpgdQF9etWMaAfG/WRthIdXJGYp4mJ2Jgn/2lpkbod9jPn0t9UqN7AxBOKNfzRbYyVfgc7Vk4t/MpnXgw==
 
-regexpp@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
-  integrity sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==
-
 regexpu-core@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/regexpu-core/-/regexpu-core-1.0.0.tgz#86a763f58ee4d7c2f6b102e4764050de7ed90c6b"
@@ -6832,11 +6754,6 @@ resolve-from@^3.0.0:
   resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748"
   integrity sha1-six699nWiBvItuZTM17rywoYh0g=
 
-resolve-from@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
-  integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
-
 resolve-url@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
@@ -6877,7 +6794,7 @@ rgba-regex@^1.0.0:
   resolved "https://registry.yarnpkg.com/rgba-regex/-/rgba-regex-1.0.0.tgz#43374e2e2ca0968b0ef1523460b7d730ff22eeb3"
   integrity sha1-QzdOLiyglosO8VI0YLfXMP8i7rM=
 
-rimraf@2.6.3, rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2, rimraf@^2.6.3, rimraf@~2.6.2:
+rimraf@^2.5.4, rimraf@^2.6.1, rimraf@^2.6.2, rimraf@^2.6.3, rimraf@~2.6.2:
   version "2.6.3"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.6.3.tgz#b2d104fe0d8fb27cf9e0a1cda8262dd3833c6cab"
   integrity sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==
@@ -6918,13 +6835,6 @@ rx-lite@*, rx-lite@^4.0.8:
   resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444"
   integrity sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=
 
-rxjs@^6.4.0:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.5.2.tgz#2e35ce815cd46d84d02a209fb4e5921e051dbec7"
-  integrity sha512-HUb7j3kvb7p7eCUHE3FqjoDsC1xfZQ4AHFWfTKSpZ+sAhhz5X1WX0ZuUqWbzB2QhSLp3DoLUG+hMdEDKqWo2Zg==
-  dependencies:
-    tslib "^1.9.0"
-
 safe-buffer@5.1.2, safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
@@ -7132,15 +7042,6 @@ slice-ansi@1.0.0:
   dependencies:
     is-fullwidth-code-point "^2.0.0"
 
-slice-ansi@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/slice-ansi/-/slice-ansi-2.1.0.tgz#cacd7693461a637a5788d92a7dd4fba068e81636"
-  integrity sha512-Qu+VC3EwYLldKa1fCxuuvULvSJOKEgk9pi8dZeCVK7TqBfUNTH4sFkk4joj8afVSfAYgJoSOetjx9QWOJ5mYoQ==
-  dependencies:
-    ansi-styles "^3.2.0"
-    astral-regex "^1.0.0"
-    is-fullwidth-code-point "^2.0.0"
-
 snapdragon-node@^2.0.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/snapdragon-node/-/snapdragon-node-2.1.1.tgz#6c175f86ff14bdb0724563e8f3c1b021a286853b"
@@ -7532,7 +7433,7 @@ strip-indent@^2.0.0:
   resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68"
   integrity sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=
 
-strip-json-comments@^2.0.1, strip-json-comments@~2.0.1:
+strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
   integrity sha1-PFMZQukIwml8DsNEhYwobHygpgo=
@@ -7602,16 +7503,6 @@ table@4.0.2:
     slice-ansi "1.0.0"
     string-width "^2.1.1"
 
-table@^5.2.3:
-  version "5.4.1"
-  resolved "https://registry.yarnpkg.com/table/-/table-5.4.1.tgz#0691ae2ebe8259858efb63e550b6d5f9300171e8"
-  integrity sha512-E6CK1/pZe2N75rGZQotFOdmzWQ1AILtgYbMAbAjvms0S1l5IDB47zG3nCnFGB/w+7nB3vKofbLXCH7HPBo864w==
-  dependencies:
-    ajv "^6.9.1"
-    lodash "^4.17.11"
-    slice-ansi "^2.1.0"
-    string-width "^3.0.0"
-
 tapable@^1.0.0, tapable@^1.1.0:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
@@ -7655,7 +7546,7 @@ terser@^4.0.0:
     source-map "~0.6.1"
     source-map-support "~0.5.10"
 
-text-table@^0.2.0, text-table@~0.2.0:
+text-table@~0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
@@ -8411,13 +8302,6 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
-write@1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/write/-/write-1.0.3.tgz#0800e14523b923a387e415123c865616aae0f5c3"
-  integrity sha512-/lg70HAjtkUgWPVZhZcm+T4hkL8Zbtp1nFNOn3lRrxnlv50SRBv7cR7RqR+GMsd3hUXy9hWBo4CHTbFTcOYwig==
-  dependencies:
-    mkdirp "^0.5.1"
-
 write@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/write/-/write-0.2.1.tgz#5fc03828e264cea3fe91455476f7a3c566cb0757"