From 8a904711fe5a08a88169fa93bb8ad14f3f66496d Mon Sep 17 00:00:00 2001
From: supertiger1234 <saawalkhn@googlemail.com>
Date: Mon, 3 Feb 2020 14:50:14 +0000
Subject: [PATCH] more changes to the design

---
 src/components/app/EditPanel.vue              |  7 +---
 src/components/app/MembersList.vue            |  1 +
 src/components/app/MessageLogs.vue            |  1 +
 src/components/app/MessagePanel.vue           | 23 ++++++-----
 src/components/app/MessageTemplate.vue        |  1 +
 src/components/app/MyMiniInformation.vue      |  6 ++-
 src/components/app/Navigation.vue             |  2 +-
 .../ServerSettingsPanels/DropDownMenu.vue     |  7 +++-
 .../app/Popouts/Popouts/Settings.vue          | 19 +++++----
 .../Popouts/SettingsPanels/EditProfile.vue    | 41 +++++++++++++------
 .../Popouts/SettingsPanels/ManageEmojis.vue   | 13 +++---
 .../Popouts/SettingsPanels/MessageDesign.vue  |  4 +-
 .../Popouts/SettingsPanels/MyProfile.vue      |  2 +-
 .../SettingsPanels/MyThemeTemplate.vue        |  6 +--
 .../Popouts/SettingsPanels/MyThemes.vue       |  2 +-
 .../Popouts/Popouts/SettingsPanels/survey.vue | 27 ++++++++----
 .../Popouts/Popouts/userInformationPopout.vue | 18 +++++---
 src/components/app/Tabs/DirectMessage.vue     |  2 +-
 src/components/app/Tabs/Explore.vue           | 23 +++++++----
 .../app/Tabs/Explore/searchHeader.vue         |  2 +-
 .../app/Tabs/Explore/serverTemplate.vue       | 10 ++---
 .../app/Tabs/Explore/themesTemplate.vue       |  8 +---
 src/components/app/Tabs/News.vue              | 19 ++++-----
 src/components/app/Tabs/Servers.vue           |  6 +--
 src/components/app/TypingStatus.vue           |  9 +++-
 src/utils/changelog.js                        |  1 -
 26 files changed, 155 insertions(+), 105 deletions(-)

diff --git a/src/components/app/EditPanel.vue b/src/components/app/EditPanel.vue
index d16f817..68925d6 100644
--- a/src/components/app/EditPanel.vue
+++ b/src/components/app/EditPanel.vue
@@ -46,7 +46,7 @@ export default {
 .edit-panel {
   padding: 10px;
   color: white;
-  background: #012c36;
+  background: #002038;
   display: flex;
   flex-direction: column;
   z-index: 1;
@@ -60,7 +60,7 @@ export default {
 }
 .close-button {
   color: white;
-  background: #304548;
+  background: #0061ad;
   padding: 4px;
   align-self: flex-end;
   transition: 0.3s;
@@ -68,9 +68,6 @@ export default {
   cursor: pointer;
   border-radius: 4px;
 }
-.close-button:hover {
-  background: #485b5d;
-}
 .message {
   color: rgb(214, 214, 214);
   white-space: nowrap;
diff --git a/src/components/app/MembersList.vue b/src/components/app/MembersList.vue
index 28fbcb0..43ae0b5 100644
--- a/src/components/app/MembersList.vue
+++ b/src/components/app/MembersList.vue
@@ -181,5 +181,6 @@ export default {
   color: #b5c4ca;
   font-size: 15px;
   margin-left: 5px;
+  font-weight: bold;
 }
 </style>
diff --git a/src/components/app/MessageLogs.vue b/src/components/app/MessageLogs.vue
index 5c0da98..6f58ad5 100644
--- a/src/components/app/MessageLogs.vue
+++ b/src/components/app/MessageLogs.vue
@@ -343,6 +343,7 @@ export default {
   overflow: auto;
   flex: 1;
   position: relative;
+  padding-bottom: 23px;
 }
 
 .load-more-button {
diff --git a/src/components/app/MessagePanel.vue b/src/components/app/MessagePanel.vue
index 9613776..44f2975 100644
--- a/src/components/app/MessagePanel.vue
+++ b/src/components/app/MessagePanel.vue
@@ -36,13 +36,13 @@
         }}
       </div>
     </div>
-    <div class="typing-outer">
-      <typing-status
-        v-if="typingRecipients[selectedChannelID]"
-        :recipients="typingRecipients[selectedChannelID]"
-      />
-    </div>
     <div class="chat-input-area" v-if="selectedChannelID">
+      <div class="typing-outer">
+        <typing-status
+          v-if="typingRecipients[selectedChannelID]"
+          :recipients="typingRecipients[selectedChannelID]"
+        />
+      </div>
       <div style="position: relative;">
         <transition name="show-up">
           <div
@@ -176,7 +176,8 @@
     <div
       class="no-message-permission"
       v-if="
-        sendChannelMessagePermission === false || roleSendMessagePermission === false
+        sendChannelMessagePermission === false ||
+          roleSendMessagePermission === false
       "
     >
       You don't have permission to send messages in this channel.
@@ -835,11 +836,13 @@ export default {
 }
 .typing-outer {
   display: flex;
-  height: 20px;
   margin-bottom: 5px;
-  margin-left: 10px;
+  position: absolute;
+  top: -25px;
+  left: 0;
+  right: 0;
+  z-index: 999999;
 }
-
 .hidden {
   display: none;
 }
diff --git a/src/components/app/MessageTemplate.vue b/src/components/app/MessageTemplate.vue
index d3bd38e..2448467 100644
--- a/src/components/app/MessageTemplate.vue
+++ b/src/components/app/MessageTemplate.vue
@@ -387,6 +387,7 @@ $message-color: rgba(0, 0, 0, 0.3);
   color: white;
   overflow: hidden;
   background: $message-color;
+  border-radius: 4px;
 }
 
 .presence-message .text {
diff --git a/src/components/app/MyMiniInformation.vue b/src/components/app/MyMiniInformation.vue
index 8c38850..ce861e8 100644
--- a/src/components/app/MyMiniInformation.vue
+++ b/src/components/app/MyMiniInformation.vue
@@ -103,7 +103,9 @@ export default {
   position: relative;
   flex-shrink: 0;
   align-items: center;
-  height: 50px;
+  height: 65px;
+  padding-left: 5px;
+  padding-right: 5px;
   transition: 0.3s;
   background-color: rgba(0, 0, 0, 0.2);
 }
@@ -129,7 +131,7 @@ export default {
   }
   .tag {
     font-size: 13px;
-    color: #b2d1d9;
+    color: rgba(255, 255, 255, 0.72);
   }
 }
 
diff --git a/src/components/app/Navigation.vue b/src/components/app/Navigation.vue
index ca4e9ab..0b5dc01 100644
--- a/src/components/app/Navigation.vue
+++ b/src/components/app/Navigation.vue
@@ -355,7 +355,7 @@ export default {
 
 @media (max-width: 600px) {
   .navigation {
-    background: linear-gradient(#136a8a, #00b4db);
+    background: #005a9e;
   }
 }
 </style>
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/DropDownMenu.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/DropDownMenu.vue
index 63ef935..6b507ce 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/DropDownMenu.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/DropDownMenu.vue
@@ -88,18 +88,21 @@ export default {
 
 <style scoped>
 .drop-down {
-  background-color: #044050;
+  background-color: rgba(0, 0, 0, 0.4);
   padding: 10px;
   user-select: none;
   cursor: default;
   flex-shrink: 0;
   position: relative;
+  border-radius: 4px;
 }
 .title {
+  font-size: 14px;
+  margin-left: 2px;
   margin-bottom: 2px;
 }
 .current-select-box {
-  background: #032d38;
+  background-color: rgba(0, 0, 0, 0.4);
   padding: 5px;
   cursor: pointer;
   display: flex;
diff --git a/src/components/app/Popouts/Popouts/Settings.vue b/src/components/app/Popouts/Popouts/Settings.vue
index 40befbc..73e27dd 100644
--- a/src/components/app/Popouts/Popouts/Settings.vue
+++ b/src/components/app/Popouts/Popouts/Settings.vue
@@ -133,13 +133,18 @@ export default {
   color: white;
 }
 .settings-box {
-  height: 600px;
+  height: 630px;
   display: flex;
   margin: auto;
   overflow: hidden;
   box-shadow: 0px 0px 20px 5px #151515bd;
-  background: linear-gradient(#0b4155, #01677e);
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 87, 153, 0.8) 0,
+    rgba(0, 118, 209, 0.8)
+  );
   border-radius: 4px;
+  backdrop-filter: blur(5px);
 }
 .tabs {
   height: 100%;
@@ -171,11 +176,11 @@ export default {
 }
 
 .tab:hover {
-  background: #072935;
+  background: rgba(0, 0, 0, 0.4);
 }
 
 .tab.selected {
-  background: #051f28;
+  background: rgba(0, 0, 0, 0.4);
 }
 
 .tab.warn {
@@ -189,11 +194,11 @@ export default {
 .title {
   display: flex;
   padding: 10px;
-  font-size: 25px;
-  background: #05222d;
+  font-size: 20px;
+  background: rgba(0, 0, 0, 0.4);
 }
 .title .material-icons {
-  font-size: 40px;
+  font-size: 30px;
 }
 .title div {
   margin: auto;
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue b/src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue
index 9bd6dea..ce5c355 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/EditProfile.vue
@@ -61,9 +61,9 @@
             class="avatar"
             :url="update.avatar || avatar"
             :admin="user.admin"
-            size="100px"
-            emote-size="30px"
-            animation-padding="5px"
+            size="70px"
+            emote-size="24px"
+            animation-padding="4px"
           />
           <div class="button" @click="$refs.avatarBrowser.click()">
             Change Avatar
@@ -208,7 +208,6 @@ export default {
 .edit-profile {
   display: flex;
   flex-direction: column;
-  margin-top: 10px;
   flex: 1;
   overflow: hidden;
 }
@@ -217,6 +216,7 @@ export default {
   flex: 1;
   overflow: auto;
   flex-shrink: 0;
+  padding-top: 20px;
 }
 
 .change-avatar {
@@ -227,19 +227,22 @@ export default {
 .change-avatar-container {
   display: flex;
   flex-direction: column;
-  background-color: #044050;
+  background-color: rgba(0, 0, 0, 0.4);
   width: 150px;
   align-self: center;
   padding: 20px;
   margin-top: 10px;
+  margin-left: 29px;
+  border-radius: 4px;
   .button {
-    background: #033442;
+    background: rgba(0, 0, 0, 0.2);
     &:hover {
-      background: #032b36;
+      background: rgba(0, 0, 0, 0.3);
     }
   }
 }
 .avatar {
+  margin-top: 10px;
   margin-bottom: 10px;
   align-self: center;
 }
@@ -247,16 +250,17 @@ export default {
   display: none;
 }
 .button {
-  background: #024554;
+  background: rgba(0, 0, 0, 0.3);
   padding: 10px;
   text-align: center;
   display: inline-block;
   align-self: center;
   cursor: pointer;
   transition: 0.3s;
+  border-radius: 4px;
 }
 .button:hover {
-  background: #02303c;
+  background: rgba(0, 0, 0, 0.4);
 }
 .button.disabled {
   background: grey;
@@ -271,11 +275,16 @@ export default {
   display: flex;
   flex-direction: column;
   overflow: hidden;
-  background-color: #044050;
+  background-color: rgba(0, 0, 0, 0.4);
   padding: 10px;
   margin: 10px;
   margin-left: 30px;
   flex-shrink: 0;
+  border-radius: 4px;
+  .title {
+    font-size: 14px;
+    margin-left: 2px;
+  }
 }
 .outer-input .user-tag .username {
   flex: 1;
@@ -290,15 +299,22 @@ export default {
 }
 .outer-input input {
   width: initial;
+  border-radius: 4px;
 }
 
 .save-button {
   z-index: 99999;
-  width: 100%;
-  align-self: initial;
+  width: 120px;
+  align-self: flex-end;
   display: block;
   padding: 10px 0px 10px 0px;
+  background: rgba(0, 0, 0, 0.4);
   margin: 0;
+  margin-bottom: 20px;
+  margin-right: 20px;
+  &:hover {
+    background: rgba(0, 0, 0, 0.6);
+  }
 }
 
 .errors {
@@ -320,6 +336,7 @@ export default {
   }
   .change-avatar-container {
     order: 1;
+    margin-left: 0;
     flex-shrink: 0;
   }
   .change-avatar {
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/ManageEmojis.vue b/src/components/app/Popouts/Popouts/SettingsPanels/ManageEmojis.vue
index 2f6dfb0..ac51ef3 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/ManageEmojis.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/ManageEmojis.vue
@@ -161,10 +161,10 @@ input {
   width: calc(100% - 30px);
 }
 input:hover {
-  background: rgba(26, 26, 26, 0.24);
+  background: rgba(0, 0, 0, 0.2);
 }
 input:focus {
-  background: rgba(26, 26, 26, 0.527);
+  background: rgba(0, 0, 0, 0.5);
 }
 
 .delete-button {
@@ -214,7 +214,7 @@ input:focus {
 .emojis-list {
   display: flex;
   flex-direction: column;
-  background-color: #00000024;
+  background-color: rgba(0, 0, 0, 0.1);
   overflow-y: auto;
   overflow-x: hidden;
   height: 100%;
@@ -234,7 +234,7 @@ input:focus {
   flex-shrink: 0;
 }
 .emoji:hover {
-  background: #052e3b;
+  background: rgba(0, 0, 0, 0.2);
 }
 .emoji-name {
   margin: auto;
@@ -245,15 +245,16 @@ input:focus {
   display: inline-block;
   width: inherit;
   padding: 10px;
-  background: #063443;
+  background: rgba(6, 52, 67, 0.4);
   margin-bottom: 10px;
   margin-left: 20px;
   user-select: none;
   transition: 0.3s;
   cursor: pointer;
+  border-radius: 4px;
 }
 .button:hover {
-  background: #052631;
+  background: rgba(6, 52, 67, 0.6);
 }
 .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 1cbb329..c1a00ae 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/MessageDesign.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/MessageDesign.vue
@@ -170,7 +170,7 @@ export default {
 
 .message-example {
   padding: 10px;
-  background: linear-gradient(#0b4155, #01677e);
+  background: rgba(0, 0, 0, 0.45);
 }
 .title {
   font-size: 20px;
@@ -190,7 +190,7 @@ export default {
 }
 
 .options {
-  background-color: #023643;
+  background-color: rgba(0, 0, 0, 0.6);
   padding-top: 5px;
 }
 </style>
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue b/src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue
index 8ae716a..e745fd2 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/MyProfile.vue
@@ -54,7 +54,7 @@ export default {
 .tabs {
   z-index: 999999;
   display: flex;
-  background: #073444;
+  background: rgba(0, 0, 0, 0.6);
   justify-content: center;
 }
 .tabs .tab {
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/MyThemeTemplate.vue b/src/components/app/Popouts/Popouts/SettingsPanels/MyThemeTemplate.vue
index d9017e6..7edec3d 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/MyThemeTemplate.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/MyThemeTemplate.vue
@@ -73,17 +73,17 @@ export default {
     transition: 0.2s;
     &:hover {
       color: white;
-      background: rgba(0, 0, 0, 0.3);
+      background: rgba(0, 0, 0, 0.2);
     }
     &.selected {
-      background: rgba(0, 0, 0, 0.5);
+      background: rgba(0, 0, 0, 0.4);
       color: white;
     }
   }
 }
 .context {
   display: flex;
-  background: rgba(0, 0, 0, 0.6);
+  background: rgba(0, 0, 0, 0.5);
   .button {
     display: flex;
     margin: 5px;
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/MyThemes.vue b/src/components/app/Popouts/Popouts/SettingsPanels/MyThemes.vue
index 23415ae..620d82f 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/MyThemes.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/MyThemes.vue
@@ -190,7 +190,7 @@ export default {
 .bar {
   display: flex;
   width: 100%;
-  background: rgba(0, 0, 0, 0.2);
+  background: rgba(0, 0, 0, 0.3);
   height: 40px;
   flex-shrink: 0;
   .button {
diff --git a/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue b/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue
index 54a9695..db6d4d7 100644
--- a/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue
+++ b/src/components/app/Popouts/Popouts/SettingsPanels/survey.vue
@@ -162,7 +162,7 @@ export default {
 };
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .notice {
   color: rgb(216, 216, 216);
   font-size: 15px;
@@ -228,23 +228,29 @@ export default {
   margin-bottom: 10px;
 }
 .survey-valid {
-  color: green;
+  color: #54ff54;
   margin-bottom: 10px;
 }
 .survey .button {
   color: white;
-  background: #024554;
+  background: rgba(0, 0, 0, 0.4);
   padding-top: 10px;
   padding-bottom: 10px;
-  width: 100%;
+  z-index: 99999;
+  width: 120px;
   text-align: center;
   transition: 0.3s;
   user-select: none;
   cursor: pointer;
   flex-shrink: 0;
+  margin: 0;
+  align-self: flex-end;
+  margin-bottom: 20px;
+  margin-right: 20px;
+  border-radius: 4px;
 }
 .survey .button:hover {
-  background: #02303c;
+  background: rgba(0, 0, 0, 0.6);
 }
 
 .title {
@@ -264,22 +270,27 @@ export default {
 .input {
   display: flex;
   flex-direction: column;
-  background-color: #044050;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 4px;
   padding: 10px;
   margin: 10px;
   margin-left: 30px;
   margin-right: 30px;
   padding-bottom: 0;
+  .input-title {
+    font-size: 14px;
+    margin-left: 2px;
+  }
 }
 .input input {
   width: initial;
   margin-top: 2px;
-  background: #032d38;
+  background-color: rgba(0, 0, 0, 0.4);
 }
 textarea {
   padding: 10px;
   resize: none;
-  background: #032d38;
+  background-color: rgba(0, 0, 0, 0.4);
   border: none;
   outline: none;
   color: white;
diff --git a/src/components/app/Popouts/Popouts/userInformationPopout.vue b/src/components/app/Popouts/Popouts/userInformationPopout.vue
index 48145b8..0cfbf0a 100644
--- a/src/components/app/Popouts/Popouts/userInformationPopout.vue
+++ b/src/components/app/Popouts/Popouts/userInformationPopout.vue
@@ -265,8 +265,13 @@ export default {
   flex-direction: row;
   position: relative;
   box-shadow: 0px 0px 20px 5px #151515bd;
-  background: linear-gradient(#0b4155, #01677e);
+  background: linear-gradient(
+    to bottom,
+    rgba(0, 87, 153, 0.8) 0,
+    rgba(0, 118, 209, 0.8)
+  );
   border-radius: 4px;
+  backdrop-filter: blur(5px);
   overflow: hidden;
 }
 
@@ -301,7 +306,7 @@ export default {
   align-content: center;
   padding-bottom: 10px;
   flex-shrink: 0;
-  background: rgba(0, 0, 0, 0.5);
+  background: rgba(0, 0, 0, 0.4);
   padding-top: 30px;
 }
 
@@ -315,7 +320,7 @@ export default {
   user-select: auto !important;
 }
 .tag {
-  color: #ccdadd;
+  color: rgba(255, 255, 255, 0.7);
 }
 
 .button {
@@ -424,12 +429,13 @@ export default {
   flex-shrink: 0;
 }
 .about-item .key {
-  color: #b6dbe1;
+  color: rgba(255, 255, 255, 0.7);
 }
 .about-item .name {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  color: rgba(255, 255, 255, 0.9);
 }
 .about-item div {
   align-self: center;
@@ -484,16 +490,16 @@ export default {
   cursor: pointer;
   height: 30px;
   width: 30px;
-  border-radius: 50%;
   flex-shrink: 0;
   justify-content: center;
   align-items: center;
   align-content: center;
   transition: 0.2s;
   user-select: none;
+  opacity: 0.7;
 }
 .back-button:hover {
-  background: #0c484e;
+  opacity: 1;
 }
 @media (max-width: 432px) {
   .box {
diff --git a/src/components/app/Tabs/DirectMessage.vue b/src/components/app/Tabs/DirectMessage.vue
index 1d13744..285deec 100644
--- a/src/components/app/Tabs/DirectMessage.vue
+++ b/src/components/app/Tabs/DirectMessage.vue
@@ -69,7 +69,7 @@ export default {
     position: absolute;
     bottom: 0;
     z-index: 2;
-    background: rgba(19, 107, 139, 0.9);
+    background: linear-gradient(to bottom, #00477e 0, #016dc0);
   }
   .darken::after {
     content: "";
diff --git a/src/components/app/Tabs/Explore.vue b/src/components/app/Tabs/Explore.vue
index 9ff8181..0976d81 100644
--- a/src/components/app/Tabs/Explore.vue
+++ b/src/components/app/Tabs/Explore.vue
@@ -186,19 +186,22 @@ export default {
       border-radius: 4px;
       cursor: pointer;
       transition: 0.3s;
+      color: rgba(255, 255, 255, 0.8);
       &:hover {
-        background: #053c4c;
+        background: rgba(0, 0, 0, 0.2);
+        color: white;
       }
       &.selected {
-        background: #053240;
+        color: white;
+        background: rgba(0, 0, 0, 0.4);
       }
     }
     .item:nth-child(2)::before {
       content: "NEW";
-      font-size: 14px;
+      font-size: 9px;
       background: rgb(255, 55, 55);
       border-radius: 2px;
-      padding: 2px;
+      padding: 4px;
       position: absolute;
       right: 10px;
     }
@@ -249,8 +252,7 @@ export default {
 
 .card {
   background: black;
-  height: 180px;
-  border-radius: 5px;
+  border-radius: 4px;
   margin: 5px;
   padding: 10px;
   display: flex;
@@ -267,10 +269,12 @@ export default {
     padding: 5px;
     font-size: 17px;
     margin-top: 15px;
+    margin-bottom: 10px;
     flex-shrink: 0;
     cursor: pointer;
     transition: 0.3s;
     color: rgba(255, 255, 255, 0.924);
+    border-radius: 4px;
     &:hover {
       background-color: rgba(0, 0, 0, 0.3);
     }
@@ -302,6 +306,7 @@ export default {
     .heart {
       font-size: 60px;
       margin-bottom: 10px;
+      margin-top: 10px;
     }
   }
 }
@@ -320,7 +325,7 @@ export default {
 
 .right-panel {
   .header {
-    background: #063443;
+    background: rgba(0, 0, 0, 0.4);
     padding-left: 10px;
     height: 54px;
     display: flex;
@@ -362,8 +367,8 @@ export default {
   .left-panel {
     position: absolute;
     bottom: 0;
-    z-index: 2;
-    background: rgba(19, 107, 139, 0.9);
+    z-index: 2222;
+    background: linear-gradient(to bottom, #00477e 0, #016dc0);
     height: 100%;
   }
   .darken::after {
diff --git a/src/components/app/Tabs/Explore/searchHeader.vue b/src/components/app/Tabs/Explore/searchHeader.vue
index 9bcce77..b66449b 100644
--- a/src/components/app/Tabs/Explore/searchHeader.vue
+++ b/src/components/app/Tabs/Explore/searchHeader.vue
@@ -83,7 +83,7 @@ export default {
 <style lang="scss" scoped>
 .search-header {
   display: flex;
-  background: #073847;
+  background: rgba(0, 0, 0, 0.55);
   width: 100%;
   height: 100px;
   flex-shrink: 0;
diff --git a/src/components/app/Tabs/Explore/serverTemplate.vue b/src/components/app/Tabs/Explore/serverTemplate.vue
index 785593b..591d08d 100644
--- a/src/components/app/Tabs/Explore/serverTemplate.vue
+++ b/src/components/app/Tabs/Explore/serverTemplate.vue
@@ -89,8 +89,7 @@ export default {
   position: relative;
   width: 250px;
   height: 300px;
-  background: #024253;
-  opacity: 0.9;
+  background: rgba(0, 0, 0, 0.2);
   margin: 5px;
   border-radius: 4px;
   flex-shrink: 0;
@@ -99,9 +98,6 @@ export default {
   flex-shrink: 0;
   flex-direction: column;
   overflow: hidden;
-  &:hover {
-    opacity: 1;
-  }
   .top {
     display: flex;
     flex-direction: column;
@@ -171,7 +167,7 @@ export default {
   .bottom {
     display: flex;
     flex-direction: column;
-    background: #04333f;
+    background: rgba(0, 0, 0, 0.3);
     flex: 1;
     height: 100%;
     flex-shrink: 0;
@@ -206,7 +202,7 @@ export default {
       border-radius: 4px;
       margin-right: 10px;
       flex: 1;
-      background: #022730;
+      background: rgba(0, 0, 0, 0.3);
       .material-icons {
         margin-right: 5px;
       }
diff --git a/src/components/app/Tabs/Explore/themesTemplate.vue b/src/components/app/Tabs/Explore/themesTemplate.vue
index 56cccd8..ce91de1 100644
--- a/src/components/app/Tabs/Explore/themesTemplate.vue
+++ b/src/components/app/Tabs/Explore/themesTemplate.vue
@@ -97,8 +97,7 @@ export default {
   position: relative;
   width: 250px;
   height: 350px;
-  background: #024253;
-  opacity: 0.9;
+  background: rgba(0, 0, 0, 0.2);
   margin: 5px;
   border-radius: 4px;
   flex-shrink: 0;
@@ -107,9 +106,6 @@ export default {
   flex-shrink: 0;
   flex-direction: column;
   overflow: hidden;
-  &:hover {
-    opacity: 1;
-  }
   .top {
     display: flex;
     flex-direction: column;
@@ -142,7 +138,7 @@ export default {
   .bottom {
     display: flex;
     flex-direction: column;
-    background: #04333f;
+    background: rgba(0, 0, 0, 0.3);
     flex: 1;
     height: 100%;
     overflow: auto;
diff --git a/src/components/app/Tabs/News.vue b/src/components/app/Tabs/News.vue
index 1ef65f3..1760467 100644
--- a/src/components/app/Tabs/News.vue
+++ b/src/components/app/Tabs/News.vue
@@ -4,12 +4,7 @@
     <div class="changelog">
       <div class="change-log">
         <div v-for="(change, index) in changelog" :key="index" class="change">
-          <div
-            class="heading"
-            :style="
-              change.headColor ? `background-color: ${change.headColor}` : ``
-            "
-          >
+          <div class="heading" :class="{ 'latest-color': index === 0 }">
             <div class="date">{{ change.date }}</div>
             <div class="changes-title">{{ change.title }}</div>
           </div>
@@ -111,9 +106,12 @@ export default {
 }
 .heading {
   padding: 10px;
-  background: #042f3a;
+  background: rgba(0, 0, 0, 0.4);
   margin-bottom: 10px;
 }
+.latest-color {
+  background: rgb(19, 121, 255);
+}
 .information {
   overflow-wrap: break-word;
   margin: 10px;
@@ -122,11 +120,12 @@ export default {
   background: rgba(38, 139, 255, 0.87);
 }
 .change-log {
-  background: #054151;
+  background: rgba(0, 0, 0, 0.4);
   overflow-y: auto;
   max-width: 700px;
   width: 100%;
   margin: auto;
+  border-radius: 4px;
 }
 .changelog {
   display: flex;
@@ -153,7 +152,7 @@ export default {
   margin-bottom: 10px;
 }
 .see-all-button {
-  background: #172a2c;
+  background: rgba(0, 0, 0, 0.4);
   display: flex;
   flex-shrink: 0;
   justify-content: center;
@@ -165,6 +164,6 @@ export default {
   transition: 0.2s;
 }
 .see-all-button:hover {
-  background: #0b1415;
+  background: rgba(0, 0, 0, 0.6);
 }
 </style>
diff --git a/src/components/app/Tabs/Servers.vue b/src/components/app/Tabs/Servers.vue
index d39810c..5c4c028 100644
--- a/src/components/app/Tabs/Servers.vue
+++ b/src/components/app/Tabs/Servers.vue
@@ -5,7 +5,7 @@
   >
     <transition name="slide-left">
       <server-list
-        v-if="($mq === 'mobile' && showLeftPanel) || $mq !== 'mobile'"
+        v-show="($mq === 'mobile' && showLeftPanel) || $mq !== 'mobile'"
         v-click-outside="hideLeftPanel"
         class="left-panel"
       />
@@ -110,7 +110,7 @@ export default {
     right: 0;
     bottom: 0;
     z-index: 2;
-    background: rgba(19, 107, 139, 0.9);
+    background: linear-gradient(to bottom, #00477e 0, #016dc0);
   }
 }
 
@@ -119,7 +119,7 @@ export default {
     position: absolute;
     bottom: 0;
     z-index: 2;
-    background: rgba(19, 107, 139, 0.9);
+    background: linear-gradient(to bottom, #00477e 0, #016dc0);
   }
   .darken::after {
     content: "";
diff --git a/src/components/app/TypingStatus.vue b/src/components/app/TypingStatus.vue
index 18b6a63..bf3f72d 100644
--- a/src/components/app/TypingStatus.vue
+++ b/src/components/app/TypingStatus.vue
@@ -78,15 +78,22 @@ export default {
   transition: 0.3s;
   flex-shrink: 0;
   flex: 1;
+  padding: 3px;
+  background: rgba(0, 0, 0, 0.3);
+  backdrop-filter: blur(5px);
+  align-content: center;
+  align-content: center;
+  height: 20px;
 }
 .animation {
   height: 20px;
   width: 20px;
   display: flex;
+  align-self: center;
 }
 .text {
   margin: auto;
   margin-left: 5px;
-  font-size: 13px;
+  font-size: 12px;
 }
 </style>
diff --git a/src/utils/changelog.js b/src/utils/changelog.js
index c5f4201..8f01f67 100644
--- a/src/utils/changelog.js
+++ b/src/utils/changelog.js
@@ -4,7 +4,6 @@ const config = [
     title: "Saved Notes and bug fixes",
     shortTitle: "",
     date: "25/01/2019",
-    headColor: "#007792",
     new: ["You can now save your own messages in a separate log."],
     fix: ["Fixed a bug where some role colors would not show correctly."]
   },