From 017b76e9c12a1aade470b3128b792c14abc6acff Mon Sep 17 00:00:00 2001
From: supertiger1234 <saawalkhn@googlemail.com>
Date: Thu, 6 Feb 2020 11:49:05 +0000
Subject: [PATCH] changed colors for more popouts.

---
 .../Popouts/Popouts/ServerInvitePopout.vue    |  5 +++--
 .../ServerSettingsPanels/DeleteServer.vue     |  1 +
 .../Popouts/ServerSettingsPanels/General.vue  | 20 +++++++++++++++----
 .../ServerSettingsPanels/ManageBans.vue       |  4 ++--
 .../ServerSettingsPanels/ManageChannels.vue   | 17 +++++++++++-----
 .../ServerSettingsPanels/ManageRoles.vue      | 14 ++++++++-----
 .../ServerSettingsPanels/ServerSettings.vue   |  6 +++---
 .../ServerSettingsPanels/ServerVisibility.vue | 14 ++++++++-----
 8 files changed, 55 insertions(+), 26 deletions(-)

diff --git a/src/components/app/Popouts/Popouts/ServerInvitePopout.vue b/src/components/app/Popouts/Popouts/ServerInvitePopout.vue
index 6b05763..96c440b 100644
--- a/src/components/app/Popouts/Popouts/ServerInvitePopout.vue
+++ b/src/components/app/Popouts/Popouts/ServerInvitePopout.vue
@@ -119,14 +119,15 @@ export default {
 
 .button {
   padding: 10px;
-  background: #062c3a;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
   margin: auto;
   transition: 0.3s;
   user-select: none;
   cursor: pointer;
 }
 .button:hover {
-  background: #041e27;
+  background: rgba(0, 0, 0, 0.5);
 }
 
 .bottom {
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/DeleteServer.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/DeleteServer.vue
index bd4ebc6..104931f 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/DeleteServer.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/DeleteServer.vue
@@ -50,6 +50,7 @@ export default {
   margin-bottom: 10px;
 }
 .button {
+  border-radius: 4px;
   padding: 10px;
   background: rgba(255, 0, 0, 0.719);
   margin: auto;
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue
index fd03b5a..16abd6e 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/General.vue
@@ -224,7 +224,8 @@ export default {
   align-self: center;
   margin-top: 10px;
   justify-content: center;
-  background-color: #044050;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 4px;
   flex-shrink: 0;
 
   .avatar {
@@ -237,6 +238,7 @@ export default {
       margin-top: 35px;
     }
     .button {
+      background: rgba(0, 0, 0, 0.2);
       margin-bottom: 16px;
     }
   }
@@ -249,6 +251,9 @@ export default {
     margin-top: 10px;
     padding: 5px;
     margin-left: 2px;
+    .button {
+        background: rgba(0, 0, 0, 0.2);
+    }
     .banner-image {
       position: relative;
       width: 250px;
@@ -292,7 +297,7 @@ export default {
 .input {
   display: flex;
   flex-direction: column;
-  background-color: #044050;
+  background-color: rgba(0, 0, 0, 0.4);
   padding: 10px;
   align-self: center;
   margin: 10px;
@@ -302,9 +307,16 @@ export default {
   margin-top: 2px;
   margin-bottom: 0;
   width: 190px;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 4px;
+}
+.input-title {
+  font-size: 14px;
+  margin-left: 2px;
 }
 .button {
-  background: #033442;
+  background: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
   padding: 10px;
   align-self: center;
   margin: 5px;
@@ -313,7 +325,7 @@ export default {
   transition: 0.3s;
 }
 .button:hover {
-  background: #022831;
+  background: rgba(0, 0, 0, 0.5);
 }
 .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 7d4d9b1..727b679 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageBans.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageBans.vue
@@ -88,9 +88,8 @@ export default {
   overflow: auto;
   .member {
     display: flex;
-    background: #052935;
+    background: rgba(0, 0, 0, 0.5);
     height: 30px;
-    margin: 5px;
     padding: 5px;
     align-content: center;
     align-items: center;
@@ -122,6 +121,7 @@ export default {
       user-select: none;
       flex-shrink: 0;
       margin-left: 5px;
+      font-weight: bold;
     }
   }
 }
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageChannels.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageChannels.vue
index 2bce3b0..26fb5f6 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageChannels.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageChannels.vue
@@ -212,10 +212,10 @@ export default {
   align-self: center;
 }
 .channel:hover {
-  background: #04232d;
+  background: rgba(0, 0, 0, 0.2);
 }
 .channel.selected {
-  background: #03191f;
+  background: rgba(0, 0, 0, 0.4);
 }
 .add-channel-button {
   background: rgba(17, 148, 255, 0.692);
@@ -231,16 +231,17 @@ export default {
   overflow: hidden;
 }
 .button {
-  background: #024554;
+  background: rgba(0, 0, 0, 0.2);
   padding: 10px;
   align-self: center;
   margin: 5px;
   cursor: pointer;
   user-select: none;
   transition: 0.3s;
+  border-radius: 4px;
 }
 .button:hover {
-  background: #02303c;
+  background: rgba(0, 0, 0, 0.4);
 }
 .button.warn {
   background: rgba(255, 17, 17, 0.692);
@@ -271,16 +272,22 @@ export default {
 .input {
   display: flex;
   flex-direction: column;
-  background-color: #044050;
+  background-color: rgba(0, 0, 0, 0.4);
   padding: 10px;
   margin: 10px;
+  border-radius: 4px;
 }
 .input input {
   width: initial;
   margin-top: 2px;
   margin-bottom: 0;
+  border-radius: 4px;
 }
 
+.input-title {
+  font-size: 14px;
+  margin-left: 2px;
+}
 .check-box {
   display: flex;
   margin: 5px;
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageRoles.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageRoles.vue
index e1ffb63..0d81c05 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageRoles.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ManageRoles.vue
@@ -339,10 +339,10 @@ export default {
   align-self: center;
 }
 .role:hover {
-  background: #04232d;
+  background: rgba(0, 0, 0, 0.2);
 }
 .role.selected {
-  background: #03191f;
+  background: rgba(0, 0, 0, 0.4);
 }
 .add-role-button {
   background: rgba(17, 148, 255, 0.692);
@@ -358,16 +358,17 @@ export default {
   overflow: hidden;
 }
 .button {
-  background: #024554;
+  background: rgba(0, 0, 0, 0.4);
   padding: 10px;
   align-self: center;
   margin: 5px;
   cursor: pointer;
   user-select: none;
   transition: 0.3s;
+  border-radius: 4px;
 }
 .button:hover {
-  background: #02303c;
+  background: rgba(0, 0, 0, 0.6);
 }
 .button.warn {
   background: rgba(255, 17, 17, 0.692);
@@ -398,7 +399,8 @@ export default {
 .input {
   display: flex;
   flex-direction: column;
-  background-color: #044050;
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.4);
   padding: 10px;
   margin: 10px;
 }
@@ -407,6 +409,7 @@ export default {
   margin-bottom: 0;
   background-color: rgba(0, 0, 0, 0.4);
   margin-top: 0;
+  border-radius: 4px;
 }
 
 .role-name {
@@ -420,6 +423,7 @@ export default {
   background: rgb(255, 255, 255);
   transition: 0.2s;
   margin-top: 5px;
+  border-radius: 4px;
 }
 
 .color-picker {
diff --git a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue
index 7055c0e..4842d73 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue
@@ -237,16 +237,16 @@ export default {
   align-self: center;
 }
 .tab:hover {
-  background: #072935;
+  background: rgba(0, 0, 0, 0.4);
 }
 .critical {
   color: red;
 }
 .tab.selected {
-  background: #051f28;
+  background: rgba(0, 0, 0, 0.4);
 }
 .header {
-  background: #05222d;
+  background: rgba(0, 0, 0, 0.4);
   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 0403e92..b61854a 100644
--- a/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerVisibility.vue
+++ b/src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerVisibility.vue
@@ -206,7 +206,8 @@ export default {
 }
 
 .toggle {
-  background-color: #044050;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 4px;
   padding: 10px;
   margin-left: 10px;
   display: flex;
@@ -220,6 +221,7 @@ export default {
       width: 20px;
       height: 20px;
       background: rgb(95, 95, 95);
+      border-radius: 4px;
       margin-right: 5px;
       &.selected {
         background: rgb(34, 156, 255);
@@ -233,7 +235,8 @@ export default {
 }
 
 .input {
-  background-color: #044050;
+  background-color: rgba(0, 0, 0, 0.4);
+  border-radius: 4px;
   padding: 10px;
   margin: 10px;
   align-self: flex-start;
@@ -245,7 +248,7 @@ export default {
     margin-bottom: 5px;
   }
   textarea {
-    background: #032d38;
+    background-color: rgba(0, 0, 0, 0.4);
     resize: none;
     outline: none;
     margin-top: 2px;
@@ -262,7 +265,8 @@ export default {
 
 .button {
   padding: 10px;
-  background: #024554;
+  border-radius: 4px;
+  background-color: rgba(0, 0, 0, 0.4);
   -webkit-transition: background 0.3s;
   transition: 0.3s;
   -webkit-user-select: none;
@@ -276,7 +280,7 @@ export default {
 }
 
 .button:hover {
-  background: #02303c;
+  background-color: rgba(0, 0, 0, 0.6);
 }
 .button.disabled {
   background: grey;