Mark unread notifs with the red line, make read notifs base01 again, center the heading text and move the button to the right of the panel.

src/components/notifications/notifications.scss

@@ -1,13 +1,28 @@
 @import '../../_variables.scss';
 
-.notifications button {
+.notifications {
-  min-height: 20px;
+
+  .panel-heading {
+    // force the text to stay centered, while keeping
+    // the button in the right side of the panel heading
+    position: relative;
+    button {
+      position: absolute;
+      padding: 0.1em 0.3em 0.25em 0.3em;
+      right: 0.6em;
     }
+  }
+
+  .unseen {
+    border-left: 4px solid rgba(255, 48, 16, 0.65);
+  }
+
   .notification {
     padding: 0.4em 0 0 0.7em;
     display: flex;
     border-bottom: 1px solid silver;
 
+
     .text {
       min-width: 0px;
       word-wrap: break-word;
@@ -47,3 +62,4 @@
       border: none
     }
   }
+}

src/components/notifications/notifications.vue

@@ -1,9 +1,12 @@
 <template>
   <div class="notifications">
     <div class="panel panel-default base00-background">
-      <div class="panel-heading base01-background base04">Notifications ({{unseenCount}}) <button @click.prevent="markAsSeen" class="base05 base02-background">Read!</button></div>
+      <div class="panel-heading base01-background base04">
+        Notifications ({{unseenCount}})
+        <button @click.prevent="markAsSeen" class="base05 base02-background">Read!</button>
+      </div>
       <div class="panel-body">
-        <div v-for="notification in visibleNotifications" class="notification" :class='{"base01-background": notification.seen}'>
+        <div v-for="notification in visibleNotifications" class="notification" :class='{"unseen": !notification.seen}'>
           <a :href="notification.action.user.statusnet_profile_url">
             <img class='avatar' :src="notification.action.user.profile_image_url_original">
           </a>