added mark as read option to server menu

src/components/app/FriendsList.vue

@@ -144,7 +144,7 @@ export default {
 
 .tabs {
   display: flex;
-  color: white;
+  color: rgba(255, 255, 255, 0.7);
   flex-shrink: 0;
   position: relative;
   background: rgba(0, 0, 0, 0.2);
@@ -165,6 +165,12 @@ export default {
   cursor: pointer;
   position: relative;
 }
+.tab:hover{
+  color: white;
+}
+.tab.selected {
+  color: white;
+}
 .tab .material-icons {
   margin-right: 5px;
 }

src/components/app/Popouts/Popouts/ServerContextMenu.vue

@@ -20,6 +20,14 @@
       <div class="material-icons">developer_board</div>
       <div class="name">Copy ID</div>
     </div>
+    <div
+      class="item"
+      :class="{ disabled: !channelNotifications.length }"
+      @click="markAsReadButton"
+    >
+      <div class="material-icons">markunread_mailbox</div>
+      <div class="name">Mark As Read</div>
+    </div>
   </div>
 </template>
 
@@ -68,6 +76,16 @@ export default {
     copyServerID() {
       this.closeMenu();
       this.$clipboard(this.contextDetails.serverID);
+    },
+    markAsReadButton() {
+      if (!this.channelNotifications.length) return;
+      this.closeMenu();
+      for (let index = 0; index < this.channelNotifications.length; index++) {
+        const notification = this.channelNotifications[index];
+        this.$socket.client.emit("notification:dismiss", {
+          channelID: notification.channelID
+        });
+      }
     }
   },
   mounted() {
@@ -123,6 +141,18 @@ export default {
         permissions.MANAGE_ROLES.value |
         permissions.ADMIN.value;
       return containsPerm(this.myRolePermissions, adminPermsFlags);
+    },
+    serverChannelIds() {
+      const channelIds = this.$store.getters["servers/channelsIDs"][
+        this.contextDetails.serverID
+      ];
+      return channelIds;
+    },
+    channelNotifications() {
+      const notifications = this.$store.getters.notifications;
+      return notifications.filter(n =>
+        this.serverChannelIds.includes(n.channelID)
+      );
     }
   }
 };
@@ -137,7 +167,7 @@ export default {
   backdrop-filter: blur(5px);
   z-index: 99999;
   user-select: none;
-  color: white;
+  color: rgba(255, 255, 255, 0.7);
   overflow: hidden;
   border-radius: 4px;
 }
@@ -155,9 +185,15 @@ export default {
   }
   &:hover {
     background: rgba(255, 255, 255, 0.2);
+    color: white;
   }
   &.warn {
     color: rgb(255, 59, 59);
   }
+  &.disabled {
+    cursor: default;
+    background: transparent;
+    color: rgba(255, 255, 255, 0.4);
+  }
 }
 </style>

src/components/app/relationships/FriendsTemplate.vue

@@ -149,7 +149,7 @@ export default {
   text-overflow: ellipsis;
 }
 .friend {
-  color: white;
+  color: rgba(255, 255, 255, 0.7);
   padding: 5px;
   display: flex;
   height: 34px;
@@ -166,9 +166,11 @@ export default {
 
 .friend:hover {
   background-color: rgba(0, 0, 0, 0.2);
+  color: white;
 }
 .friend.selected {
   background-color: rgba(0, 0, 0, 0.4);
+  color: white;
 }
 .profile-picture {
   height: 30px;