Improved notifications design.

assets/components/header/notifications.vue

@@ -55,12 +55,14 @@
 							<div class="notification-row notification-title">
 								<img
 									v-if="notification.scene.entity.type === 'network' || notification.scene.entity.independent"
+									v-tooltip="notification.scene.entity.name"
 									:src="`/img/logos/${notification.scene.entity.slug}/favicon_${theme === 'dark' ? 'light' : 'dark'}.png`"
 									class="notification-favicon"
 								>
 
 								<img
 									v-else
+									v-tooltip="notification.scene.entity.name"
 									:src="`/img/logos/${notification.scene.entity.parent.slug}/favicon_${theme === 'dark' ? 'light' : 'dark'}.png`"
 									class="notification-favicon"
 								>
@@ -77,7 +79,9 @@
 								</ul>scene
 							</div>
 
-							<div class="notification-row">
+							<div class="notification-row notification-details">
+								<span class="notification-date">{{ formatDate(notification.scene.date, 'MMM D') }}</span>
+
 								<ul
 									v-if="notification.scene.actors.length > 0"
 									class="nolist notification-actors"
@@ -91,13 +95,6 @@
 							</div>
 						</div>
 
-						<Icon
-							v-if="notification.alert"
-							v-tooltip="`You set an alert for <strong>${notification.alert.tags.map(tag => tag.name).join(', ') || 'all'}</strong> scenes with <strong>${notification.alert.actors.map(actor => actor.name).join(', ') || 'any actor'}</strong> for <strong>${notification.alert.entity?.name || 'any channel'}</strong>`"
-							icon="question5"
-							@click.prevent
-						/>
-
 						<Icon
 							v-if="!notification.seen"
 							v-tooltip="'Mark as seen'"
@@ -105,6 +102,13 @@
 							class="notification-check"
 							@click.prevent="checkNotification(notification.id)"
 						/>
+
+						<Icon
+							v-if="notification.alert"
+							v-tooltip="`You set an alert for <strong>${notification.alert.tags.map(tag => tag.name).join(', ') || 'all'}</strong> scenes with <strong>${notification.alert.actors.map(actor => actor.name).join(', ') || 'any actor'}</strong> for <strong>${notification.alert.entity?.name || 'any channel'}</strong>`"
+							icon="question5"
+							@click.prevent
+						/>
 					</router-link>
 				</li>
 			</ul>
@@ -166,6 +170,10 @@ export default {
 		padding: .5rem;
 		fill: var(--shadow);
 
+		&:last-child {
+			padding: .5rem 1rem .5rem .5rem;
+		}
+
 		:hover {
 			fill: var(--primary);
 			cursor: pointer;
@@ -193,6 +201,7 @@ export default {
 
 .notification {
 	display: block;
+	border-right: solid .5rem var(--shadow-touch);
 	margin: 0 0 -1px 0;
 	color: var(--text);
 
@@ -201,23 +210,28 @@ export default {
 	}
 
 	.icon {
-		padding: 1rem;
+		padding: 1.3rem .5rem;
 		fill: var(--shadow-weak);
 
+		&:last-child {
+			padding: 1.3rem 1rem 1.3rem .5rem;
+		}
+
 		&:hover {
 			fill: var(--primary);
 		}
 	}
 
 	&:not(:last-child) {
-		.notification-body,
-		.icon {
 		border-bottom: solid 1px var(--shadow-hint);
 	}
-	}
 
 	&:hover {
-		color: var(--primary);
+		background: var(--shadow-touch);
+
+		&:not(.unseen) {
+			border-right: solid .5rem var(--shadow-weak);
+		}
 	}
 }
 
@@ -230,18 +244,17 @@ export default {
 
 .notification-body {
 	flex-grow: 1;
-	padding: .4rem 1rem .25rem .5rem;
+	padding: .4rem 0 0 0;
 	overflow: hidden;
 }
 
 .notification-row {
 	display: flex;
-	align-items: center;
 	overflow: hidden;
-
-	&:not(:last-child) {
-		margin: 0 0 .1rem 0;
 }
+
+.notification-title {
+	margin: .15rem .5rem .3rem .5rem;
 }
 
 .notification-favicon {
@@ -250,14 +263,26 @@ export default {
 	margin: 0 .5rem 0 0;
 }
 
+.notification-tags {
+	white-space: nowrap;
+}
+
 .notification-actors {
-	height: 1.1rem;
+	padding: 0 .5rem;
+	height: 1.25rem;
 	display: inline-block;
 	overflow: hidden;
 }
 
-.notification-tags {
+.notification-date {
-	white-space: nowrap;
+	width: 3rem;
+	flex-shrink: 0;
+	padding: .25rem .25rem .35rem .25rem;
+	border-right: solid 1px var(--shadow-hint);
+	border-top: solid 1px var(--shadow-hint);
+	color: var(--shadow-strong);
+	font-size: .8rem;
+	text-align: center;
 }
 
 .notification-actor,
@@ -271,6 +296,7 @@ export default {
 }
 
 .notification-actor {
+	padding: .25rem .15rem .35rem 0;
 	color: var(--shadow-strong);
 	font-size: .9rem;
 }
@@ -280,8 +306,7 @@ export default {
 }
 
 .poster {
-	width: 5rem;
+	width: 6rem;
-	height: 3rem;
 	object-fit: cover;
 	object-position: center;
 }

assets/components/tooltip/tooltip.vue

@@ -155,7 +155,7 @@ export default {
 
 .tooltip-inner {
 	position: relative;
-	box-shadow: 0 0 3px var(--darken-weak);
+	box-shadow: 0 0 .5rem var(--darken);
 }
 
 .tooltip {

assets/img/icons/notification2.svg

@@ -0,0 +1,5 @@
+<!-- Generated by IcoMoon.io -->
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+<title>notification2</title>
+<path d="M8 0c-4.418 0-8 3.582-8 8s3.582 8 8 8 8-3.582 8-8-3.582-8-8-8zM9 13h-2v-2h2v2zM9 9h-2v-6h2v6z"></path>
+</svg>