changed colors for each popout

2026-06-14 20:11:10 +00:00 · 2019-11-23 20:08:16 +00:00 · 2019-11-23 20:08:16 +00:00 · 8707c09c89
commit 8707c09c89
parent a66aee7e52
36 changed files with 160 additions and 151 deletions
--- 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;
--- 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;
--- 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;
--- 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
 }
--- 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;
  }
 }

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

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

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

  }
--- 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.",
--- 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 {
--- 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;
--- 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;
--- 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 {
--- 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 {