redesign

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;

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>

src/components/app/MainNav.vue

@@ -0,0 +1,380 @@
+<template>
+  <div class="navigation" ref="navigation">
+    <div
+      class="tool-tip"
+      ref="toolTip"
+      :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>
+    </div>
+    <div
+      class="item material-icons"
+      @click="openSettings"
+      @mouseleave="mouseLeaveEvent"
+      @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 { isMobile } from "@/utils/Mobile";
+export default {
+  data() {
+    return {
+      avatarDomain: config.domain + "/avatars",
+      toolTipShown: false,
+      toolTipLeftPosition: 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) {
+      this.toolTipLocalName = name;
+      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;
+    },
+    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);
+    }
+  }
+};
+</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;
+  top: 60px;
+  z-index: 99999;
+  user-select: none;
+  cursor: default;
+  transition: 0.2s;
+}
+</style>

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 {

src/components/app/MembersList.vue

@@ -81,16 +81,14 @@ export default {
   display: flex;
   flex-direction: column;
   width: 300px;
+  max-width: calc(100% - 60px);
   height: 100%;
-  background-image: url("../../assets/leftPanelBackground.jpg");
+  background: rgba(0, 0, 0, 0.14);
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
 }
 .header {
   height: 50px;
   width: 100%;
-  background: rgba(0, 0, 0, 0.438);
+  background: #083A4A;
   display: flex;
   flex-shrink: 0;
 }
@@ -103,12 +101,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>
 

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"
@@ -146,6 +145,7 @@ export default {
   methods: {
     messageColorChange(e) {
       const hexColor = e.target.value;
+      e.target.value = ""
       this.customColor = hexColor;
     },
     addFormat(type, customEnding, customPos) {
@@ -734,26 +734,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 +783,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 +798,17 @@ export default {
   overflow: hidden;
   max-height: 30vh;
   overflow-y: auto;
-  &:hover {
+  &::placeholder{
-    background: rgba(255, 255, 255, 0.1);
+    color: #597981;
-  }
-
-  &:focus {
-    background: rgba(255, 255, 255, 0.13);
   }
 }
 
 .send-button {
   font-size: 20px;
-  color: white;
+  color: #a5bec4;
-  background: rgba(255, 255, 255, 0.07);
+  background: transparent;
   border: none;
   outline: none;
-  margin-left: 2px;
-  margin-right: 10px;
   min-height: 40px;
   width: 50px;
   transition: 0.3s;
@@ -830,7 +823,7 @@ export default {
     margin: auto;
   }
   &:hover {
-    background: rgba(255, 255, 255, 0.13);
+    color: white;
   }
 }
 
@@ -843,8 +836,8 @@ export default {
 
 .emojis-button {
   font-size: 20px;
-  color: white;
+  color: #a5bec4;
-  background: rgba(255, 255, 255, 0.07);
+  background: transparent;
   border: none;
   outline: none;
   margin-left: 2px;
@@ -859,17 +852,17 @@ export default {
     margin: auto;
   }
   &:hover {
-    background: rgba(255, 255, 255, 0.13);
+  color: white;
   }
 }
 
 .back-to-bottom-button {
   &:hover {
-    background: #748b8e;
+  background: rgba(0, 0, 0, 0.90);
-    box-shadow: 0px 0px 15px 0px #0000008a;
   }
   transition: 0.2s;
-  background: #516e72;
+  background: rgba(0, 0, 0, 0.80);
+  border-radius: 100px;
   color: white;
   position: absolute;
   bottom: 15px;
@@ -879,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;
@@ -905,9 +898,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 +912,10 @@ export default {
     user-select: none;
     cursor: pointer;
     height: 100%;
-    width: 35px;
+    width: 30px;
-    margin-left: 2px;
+    margin-left: 0px;
     transition: 0.2s;
-    color: #d5dcdd;
+    color: #a5bec4;
     &:hover {
       color: white;
     }
@@ -940,16 +936,17 @@ export default {
     background: rgb(231, 231, 231);
     flex-shrink: 0;
     cursor: pointer;
+    border-radius: 3px;
   }
   .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;
     }
   }
 }

src/components/app/MessagePanel/Heading.vue

@@ -61,7 +61,7 @@ export default {
 
 <style scoped>
 .heading {
-  background: #112c30;
+  background: #073240;
   margin-bottom: 0;
   height: 50px;
   display: flex;

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>
@@ -272,6 +272,10 @@ export default {
 
 
 <style scoped lang="scss">
+
+$self-message-color: #053746;
+$message-color: #03222b;
+
 .container {
   position: relative;
   z-index: 1;
@@ -299,8 +303,7 @@ export default {
   display: table;
   color: white;
   overflow: hidden;
-  border-radius: 5px;
+  background: $message-color;
-  background: #0a1a1c;
 }
 
 .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,19 +352,19 @@ 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 {
   display: flex;
-  background: #5b7377;
+  background: #ffffff21;
   padding: 10px;
   margin-top: 5px;
   &.music {
@@ -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;
@@ -440,7 +443,7 @@ export default {
 .image-content {
   margin-top: 10px;
   padding: 5px;
-  background: #1d2c2e;
+  background: #ffffff21;
   display: -ms-flexbox;
   display: flex;
   flex-direction: column;
@@ -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;

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"
     />
@@ -96,8 +96,9 @@ export default {
   position: relative;
   flex-shrink: 0;
   align-items: center;
-  height: 60px;
+  height: 50px;
   transition: 0.3s;
+  background-color: #083A4A
 }
 
 .avatar {

src/components/app/Navigation.vue

@@ -8,41 +8,8 @@
     >{{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">
+        <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
@@ -58,24 +25,16 @@
         </div>
 
       </div>
-      <div class="seperater" />
       <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>
-      <div
-        class="item material-icons"
-        @click="openSettings"
-        @mouseenter="localToolTipEvent('Settings', $event)"
-      >settings</div>
     </div>
   </div>
 </template>
@@ -122,6 +81,7 @@ export default {
       }
     },
     openServer(serverID) {
+      this.switchTab(2);
       const server = this.servers[serverID];
       const lastSelectedChannel = JSON.parse(
         localStorage.getItem("selectedChannels") || "{}"
@@ -185,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() {
@@ -323,8 +283,7 @@ export default {
   flex-direction: column;
   flex-shrink: 0;
   height: 100%;
-  width: 60px;
+  width: 70px;
-  background-color: #085053;
 }
 
 .container {
@@ -332,7 +291,7 @@ export default {
   flex-direction: column;
   flex-shrink: 0;
   height: 100%;
-  width: 60px;
+  width: 70px;
 }
 .navigation-items {
   display: flex;
@@ -364,8 +323,8 @@ export default {
   color: white;
   font-size: 30px;
   align-self: center;
-  width: 60px;
+  width: 70px;
-  height: 60px;
+  height: 70px;
   cursor: pointer;
   user-select: none;
   opacity: 0.8;
@@ -438,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>

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");
+  box-shadow: 0px 0px 20px 5px #151515bd;
-  background-repeat: no-repeat;
+  background: linear-gradient(#0B4155, #01677E);
-  background-position: center;
+  border-radius: 4px;
-  background-size: cover;
 }
 .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;
   }
 }
 

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");
+  box-shadow: 0px 0px 20px 5px #151515bd;
-  background-repeat: no-repeat;
+  background: linear-gradient(#0B4155, #01677E);
-  background-position: center;
+  border-radius: 4px;
-  background-size: cover;
 }
 .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 {

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");
+  overflow: hidden;
-  background-repeat: no-repeat;
+  box-shadow: 0px 0px 20px 5px #151515bd;
-  background-position: center;
+  background-color: #044050;
-  background-size: cover;
+  border-radius: 4px;
 }
 .material-icons{
 	font-size: 80px;

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

@@ -94,11 +94,10 @@ export default {
   display: flex;
   flex-direction: column;
   color: white;
-  border-radius: 3px;
+  overflow: hidden;
-  background-image: url("../../../../assets/leftPanelBackground.jpg");
+  box-shadow: 0px 0px 20px 5px #151515bd;
-  background-repeat: no-repeat;
+  background: linear-gradient(#0B4155, #01677E);
-  background-position: center;
+  border-radius: 4px;
-  background-size: cover;
 }
 .text {
   color: white;

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");
+  box-shadow: 0px 0px 20px 5px #151515bd;
-  background-repeat: no-repeat;
+  background: linear-gradient(#0B4155, #01677E);
-  background-position: center;
+  border-radius: 4px;
-  background-size: cover;
 }
 .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 {

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;

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 {
@@ -247,11 +247,13 @@ export default {
     margin-left: 2px;
     .banner-image {
       position: relative;
-      width: 240px;
+      width: 250px;
-      height: 150px;
+      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);
       }
     }
@@ -287,7 +288,7 @@ export default {
 .input {
   display: flex;
   flex-direction: column;
-  background-color: #06454d;
+  background-color: #044050;;
   padding: 10px;
   align-self: center;
   margin: 10px;
@@ -297,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;
@@ -309,7 +310,7 @@ export default {
   transition: 0.3s;
 }
 .button:hover {
-  background: #0f292c;
+  background: #022831;
 }
 .save-button {
   margin-top: 10px;

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;

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;
 }

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");
+  overflow: hidden;
-  background-repeat: no-repeat;
+  box-shadow: 0px 0px 20px 5px #151515bd;
-  background-position: center;
+  background: linear-gradient(#0B4155, #01677E);
-  background-size: cover;
+  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;

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;

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");
+  box-shadow: 0px 0px 20px 5px #151515bd;
-  background-repeat: no-repeat;
+  background: linear-gradient(#0B4155, #01677E);
-  background-position: center;
+  border-radius: 4px;
-  background-size: cover;
 }
 .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;

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;

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;

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;
 }
 

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 {

src/components/app/Popouts/Popouts/SettingsPanels/Notifications.vue

@@ -144,6 +144,5 @@ export default {
   width: 100%;
   height: 100%;
   flex-direction: column;
-  background:#09464f;
 }
 </style>

src/components/app/Popouts/Popouts/SettingsPanels/appSettings.vue

@@ -111,7 +111,6 @@ export default {
   width: 100%;
   height: 100%;
   flex-direction: column;
-  background:#09464f;
 }
 
 </style>

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;

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");
+  overflow: hidden;
-  background-repeat: no-repeat;
+  box-shadow: 0px 0px 20px 5px #151515bd;
-  background-position: center;
+  background: linear-gradient(#0B4155, #01677E);
-  background-size: cover;
+  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)

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");
+  overflow: hidden;
-  background-repeat: no-repeat;
+  box-shadow: 0px 0px 20px 5px #151515bd;
-  background-position: center;
+  background-color: #01677E;
-  background-size: cover;
+  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: #014655;
   color: white;
   width: 100%;
   height: 20px;

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;
+  box-shadow: 0px 0px 20px 5px #151515bd;
-  background-image: url("../../../../assets/leftPanelBackground.jpg");
+  background: linear-gradient(#0B4155, #01677E);
-  background-repeat: no-repeat;
+  border-radius: 4px;
-  background-position: center;
+  overflow: hidden;
-  background-size: cover;
 }
 
 .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;
 }
 

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,15 +120,12 @@ export default {
 <style scoped lang="scss" >
 .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;
 }
 
 .seperater {
@@ -152,6 +148,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 +159,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 +187,6 @@ export default {
   align-items: center;
   padding-left: 10px;
   position: relative;
-  backdrop-filter: blur(15px);
   z-index: 2;
   user-select: none;
   overflow: hidden;
@@ -214,4 +214,11 @@ export default {
     background: rgba(0, 0, 0, 0.322);
   }
 }
+
+@media (max-width: 600px) {
+  .right{
+    border-radius: 0;
+  }
+}
+
 </style>

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 {

src/components/app/ServerTemplate/ServerTemplate.vue

@@ -9,6 +9,7 @@
   >
     <profile-picture
       size="45px"
+      class="avatar"
       :url="`${avatarDomain}/${serverData.avatar}${hover ? '' : '?type=png'}`"
     />
   </div>
@@ -85,8 +86,8 @@ export default {
   z-index: 1;
   display: flex;
   align-self: center;
-  width: 60px;
+  width: 70px;
-  height: 60px;
+  height: 70px;
   flex-shrink: 0;
   justify-content: center;
   align-content: center;
@@ -94,14 +95,25 @@ export default {
   user-select: none;
   transition: background 0.2s;
   cursor: pointer;
-  &:hover {
+  &:hover::before {
-    background: #074447;
+    content: "";
+    position: absolute;
+    top: 15px;
+    bottom: 15px;
+    left: 0;
+    width: 3px;
+    background: #ffffff5e;
   }
-  &.selected {
+  &.selected::before {
-    background: #042a2b;
+    content: "";
+    position: absolute;
+    top: 10px;
+    bottom: 10px;
+    left: 0;
+    width: 3px;
+    background: #ffffffc5;
   }
 }
-
 .notifyAnimation:before {
   content: "!";
   color: white;

src/components/app/SimpleMarkdown.vue

@@ -26,7 +26,7 @@
 	}
 
 	.codeblock {
-		background-color: #233538;
+		background-color: #ffffff1a;
 		padding: 5px;
 		word-wrap: break-word;
 		word-break: break-word;

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>

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);
+    background: #063443;
-    padding: 10px;
+    padding-left: 10px;
+    height: 54px;
     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>

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 {

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;
+      width: 100%;
-      background: rgba(40, 140, 255, 0.8);
+      height: 40px;
-      align-self: flex-end;
+      border-radius: 4px;
-      flex-shrink: 0;
+      background: rgba(0, 179, 219, 0.8);
-      margin: auto;
+      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;

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%;

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: 2;
-    z-index: 1;
+    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>

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;

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;

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>
 

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>
 

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(3, 32, 41, 0.9);
   backdrop-filter: blur(5px);
   width: 180px;
   z-index: 4;
@@ -81,7 +81,7 @@ export default {
 }
 
 .status-list:hover {
-  background: #042f33;
+  background: #081619;
 }
 
 .status-icon {

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;

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;
 
   }

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."
+    ],
+    fix: [
+      "Some bugs have been fixed"
+    ]
+  },
   {
     version: 8.5,
     title: "Format buttons and color text!",
     shortTitle: "",
     date: "18/11/2019",
-    headColor: "#0c7b7f",
     new: [
       "Enter will now create new lines on mobile.",
       "You can now easily format your messages using the format buttons above.",

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: #044050;
-  background-position: center;
-  background-size: cover;
 }
 .box .title {
   text-align: center;

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 {

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: #044050;
-  background-position: center;
-  background-size: cover;
 }
 
 .loading {

src/views/HomePage.vue

@@ -221,10 +221,7 @@ body {
   flex-shrink: 0;
   border: 10px;
   position: relative;
-  background-image: url("../assets/leftPanelBackground.jpg");
+  background: #072834;
-  background-repeat: no-repeat;
-  background-size: cover;
-  background-position: center;
 }
 .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;

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: #044050;
-  background-position: center;
-  background-size: cover;
 }
 .server {
   display: flex;

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: #043b4a;
-  background-position: center;
-  background-size: cover;
 }
 .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 {

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: #043b4a;
-  background-position: center;
+  
-  background-size: cover;
 }
 .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 {