From f525c2eea21762e0b5edfb1ce54e854e34ea16f3 Mon Sep 17 00:00:00 2001
From: supertiger1234 <saawalkhn@googlemail.com>
Date: Tue, 19 Nov 2019 19:30:02 +0000
Subject: [PATCH 1/8] progress on the new design.Not completely finished

---
 src/components/ProfilePictureTemplate.vue     |   1 +
 src/components/app/MainNav.vue                | 375 ++++++++++++++++++
 src/components/app/MemberTemplate.vue         |   5 +-
 src/components/app/MembersList.vue            |  13 +-
 src/components/app/MessagePanel.vue           |  51 ++-
 src/components/app/MessagePanel/Heading.vue   |   4 +-
 src/components/app/MessageTemplate.vue        |  25 +-
 src/components/app/MyMiniInformation.vue      |   3 +-
 src/components/app/Navigation.vue             |  44 +-
 .../Popouts/ServerSettingsPanels/General.vue  |   7 +-
 src/components/app/ServerList.vue             |  15 +-
 .../app/ServerTemplate/ChannelTemplate.vue    |   6 +-
 .../app/ServerTemplate/ServerTemplate.vue     |   2 +-
 src/views/App.vue                             |   7 +-
 14 files changed, 451 insertions(+), 107 deletions(-)
 create mode 100644 src/components/app/MainNav.vue

diff --git a/src/components/ProfilePictureTemplate.vue b/src/components/ProfilePictureTemplate.vue
index fc47ea8..3b722b2 100644
--- a/src/components/ProfilePictureTemplate.vue
+++ b/src/components/ProfilePictureTemplate.vue
@@ -80,6 +80,7 @@ export default {
 }
 .inner-profile-picture {
   background-color: rgba(0, 0, 0, 0.315);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
   border-radius: 50%;
   background-position: center;
   background-size: cover;
diff --git a/src/components/app/MainNav.vue b/src/components/app/MainNav.vue
new file mode 100644
index 0000000..c3421f3
--- /dev/null
+++ b/src/components/app/MainNav.vue
@@ -0,0 +1,375 @@
+<template>
+  <div class="navigation" ref="navigation">
+    <div
+      class="tool-tip"
+      ref="toolTip"
+      :style="{top: toolTipTopPosition + 'px'}"
+      v-if="toolTipShown"
+    >{{toolTipLocalName || servers[toolTipServerID].name}}</div>
+    <div class="container" @mouseleave="mouseLeaveEvent">
+        <div class="navigation-items">
+          <div
+            class="item material-icons"
+            :class="{selected: currentTab == 0}"
+            @click="switchTab(0)"
+            @mouseenter="localToolTipEvent('Explore', $event)"
+          >explore</div>
+          <div
+            class="item material-icons"
+            :class="{selected: currentTab == 1, notifyAnimation: DMNotification || friendRequestExists}"
+            @click="switchTab(1)"
+            @mouseenter="localToolTipEvent('Direct Message', $event)"
+          >chat</div>
+          <div
+            class="item material-icons"
+            :class="{selected: currentTab == 2, notifyAnimation: serverNotification}"
+            @click="switchTab(2)"
+            @mouseenter="localToolTipEvent('Servers', $event)"
+          >forum</div>
+          <div
+            class="item material-icons"
+            :class="{selected: currentTab == 3}"
+            @click="switchTab(3)"
+            @mouseenter="localToolTipEvent('Changelog', $event)"
+          >import_contacts</div>
+          <div
+            v-if="!user.survey_completed"
+            class="item material-icons"
+            @click="openSurvey"
+            @mouseenter="localToolTipEvent('Click Me', $event)"
+          >error</div>
+        </div>
+    </div>
+      <div
+        class="item material-icons"
+        @click="openSettings"
+        @mouseenter="localToolTipEvent('Settings', $event)"
+      >settings</div>
+  </div>
+</template>
+
+<script>
+import { bus } from "@/main.js";
+import config from "@/config.js";
+import settingsService from '@/services/settingsService';
+import ServerTemplate from "@/components/app/ServerTemplate/ServerTemplate";
+import draggable from 'vuedraggable'
+import { isMobile } from "@/utils/Mobile";
+export default {
+  components: { ServerTemplate, draggable },
+  data() {
+    return {
+      avatarDomain: config.domain + "/avatars",
+      toolTipShown: false,
+      toolTipTopPosition: 0,
+      toolTipServerID: null,
+      toolTipLocalName: null,
+      mobile: isMobile(),
+
+      drag: false,
+    };
+  },
+  methods: {
+    async onEnd(event) {
+      this.drag = false;
+      const serverIDArr = this.serversArr.map(s => s.server_id);
+      await settingsService.setServerPositions(serverIDArr);
+    },
+    onStart() {
+      this.toolTipShown = false;
+      this.drag = true;
+      this.$store.dispatch("setAllPopout", {show: false});
+    },
+    dismissNotification(channelID) {
+      const notifications = this.$store.getters.notifications.find(function(e) {
+        return e.channelID === channelID;
+      });
+
+      if (notifications && notifications.count >= 1 && document.hasFocus()) {
+        this.$socket.emit("notification:dismiss", { channelID });
+      }
+    },
+    openServer(serverID) {
+      const server = this.servers[serverID];
+      const lastSelectedChannel = JSON.parse(
+        localStorage.getItem("selectedChannels") || "{}"
+      )[serverID];
+      const defaultChannelID = server.default_channel_id;
+      const channels = this.$store.getters.channels;
+      let channel = channels[lastSelectedChannel || defaultChannelID];
+      if (!channel) {
+        channel = channels[defaultChannelID];
+      }
+
+      this.dismissNotification(channel.channelID);
+      this.$store.dispatch("servers/setSelectedServerID", serverID);
+      this.$store.dispatch("openChannel", channel);
+    },
+    switchChannel(isServer) {
+      const serverChannelID = this.$store.state.channelModule.serverChannelID;
+      const DMChannelID = this.$store.state.channelModule.DMChannelID;
+
+      if (isServer) {
+        this.$store.dispatch("selectedChannelID", serverChannelID);
+        const channel = this.$store.state.channelModule.channels[
+          serverChannelID
+        ];
+        this.$store.dispatch("setChannelName", channel ? channel.name : "");
+        this.dismissNotification(serverChannelID);
+      } else {
+        const channel = this.$store.state.channelModule.channels[DMChannelID];
+        this.$store.dispatch(
+          "setChannelName",
+          channel ? channel.recipients[0].username : ""
+        );
+        this.$store.dispatch("selectedChannelID", DMChannelID);
+        this.dismissNotification(DMChannelID);
+      }
+    },
+    switchTab(index) {
+      localStorage.setItem("currentTab", index);
+      this.$store.dispatch("setCurrentTab", index);
+      if (index == 1) {
+        //1: direct message tab.
+        this.switchChannel(false);
+      } else if (index === 2) {
+        //2: server tab
+        this.switchChannel(true);
+      }
+    },
+    openSettings() {
+      this.$store.dispatch("setPopoutVisibility", {
+        name: "settings",
+        visibility: true
+      });
+    },
+    localToolTipEvent(name, event) {
+      const rect = event.target.getBoundingClientRect();
+      this.toolTipLocalName = name;
+      this.toolTipTopPosition = rect.top - this.getTopHeight() + 16;
+      this.toolTipShown = true;
+    },
+    serverToolTipEvent({ serverID, top }) {
+      if (this.drag) return;
+      this.toolTipLocalName = null;
+      this.toolTipServerID = serverID;
+      this.toolTipTopPosition = top - this.getTopHeight() + 16;
+      this.toolTipShown = true;
+    },
+    mouseLeaveEvent() {
+      this.toolTipShown = false;
+      this.toolTipServerID = null;
+      this.toolTipLocalName = null;
+    },
+    getTopHeight() {
+      return window.innerHeight - this.$refs["navigation"].offsetHeight;
+    },
+    addServer() {
+      this.$store.dispatch("setPopoutVisibility", {
+        name: "addServer",
+        visibility: true
+      });
+    },
+    addFriend() {
+      this.$store.dispatch("setAllPopout", {
+        show: true,
+        type: "ADD_FRIEND"
+      });
+    },
+    openSurvey() {
+      this.$store.dispatch("setPopoutVisibility", {
+        name: "surveyPopout",
+        visibility: true
+      });
+    }
+  },
+  computed: {
+    user() {
+      return this.$store.getters.user;
+    },
+    currentTab() {
+      return this.$store.getters.currentTab;
+    },
+    servers() {
+      return this.$store.getters["servers/servers"];
+    },
+    serversArr: {
+      get() {
+        const data = this.servers;
+        return Object.keys(data)
+        .map(key => {
+          return data[key];
+        })
+        .reverse();
+      },
+      set(value) {
+        const reversedServers = value.reverse()
+        // convert array to json
+        const json = {};
+        for (let index = 0; index < reversedServers.length; index++) {
+          const element = reversedServers[index];
+          json[element.server_id] = element;
+        }
+        this.$store.dispatch("servers/setServers", json);
+      }
+    },
+    selectedServerID() {
+      return this.$store.getters["servers/selectedServerID"];
+    },
+    serverNotification() {
+      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 &&
+          (e.channelID !== this.$store.getters.selectedChannelID ||
+            !document.hasFocus() ||
+            this.currentTab !== 2)
+        );
+      });
+      return notification;
+    },
+    DMNotification() {
+      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 &&
+          (e.channelID !== this.$store.getters.selectedChannelID ||
+            !document.hasFocus() ||
+            this.currentTab !== 1)
+        );
+      });
+      // unopened dm
+      if (!notification) {
+        return notifications.find(e => {
+          return !channels[e.channelID];
+        });
+      }
+      return notification;
+    },
+    friendRequestExists() {
+      const allFriend = this.$store.getters.user.friends;
+      const result = Object.keys(allFriend).map(function(key) {
+        return allFriend[key];
+      });
+      return result.find(friend => friend.status === 1);
+    }
+  },
+  mounted() {
+    bus.$on("server-tool-tip", this.serverToolTipEvent);
+  },
+  destroyed() {
+    bus.$off("server-tool-tip", this.serverToolTipEvent);
+  }
+};
+</script>
+
+
+<style lang="scss" scoped>
+
+.navigation {
+  display: flex;
+  flex-direction: row;
+  flex-shrink: 0;
+  height: 60px;
+  width: 100%;
+}
+.container {
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  width: 100%;
+}
+.navigation-items {
+  display: flex;
+  flex-direction: row;
+  width: 100%;
+  height: 100%;
+  align-self: flex-start;
+  align-content: center;
+  flex-shrink: 0;
+}
+.item {
+  position: relative;
+  display: flex;
+  flex-shrink: 0;
+  justify-content: center;
+  align-content: center;
+  align-items: center;
+  color: white;
+  font-size: 30px;
+  align-self: center;
+  width: 50px;
+  height: 50px;
+  margin-left: 10px;
+  border-radius: 50%;
+  cursor: pointer;
+  user-select: none;
+  opacity: 0.8;
+  transition: 0.2s;
+  &:hover {
+    background: #093b4b;
+  }
+  &.selected {
+    background: #072C38;
+  }
+}
+
+
+.notifyAnimation:before {
+  content: "!";
+  color: white;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  align-content: center;
+  font-size: 15px;
+  position: absolute;
+  z-index: 115651;
+  top: 5px;
+  right: 5px;
+  width: 20px;
+  height: 20px;
+  animation: notifyAnime;
+  animation-duration: 1s;
+  animation-iteration-count: infinite;
+  animation-fill-mode: forwards;
+  border-radius: 50%;
+  background: rgba(255, 23, 23, 0.753);
+  flex-shrink: 0;
+}
+@keyframes notifyAnime {
+  0% {
+    opacity: 0.2;
+  }
+  40% {
+    opacity: 1;
+  }
+  60% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.2;
+  }
+}
+
+.tool-tip {
+  color: white;
+  position: absolute;
+  background: rgba(0, 0, 0, 0.7);
+  backdrop-filter: blur(3px);
+  padding: 5px;
+  max-width: 150px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  left: 60px;
+  z-index: 99999;
+  user-select: none;
+  cursor: default;
+  transition: 0.2s;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/app/MemberTemplate.vue b/src/components/app/MemberTemplate.vue
index 71f7bb5..27ce85e 100644
--- a/src/components/app/MemberTemplate.vue
+++ b/src/components/app/MemberTemplate.vue
@@ -75,10 +75,13 @@ export default {
   cursor: pointer;
   user-select: none;
   overflow: hidden;
+  border-radius: 4px;
+  margin-left: 5px;
+  margin-right: 5px;
 }
 
 .member:hover {
-  background: #064d55;
+  background: #063442;
 }
 
 .information {
diff --git a/src/components/app/MembersList.vue b/src/components/app/MembersList.vue
index 6bdef5f..062d334 100644
--- a/src/components/app/MembersList.vue
+++ b/src/components/app/MembersList.vue
@@ -82,15 +82,12 @@ export default {
   flex-direction: column;
   width: 300px;
   height: 100%;
-  background-image: url("../../assets/leftPanelBackground.jpg");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
+  background: rgba(0, 0, 0, 0.14);
 }
 .header {
-  height: 50px;
+  height: 60px;
   width: 100%;
-  background: rgba(0, 0, 0, 0.438);
+  background: #083A4A;
   display: flex;
   flex-shrink: 0;
 }
@@ -103,12 +100,12 @@ export default {
   overflow: auto;
 }
 .tab {
-  background: #095a5c;
   padding: 5px;
   user-select: none;
   cursor: default;
-  color: #cce4e3;
+  color: #b5c4ca;
   font-size: 15px;
+  margin-left: 10px;
 }
 </style>
 
diff --git a/src/components/app/MessagePanel.vue b/src/components/app/MessagePanel.vue
index a44d3a5..e101d9b 100644
--- a/src/components/app/MessagePanel.vue
+++ b/src/components/app/MessagePanel.vue
@@ -41,7 +41,6 @@
       </div>
 
       <edit-panel v-if="editMessage" :data="editMessage" />
-      <div class="seperater" />
       <div class="markdown-buttons" style="color: white;" v-if="sendMessagePermission === true || editMessage">
         <div class="material-icons markdown-icon" @click="addFormat('**')" title="Bold">format_bold</div>
         <div class="material-icons markdown-icon" @click="addFormat('_')" title="Italic">format_italic</div>
@@ -78,7 +77,7 @@
           @paste="onPaste"
         ></textarea>
         <button class="emojis-button" @click="showEmojiPanel = !showEmojiPanel">
-          <i class="material-icons">face</i>
+          <i class="material-icons">tag_faces</i>
         </button>
         <button
           class="send-button"
@@ -734,26 +733,25 @@ export default {
 .chat-input-area {
   display: flex;
   flex-direction: column;
-  margin-bottom: 10px;
+  padding-bottom: 10px;
   position: relative;
+  background: #014757;
 }
 
 .attachment-button {
   width: 50px;
-  background: rgba(255, 255, 255, 0.07);
   margin-right: 2px;
-  margin-left: 10px;
   display: flex;
   flex-shrink: 0;
+  color: #a5bec4;
   cursor: pointer;
   user-select: none;
   transition: 0.3s;
 
   &:hover {
-    background: rgba(255, 255, 255, 0.13);
+    color: white;
   }
   .material-icons {
-    color: white;
     margin: auto;
   }
 }
@@ -784,7 +782,7 @@ export default {
 
 .chat-input {
   font-family: "Roboto", sans-serif;
-  background: rgba(255, 255, 255, 0.07);
+  background: transparent;
   color: white;
   width: 100%;
   min-height: 20px;
@@ -799,23 +797,17 @@ export default {
   overflow: hidden;
   max-height: 30vh;
   overflow-y: auto;
-  &:hover {
-    background: rgba(255, 255, 255, 0.1);
-  }
-
-  &:focus {
-    background: rgba(255, 255, 255, 0.13);
+  &::placeholder{
+    color: #597981;
   }
 }
 
 .send-button {
   font-size: 20px;
-  color: white;
-  background: rgba(255, 255, 255, 0.07);
+  color: #a5bec4;
+  background: transparent;
   border: none;
   outline: none;
-  margin-left: 2px;
-  margin-right: 10px;
   min-height: 40px;
   width: 50px;
   transition: 0.3s;
@@ -830,7 +822,7 @@ export default {
     margin: auto;
   }
   &:hover {
-    background: rgba(255, 255, 255, 0.13);
+    color: white;
   }
 }
 
@@ -843,8 +835,8 @@ export default {
 
 .emojis-button {
   font-size: 20px;
-  color: white;
-  background: rgba(255, 255, 255, 0.07);
+  color: #a5bec4;
+  background: transparent;
   border: none;
   outline: none;
   margin-left: 2px;
@@ -859,7 +851,7 @@ export default {
     margin: auto;
   }
   &:hover {
-    background: rgba(255, 255, 255, 0.13);
+  color: white;
   }
 }
 
@@ -905,9 +897,12 @@ export default {
   height: 35px;
   align-items: center;
   align-content: center;
-  margin-left: 10px;
+  margin-left: 2px;
+  margin-bottom: 10px;
   flex-shrink: 0;
+  background: #024B5C;
   .markdown-icon {
+    font-size: 21px;
     flex-shrink: 0;
     display: flex;
     align-content: center;
@@ -916,10 +911,10 @@ export default {
     user-select: none;
     cursor: pointer;
     height: 100%;
-    width: 35px;
-    margin-left: 2px;
+    width: 30px;
+    margin-left: 0px;
     transition: 0.2s;
-    color: #d5dcdd;
+    color: #a5bec4;
     &:hover {
       color: white;
     }
@@ -942,14 +937,14 @@ export default {
     cursor: pointer;
   }
   .reset-button {
+    color: #a5bec4;
     user-select: none;
     cursor: pointer;
     margin-left: 5px;
     transition: 0.2s;
-    opacity: 0.6;
     flex-shrink: 0;
     &:hover {
-      opacity: 1; 
+      color: white;
     }
   }
 }
diff --git a/src/components/app/MessagePanel/Heading.vue b/src/components/app/MessagePanel/Heading.vue
index ddd57b2..f1da232 100644
--- a/src/components/app/MessagePanel/Heading.vue
+++ b/src/components/app/MessagePanel/Heading.vue
@@ -61,9 +61,9 @@ export default {
 
 <style scoped>
 .heading {
-  background: #112c30;
+  background: #073240;
   margin-bottom: 0;
-  height: 50px;
+  height: 60px;
   display: flex;
   flex-shrink: 0;
   padding-left: 10px;
diff --git a/src/components/app/MessageTemplate.vue b/src/components/app/MessageTemplate.vue
index e8f0372..a47ffdb 100644
--- a/src/components/app/MessageTemplate.vue
+++ b/src/components/app/MessageTemplate.vue
@@ -272,6 +272,10 @@ export default {
 
 
 <style scoped lang="scss">
+
+$self-message-color: #236b7f;
+$message-color: #053746;
+
 .container {
   position: relative;
   z-index: 1;
@@ -299,8 +303,7 @@ export default {
   display: table;
   color: white;
   overflow: hidden;
-  border-radius: 5px;
-  background: #0a1a1c;
+  background: $message-color;
 }
 
 .presence-message .text {
@@ -329,7 +332,7 @@ export default {
 }
 
 .ownMessageLeft .triangle-inner {
-  border-left: 8px solid #3a585c;
+  border-left: 8px solid $self-message-color;
   border-right: none !important;
 }
 
@@ -349,14 +352,14 @@ export default {
 }
 
 .ownMessage .triangle-inner {
-  border-right: 8px solid #3a585c;
+  border-right: 8px solid $self-message-color;
 }
 .ownMessage .content {
-  background: #3a585c;
+  background: $self-message-color;
 }
 
 .ownMessage .date {
-  color: rgb(209, 209, 209);
+  color: #d5e3e6;
 }
 
 .file-content {
@@ -419,11 +422,11 @@ export default {
   height: 0;
   border-top: 9px solid transparent;
   border-bottom: 0px solid transparent;
-  border-right: 8px solid #0a1a1c;
+  border-right: 8px solid $message-color;
 }
 
 .content {
-  background: #0a1a1c;
+  background: $message-color;
   padding: 10px;
   display: flex;
   justify-content: center;
@@ -457,7 +460,7 @@ export default {
   display: flex;
 }
 .username {
-  color: rgb(219, 219, 219);
+  color: rgb(255, 255, 255);
   font-size: 14px;
   margin: auto 0;
   transition: 0.1s;
@@ -465,11 +468,11 @@ export default {
 }
 
 .username:hover {
-  color: rgb(199, 199, 199);
+  color: rgb(255, 255, 255);
   text-decoration: underline;
 }
 .date {
-  color: rgb(177, 177, 177);
+  color: #d5e3e6;
   font-size: 10px;
   margin: auto auto auto 5px;
   font-weight: normal;
diff --git a/src/components/app/MyMiniInformation.vue b/src/components/app/MyMiniInformation.vue
index b9baa1e..8031857 100644
--- a/src/components/app/MyMiniInformation.vue
+++ b/src/components/app/MyMiniInformation.vue
@@ -4,7 +4,7 @@
       class="avatar"
       :url="`${avatar}${hover ? '' : '?type=png'}`"
       :admin="user.admin"
-      size="40px"
+      size="35px"
       :hover="true"
       @click.native="openUserInformation"
     />
@@ -98,6 +98,7 @@ export default {
   align-items: center;
   height: 60px;
   transition: 0.3s;
+  background-color: #083A4A
 }
 
 .avatar {
diff --git a/src/components/app/Navigation.vue b/src/components/app/Navigation.vue
index b255910..9d12b33 100644
--- a/src/components/app/Navigation.vue
+++ b/src/components/app/Navigation.vue
@@ -8,39 +8,6 @@
     >{{toolTipLocalName || servers[toolTipServerID].name}}</div>
     <div class="container" @mouseleave="mouseLeaveEvent">
       <div class="scrollable">
-        <div class="navigation-items">
-          <div
-            class="item material-icons"
-            :class="{selected: currentTab == 0}"
-            @click="switchTab(0)"
-            @mouseenter="localToolTipEvent('Explore', $event)"
-          >explore</div>
-          <div
-            class="item material-icons"
-            :class="{selected: currentTab == 1, notifyAnimation: DMNotification || friendRequestExists}"
-            @click="switchTab(1)"
-            @mouseenter="localToolTipEvent('Direct Message', $event)"
-          >chat</div>
-          <div
-            class="item material-icons"
-            :class="{selected: currentTab == 2, notifyAnimation: serverNotification}"
-            @click="switchTab(2)"
-            @mouseenter="localToolTipEvent('Servers', $event)"
-          >forum</div>
-          <div
-            class="item material-icons"
-            :class="{selected: currentTab == 3}"
-            @click="switchTab(3)"
-            @mouseenter="localToolTipEvent('Changelog', $event)"
-          >list_alt</div>
-          <div
-            v-if="!user.survey_completed"
-            class="item material-icons"
-            @click="openSurvey"
-            @mouseenter="localToolTipEvent('Click Me', $event)"
-          >error</div>
-        </div>
-        <div class="seperater" />
 
         <div class="server-items" v-if="currentTab === 2">
           <draggable v-model="serversArr" :animation="200" :delay="mobile ? 400 : 0" ghost-class="ghost" @end="onEnd" @start="onStart">
@@ -58,7 +25,6 @@
         </div>
 
       </div>
-      <div class="seperater" />
       <div
         class="item material-icons"
         v-if="currentTab === 1"
@@ -71,11 +37,6 @@
         @click="addServer"
         @mouseenter="localToolTipEvent('Add Server', $event)"
       >add</div>
-      <div
-        class="item material-icons"
-        @click="openSettings"
-        @mouseenter="localToolTipEvent('Settings', $event)"
-      >settings</div>
     </div>
   </div>
 </template>
@@ -323,8 +284,7 @@ export default {
   flex-direction: column;
   flex-shrink: 0;
   height: 100%;
-  width: 60px;
-  background-color: #085053;
+  width: 70px;
 }
 
 .container {
@@ -332,7 +292,7 @@ export default {
   flex-direction: column;
   flex-shrink: 0;
   height: 100%;
-  width: 60px;
+  width: 70px;
 }
 .navigation-items {
   display: flex;
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue
index bb76bad..15dd6a5 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue
@@ -247,11 +247,13 @@ export default {
     margin-left: 2px;
     .banner-image {
       position: relative;
-      width: 240px;
-      height: 150px;
+      width: 250px;
+      height: 130px;
       background: rgba(0, 0, 0, 0.4);
       background-position: center;
       background-size: cover;
+      border-radius: 4px;
+      box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.13);
       .banner-text {
         position: absolute;
         bottom: 0;
@@ -259,7 +261,6 @@ export default {
         right: 0;
         width: 100%;
         height: 35px;
-        backdrop-filter: blur(15px);
         background: rgba(0, 0, 0, 0.5);
       }
     }
diff --git a/src/components/app/ServerList.vue b/src/components/app/ServerList.vue
index d73260d..a445c8b 100644
--- a/src/components/app/ServerList.vue
+++ b/src/components/app/ServerList.vue
@@ -2,6 +2,7 @@
   <div class="left-panel">
     <navigation />
     <div class="right">
+      <MyMiniInformation />
       <div
         class="server-banner"
         @mouseenter="bannerHover = true"
@@ -26,8 +27,6 @@
       <div class="channels-list">
         <channels-list v-if="selectedServerID" :server-i-d="selectedServerID" />
       </div>
-      <div class="seperater" />
-      <MyMiniInformation />
     </div>
   </div>
 </template>
@@ -121,12 +120,12 @@ export default {
 <style scoped lang="scss" >
 .left-panel {
   height: 100%;
-  width: 300px;
+  width: 340px;
+  max-width: 100%;
   flex-shrink: 0;
   display: flex;
   flex-direction: row;
   z-index: 1;
-  background-image: url("../../assets/leftPanelBackground.jpg");
   background-repeat: no-repeat;
   background-position: center;
   background-size: cover;
@@ -152,6 +151,8 @@ export default {
   width: 100%;
   height: 100%;
   overflow: hidden;
+  background: rgba(0, 0, 0, 0.14);
+  border-top-left-radius: 10px;
 }
 
 .server-banner {
@@ -161,9 +162,12 @@ export default {
   flex-direction: row;
   background-color: rgba(32, 32, 32, 0.4);
   height: 35px;
+  border-radius: 4px;
+  margin: 10px;
+  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.13);
 }
 .extendBanner {
-  height: 150px;
+  height: 130px;
   background-color: rgb(32, 32, 32);
 }
 .banner-image {
@@ -186,7 +190,6 @@ export default {
   align-items: center;
   padding-left: 10px;
   position: relative;
-  backdrop-filter: blur(15px);
   z-index: 2;
   user-select: none;
   overflow: hidden;
diff --git a/src/components/app/ServerTemplate/ChannelTemplate.vue b/src/components/app/ServerTemplate/ChannelTemplate.vue
index 3fac2e7..8e97286 100644
--- a/src/components/app/ServerTemplate/ChannelTemplate.vue
+++ b/src/components/app/ServerTemplate/ChannelTemplate.vue
@@ -70,12 +70,14 @@ export default {
   overflow: hidden;
   padding-right: 10px;
   padding-left: 10px;
+  margin: 5px;
+  border-radius: 4px;
 }
 .channel:hover {
-  background: #08616b;
+  background: #053c4c;
 }
 .channel.selected {
-  background: #064c55;
+  background: #053240;
 }
 
 .channel-name {
diff --git a/src/components/app/ServerTemplate/ServerTemplate.vue b/src/components/app/ServerTemplate/ServerTemplate.vue
index 2f1cdd7..47ca6f6 100644
--- a/src/components/app/ServerTemplate/ServerTemplate.vue
+++ b/src/components/app/ServerTemplate/ServerTemplate.vue
@@ -9,6 +9,7 @@
   >
     <profile-picture
       size="45px"
+      class="avatar"
       :url="`${avatarDomain}/${serverData.avatar}${hover ? '' : '?type=png'}`"
     />
   </div>
@@ -101,7 +102,6 @@ export default {
     background: #042a2b;
   }
 }
-
 .notifyAnimation:before {
   content: "!";
   color: white;
diff --git a/src/views/App.vue b/src/views/App.vue
index b70108e..ab993b0f 100644
--- a/src/views/App.vue
+++ b/src/views/App.vue
@@ -10,6 +10,7 @@
             <electron-frame-buttons />
           </div>
         </div>
+        <main-nav/>
         <div class="panel-layout">
           <news v-if="currentTab == 3" />
           <direct-message v-if="currentTab == 1" />
@@ -29,6 +30,7 @@ import windowProperties from "@/utils/windowProperties";
 import changelog from "@/utils/changelog.js";
 import ConnectingScreen from "./../components/app/ConnectingScreen.vue";
 import Spinner from "./../components/Spinner.vue";
+import MainNav from "./../components/app/MainNav.vue";
 
 const ElectronFrameButtons = () =>
   import("@/components/ElectronJS/FrameButtons.vue");
@@ -63,7 +65,8 @@ export default {
     Popouts,
     News,
     ElectronFrameButtons,
-    Explore
+    Explore,
+    MainNav
   },
   data() {
     return {
@@ -355,7 +358,7 @@ textarea {
   z-index: -1;
   width: 100%;
   height: 100%;
-  background-color: #173d42;
+  background: linear-gradient(#0B4155, #01677E);
 }
 
 .panel-layout {

From 3711cdf6473a263375c9a40b2be11ef6d84be19a Mon Sep 17 00:00:00 2001
From: supertiger1234 <saawalkhn@googlemail.com>
Date: Wed, 20 Nov 2019 15:11:10 +0000
Subject: [PATCH 2/8] a lot of changes and redesigns

---
 src/components/app/FriendsList.vue            |  20 ++-
 src/components/app/MainNav.vue                | 156 +++++++++---------
 src/components/app/MembersList.vue            |   1 +
 src/components/app/MessagePanel.vue           |  10 +-
 src/components/app/MessageTemplate.vue        |   2 +-
 src/components/app/Navigation.vue             |  19 ++-
 src/components/app/ServerList.vue             |  12 +-
 .../app/ServerTemplate/ServerTemplate.vue     |  24 ++-
 src/components/app/Tabs/DirectMessage.vue     |  18 +-
 src/components/app/Tabs/Explore.vue           |  45 +++--
 .../app/Tabs/Explore/searchHeader.vue         |  14 +-
 .../app/Tabs/Explore/serverTemplate.vue       |  33 ++--
 src/components/app/Tabs/News.vue              |   4 +-
 src/components/app/Tabs/Servers.vue           |  20 ++-
 .../app/relationships/FriendsTemplate.vue     |   6 +-
 .../app/relationships/OfflineFriends.vue      |   4 +-
 .../app/relationships/OnlineFriends.vue       |   4 +-
 src/utils/changelog.js                        |   2 +-
 src/utils/markdown-rules/codeblock.js         |   2 +-
 src/utils/messageFormatter.js                 |   8 +-
 20 files changed, 245 insertions(+), 159 deletions(-)

diff --git a/src/components/app/FriendsList.vue b/src/components/app/FriendsList.vue
index e3869fd..c19202f 100644
--- a/src/components/app/FriendsList.vue
+++ b/src/components/app/FriendsList.vue
@@ -2,6 +2,7 @@
   <div class="left-panel">
     <navigation />
     <div class="content">
+      <MyMiniInformation />
       <div class="tabs">
         <div
           class="tab"
@@ -22,8 +23,6 @@
       <div v-else class="list">
         <recent-friends />
       </div>
-      <div class="seperater" />
-      <MyMiniInformation />
     </div>
   </div>
 </template>
@@ -94,15 +93,12 @@ export default {
 <style scoped>
 .left-panel {
   height: 100%;
-  width: 300px;
+  width: 340px;
+  max-width: calc(100% - 60px);
   flex-shrink: 0;
   display: flex;
   flex-direction: row;
   z-index: 1;
-  background-image: url("../../assets/leftPanelBackground.jpg");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
 }
 .content {
   display: flex;
@@ -110,6 +106,9 @@ export default {
   flex-shrink: 0;
   flex: 1;
   overflow: hidden;
+  background: rgba(0, 0, 0, 0.14);
+  border-top-left-radius: 10px;
+
 }
 .list {
   flex: 1;
@@ -136,7 +135,6 @@ export default {
   height: 50px;
   transition: 0.2s;
   cursor: pointer;
-  background: #075e64;
   position: relative;
 }
 .tab .material-icons {
@@ -220,4 +218,10 @@ export default {
     background: rgba(121, 3, 3, 0.541);
   }
 }
+
+@media (max-width: 600px) {
+  .content{
+    border-radius: 0;
+  }
+}
 </style>
diff --git a/src/components/app/MainNav.vue b/src/components/app/MainNav.vue
index c3421f3..657ae6c 100644
--- a/src/components/app/MainNav.vue
+++ b/src/components/app/MainNav.vue
@@ -3,57 +3,78 @@
     <div
       class="tool-tip"
       ref="toolTip"
-      :style="{top: toolTipTopPosition + 'px'}"
+      :style="{ left: toolTipLeftPosition + 'px' }"
       v-if="toolTipShown"
-    >{{toolTipLocalName || servers[toolTipServerID].name}}</div>
-    <div class="container" @mouseleave="mouseLeaveEvent">
-        <div class="navigation-items">
-          <div
-            class="item material-icons"
-            :class="{selected: currentTab == 0}"
-            @click="switchTab(0)"
-            @mouseenter="localToolTipEvent('Explore', $event)"
-          >explore</div>
-          <div
-            class="item material-icons"
-            :class="{selected: currentTab == 1, notifyAnimation: DMNotification || friendRequestExists}"
-            @click="switchTab(1)"
-            @mouseenter="localToolTipEvent('Direct Message', $event)"
-          >chat</div>
-          <div
-            class="item material-icons"
-            :class="{selected: currentTab == 2, notifyAnimation: serverNotification}"
-            @click="switchTab(2)"
-            @mouseenter="localToolTipEvent('Servers', $event)"
-          >forum</div>
-          <div
-            class="item material-icons"
-            :class="{selected: currentTab == 3}"
-            @click="switchTab(3)"
-            @mouseenter="localToolTipEvent('Changelog', $event)"
-          >import_contacts</div>
-          <div
-            v-if="!user.survey_completed"
-            class="item material-icons"
-            @click="openSurvey"
-            @mouseenter="localToolTipEvent('Click Me', $event)"
-          >error</div>
-        </div>
+    >
+      {{ toolTipLocalName || servers[toolTipServerID].name }}
+    </div>
+    <div class="container" @mouseleave="mouseLeaveEvent">
+      <div class="navigation-items">
+        <div
+          class="item material-icons"
+          :class="{ selected: currentTab == 0 }"
+          @click="switchTab(0)"
+          @mouseenter="localToolTipEvent('Explore', $event)"
+        >
+          explore
+        </div>
+        <div
+          class="item material-icons"
+          :class="{
+            selected: currentTab == 1,
+            notifyAnimation: DMNotification || friendRequestExists
+          }"
+          @click="switchTab(1)"
+          @mouseenter="localToolTipEvent('Direct Message', $event)"
+        >
+          chat
+        </div>
+        <div
+          class="item material-icons"
+          :class="{
+            selected: currentTab == 2,
+            notifyAnimation: serverNotification
+          }"
+          @click="switchTab(2)"
+          @mouseenter="localToolTipEvent('Servers', $event)"
+        >
+          forum
+        </div>
+        <div
+          class="item material-icons"
+          :class="{ selected: currentTab == 3 }"
+          @click="switchTab(3)"
+          @mouseenter="localToolTipEvent('Changelog', $event)"
+        >
+          import_contacts
+        </div>
+        <div
+          v-if="!user.survey_completed"
+          class="item material-icons"
+          @click="openSurvey"
+          @mouseenter="localToolTipEvent('Click Me', $event)"
+        >
+          error
+        </div>
+      </div>
+    </div>
+    <div
+      class="item material-icons"
+      @click="openSettings"
+      @mouseleave="mouseLeaveEvent"
+      @mouseenter="localToolTipEvent('Settings', $event)"
+    >
+      settings
     </div>
-      <div
-        class="item material-icons"
-        @click="openSettings"
-        @mouseenter="localToolTipEvent('Settings', $event)"
-      >settings</div>
   </div>
 </template>
 
 <script>
 import { bus } from "@/main.js";
 import config from "@/config.js";
-import settingsService from '@/services/settingsService';
+import settingsService from "@/services/settingsService";
 import ServerTemplate from "@/components/app/ServerTemplate/ServerTemplate";
-import draggable from 'vuedraggable'
+import draggable from "vuedraggable";
 import { isMobile } from "@/utils/Mobile";
 export default {
   components: { ServerTemplate, draggable },
@@ -61,12 +82,12 @@ export default {
     return {
       avatarDomain: config.domain + "/avatars",
       toolTipShown: false,
-      toolTipTopPosition: 0,
+      toolTipLeftPosition: 0,
       toolTipServerID: null,
       toolTipLocalName: null,
       mobile: isMobile(),
 
-      drag: false,
+      drag: false
     };
   },
   methods: {
@@ -78,7 +99,7 @@ export default {
     onStart() {
       this.toolTipShown = false;
       this.drag = true;
-      this.$store.dispatch("setAllPopout", {show: false});
+      this.$store.dispatch("setAllPopout", { show: false });
     },
     dismissNotification(channelID) {
       const notifications = this.$store.getters.notifications.find(function(e) {
@@ -144,26 +165,22 @@ export default {
       });
     },
     localToolTipEvent(name, event) {
-      const rect = event.target.getBoundingClientRect();
       this.toolTipLocalName = name;
-      this.toolTipTopPosition = rect.top - this.getTopHeight() + 16;
-      this.toolTipShown = true;
-    },
-    serverToolTipEvent({ serverID, top }) {
-      if (this.drag) return;
-      this.toolTipLocalName = null;
-      this.toolTipServerID = serverID;
-      this.toolTipTopPosition = top - this.getTopHeight() + 16;
       this.toolTipShown = true;
+
+      this.$nextTick(() => {
+        const width = window.innerWidth;
+        const tooltipWidth = this.$refs.toolTip.clientWidth;
+        const rect = event.target.getBoundingClientRect();
+        this.toolTipLeftPosition = rect.left - tooltipWidth / 2 + 25;
+      });
     },
+
     mouseLeaveEvent() {
       this.toolTipShown = false;
       this.toolTipServerID = null;
       this.toolTipLocalName = null;
     },
-    getTopHeight() {
-      return window.innerHeight - this.$refs["navigation"].offsetHeight;
-    },
     addServer() {
       this.$store.dispatch("setPopoutVisibility", {
         name: "addServer",
@@ -197,13 +214,13 @@ export default {
       get() {
         const data = this.servers;
         return Object.keys(data)
-        .map(key => {
-          return data[key];
-        })
-        .reverse();
+          .map(key => {
+            return data[key];
+          })
+          .reverse();
       },
       set(value) {
-        const reversedServers = value.reverse()
+        const reversedServers = value.reverse();
         // convert array to json
         const json = {};
         for (let index = 0; index < reversedServers.length; index++) {
@@ -257,19 +274,11 @@ export default {
       });
       return result.find(friend => friend.status === 1);
     }
-  },
-  mounted() {
-    bus.$on("server-tool-tip", this.serverToolTipEvent);
-  },
-  destroyed() {
-    bus.$off("server-tool-tip", this.serverToolTipEvent);
   }
 };
 </script>
 
-
 <style lang="scss" scoped>
-
 .navigation {
   display: flex;
   flex-direction: row;
@@ -314,11 +323,10 @@ export default {
     background: #093b4b;
   }
   &.selected {
-    background: #072C38;
+    background: #072c38;
   }
 }
 
-
 .notifyAnimation:before {
   content: "!";
   color: white;
@@ -366,10 +374,10 @@ export default {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  left: 60px;
+  top: 60px;
   z-index: 99999;
   user-select: none;
   cursor: default;
   transition: 0.2s;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/app/MembersList.vue b/src/components/app/MembersList.vue
index 062d334..9384f26 100644
--- a/src/components/app/MembersList.vue
+++ b/src/components/app/MembersList.vue
@@ -81,6 +81,7 @@ export default {
   display: flex;
   flex-direction: column;
   width: 300px;
+  max-width: calc(100% - 60px);
   height: 100%;
   background: rgba(0, 0, 0, 0.14);
 }
diff --git a/src/components/app/MessagePanel.vue b/src/components/app/MessagePanel.vue
index e101d9b..78710be 100644
--- a/src/components/app/MessagePanel.vue
+++ b/src/components/app/MessagePanel.vue
@@ -145,6 +145,7 @@ export default {
   methods: {
     messageColorChange(e) {
       const hexColor = e.target.value;
+      e.target.value = ""
       this.customColor = hexColor;
     },
     addFormat(type, customEnding, customPos) {
@@ -857,11 +858,11 @@ export default {
 
 .back-to-bottom-button {
   &:hover {
-    background: #748b8e;
-    box-shadow: 0px 0px 15px 0px #0000008a;
+  background: rgba(0, 0, 0, 0.90);
   }
   transition: 0.2s;
-  background: #516e72;
+  background: rgba(0, 0, 0, 0.80);
+  border-radius: 100px;
   color: white;
   position: absolute;
   bottom: 15px;
@@ -871,7 +872,7 @@ export default {
   display: flex;
   justify-content: center;
   flex-shrink: 0;
-  box-shadow: 0px 0px 7px 0px #0000008a;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20);
   align-content: center;
   align-items: center;
   padding-left: 10px;
@@ -935,6 +936,7 @@ export default {
     background: rgb(231, 231, 231);
     flex-shrink: 0;
     cursor: pointer;
+    border-radius: 3px;
   }
   .reset-button {
     color: #a5bec4;
diff --git a/src/components/app/MessageTemplate.vue b/src/components/app/MessageTemplate.vue
index a47ffdb..905bfbb 100644
--- a/src/components/app/MessageTemplate.vue
+++ b/src/components/app/MessageTemplate.vue
@@ -273,7 +273,7 @@ export default {
 
 <style scoped lang="scss">
 
-$self-message-color: #236b7f;
+$self-message-color: #26778a;
 $message-color: #053746;
 
 .container {
diff --git a/src/components/app/Navigation.vue b/src/components/app/Navigation.vue
index 9d12b33..0193b56 100644
--- a/src/components/app/Navigation.vue
+++ b/src/components/app/Navigation.vue
@@ -9,7 +9,7 @@
     <div class="container" @mouseleave="mouseLeaveEvent">
       <div class="scrollable">
 
-        <div class="server-items" v-if="currentTab === 2">
+        <div class="server-items">
           <draggable v-model="serversArr" :animation="200" :delay="mobile ? 400 : 0" ghost-class="ghost" @end="onEnd" @start="onStart">
             <transition-group type="transition" :name="!drag ? 'flip-list' : null">
               <server-template
@@ -27,13 +27,11 @@
       </div>
       <div
         class="item material-icons"
-        v-if="currentTab === 1"
         @click="addFriend"
         @mouseenter="localToolTipEvent('Add Friend', $event)"
       >person_add</div>
       <div
         class="item material-icons"
-        v-if="currentTab === 2"
         @click="addServer"
         @mouseenter="localToolTipEvent('Add Server', $event)"
       >add</div>
@@ -83,6 +81,7 @@ export default {
       }
     },
     openServer(serverID) {
+      this.switchTab(2);
       const server = this.servers[serverID];
       const lastSelectedChannel = JSON.parse(
         localStorage.getItem("selectedChannels") || "{}"
@@ -146,7 +145,7 @@ export default {
       if (this.drag) return;
       this.toolTipLocalName = null;
       this.toolTipServerID = serverID;
-      this.toolTipTopPosition = top - this.getTopHeight() + 16;
+      this.toolTipTopPosition = top - this.getTopHeight() + 20;
       this.toolTipShown = true;
     },
     mouseLeaveEvent() {
@@ -324,8 +323,8 @@ export default {
   color: white;
   font-size: 30px;
   align-self: center;
-  width: 60px;
-  height: 60px;
+  width: 70px;
+  height: 70px;
   cursor: pointer;
   user-select: none;
   opacity: 0.8;
@@ -398,10 +397,16 @@ export default {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  left: 60px;
+  left: 70px;
   z-index: 99999;
   user-select: none;
   cursor: default;
   transition: 0.2s;
 }
+
+@media (max-width: 600px) {
+  .navigation{
+      background: linear-gradient(#136A8A, #00B4DB);
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/components/app/ServerList.vue b/src/components/app/ServerList.vue
index a445c8b..97da60a 100644
--- a/src/components/app/ServerList.vue
+++ b/src/components/app/ServerList.vue
@@ -121,14 +121,11 @@ export default {
 .left-panel {
   height: 100%;
   width: 340px;
-  max-width: 100%;
+  max-width: calc(100% - 60px);
   flex-shrink: 0;
   display: flex;
   flex-direction: row;
   z-index: 1;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
 }
 
 .seperater {
@@ -217,4 +214,11 @@ export default {
     background: rgba(0, 0, 0, 0.322);
   }
 }
+
+@media (max-width: 600px) {
+  .right{
+    border-radius: 0;
+  }
+}
+
 </style>
diff --git a/src/components/app/ServerTemplate/ServerTemplate.vue b/src/components/app/ServerTemplate/ServerTemplate.vue
index 47ca6f6..7cbc438 100644
--- a/src/components/app/ServerTemplate/ServerTemplate.vue
+++ b/src/components/app/ServerTemplate/ServerTemplate.vue
@@ -86,8 +86,8 @@ export default {
   z-index: 1;
   display: flex;
   align-self: center;
-  width: 60px;
-  height: 60px;
+  width: 70px;
+  height: 70px;
   flex-shrink: 0;
   justify-content: center;
   align-content: center;
@@ -95,11 +95,23 @@ export default {
   user-select: none;
   transition: background 0.2s;
   cursor: pointer;
-  &:hover {
-    background: #074447;
+  &:hover::before {
+    content: "";
+    position: absolute;
+    top: 15px;
+    bottom: 15px;
+    left: 0;
+    width: 3px;
+    background: #ffffff5e;
   }
-  &.selected {
-    background: #042a2b;
+  &.selected::before {
+    content: "";
+    position: absolute;
+    top: 10px;
+    bottom: 10px;
+    left: 0;
+    width: 3px;
+    background: #ffffffc5;
   }
 }
 .notifyAnimation:before {
diff --git a/src/components/app/Tabs/DirectMessage.vue b/src/components/app/Tabs/DirectMessage.vue
index 2a8d6a1..339c21f 100644
--- a/src/components/app/Tabs/DirectMessage.vue
+++ b/src/components/app/Tabs/DirectMessage.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="direct-message-tab">
+  <div class="direct-message-tab" :class="{darken: showLeftPanel}">
     <transition name="slidein">
       <friends-list
         v-show="$mq === 'mobile' && showLeftPanel || ($mq !== 'mobile')"
@@ -24,7 +24,7 @@ export default {
   },
   data() {
     return {
-      showLeftPanel: false
+      showLeftPanel: true
     };
   },
   mounted() {
@@ -62,14 +62,24 @@ export default {
 }
 .slidein-enter, .slidein-leave-to /* .fade-leave-active below version 2.1.8 */ {
   /* margin-left: -300px; */
-  transform: translateX(-300px);
+  transform: translateX(-340px);
 }
 @media (max-width: 600px) {
   .left-panel {
     position: absolute;
     bottom: 0;
-    height: calc(100% - 50px);
     z-index: 2;
+    background: rgba(19, 107, 139, 0.9);
+  }
+  .darken::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.4);
   }
 }
 </style>
diff --git a/src/components/app/Tabs/Explore.vue b/src/components/app/Tabs/Explore.vue
index f30341c..c230973 100644
--- a/src/components/app/Tabs/Explore.vue
+++ b/src/components/app/Tabs/Explore.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="explore-tab">
+  <div class="explore-tab" :class="{darken: showLeftPanel}">
     <transition name="slidein">
       <div
         class="left-panel"
@@ -8,6 +8,7 @@
       >
         <navigation />
         <div class="content">
+          <MyMiniInformation />
           <div class="header">
             <div class="icon">
               <i class="material-icons">explore</i>
@@ -73,8 +74,9 @@ import { bus } from "@/main";
 import Servers from "./Explore/servers";
 import ServerService from "@/services/ServerService";
 import Navigation from "@/components/app/Navigation";
+import MyMiniInformation from "@/components/app/MyMiniInformation.vue";
 export default {
-  components: { Servers, Navigation },
+  components: { Servers, Navigation, MyMiniInformation },
   data() {
     return {
       showLeftPanel: false,
@@ -142,17 +144,18 @@ export default {
 .left-panel {
   display: flex;
   flex-direction: row;
-  width: 300px;
+  width: 340px;
+  max-width: calc(100% - 60px);
   flex-shrink: 0;
   z-index: 2;
-  background-image: url("../../../assets/leftPanelBackground.jpg");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
+
   .content {
     display: flex;
     flex-direction: column;
     height: 100%;
+    background: rgba(0, 0, 0, 0.14);
+    border-top-left-radius: 10px;
+    overflow: hidden;
   }
   .items {
     user-select: none;
@@ -169,20 +172,22 @@ export default {
       align-content: center;
       align-items: center;
       padding: 10px;
+      margin: 5px;
+      border-radius: 4px;
       cursor: pointer;
       transition: 0.3s;
       &:hover {
-        background: #08616b;
+        background: #053c4c;
       }
       &.selected {
-        background: #064c55;
+        background: #053240;
       }
     }
   }
   .header {
     display: flex;
     height: 100px;
-    background: #086974;
+    background: rgba(0, 0, 0, 0.3);
     user-select: none;
     flex-shrink: 0;
     .icon {
@@ -296,8 +301,9 @@ export default {
 
 .right-panel {
   .header {
-    background: rgba(0, 0, 0, 0.448);
-    padding: 10px;
+    background: #063443;
+    padding-left: 10px;
+    height: 64px;
     display: flex;
     align-items: center;
     align-content: center;
@@ -327,7 +333,7 @@ export default {
 }
 .slidein-enter, .slidein-leave-to /* .fade-leave-active below version 2.1.8 */ {
   /* margin-left: -300px; */
-  transform: translateX(-300px);
+  transform: translateX(-340px);
 }
 
 @media (max-width: 600px) {
@@ -337,8 +343,19 @@ export default {
   .left-panel {
     position: absolute;
     bottom: 0;
-    height: calc(100% - 44px);
     z-index: 2;
+    background: rgba(19, 107, 139, 0.9);
+    height: 100%;
+  }
+  .darken::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.4);
   }
 }
 </style>
diff --git a/src/components/app/Tabs/Explore/searchHeader.vue b/src/components/app/Tabs/Explore/searchHeader.vue
index 6251b6e..bc10a4c 100644
--- a/src/components/app/Tabs/Explore/searchHeader.vue
+++ b/src/components/app/Tabs/Explore/searchHeader.vue
@@ -2,7 +2,7 @@
   <div class="search-header">
     <div class="filter-area">
       <div class="filter">
-        <div class="title">Filter:</div>
+        <div class="title">Filter</div>
         <div class="filter-item">
           <div
             class="item"
@@ -14,7 +14,7 @@
         </div>
       </div>
       <div class="filter">
-        <div class="title">Sort By:</div>
+        <div class="title">Sort By</div>
         <div class="filter-item">
           <div
             class="item"
@@ -79,9 +79,9 @@ export default {
 <style lang="scss" scoped>
 .search-header {
   display: flex;
-  background: #0a1d20;
+  background: #073847;
   width: 100%;
-  height: 70px;
+  height: 100px;
   flex-shrink: 0;
 }
 .search-area {
@@ -113,11 +113,12 @@ input {
     flex-direction: column;
     flex-wrap: wrap;
     height: 57px;
+    margin-top: 5px;
   }
   .title {
-    font-size: 17px;
+    font-size: 19px;
     color: white;
-    border-bottom: solid 1px rgba(255, 255, 255, 0.575);
+    margin-top: 10px;
     padding-left: 2px;
     padding-right: 5px;
     padding-bottom: 2px;
@@ -127,6 +128,7 @@ input {
     color: white;
     opacity: 0.5;
     cursor: pointer;
+    font-size: 15px;
     margin: 2px;
     transition: 0.3s;
     &.selected {
diff --git a/src/components/app/Tabs/Explore/serverTemplate.vue b/src/components/app/Tabs/Explore/serverTemplate.vue
index 0b10e62..ac7d478 100644
--- a/src/components/app/Tabs/Explore/serverTemplate.vue
+++ b/src/components/app/Tabs/Explore/serverTemplate.vue
@@ -83,9 +83,10 @@ export default {
   position: relative;
   width: 250px;
   height: 300px;
-  background: rgba(0, 0, 0, 0.479);
+  background: #024253;
   opacity: 0.9;
   margin: 5px;
+  border-radius: 4px;
   flex-shrink: 0;
   transition: 0.3s;
   display: flex;
@@ -157,7 +158,7 @@ export default {
   .bottom {
     display: flex;
     flex-direction: column;
-    background: rgba(0, 0, 0, 0.541);
+    background: #04333F;
     flex: 1;
     height: 100%;
     flex-shrink: 0;
@@ -178,39 +179,37 @@ export default {
       display: flex;
       width: 100%;
       flex-direction: row;
+      margin-bottom: 10px;
     }
     .member-count {
       display: flex;
       align-items: center;
       align-content: center;
+      padding-left: 5px;
+      padding-right: 5px;
       margin-left: 10px;
       margin-top: 0px;
-      width: 100%;
+      border-radius: 4px;
+      margin-right: 10px;
+      flex: 1;
+      background: #022730;
       .material-icons {
         margin-right: 5px;
       }
     }
     .button {
       display: flex;
-      align-content: center;
       align-items: center;
-      flex-direction: column;
       justify-content: center;
-      flex-shrink: 0;
-      background: rgba(40, 140, 255, 0.8);
-      align-self: flex-end;
-      flex-shrink: 0;
-      margin: auto;
+      width: 100%;
+      height: 40px;
+      border-radius: 4px;
+      background: rgba(0, 179, 219, 0.8);
+      transition: 0.2s;
       margin-right: 10px;
-      margin-left: 0;
-      margin-bottom: 10px;
-      padding: 7px;
-      transition: 0.3s;
-      width: 80px;
-      height: 20px;
       cursor: pointer;
       &:hover {
-        background: rgb(40, 140, 255);
+        background: #00B4DB;
       }
       &.selected {
         background: grey;
diff --git a/src/components/app/Tabs/News.vue b/src/components/app/Tabs/News.vue
index 4b201a2..e8cdc67 100644
--- a/src/components/app/Tabs/News.vue
+++ b/src/components/app/Tabs/News.vue
@@ -97,7 +97,7 @@ export default {
 }
 .heading {
   padding: 10px;
-  background: #15282a;
+  background: #042f3a;
   margin-bottom: 10px;
 }
 .information {
@@ -108,7 +108,7 @@ export default {
   background: rgba(38, 139, 255, 0.87);
 }
 .change-log {
-  background: #294c51;
+  background: #054151;
   overflow-y: auto;
   max-width: 700px;
   width: 100%;
diff --git a/src/components/app/Tabs/Servers.vue b/src/components/app/Tabs/Servers.vue
index d858d59..c672efb 100644
--- a/src/components/app/Tabs/Servers.vue
+++ b/src/components/app/Tabs/Servers.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="direct-message-tab">
+  <div class="direct-message-tab" :class="{darken: (showLeftPanel || showMembersPanel) }">
     <transition name="slide-left">
       <server-list
         v-if="$mq === 'mobile' && showLeftPanel || ($mq !== 'mobile')"
@@ -85,7 +85,7 @@ export default {
   transition: 0.5s;
 }
 .slide-left-enter, .slide-left-leave-to /* .fade-leave-active below version 2.1.8 */ {
-  transform: translateX(-300px);
+  transform: translateX(-340px);
 }
 
 .slide-right-enter-active,
@@ -101,8 +101,8 @@ export default {
     position: absolute;
     right: 0;
     bottom: 0;
-    height: calc(100% - 50px);
-    z-index: 1;
+    z-index: 2;
+    background: rgba(19, 107, 139, 0.9);
   }
 }
 
@@ -110,8 +110,18 @@ export default {
   .left-panel {
     position: absolute;
     bottom: 0;
-    height: calc(100% - 50px);
     z-index: 2;
+    background: rgba(19, 107, 139, 0.9);
+  }
+  .darken::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 1;
+    background: rgba(0, 0, 0, 0.4);
   }
 }
 </style>
diff --git a/src/components/app/relationships/FriendsTemplate.vue b/src/components/app/relationships/FriendsTemplate.vue
index a1b2fdd..5fa82a9 100644
--- a/src/components/app/relationships/FriendsTemplate.vue
+++ b/src/components/app/relationships/FriendsTemplate.vue
@@ -130,6 +130,8 @@ export default {
   position: relative;
   overflow: hidden;
   cursor: pointer;
+    margin: 5px;
+  border-radius: 4px;
 }
 .tree {
   padding-left: 22px;
@@ -156,10 +158,10 @@ export default {
 }
 
 .friend:hover {
-  background: #08616b;
+  background: #053c4c;
 }
 .friend.selected {
-  background: #064c55;
+  background: #053240;
 }
 .profile-picture {
   height: 30px;
diff --git a/src/components/app/relationships/OfflineFriends.vue b/src/components/app/relationships/OfflineFriends.vue
index 8f78307..d9e66e3 100644
--- a/src/components/app/relationships/OfflineFriends.vue
+++ b/src/components/app/relationships/OfflineFriends.vue
@@ -67,9 +67,11 @@ export default {
 }
 .tab {
   transition: 0.3s;
+  margin: 4px;
+  border-radius: 4px;
 }
 .tab:hover {
-  background: #08616b;
+  background: #053240;
 }
 </style>
 
diff --git a/src/components/app/relationships/OnlineFriends.vue b/src/components/app/relationships/OnlineFriends.vue
index c677640..48b65e2 100644
--- a/src/components/app/relationships/OnlineFriends.vue
+++ b/src/components/app/relationships/OnlineFriends.vue
@@ -83,9 +83,11 @@ export default {
 }
 .tab {
   transition: 0.3s;
+  margin: 4px;
+  border-radius: 4px;
 }
 .tab:hover {
-  background: #08616b;
+  background: #053240;
 }
 </style>
 
diff --git a/src/utils/changelog.js b/src/utils/changelog.js
index 451ac8e..ac0b6a5 100644
--- a/src/utils/changelog.js
+++ b/src/utils/changelog.js
@@ -14,7 +14,7 @@ const config = [
     title: "Format buttons and color text!",
     shortTitle: "",
     date: "18/11/2019",
-    headColor: "#0c7b7f",
+    headColor: "#007792",
     new: [
       "Enter will now create new lines on mobile.",
       "You can now easily format your messages using the format buttons above.",
diff --git a/src/utils/markdown-rules/codeblock.js b/src/utils/markdown-rules/codeblock.js
index 7f5d1bf..f78eb5b 100644
--- a/src/utils/markdown-rules/codeblock.js
+++ b/src/utils/markdown-rules/codeblock.js
@@ -18,7 +18,7 @@ export default (order) => { return {
 		const className = node.lang ? `language-${node.lang}` : undefined
 
 		let content = SimpleMarkdown.sanitizeText(node.content)
-		if(node.lang) {
+		if(node.lang && hljs.getLanguage(node.lang)) {
 			content = hljs.highlight(node.lang, node.content, true).value
 		}
 
diff --git a/src/utils/messageFormatter.js b/src/utils/messageFormatter.js
index 65a558e..9f861dd 100644
--- a/src/utils/messageFormatter.js
+++ b/src/utils/messageFormatter.js
@@ -41,7 +41,13 @@ const rules = {
     }),
 
     text: Object.assign({}, SimpleMarkdown.defaultRules.text, {
-        order: order++,
+        order: order++, 
+        match: function(source) {
+          // copied and modified from simple-markdown.js
+          return /^[\s\S][0-9A-Za-z\u00c0-\uffff]*\s?/.exec(source);
+      },
+      parse: SimpleMarkdown.defaultRules.text.parse,
+      html: SimpleMarkdown.defaultRules.text.html,
     }),
 };
 

From ee35d23f2788755671cfbbce77074024928f5bb3 Mon Sep 17 00:00:00 2001
From: supertiger1234 <saawalkhn@googlemail.com>
Date: Wed, 20 Nov 2019 18:45:11 +0000
Subject: [PATCH 3/8] sanitized url

---
 src/utils/markdown-rules/link.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/markdown-rules/link.js b/src/utils/markdown-rules/link.js
index 51f7362..82db44a 100644
--- a/src/utils/markdown-rules/link.js
+++ b/src/utils/markdown-rules/link.js
@@ -37,7 +37,7 @@ export default (order) => { return {
 
 	html: function(node, output) {
 		return SimpleMarkdown.htmlTag("a", output(node.content), {
-			href: node.url,
+			href: SimpleMarkdown.sanitizeText(SimpleMarkdown.sanitizeUrl(node.url)),
 			class: "link",
 			target: "_blank"
 		})

From fc1e61269e9dc7decfef0d2831639c1433dffbcd Mon Sep 17 00:00:00 2001
From: supertiger1234 <saawalkhn@googlemail.com>
Date: Fri, 22 Nov 2019 14:21:28 +0000
Subject: [PATCH 4/8] modified webmanifest

---
 public/site.webmanifest | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/public/site.webmanifest b/public/site.webmanifest
index a1553eb..cc64a63 100644
--- a/public/site.webmanifest
+++ b/public/site.webmanifest
@@ -1,6 +1,7 @@
 {
-    "name": "",
-    "short_name": "",
+    "name": "Nertivia",
+    "short_name": "Nertivia",
+    "start_url": ".",
     "icons": [
         {
             "src": "/android-chrome-192x192.png",
@@ -13,7 +14,7 @@
             "type": "image/png"
         }
     ],
-    "theme_color": "#ffffff",
-    "background_color": "#ffffff",
+    "theme_color": "#0b4155",
+    "background_color": "#0b4155",
     "display": "standalone"
 }

From a66aee7e52abf068913d42cadd5f014b66c73541 Mon Sep 17 00:00:00 2001
From: supertiger1234 <saawalkhn@googlemail.com>
Date: Sat, 23 Nov 2019 14:35:24 +0000
Subject: [PATCH 5/8] fixed status list not appearing

---
 public/site.webmanifest           | 2 +-
 src/components/app/statusList.vue | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/public/site.webmanifest b/public/site.webmanifest
index cc64a63..c1501dc 100644
--- a/public/site.webmanifest
+++ b/public/site.webmanifest
@@ -1,7 +1,7 @@
 {
     "name": "Nertivia",
     "short_name": "Nertivia",
-    "start_url": ".",
+    "start_url": "/app",
     "icons": [
         {
             "src": "/android-chrome-192x192.png",
diff --git a/src/components/app/statusList.vue b/src/components/app/statusList.vue
index f9f0990..6cfae1e 100644
--- a/src/components/app/statusList.vue
+++ b/src/components/app/statusList.vue
@@ -58,14 +58,14 @@ export default {
 .show-status-list-enter,
 .show-status-list-leave-to {
   opacity: 0;
-  transform: translateY(20px);
+  transform: translateY(-20px);
 }
 
 .status-popout {
   position: absolute;
-  bottom: 66px;
+  top: 60px;
   right: 5px;
-  background: rgba(0, 0, 0, 0.4);
+  background: rgba(0, 0, 0, 0.7);
   backdrop-filter: blur(5px);
   width: 180px;
   z-index: 4;
@@ -81,7 +81,7 @@ export default {
 }
 
 .status-list:hover {
-  background: #042f33;
+  background: #0000008c;
 }
 
 .status-icon {

From 8707c09c8952ad16e3ead2ff10a4753272df642f Mon Sep 17 00:00:00 2001
From: supertiger1234 <saawalkhn@googlemail.com>
Date: Sat, 23 Nov 2019 20:08:16 +0000
Subject: [PATCH 6/8] changed colors for each popout

---
 src/components/app/MembersList.vue              |  2 +-
 src/components/app/MessagePanel/Heading.vue     |  2 +-
 src/components/app/MessageTemplate.vue          | 10 +++++-----
 src/components/app/MyMiniInformation.vue        |  2 +-
 .../app/Popouts/Popouts/AddFriend.vue           | 13 ++++++-------
 .../app/Popouts/Popouts/AddServer.vue           | 15 +++++++--------
 .../app/Popouts/Popouts/GDriveLinkMenu.vue      |  9 ++++-----
 .../app/Popouts/Popouts/ServerInvitePopout.vue  | 11 +++++------
 .../ServerSettingsPanels/DropDownMenu.vue       | 13 +++++++------
 .../Popouts/ServerSettingsPanels/General.vue    | 12 ++++++------
 .../Popouts/ServerSettingsPanels/ManageBans.vue |  2 +-
 .../ServerSettingsPanels/ManageChannels.vue     | 12 ++++++------
 .../ServerSettingsPanels/ServerSettings.vue     | 16 ++++++++--------
 .../ServerSettingsPanels/ServerVisibility.vue   | 10 +++++-----
 src/components/app/Popouts/Popouts/Settings.vue | 17 ++++++++---------
 .../Popouts/SettingsPanels/EditProfile.vue      | 16 +++++++++++-----
 .../Popouts/SettingsPanels/ManageEmojis.vue     |  9 +++++----
 .../Popouts/SettingsPanels/MessageDesign.vue    |  4 ++--
 .../Popouts/SettingsPanels/MyProfile.vue        |  2 +-
 .../Popouts/SettingsPanels/Notifications.vue    |  1 -
 .../Popouts/SettingsPanels/appSettings.vue      |  1 -
 .../Popouts/Popouts/SettingsPanels/survey.vue   | 11 +++++------
 .../app/Popouts/Popouts/TakeSurveyPopout.vue    | 14 +++++++-------
 .../app/Popouts/Popouts/uploadDialog.vue        | 16 ++++++++--------
 .../Popouts/Popouts/userInformationPopout.vue   | 11 +++++------
 src/components/app/Tabs/Explore.vue             |  2 +-
 src/components/app/messageEmbedTemplate.vue     |  2 +-
 src/components/app/statusList.vue               |  4 ++--
 src/components/app/uploadsQueue.vue             | 11 +++++++++--
 src/components/homePage/DownloadAppPopout.vue   |  2 +-
 src/utils/changelog.js                          | 14 +++++++++++++-
 src/views/GDriveCallback.vue                    |  7 +++----
 src/views/HomePage.vue                          | 11 ++++-------
 src/views/Invites.vue                           |  6 ++----
 src/views/LoginPage.vue                         | 10 ++++------
 src/views/RegisterPage.vue                      | 11 +++++------
 36 files changed, 160 insertions(+), 151 deletions(-)

diff --git a/src/components/app/MembersList.vue b/src/components/app/MembersList.vue
index 9384f26..bcfbeb9 100644
--- a/src/components/app/MembersList.vue
+++ b/src/components/app/MembersList.vue
@@ -86,7 +86,7 @@ export default {
   background: rgba(0, 0, 0, 0.14);
 }
 .header {
-  height: 60px;
+  height: 50px;
   width: 100%;
   background: #083A4A;
   display: flex;
diff --git a/src/components/app/MessagePanel/Heading.vue b/src/components/app/MessagePanel/Heading.vue
index f1da232..496b694 100644
--- a/src/components/app/MessagePanel/Heading.vue
+++ b/src/components/app/MessagePanel/Heading.vue
@@ -63,7 +63,7 @@ export default {
 .heading {
   background: #073240;
   margin-bottom: 0;
-  height: 60px;
+  height: 50px;
   display: flex;
   flex-shrink: 0;
   padding-left: 10px;
diff --git a/src/components/app/MessageTemplate.vue b/src/components/app/MessageTemplate.vue
index 905bfbb..476ffe2 100644
--- a/src/components/app/MessageTemplate.vue
+++ b/src/components/app/MessageTemplate.vue
@@ -28,7 +28,7 @@
           </div>
           <div class="information">
             <div class="info">{{ getFile.fileName }}</div>
-            <a :href="getFile.url" target="_blank">
+            <a :href="getFile.url" download target="_blank">
               <div class="download-button">Download</div>
             </a>
           </div>
@@ -273,8 +273,8 @@ export default {
 
 <style scoped lang="scss">
 
-$self-message-color: #26778a;
-$message-color: #053746;
+$self-message-color: #053746;
+$message-color: #03222b;
 
 .container {
   position: relative;
@@ -364,7 +364,7 @@ $message-color: #053746;
 
 .file-content {
   display: flex;
-  background: #5b7377;
+  background: #ffffff21;
   padding: 10px;
   margin-top: 5px;
   &.music {
@@ -443,7 +443,7 @@ $message-color: #053746;
 .image-content {
   margin-top: 10px;
   padding: 5px;
-  background: #1d2c2e;
+  background: #ffffff21;
   display: -ms-flexbox;
   display: flex;
   flex-direction: column;
diff --git a/src/components/app/MyMiniInformation.vue b/src/components/app/MyMiniInformation.vue
index 8031857..8123262 100644
--- a/src/components/app/MyMiniInformation.vue
+++ b/src/components/app/MyMiniInformation.vue
@@ -96,7 +96,7 @@ export default {
   position: relative;
   flex-shrink: 0;
   align-items: center;
-  height: 60px;
+  height: 50px;
   transition: 0.3s;
   background-color: #083A4A
 }
diff --git a/src/components/app/Popouts/Popouts/AddFriend.vue b/src/components/app/Popouts/Popouts/AddFriend.vue
index 5a6992c..5e17328 100644
--- a/src/components/app/Popouts/Popouts/AddFriend.vue
+++ b/src/components/app/Popouts/Popouts/AddFriend.vue
@@ -98,15 +98,14 @@ export default {
   position: relative;
   margin: auto;
   overflow: hidden;
-  background-image: url("../../../../assets/leftPanelBackground.jpg");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
+  box-shadow: 0px 0px 20px 5px #151515bd;
+  background: linear-gradient(#0B4155, #01677E);
+  border-radius: 4px;
 }
 .header {
   display: flex;
   flex-shrink: 0;
-  background-color: #085053;
+  background-color: #05222d;
   color: white;
   height: 50px;
   align-content: center;
@@ -142,10 +141,10 @@ export default {
   align-self: center;
   color: white;
   width: initial;
-  background: #05353b;
+  background: #024554;
   cursor: pointer;
   &:hover {
-    background: #0f292c;
+    background: #02303c;
   }
 }
 
diff --git a/src/components/app/Popouts/Popouts/AddServer.vue b/src/components/app/Popouts/Popouts/AddServer.vue
index 770795c..643c527 100644
--- a/src/components/app/Popouts/Popouts/AddServer.vue
+++ b/src/components/app/Popouts/Popouts/AddServer.vue
@@ -217,16 +217,15 @@ export default {
   flex-direction: column;
   color: white;
   overflow: hidden;
-  background-image: url("../../../../assets/leftPanelBackground.jpg");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
+  box-shadow: 0px 0px 20px 5px #151515bd;
+  background: linear-gradient(#0B4155, #01677E);
+  border-radius: 4px;
 }
 .tabs {
   display: flex;
   justify-content: center;
   padding-top: 15px;
-  background: #144a59;
+  background: #05222d;
   flex-shrink: 0;
 }
 .tab {
@@ -284,7 +283,7 @@ export default {
   align-self: center;
   margin-top: 15px;
   margin-bottom: 10px;
-  background-color: #06454d;
+  background-color: #044050;
   padding: 10px;
 }
 
@@ -301,7 +300,7 @@ export default {
 
 .button {
   padding: 5px;
-  background: #05353b;
+  background: #024554;
   user-select: none;
   border: none;
   color: white;
@@ -313,7 +312,7 @@ export default {
   cursor: pointer;
 }
 .button:hover {
-  background: #0f292c;
+  background: #02303c;
 }
 
 .button-clicked {
diff --git a/src/components/app/Popouts/Popouts/GDriveLinkMenu.vue b/src/components/app/Popouts/Popouts/GDriveLinkMenu.vue
index 7ff17db..3fa500e 100644
--- a/src/components/app/Popouts/Popouts/GDriveLinkMenu.vue
+++ b/src/components/app/Popouts/Popouts/GDriveLinkMenu.vue
@@ -94,11 +94,10 @@ export default {
   display: flex;
   flex-direction: column;
   color: white;
-  border-radius: 3px;
-  background-image: url("../../../../assets/leftPanelBackground.jpg");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
+  overflow: hidden;
+  box-shadow: 0px 0px 20px 5px #151515bd;
+  background: linear-gradient(#0B4155, #01677E);
+  border-radius: 4px;
 }
 .text {
   color: white;
diff --git a/src/components/app/Popouts/Popouts/ServerInvitePopout.vue b/src/components/app/Popouts/Popouts/ServerInvitePopout.vue
index 27a6f99..e618ab3 100644
--- a/src/components/app/Popouts/Popouts/ServerInvitePopout.vue
+++ b/src/components/app/Popouts/Popouts/ServerInvitePopout.vue
@@ -110,10 +110,9 @@ export default {
   flex-direction: column;
   color: white;
   overflow: hidden;
-  background-image: url("../../../../assets/leftPanelBackground.jpg");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
+  box-shadow: 0px 0px 20px 5px #151515bd;
+  background: linear-gradient(#0B4155, #01677E);
+  border-radius: 4px;
 }
 .top {
   display: flex;
@@ -125,14 +124,14 @@ export default {
 
 .button {
   padding: 10px;
-  background: #05353b;
+  background: #062c3a;
   margin: auto;
   transition: 0.3s;
   user-select: none;
   cursor:pointer;
 }
 .button:hover {
-  background: #0f292c;
+  background: #041e27;
 }
 
 .bottom {
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/DropDownMenu.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/DropDownMenu.vue
index eb26912..3c8a39a 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/DropDownMenu.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/DropDownMenu.vue
@@ -86,7 +86,7 @@ export default {
 
 <style scoped>
 .drop-down {
-  background-color: #06454d;
+  background-color: #044050;
   padding: 10px;
   user-select: none;
   cursor: default;
@@ -97,14 +97,14 @@ export default {
   margin-bottom: 2px;
 }
 .current-select-box {
-  background: #05353b;
+  background: #032d38;
   padding: 5px;
   cursor: pointer;
   display: flex;
   transition: 0.3s;
 }
 .current-select-box:hover {
-  background: #0f292c;
+  background: #02232b;
 }
 .current-select-box div {
   align-self: center;
@@ -123,7 +123,7 @@ export default {
 
 .drop {
   position: absolute;
-  background-color: #06454d;
+  background-color: #044050;
   left: 0;
   right: 0;
   z-index: 11111;
@@ -145,6 +145,7 @@ export default {
   text-overflow: ellipsis;
   white-space: nowrap;
   display: flex;
+  cursor: pointer;
 }
 .item div {
   align-self: center;
@@ -154,10 +155,10 @@ export default {
 }
 
 .item:hover {
-  background: #0f292c;
+  background: #033442;
 }
 .item.selected {
-  background: #021c1f;
+  background: #021c23;
 }
 .material-icons {
   flex-shrink: 0;
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue
index 15dd6a5..1b57f06 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue
@@ -220,7 +220,7 @@ export default {
   align-self: center;
   margin-top: 10px;
   justify-content: center;
-  background-color: #06454d;
+  background-color: #044050;
   flex-shrink: 0;
 
   .avatar {
@@ -233,7 +233,7 @@ export default {
       margin-top: 35px;
     }
     .button {
-      margin-bottom: 10px;
+      margin-bottom: 16px;
     }
   }
   .banner {
@@ -288,7 +288,7 @@ export default {
 .input {
   display: flex;
   flex-direction: column;
-  background-color: #06454d;
+  background-color: #044050;;
   padding: 10px;
   align-self: center;
   margin: 10px;
@@ -298,10 +298,10 @@ export default {
   margin-top: 2px;
   margin-bottom: 0;
   width: 190px;
-  background: #05353b;
+
 }
 .button {
-  background: #05353b;
+  background: #033442;
   padding: 10px;
   align-self: center;
   margin: 5px;
@@ -310,7 +310,7 @@ export default {
   transition: 0.3s;
 }
 .button:hover {
-  background: #0f292c;
+  background: #022831;
 }
 .save-button {
   margin-top: 10px;
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageBans.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageBans.vue
index 3963265..33653f2 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageBans.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageBans.vue
@@ -84,7 +84,7 @@ export default {
   overflow: auto;
   .member {
     display: flex;
-    background: #06454d;
+    background: #052935;
     height: 30px;
     margin: 5px;
     padding: 5px;
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageChannels.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageChannels.vue
index a149fd5..dd79a71 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageChannels.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageChannels.vue
@@ -182,7 +182,7 @@ export default {
   position: relative;
 }
 .channels-list {
-  background: #082326;
+  background: #00000050;
   height: 100%;
   width: 165px;
   flex-shrink: 0;
@@ -207,10 +207,10 @@ export default {
   align-self: center;
 }
 .channel:hover {
-  background: #06454d;
+  background: #04232d;
 }
 .channel.selected {
-  background: #064c55;
+  background: #03191f;
 }
 .add-channel-button {
   background: rgba(17, 148, 255, 0.692);
@@ -226,7 +226,7 @@ export default {
   overflow: hidden;
 }
 .button {
-  background: #05353b;
+  background: #024554;
   padding: 10px;
   align-self: center;
   margin: 5px;
@@ -235,7 +235,7 @@ export default {
   transition: 0.3s;
 }
 .button:hover {
-  background: #0f292c;
+  background: #02303c;
 }
 .button.warn {
   background: rgba(255, 17, 17, 0.692);
@@ -266,7 +266,7 @@ export default {
 .input {
   display: flex;
   flex-direction: column;
-  background-color: #06454d;
+  background-color: #044050;
   padding: 10px;
   margin: 10px;
 }
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue
index 65dd5fb..0993c92 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue
@@ -107,10 +107,10 @@ export default {
   color: white;
   overflow: hidden;
   position: relative;
-  background-image: url("../../../../../assets/leftPanelBackground.jpg");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
+  overflow: hidden;
+  box-shadow: 0px 0px 20px 5px #151515bd;
+  background: linear-gradient(#0B4155, #01677E);
+  border-radius: 4px;
 }
 
 .content {
@@ -123,7 +123,7 @@ export default {
 .tabs {
   display: flex;
   flex-direction: column;
-  background: #144a59;
+  background: #00000033;
   height: 100%;
   width: 180px;
   flex-shrink: 0;
@@ -149,16 +149,16 @@ export default {
   align-self: center;
 }
 .tab:hover {
-  background: #103a45;
+  background: #072935;
 }
 .critical {
   color: red;
 }
 .tab.selected {
-  background: #0c2c35;
+  background: #051f28;
 }
 .header {
-  background: #063e45;
+  background: #05222d;
   display: flex;
   height: 50px;
   flex-shrink: 0;
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerVisibility.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerVisibility.vue
index 3267428..79fb522 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerVisibility.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerVisibility.vue
@@ -189,7 +189,7 @@ export default {
 }
 
 .toggle {
-  background-color: #06454d;
+  background-color: #044050;
   padding: 10px;
   margin-left: 10px;
   display: flex;
@@ -216,7 +216,7 @@ export default {
 }
 
 .input {
-  background-color: #06454d;
+  background-color: #044050;
   padding: 10px;
   margin: 10px;
   align-self: flex-start;
@@ -228,7 +228,7 @@ export default {
     margin-bottom: 5px;
   }
   textarea {
-  background: #05353b;
+  background: #032d38;
     resize: none;
     outline: none;
     margin-top: 2px;
@@ -245,7 +245,7 @@ export default {
 
 .button {
   padding: 10px;
-  background: #05353b;
+  background: #024554;
   -webkit-transition: background 0.3s;
   transition: 0.3s;
   -webkit-user-select: none;
@@ -259,7 +259,7 @@ export default {
 }
 
 .button:hover {
-  background: #0f292c;
+  background: #02303c;
 }
 .button.disabled {
   background: grey;
diff --git a/src/components/app/Popouts/Popouts/Settings.vue b/src/components/app/Popouts/Popouts/Settings.vue
index b7cc72f..f5a151e 100644
--- a/src/components/app/Popouts/Popouts/Settings.vue
+++ b/src/components/app/Popouts/Popouts/Settings.vue
@@ -127,10 +127,9 @@ export default {
   display: flex;
   margin: auto;
   overflow: hidden;
-  background-image: url("../../../../assets/leftPanelBackground.jpg");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
+  box-shadow: 0px 0px 20px 5px #151515bd;
+  background: linear-gradient(#0B4155, #01677E);
+  border-radius: 4px;
 }
 .tabs {
   height: 100%;
@@ -140,7 +139,7 @@ export default {
   overflow-x: hidden;
   flex-shrink: 0;
   position: relative;
-  background: #02292c;
+  background: #00000033;
 }
 .panel {
   display: flex;
@@ -161,11 +160,11 @@ export default {
 }
 
 .tab:hover {
-  background: #08616b;
+  background: #072935;
 }
 
 .tab.selected {
-  background: #064c55;
+  background: #051f28;
 }
 
 
@@ -182,7 +181,7 @@ export default {
   display: flex;
   padding: 10px;
   font-size: 25px;
-  background: #02292c;
+  background: #05222d;
 }
 .title .material-icons {
   font-size: 40px;
@@ -204,7 +203,7 @@ export default {
   transition: 0.3s;
 }
 .close-button:hover {
-  background: #064f56;
+  background: #03181f;
 }
 .close-button .material-icons {
   margin: auto;
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue b/src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue
index 4f9d3ee..274bbb9 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue
@@ -198,7 +198,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .edit-profile {
   display: flex;
   flex-direction: column;
@@ -221,11 +221,17 @@ export default {
 .change-avatar-container {
   display: flex;
   flex-direction: column;
-  background-color: #06454d;
+  background-color: #044050;
   width: 150px;
   align-self: center;
   padding: 20px;
   margin-top: 10px;
+  .button {
+    background: #033442;
+    &:hover {
+      background: #032b36;
+    }
+  }
 }
 .avatar {
   margin-bottom: 10px;
@@ -235,7 +241,7 @@ export default {
   display: none;
 }
 .button {
-  background: #05353b;
+  background: #024554;
   padding: 10px;
   text-align: center;
   display: inline-block;
@@ -244,7 +250,7 @@ export default {
   transition: 0.3s;
 }
 .button:hover {
-  background: #0f292c;
+  background: #02303c;
 }
 .button.disabled {
   background: grey;
@@ -259,7 +265,7 @@ export default {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background-color: #06454d;
+  background-color: #044050;
   padding: 10px;
   margin: 10px;
   margin-left: 30px;
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/ManageEmojis.vue b/src/components/app/Popouts/Popouts/SettingsPanels/ManageEmojis.vue
index 9fba334..b2b4aa7 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/ManageEmojis.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/ManageEmojis.vue
@@ -249,7 +249,7 @@ input:focus {
 .emojis-list {
   display: flex;
   flex-direction: column;
-  background-color: #06454d;
+  background-color: #00000024;
   overflow-y: auto;
   overflow-x: hidden;
   height: 100%;
@@ -269,7 +269,7 @@ input:focus {
   flex-shrink: 0;
 }
 .emoji:hover {
-  background: #0a3f46;
+  background: #052e3b;
 }
 .emoji-name {
   margin: auto;
@@ -280,14 +280,15 @@ input:focus {
   display: inline-block;
   width: inherit;
   padding: 10px;
-  background: #05353b;
+  background: #063443;
   margin-bottom: 10px;
   margin-left: 20px;
   user-select: none;
   transition: 0.3s;
+  cursor: pointer;
 }
 .button:hover {
-  background: #0f292c;
+  background: #052631;
 }
 .button .material-icons {
   vertical-align: -6px;
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/MessageDesign.vue b/src/components/app/Popouts/Popouts/SettingsPanels/MessageDesign.vue
index db8202a..1bb7028 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/MessageDesign.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/MessageDesign.vue
@@ -125,7 +125,7 @@ export default {
 
 .message-example{
   padding: 10px;
-  background: #173d42;
+ background: linear-gradient(#0B4155, #01677E);
 }
 .title{
   font-size: 20px;
@@ -145,7 +145,7 @@ export default {
 }
 
 .options {
-  background-color: #06454d;
+  background-color: #023643;
   padding-top: 5px;
 }
 
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue b/src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue
index a8b4469..6dd2b42 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue
@@ -119,7 +119,7 @@ export default {
 .tabs{
   z-index: 999999;
   display: flex;
-  background: #04383d;
+  background: #073444;
   justify-content: center;
 }
 .tabs .tab {
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/Notifications.vue b/src/components/app/Popouts/Popouts/SettingsPanels/Notifications.vue
index dc6d202..506ac5c 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/Notifications.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/Notifications.vue
@@ -144,6 +144,5 @@ export default {
   width: 100%;
   height: 100%;
   flex-direction: column;
-  background:#09464f;
 }
 </style>
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/appSettings.vue b/src/components/app/Popouts/Popouts/SettingsPanels/appSettings.vue
index b580a1d..88d72dc 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/appSettings.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/appSettings.vue
@@ -111,7 +111,6 @@ export default {
   width: 100%;
   height: 100%;
   flex-direction: column;
-  background:#09464f;
 }
 
 </style>
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue b/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue
index 7d931bb..7d03be2 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue
@@ -226,7 +226,7 @@ export default {
 }
 .survey .button {
   color: white;
-  background: #05353b;
+  background: #024554;
   padding-top: 10px;
   padding-bottom: 10px;
   width: 100%;
@@ -236,7 +236,7 @@ export default {
   cursor: pointer;
 }
 .survey .button:hover {
-  background: #0f292c;
+  background: #02303c;
 }
 
 .title {
@@ -256,7 +256,7 @@ export default {
 .input {
   display: flex;
   flex-direction: column;
-  background-color: #06454d;
+  background-color: #044050;
   padding: 10px;
   margin: 10px;
   margin-left: 30px;
@@ -266,15 +266,14 @@ export default {
 .input input {
   width: initial;
   margin-top: 2px;
-  background: #05353b;
+  background: #032d38;
 }
 textarea {
   padding: 10px;
   resize: none;
-  background: #05353b;
+  background: #032d38;
   border: none;
   outline: none;
-  border-radius: 5px;
   color: white;
   height: 100px;
   margin-bottom: 10px;
diff --git a/src/components/app/Popouts/Popouts/TakeSurveyPopout.vue b/src/components/app/Popouts/Popouts/TakeSurveyPopout.vue
index 74c37e3..1df1c9a 100644
--- a/src/components/app/Popouts/Popouts/TakeSurveyPopout.vue
+++ b/src/components/app/Popouts/Popouts/TakeSurveyPopout.vue
@@ -74,10 +74,10 @@ export default {
   margin: auto;
   box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.507);
   padding: 10px;
-  background-image: url("../../../../assets/leftPanelBackground.jpg");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
+  overflow: hidden;
+  box-shadow: 0px 0px 20px 5px #151515bd;
+  background: linear-gradient(#0B4155, #01677E);
+  border-radius: 4px;
 }
 .survay-icon .material-icons{
   color: white;
@@ -99,16 +99,16 @@ export default {
 .button {
   padding: 10px;
   margin: 3px;
-  background: #05353b;
+  background: #014656;
   transition: 0.3s;
   user-select: none;
   cursor: pointer;
 }
 .valid {
-  background: #05353b;
+  background: #014656;
 }
 .valid:hover{
-  background: #0f292c;
+  background: #02303c;
 }
 .warning {
   background: rgba(255, 27, 27, 0.589)
diff --git a/src/components/app/Popouts/Popouts/uploadDialog.vue b/src/components/app/Popouts/Popouts/uploadDialog.vue
index 373c367..d3a663b 100644
--- a/src/components/app/Popouts/Popouts/uploadDialog.vue
+++ b/src/components/app/Popouts/Popouts/uploadDialog.vue
@@ -198,7 +198,7 @@ export default {
 
 <style scoped>
 .dark-background {
-  background: rgba(0, 0, 0, 0.877);
+  background: rgba(0, 0, 0, 0.4);
   position: absolute;
   top: 0;
   bottom: 0;
@@ -213,10 +213,10 @@ export default {
   width: 500px;
   flex-direction: column;
   position: relative;
-  background-image: url("../../../../assets/leftPanelBackground.jpg");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
+  overflow: hidden;
+  box-shadow: 0px 0px 20px 5px #151515bd;
+  background: linear-gradient(#0B4155, #01677E);
+  border-radius: 4px;
 }
 .info {
   display: flex;
@@ -273,14 +273,14 @@ export default {
   display: flex;
   align-content: center;
   align-items: center;
-  background: #05353b;
+  background: #024554;
   padding: 5px;
   cursor: pointer;
   user-select: none;
   transition: 0.3s;
 }
 .button:hover {
-  background: #0f292c;
+  background: #02303c;
 }
 .button .text {
   margin-left: 5px;
@@ -300,7 +300,7 @@ export default {
 }
 .chat-input {
   font-family: "Roboto", sans-serif;
-  background: #45939e;
+  background: #032d38;
   color: white;
   width: 100%;
   height: 20px;
diff --git a/src/components/app/Popouts/Popouts/userInformationPopout.vue b/src/components/app/Popouts/Popouts/userInformationPopout.vue
index 827d422..c9e9366 100644
--- a/src/components/app/Popouts/Popouts/userInformationPopout.vue
+++ b/src/components/app/Popouts/Popouts/userInformationPopout.vue
@@ -231,11 +231,10 @@ export default {
   display: flex;
   flex-direction: row;
   position: relative;
-  box-shadow: 0px 0px 20px 11px #151515c4;
-  background-image: url("../../../../assets/leftPanelBackground.jpg");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
+  box-shadow: 0px 0px 20px 5px #151515bd;
+  background: linear-gradient(#0B4155, #01677E);
+  border-radius: 4px;
+  overflow: hidden;
 }
 
 .spinner {
@@ -269,7 +268,7 @@ export default {
   align-content: center;
   padding-bottom: 10px;
   flex-shrink: 0;
-  background: rgba(0, 0, 0, 0.3);
+  background: rgba(0, 0, 0, 0.5);
   padding-top: 30px;
 }
 
diff --git a/src/components/app/Tabs/Explore.vue b/src/components/app/Tabs/Explore.vue
index c230973..9560414 100644
--- a/src/components/app/Tabs/Explore.vue
+++ b/src/components/app/Tabs/Explore.vue
@@ -303,7 +303,7 @@ export default {
   .header {
     background: #063443;
     padding-left: 10px;
-    height: 64px;
+    height: 54px;
     display: flex;
     align-items: center;
     align-content: center;
diff --git a/src/components/app/messageEmbedTemplate.vue b/src/components/app/messageEmbedTemplate.vue
index 3cb546b..985ab8f 100644
--- a/src/components/app/messageEmbedTemplate.vue
+++ b/src/components/app/messageEmbedTemplate.vue
@@ -105,7 +105,7 @@ export default {
 
 <style scoped>
 .embed {
-  background: #1d2b2d;
+  background: #ffffff21;
   padding: 5px;
   display: flex;
   max-width: 500px;
diff --git a/src/components/app/statusList.vue b/src/components/app/statusList.vue
index 6cfae1e..be86f85 100644
--- a/src/components/app/statusList.vue
+++ b/src/components/app/statusList.vue
@@ -65,7 +65,7 @@ export default {
   position: absolute;
   top: 60px;
   right: 5px;
-  background: rgba(0, 0, 0, 0.7);
+  background: rgba(3, 32, 41, 0.9);
   backdrop-filter: blur(5px);
   width: 180px;
   z-index: 4;
@@ -81,7 +81,7 @@ export default {
 }
 
 .status-list:hover {
-  background: #0000008c;
+  background: #081619;
 }
 
 .status-icon {
diff --git a/src/components/app/uploadsQueue.vue b/src/components/app/uploadsQueue.vue
index 0651c63..76a3b4d 100644
--- a/src/components/app/uploadsQueue.vue
+++ b/src/components/app/uploadsQueue.vue
@@ -39,12 +39,19 @@ export default {
 }
 .upload {
   color: white;
-  background: #3a585c;
+  background: #26778a;
   margin: 10px;
   margin-left: 10px;
   display: flex;
   padding: 10px;
 }
+.icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-right: 5px;
+  flex-shrink: 0;
+}
 .icon .material-icons {
   font-size: 40px;
 }
@@ -61,7 +68,7 @@ export default {
 }
 .size {
   font-size: 15px;
-  color: rgb(207, 207, 207);
+  color: #d5e3e6;
 }
 .progress {
   display: flex;
diff --git a/src/components/homePage/DownloadAppPopout.vue b/src/components/homePage/DownloadAppPopout.vue
index ff324e2..216bf8c 100644
--- a/src/components/homePage/DownloadAppPopout.vue
+++ b/src/components/homePage/DownloadAppPopout.vue
@@ -64,7 +64,7 @@ export default {
     margin: auto;
     background: rgb(39, 39, 39);
     flex-direction: column;
-    border-radius: 10px;
+    border-radius: 4px;
     overflow: hidden;
 
   }
diff --git a/src/utils/changelog.js b/src/utils/changelog.js
index ac0b6a5..75e547f 100644
--- a/src/utils/changelog.js
+++ b/src/utils/changelog.js
@@ -9,12 +9,24 @@ const prototype = {
 };
 
 const config = [
+  {
+    version: 8.6,
+    title: "New redesign!",
+    shortTitle: "",
+    date: "23/11/2019",
+    headColor: "#007792",
+    new: [
+      "A new and better designed Nertivia! Thanks to skull."
+    ],
+    bugs: [
+      "Some bugs have been fixed"
+    ]
+  },
   {
     version: 8.5,
     title: "Format buttons and color text!",
     shortTitle: "",
     date: "18/11/2019",
-    headColor: "#007792",
     new: [
       "Enter will now create new lines on mobile.",
       "You can now easily format your messages using the format buttons above.",
diff --git a/src/views/GDriveCallback.vue b/src/views/GDriveCallback.vue
index 8fd7de8..1d05535 100644
--- a/src/views/GDriveCallback.vue
+++ b/src/views/GDriveCallback.vue
@@ -90,7 +90,8 @@ body {
   flex-direction: column;
   color: white;
   height: 100%;
-  background: #173d42;
+  overflow: hidden;
+  background: linear-gradient(#0B4155, #01677E);
 }
 .app-content {
   display: flex;
@@ -129,9 +130,7 @@ body {
   justify-content: center;
   z-index: 9999;
   padding: 20px;
-  background-image: url("../assets/leftPanelBackground.jpg");
-  background-position: center;
-  background-size: cover;
+  background: #044050;
 }
 
 .loading {
diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
index 868a437..26351c4 100644
--- a/src/views/HomePage.vue
+++ b/src/views/HomePage.vue
@@ -221,10 +221,7 @@ body {
   flex-shrink: 0;
   border: 10px;
   position: relative;
-  background-image: url("../assets/leftPanelBackground.jpg");
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
+  background: #072834;
 }
 .logo {
   background-image: url("../assets/logo.png");
@@ -250,7 +247,7 @@ body {
   width: 100%;
   height: 100%;
   transition: 0.5s;
-  background-color: #173d42;
+  background: linear-gradient(#0B4155, #01677E);
 }
 .content {
   position: fixed;
@@ -324,7 +321,7 @@ body {
   justify-content: center;
 }
 .feature {
-  background: #102a2e;
+  background: #024352;
   color: white;
   margin: 10px;
   padding: 2px;
@@ -353,7 +350,7 @@ body {
 }
 .link {
   padding: 10px;
-  background: rgba(0, 0, 0, 0.219);
+  background: #25424d;
   user-select: none;
   margin-left: 5px;
   transition: 0.3s;
diff --git a/src/views/Invites.vue b/src/views/Invites.vue
index 2adb9f8..75fd2dc 100644
--- a/src/views/Invites.vue
+++ b/src/views/Invites.vue
@@ -131,7 +131,7 @@ body {
   flex-direction: column;
   color: white;
   height: 100%;
-  background: #173d42;
+  background: linear-gradient(#0B4155, #01677E);
 }
 .app-content {
   display: flex;
@@ -160,9 +160,7 @@ body {
   justify-content: center;
   z-index: 9999;
   padding-bottom: 20px;
-  background-image: url("../assets/leftPanelBackground.jpg");
-  background-position: center;
-  background-size: cover;
+  background: #044050;
 }
 .server {
   display: flex;
diff --git a/src/views/LoginPage.vue b/src/views/LoginPage.vue
index cf64274..0723e4e 100644
--- a/src/views/LoginPage.vue
+++ b/src/views/LoginPage.vue
@@ -197,7 +197,7 @@ body {
   flex-direction: column;
   color: white;
   height: 100%;
-  background: #173d42;
+  background: linear-gradient(#0B4155, #01677E);
 }
 .app-content {
   display: flex;
@@ -224,9 +224,7 @@ body {
   align-items: center;
   z-index: 9999;
   padding-bottom: 20px;
-  background-image: url("../assets/leftPanelBackground.jpg");
-  background-position: center;
-  background-size: cover;
+  background: #043b4a;
 }
 .box .title {
   text-align: center;
@@ -258,7 +256,7 @@ form {
   margin: 10px;
   width: 80%;
   align-self: center;
-  background: #074d57;
+  background: #032b35;
   padding: 10px;
 }
 .input-text {
@@ -269,7 +267,7 @@ input {
   outline: none;
   padding: 10px;
   border: none;
-  background: #03262b;
+  background: #021b21;
   color: white;
 }
 .buttons {
diff --git a/src/views/RegisterPage.vue b/src/views/RegisterPage.vue
index b2feb3e..d610f98 100644
--- a/src/views/RegisterPage.vue
+++ b/src/views/RegisterPage.vue
@@ -201,7 +201,7 @@ body {
   display: flex;
   flex-direction: column;
   color: white;
-  background: #173d42;
+  background: linear-gradient(#0B4155, #01677E);
 }
 .app-content {
   display: flex;
@@ -228,9 +228,8 @@ body {
   align-items: center;
   z-index: 9999;
   padding-bottom: 20px;
-  background-image: url("../assets/leftPanelBackground.jpg");
-  background-position: center;
-  background-size: cover;
+  background: #043b4a;
+  
 }
 .box .title {
   text-align: center;
@@ -262,7 +261,7 @@ form {
   margin: 10px;
   width: 80%;
   align-self: center;
-  background: #074d57;
+  background: #032b35;
   padding: 10px;
 }
 .input-text {
@@ -274,7 +273,7 @@ input {
   padding: 10px;
   border: none;
   background: none;
-  background: #03262b;
+  background: #021b21;
   color: white;
 }
 .buttons {

From 6235fe08385809a6096d4f51c6778298f62b4df1 Mon Sep 17 00:00:00 2001
From: supertiger1234 <saawalkhn@googlemail.com>
Date: Sat, 23 Nov 2019 20:09:14 +0000
Subject: [PATCH 7/8] fixed mistake in changelog

---
 src/utils/changelog.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/utils/changelog.js b/src/utils/changelog.js
index 75e547f..91d0900 100644
--- a/src/utils/changelog.js
+++ b/src/utils/changelog.js
@@ -18,7 +18,7 @@ const config = [
     new: [
       "A new and better designed Nertivia! Thanks to skull."
     ],
-    bugs: [
+    fix: [
       "Some bugs have been fixed"
     ]
   },

From 4e2654aae27d040a5f4171703cc22c484974a971 Mon Sep 17 00:00:00 2001
From: supertiger1234 <saawalkhn@googlemail.com>
Date: Sat, 23 Nov 2019 20:14:20 +0000
Subject: [PATCH 8/8] left out some stuff :D

---
 .../app/Popouts/Popouts/DragDropFileUploadDialog.vue      | 8 ++++----
 src/components/app/Popouts/Popouts/uploadDialog.vue       | 4 ++--
 src/views/404.vue                                         | 6 ++----
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/src/components/app/Popouts/Popouts/DragDropFileUploadDialog.vue b/src/components/app/Popouts/Popouts/DragDropFileUploadDialog.vue
index 247c46e..1a1f159 100644
--- a/src/components/app/Popouts/Popouts/DragDropFileUploadDialog.vue
+++ b/src/components/app/Popouts/Popouts/DragDropFileUploadDialog.vue
@@ -28,10 +28,10 @@
 	display: flex;
 	flex-direction: column;
 	user-select: none;
-  background-image: url("../../../../assets/leftPanelBackground.jpg");
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
+  overflow: hidden;
+  box-shadow: 0px 0px 20px 5px #151515bd;
+  background-color: #044050;
+  border-radius: 4px;
 }
 .material-icons{
 	font-size: 80px;
diff --git a/src/components/app/Popouts/Popouts/uploadDialog.vue b/src/components/app/Popouts/Popouts/uploadDialog.vue
index d3a663b..1e0c203 100644
--- a/src/components/app/Popouts/Popouts/uploadDialog.vue
+++ b/src/components/app/Popouts/Popouts/uploadDialog.vue
@@ -215,7 +215,7 @@ export default {
   position: relative;
   overflow: hidden;
   box-shadow: 0px 0px 20px 5px #151515bd;
-  background: linear-gradient(#0B4155, #01677E);
+  background-color: #01677E;
   border-radius: 4px;
 }
 .info {
@@ -300,7 +300,7 @@ export default {
 }
 .chat-input {
   font-family: "Roboto", sans-serif;
-  background: #032d38;
+  background: #014655;
   color: white;
   width: 100%;
   height: 20px;
diff --git a/src/views/404.vue b/src/views/404.vue
index d494c55..13f6029 100644
--- a/src/views/404.vue
+++ b/src/views/404.vue
@@ -65,7 +65,7 @@ body {
   display: flex;
   flex-direction: column;
   color: white;
-  background: #173d42;
+  background: linear-gradient(#0B4155, #01677E);
 }
 .app-content {
   display: flex;
@@ -94,9 +94,7 @@ body {
   align-items: center;
   z-index: 9999;
   padding-bottom: 20px;
-  background-image: url("../assets/leftPanelBackground.jpg");
-  background-position: center;
-  background-size: cover;
+  background: #044050;
 }
 .box .title {
   text-align: center;