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] 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 {