Reorganize layout of notifications

aleksis/core/assets/components/notifications/NotificationItem.vue

@@ -5,15 +5,26 @@
   >
     <template #default="{ mutate, loading, error }">
       <v-list-item :input-value="!notification.read">
-
+        <v-list-item-avatar>
+          <v-icon
+            :class="notification.read ? 'grey lighten-1' : 'primary white--text'"
+            dark
+          >
+            mdi-monitor-dashboard
+          </v-icon>
+        </v-list-item-avatar>
         <v-list-item-content>
-          <v-list-item-title>{{ notification.title }}</v-list-item-title>
-
-          <v-list-item-subtitle class="caption">
-            <v-chip color="primary" label x-small outlined>{{ notification.sender }}</v-chip>
+          <v-list-item-title>
+            {{ notification.title }}
+          </v-list-item-title>
 
-            <v-icon>mdi-circle-small</v-icon>
+          <v-list-item-subtitle class="font-weight-regular">
+            {{ notification.description }}
+          </v-list-item-subtitle>
 
+          <v-list-item-subtitle class="caption font-weight-regular">
+            <v-chip x-small outlined>{{ notification.sender }}</v-chip>
+            ·
             <v-tooltip bottom>
               <template v-slot:activator="{ on, attrs }">
                 <span
@@ -24,10 +35,6 @@
               <span>{{ $d(new Date(notification.created), "long") }}</span>
             </v-tooltip>
           </v-list-item-subtitle>
-
-          <v-list-item-subtitle>
-            {{ notification.description }}
-          </v-list-item-subtitle>
         </v-list-item-content>
 
         <v-list-item-action>