added close buttons to some popups.

src/components/app/Popouts/Popouts/ServerSettingsPanels/ServerSettings.vue

@@ -5,7 +5,12 @@
         <div class="tab" v-for="(tab, _index) in tabs" :key="_index" :class="{selected: index === _index, critical: tab.critical}" @click="index = _index"><div class="material-icons">{{tab.icon}}</div><div>{{tab.title}}</div></div>
       </div>
       <div class="content">
-        <div class="header" :class="{critical: tabs[index].critical}"><div class="material-icons">{{tabs[index].icon}}</div><div>{{tabs[index].title}}</div></div>
+        <div class="header" :class="{critical: tabs[index].critical}">
+          <div class="material-icons">{{tabs[index].icon}}</div><div>{{tabs[index].title}}</div>
+            <div class="close-button" @click="closeMenu">
+              <div class="material-icons">close</div>
+            </div>  
+        </div>
         <general v-if="index === 0"/>
         <manage-channels v-if="index === 1"/>
         <server-visibility v-if="index === 2"/>
@@ -84,6 +89,7 @@ export default {
   color: white;
   overflow: hidden;
   border-radius: 10px;
+  position: relative;
 }
 
 
@@ -141,8 +147,34 @@ export default {
   margin-left: 10px;
 }
 
+.close-button {
+  display: flex;
+  border-radius: 50%;
+  padding: 5px;
+  cursor: pointer;
+  user-select: none;
+  transition: 0.3s;
+  position: absolute;
+  top: 5px;
+  right: 5px;
+
+}
+.close-button:hover {
+  background: rgba(37, 37, 37, 0.692);
+}
+.close-button .material-icons {
+  margin: auto;
+  font-size: 30px;
+}
+
 @media (max-width: 614px) {
+  .close-button {
+    top: 55px;
+  }
   .inner {
+    height: 100%;
+    border-radius: 0;
+    max-height: initial;
     flex-direction: column;
   }
   .tabs {
@@ -155,4 +187,5 @@ export default {
     height: 5px;
   }
 }
+
 </style>

src/components/app/Popouts/Popouts/Settings.vue

@@ -181,7 +181,7 @@ export default {
   display: flex;
   border-radius: 50%;
   padding: 5px;
-  cursor: default;
+  cursor: pointer;
   user-select: none;
   transition: 0.3s;
 }

src/components/app/Popouts/Popouts/userInformationPopout.vue

@@ -4,6 +4,11 @@
     @click="backgroundClickEvent"
   >
     <div class="box">
+      <div class="back-button" @click="close">
+        <div class="material-icons">
+        keyboard_arrow_left
+        </div>
+      </div>
       <spinner class="spinner" v-if="!user" />
       <div class="inner" v-if="user">
         <div class="profile">
@@ -74,9 +79,12 @@ export default {
     };
   },
   methods: {
+    close() {
+      this.$store.dispatch("setUserInformationPopout", null);
+    },
     backgroundClickEvent(event) {
       if (event.target.classList.contains("drop-background")) {
-        this.$store.dispatch("setUserInformationPopout", null);
+        this.close();
       }
     },
     async AddFriendButton() {
@@ -182,6 +190,7 @@ export default {
   flex-direction: row;
   background: rgba(22, 22, 22, 0.853);
   border-radius: 10px;
+  position: relative;
 
 }
 .spinner {
@@ -389,9 +398,32 @@ export default {
   background: rgb(255, 53, 53);
   border-radius: 5px;
 }
-@media (max-width: 352px) {
+
+.back-button {
+  display: flex;
+  position: absolute;
+  left: 20px;
+  top: 20px;
+  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;
+}
+.back-button:hover {
+  background: rgba(49, 49, 49, 0.712);
+}
+@media (max-width: 432px) {
   .box {
     width: 100%;
+    height: 100%;
+    max-height: initial;
+    border-radius: 0;
   }
 }
 </style>

src/components/app/Tabs/Explore.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="explore-tab">
-    <div class="left-panel">
+    <div class="left-panel"
+      v-show="$mq === 'mobile' && showLeftPanel || ($mq !== 'mobile')"
+      v-click-outside="hideLeftPanel"
+    >
       <div class="header">
         <div class="icon">
           <i class="material-icons">explore</i>
@@ -43,6 +46,7 @@ export default {
   components: { Servers },
   data() {
     return {
+      showLeftPanel: false,
       selectedTab: 0,
       tabs: [
         // {icon: "home", name: "home", component: ""},
@@ -54,7 +58,15 @@ export default {
     };
   },
   mounted() {},
-  methods: {},
+  methods: {
+    hideLeftPanel(event) {
+      if (this.showLeftPanel) {
+        if (event.target.closest(".show-menu-button") == null) {
+          this.showLeftPanel = false;
+        }
+      }
+    }
+  },
   computed: {}
 };
 </script>

src/utils/changelog.js

@@ -14,12 +14,20 @@
 
 const config = [
 
+  {
+    version: 6.8,
+    title: "New Explore tab!",
+    shortTitle: "",
+    date: "01/09/2019",
+    headColor: "rgba(25, 130, 255, 0.77)",
+    new: ['You can now make your servers go public by posting them in the explore tab.', 'Some pop ups have been improved for mobile users.',],
+    fix: ['Some bugs have been fixed.']
+  },
   {
     version: 6.6,
     title: "Performance improvements",
     shortTitle: "",
     date: "29/08/2019",
-    headColor: "rgba(25, 130, 255, 0.77)",
     new: ['Sneak peak of the new "Explore" tab :D (Unfinished)'],
     fix: [
       'Improved backend code. This should improve performance.',