Improved notifications view

pages/notifications/notifications.pixy

@@ -1,9 +1,15 @@
 component Notifications(notifications []*arn.Notification, user *arn.User)
 	h1 Notifications
 
-	.notifications
-		each notification in notifications
-			Notification(notification)
+	.corner-buttons
+		button.action(data-action="markNotificationsAsSeen", data-trigger="click")
+			Icon("check")
+			span Mark all as seen
+
+	.notifications-container
+		.notifications
+			each notification in notifications
+				Notification(notification)
 
 component Notification(notification *arn.Notification)
 	.notification
@@ -11,6 +17,7 @@ component Notification(notification *arn.Notification)
 			img.lazy(data-src=notification.Icon, alt=notification.Title)
 		
 		.notification-info
-			h3= notification.Title
-			p= notification.Message
-			.notification-date.utc-date(data-date=notification.Created)
+			h3.notification-title= notification.Title
+			.notification-footer
+				p.notification-text= notification.Message
+				.notification-date.utc-date(data-date=notification.Created)

pages/notifications/notifications.scarlet

@@ -1,5 +1,11 @@
+.notifications-container
+	horizontal
+	justify-content center
+
 .notifications
 	vertical
+	width 100%
+	max-width 800px
 
 .notification
 	horizontal
@@ -17,6 +23,14 @@
 
 .notification-info
 	vertical
+	flex 1
+
+.notification-footer
+	horizontal
+
+.notification-text
+	flex 1
+	margin 0
 
 .notification-date
 	opacity 0.5