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

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

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