Added notification clear, improved notification styling.

assets/components/header/header.vue

@@ -85,14 +85,14 @@
 			<Tooltip v-if="me">
 				<div
 					class="header-button header-notifications"
-					:class="{ unseen: notifications.length > 0 }"
+					:class="{ unseen: unseenNotifications.length > 0 }"
 				>
 					<Icon icon="bell2" />
 
 					<span
-						v-if="notifications.length > 0"
+						v-if="unseenNotifications.length > 0"
 						class="notifications-count"
-					>{{ notifications.length }}</span>
+					>{{ unseenNotifications.length }}</span>
 				</div>
 
 				<template v-slot:tooltip>
@@ -158,6 +158,10 @@ function notifications() {
 	return this.$store.state.ui.notifications;
 }
 
+function unseenNotifications() {
+	return this.$store.state.ui.notifications.filter(notification => !notification.seen);
+}
+
 export default {
 	components: {
 		Menu,
@@ -175,6 +179,7 @@ export default {
 	computed: {
 		me,
 		notifications,
+		unseenNotifications,
 	},
 };
 </script>
@@ -324,14 +329,13 @@ export default {
 
 .notifications-count {
 	width: 100%;
-	height: 100%;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	position: absolute;
-	bottom: .05rem;
+	bottom: .3rem;
 	left: .1rem;
-	color: var(--text-light);
+	color: var(--primary);
 	font-size: .6rem;
 	font-weight: bold;
 }