changed tab design and more

src/components/ElectronJS/FrameButtons.vue

@@ -54,7 +54,7 @@ export default {
   right: 0;
   left: 0;
   z-index: 9999999999999999;
-  height: 30px;
+  height: 100%;
   -webkit-app-region: drag;
   justify-content: flex-end;
 }
@@ -66,15 +66,13 @@ export default {
   display: flex;
   flex-shrink: 0;
   height: 100%;
-  width: 50px;
+  width: 60px;
   border-radius: 2px;
-  margin: 1px;
   color: white;
   align-items: center;
   justify-content: center;
   -webkit-app-region: no-drag;
   transition: 0.3s;
-  background: rgba(56, 56, 56, 0.247);
 }
 .frame-buttons .material-icons {
   display: block;

src/components/app/MembersList.vue

@@ -87,7 +87,7 @@ export default {
   height: 100%;
 }
 .header {
-	height: 40px;
+	height: 50px;
 	width: 100%;
 	background: rgba(0, 0, 0, 0.438);
 	display: flex;

src/components/app/MessagePanel.vue

@@ -61,7 +61,7 @@
             :recipients="typingRecipients[selectedChannelID]"
           />
         </div>
-        <div v-if="sendMessagePermission === true || editMessage"
+        <div v-if=" messageLength >= 4500 && (sendMessagePermission === true || editMessage)"
           :class="{'message-count': true, 'error-info': messageLength > 5000 }"
         >{{messageLength}}/5000</div>
       </div>

src/components/app/MessagePanel/Heading.vue

@@ -52,14 +52,7 @@ export default {
       const channel = this.$store.getters.channels[selectedChannel];
       const presences = this.$store.getters["members/presences"];
 
-      let status = 0;
+      let status = presences[channel.recipients[0].uniqueID] || 0;
-      if (!channel || !channel.recipients || !channel.recipients.length) {
-        status = 0;
-      } else if (
-        this.$store.getters.user.friends[channel.recipients[0].uniqueID]
-      ) {
-        status = presences[channel.recipients[0].uniqueID] || 0;
-      }
       return statuses[status].color;
     }
   }
@@ -70,7 +63,7 @@ export default {
 .heading {
   background: rgba(0, 0, 0, 0.185);
   margin-bottom: 0;
-  height: 40px;
+  height: 50px;
   display: flex;
   flex-shrink: 0;
   padding-left: 10px;
@@ -82,6 +75,7 @@ export default {
   margin-top: 3px;
   user-select: none;
   display: none;
+  cursor: pointer;
 }
 .show-members-button {
   display: inline-block;
@@ -90,6 +84,7 @@ export default {
   user-select: none;
   display: none;
   color: white;
+  cursor: pointer;
 }
 .show-menu-button .material-icons {
   color: rgb(207, 207, 207);

src/components/app/Tabs/DirectMessage.vue

@@ -69,7 +69,7 @@ export default {
     position: absolute;
     background-color: rgba(39, 39, 39, 0.97);
     bottom: 0;
-    height: calc(100% - 40px);
+    height: calc(100% - 50px);
     z-index: 2;
   }
 }

src/components/app/Tabs/Servers.vue

@@ -106,7 +106,7 @@ export default {
     background-color: rgba(39, 39, 39, 0.97);
     right: 0;
     bottom: 0;
-    height: calc(100% - 40px);
+    height: calc(100% - 50px);
     z-index: 1;
   }
 }
@@ -116,7 +116,7 @@ export default {
     position: absolute;
     background-color: rgba(39, 39, 39, 0.97);
     bottom: 0;
-    height: calc(100% - 40px);
+    height: calc(100% - 50px);
     z-index: 2;
   }
 }

src/utils/changelog.js

@@ -14,12 +14,23 @@
 
 const config = [
 
+  {
+    version: 7.5,
+    title: "GUI improvements",
+    shortTitle: "",
+    date: "09/10/2019",
+    headColor: "rgba(25, 130, 255, 0.77)",
+    new: [
+      'Design changes to some elements such as the tabs, Window controls and more.',
+    ],
+    fix: ['Fixed a bug where presence status would not show properly in the header.'],
+    msg: 'I just want to say thanks to everyone who gave me feedback, it helps a lot! 😉 Native mobile app is coming soon!'
+  },
   {
     version: 7.4,
     title: "Send message permission, Improved performance",
     shortTitle: "",
     date: "03/10/2019",
-    headColor: "rgba(25, 130, 255, 0.77)",
     new: [
       'Added send message permission. You can use this to allow other people to not write in your channel such as the "rules" channel.',
     ],

src/views/App.vue

@@ -303,32 +303,32 @@ export default {
 
 .tab {
   flex-shrink: 0;
-  margin: auto;
-  margin-right: 1px;
-  margin-left: 3px;
   margin-bottom: 0;
-  background: rgba(0, 0, 0, 0.63);
+  background: rgba(0, 0, 0, 0.253);
-  color: white;
+  color: rgba(255, 255, 255, 0.822);
-  padding: 7px;
+  padding: 10px;
-  border-top-right-radius: 5px;
+  padding-left: 14px;
-  border-top-left-radius: 5px;
+  padding-right: 14px;
   cursor: default;
   user-select: none;
   transition: 0.3s;
   -webkit-app-region: no-drag;
-  margin-top: 5px;
   cursor: pointer;
   position: relative;
-}
+  border-right:solid 1px rgba(0, 0, 0, 0.5);
-
-.tab.selected {
-  background: rgba(71, 71, 71, 0.637);
 }
 
 .tab:hover {
-  background: rgba(71, 71, 71, 0.637);
+  background: rgba(0, 0, 0, 0.418);
 }
 
+.tab.selected {
+  background: rgba(0, 0, 0, 0.671);
+  color: white;
+}
+
+
+
 .tab .material-icons {
   font-size: 15px;
   vertical-align: -2px;
@@ -386,8 +386,6 @@ textarea {
   display: flex;
   overflow: auto;
   height: 100%;
-  border-top-left-radius: 5px;
-  border-top-right-radius: 5px;
 }
 
 input {