From 0e1ab69c33f155865adc27d940a2542ffdcec30a Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Wed, 22 Feb 2017 23:37:12 +0100
Subject: Show actual status in notifications when mentioned.

---
 src/components/notifications/notifications.vue | 34 ++++++++++++++------------
 1 file changed, 18 insertions(+), 16 deletions(-)

(limited to 'src/components/notifications/notifications.vue')

diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 785cc019..c14abf27 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -4,24 +4,26 @@
       <div class="panel-heading base01-background base04">Notifications ({{unseenCount}}) <button @click.prevent="markAsSeen">Read!</button></div>
       <div class="panel-body">
         <div v-for="notification in visibleNotifications" class="notification" :class='{"base01-background": notification.seen}'>
-          <a :href="notification.action.user.statusnet_profile_url">
-            <img class='avatar' :src="notification.action.user.profile_image_url_original">
-          </a>
-          <div class='text'>
-            <timeago :since="notification.action.created_at" :auto-update="240"></timeago>
-            <div v-if="notification.type === 'favorite'">
-              <h1>{{ notification.action.user.name }}<br><i class="fa icon-star"></i> favorited your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
-              <p>{{ notification.status.text }}</p>
-            </div>
-            <div v-if="notification.type === 'repeat'">
-              <h1>{{ notification.action.user.name }}<br><i class="fa icon-retweet"></i> repeated your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
-              <p>{{ notification.status.text }}</p>
-            </div>
-            <div v-if="notification.type === 'mention'">
-              <h1>{{ notification.action.user.name }}<br><i class="fa icon-reply"></i> <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">mentioned</router-link> you</h1>
-              <p>{{ notification.status.text }}</p>
+          <div class="notification-base">
+            <a :href="notification.action.user.statusnet_profile_url">
+              <img class='avatar' :src="notification.action.user.profile_image_url_original">
+            </a>
+            <div class='text'>
+              <timeago :since="notification.action.created_at" :auto-update="240"></timeago>
+              <div v-if="notification.type === 'favorite'">
+                <h1>{{ notification.action.user.name }}<br><i class="fa icon-star"></i> favorited your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
+                  <p>{{ notification.status.text }}</p>
+              </div>
+              <div v-if="notification.type === 'repeat'">
+                <h1>{{ notification.action.user.name }}<br><i class="fa icon-retweet"></i> repeated your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
+                  <p>{{ notification.status.text }}</p>
+              </div>
+              <div v-if="notification.type === 'mention'">
+                <h1>{{ notification.action.user.name }}<br><i class="fa icon-reply"></i> <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">mentioned</router-link> you</h1>
+              </div>
             </div>
           </div>
+          <status v-if="notification.type === 'mention'" :statusoid="notification.action" :expandable="false"></status>
         </div>
       </div>
     </div>
-- 
cgit v1.2.3-70-g09d2


From 74931dece7d68167e5134e77e738c39f62a11146 Mon Sep 17 00:00:00 2001
From: Roger Braun <roger@rogerbraun.net>
Date: Thu, 23 Feb 2017 00:26:37 +0100
Subject: Revert "Show actual status in notifications when mentioned."

This reverts commit 0e1ab69c33f155865adc27d940a2542ffdcec30a.
---
 src/components/conversation/conversation.vue    |  4 +-
 src/components/notifications/notifications.js   |  4 --
 src/components/notifications/notifications.scss | 62 ++++++++++++-------------
 src/components/notifications/notifications.vue  | 34 +++++++-------
 src/components/status/status.vue                | 10 ++--
 5 files changed, 53 insertions(+), 61 deletions(-)

(limited to 'src/components/notifications/notifications.vue')

diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
index b1aff884..9675e69f 100644
--- a/src/components/conversation/conversation.vue
+++ b/src/components/conversation/conversation.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="timeline panel panel-default base00-background conversation">
+  <div class="timeline panel panel-default base00-background">
     <div class="panel-heading base01-background base04">
       Conversation
       <div v-if="collapsable">
@@ -8,7 +8,7 @@
     </div>
     <div class="panel-body">
       <div class="timeline">
-        <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status" :expandable='false'></status>
+        <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status":expandable='false'></status>
       </div>
     </div>
   </div>
diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js
index 390ade6a..c8d5e212 100644
--- a/src/components/notifications/notifications.js
+++ b/src/components/notifications/notifications.js
@@ -1,5 +1,4 @@
 import { sortBy, take, filter } from 'lodash'
-import Status from '../status/status.vue'
 
 const Notifications = {
   data () {
@@ -7,9 +6,6 @@ const Notifications = {
       visibleNotificationCount: 10
     }
   },
-  components: {
-    Status
-  },
   computed: {
     notifications () {
       return this.$store.state.statuses.notifications
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 65efb103..517afeaa 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -1,44 +1,42 @@
 @import '../../_variables.scss';
 .notification {
+  padding: 0.4em 0 0 0.7em;
+  display: flex;
   border-bottom: 1px solid silver;
 
-  .notification-base {
-      padding: 0.4em 0 0 0.7em;
-      display: flex;
-      .avatar {
-          padding-top: 0.3em;
-          width: 32px;
-          height: 32px;
-          border-radius: 50%;
-      }
+  .text {
+    min-width: 0px;
+    word-wrap: break-word;
+    line-height:18px;
 
-      .text {
-          min-width: 0px;
-          word-wrap: break-word;
-          line-height:18px;
+    .icon-retweet {
+      color: $green;
+    }
 
-          .icon-retweet {
-              color: $green;
-          }
+    .icon-reply {
+      color: $blue;
+    }
 
-          .icon-reply {
-              color: $blue;
-          }
+    h1 {
+      margin: 0 0 0.3em;
+      padding: 0;
+      font-size: 1em;
+      line-height:20px;
+    }
 
-          h1 {
-              margin: 0 0 0.3em;
-              padding: 0;
-              font-size: 1em;
-              line-height:20px;
-          }
+    padding: 0.3em 0.8em 0.5em;
+    p {
+      margin: 0;
+      margin-top: 0;
+      margin-bottom: 0.3em;
+    }
+  }
 
-          padding: 0.3em 0.8em 0.5em;
-          p {
-              margin: 0;
-              margin-top: 0;
-              margin-bottom: 0.3em;
-          }
-      }
+  .avatar {
+    padding-top: 0.3em;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
   }
 
   &:last-child {
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index c14abf27..785cc019 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -4,26 +4,24 @@
       <div class="panel-heading base01-background base04">Notifications ({{unseenCount}}) <button @click.prevent="markAsSeen">Read!</button></div>
       <div class="panel-body">
         <div v-for="notification in visibleNotifications" class="notification" :class='{"base01-background": notification.seen}'>
-          <div class="notification-base">
-            <a :href="notification.action.user.statusnet_profile_url">
-              <img class='avatar' :src="notification.action.user.profile_image_url_original">
-            </a>
-            <div class='text'>
-              <timeago :since="notification.action.created_at" :auto-update="240"></timeago>
-              <div v-if="notification.type === 'favorite'">
-                <h1>{{ notification.action.user.name }}<br><i class="fa icon-star"></i> favorited your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
-                  <p>{{ notification.status.text }}</p>
-              </div>
-              <div v-if="notification.type === 'repeat'">
-                <h1>{{ notification.action.user.name }}<br><i class="fa icon-retweet"></i> repeated your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
-                  <p>{{ notification.status.text }}</p>
-              </div>
-              <div v-if="notification.type === 'mention'">
-                <h1>{{ notification.action.user.name }}<br><i class="fa icon-reply"></i> <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">mentioned</router-link> you</h1>
-              </div>
+          <a :href="notification.action.user.statusnet_profile_url">
+            <img class='avatar' :src="notification.action.user.profile_image_url_original">
+          </a>
+          <div class='text'>
+            <timeago :since="notification.action.created_at" :auto-update="240"></timeago>
+            <div v-if="notification.type === 'favorite'">
+              <h1>{{ notification.action.user.name }}<br><i class="fa icon-star"></i> favorited your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
+              <p>{{ notification.status.text }}</p>
+            </div>
+            <div v-if="notification.type === 'repeat'">
+              <h1>{{ notification.action.user.name }}<br><i class="fa icon-retweet"></i> repeated your <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">status</h1>
+              <p>{{ notification.status.text }}</p>
+            </div>
+            <div v-if="notification.type === 'mention'">
+              <h1>{{ notification.action.user.name }}<br><i class="fa icon-reply"></i> <router-link :to="{ name: 'conversation', params: { id: notification.status.id } }">mentioned</router-link> you</h1>
+              <p>{{ notification.status.text }}</p>
             </div>
           </div>
-          <status v-if="notification.type === 'mention'" :statusoid="notification.action" :expandable="false"></status>
         </div>
       </div>
     </div>
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 1e970ec6..ae9b9dd5 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="status-el base00-background" v-if="!status.deleted">
+  <div class="status-el base00-background" v-if="!status.deleted" v-bind:class="{ 'expanded-status': !expandable }">
     <template v-if="muted">
       <div class="media status container muted">
         <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
@@ -121,6 +121,10 @@
      }
  }
 
+ .expanded-status {
+   border-left: 4px solid rgba(255, 48, 16, 0.65);
+ }
+
  .status-actions {
      padding-top: 5px;
  }
@@ -156,8 +160,4 @@
    border-radius: 1em;
    margin-bottom: 1em;
  }
-
- .conversation .status-el {
-   border-left: 4px solid rgba(255, 48, 16, 0.65);
- }
 </style>
-- 
cgit v1.2.3-70-g09d2


From 9dfcf8a301c37b359cf18880732ad63b413ce63e Mon Sep 17 00:00:00 2001
From: shpuld <shpuld@gmail.com>
Date: Fri, 24 Feb 2017 17:32:41 +0200
Subject: Align attachments with usercard, make buttons use theme colors,
 prettify login form, more border radii adjustment for consistency.

---
 src/App.scss                                       |  5 +++--
 src/components/attachment/attachment.vue           | 13 +++++++------
 src/components/login_form/login_form.vue           | 22 ++++++++++++++++++++--
 src/components/notifications/notifications.scss    |  4 ++++
 src/components/notifications/notifications.vue     |  2 +-
 .../post_status_form/post_status_form.vue          | 13 +++++++------
 src/components/status/status.vue                   |  3 ++-
 .../user_card_content/user_card_content.vue        | 13 ++++++-------
 8 files changed, 50 insertions(+), 25 deletions(-)

(limited to 'src/components/notifications/notifications.vue')

diff --git a/src/App.scss b/src/App.scss
index 1e38275e..75f825ee 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -35,7 +35,8 @@ button{
     cursor: pointer;
 
     &:hover {
-        background-color: white;
+        //background-color: white;
+        opacity: 0.8;
     }
 }
 
@@ -175,7 +176,7 @@ status-text-container {
             margin-top: 0.2em;
             float: right;
             margin-right: 0.3em;
-            border-radius: 20%;
+            border-radius: 5px;
         }
     }
 
diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue
index 45cc1929..ad60acf9 100644
--- a/src/components/attachment/attachment.vue
+++ b/src/components/attachment/attachment.vue
@@ -34,9 +34,10 @@
   .attachments {
       display: flex;
       flex-wrap: wrap;
+      margin-right: -0.8em;
       .attachment {
           flex: 1 0 30%;
-          margin: 0.5em 0.8em 0.6em 0.1em;
+          margin: 0.5em 0.8em 0.6em 0.0em;
           align-self: flex-start;
 
           &.html {
@@ -49,14 +50,14 @@
               margin: 10px;
               padding: 5px;
               background: rgba(230,230,230,0.6);
-              border-radius: 0.5em;
+              border-radius: 5px;
               font-weight: bold;
           }
 
           video {
               height: 100%;
               border: 1px solid;
-              border-radius: 0.5em;
+              border-radius: 5px;
               width: 100%;
           }
 
@@ -69,7 +70,7 @@
               height: 100%;
               flex: 1;
               border: 1px solid;
-              border-radius: 0.5em;
+              border-radius: 5px;
           }
 
 
@@ -89,7 +90,7 @@
                   flex: 1;
                   img {
                       border: 0px;
-                      border-radius: 0;
+                      border-radius: 5px;
                       height: 100%;
                       object-fit: cover;
                   }
@@ -113,7 +114,7 @@
                   width: 100%;
                   border-style: solid;
                   border-width: 1px;
-                  border-radius: 0.5em;
+                  border-radius: 5px;
                   width: 100%;
                   height: 100%; /* If this isn't here, chrome will stretch the images */
               }
diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
index c0169a08..47495a48 100644
--- a/src/components/login_form/login_form.vue
+++ b/src/components/login_form/login_form.vue
@@ -5,7 +5,7 @@
       Log in
     </div>
     <div class="panel-body">
-      <form v-on:submit.prevent='submit(user)'>
+      <form v-on:submit.prevent='submit(user)' class='login-form'>
         <div class='form-group'>
           <label for='username'>Username</label>
           <input :disabled="loggingIn" v-model='user.username' class='form-control' id='username' placeholder='e.g. lain'>
@@ -15,7 +15,7 @@
           <input :disabled="loggingIn" v-model='user.password' class='form-control' id='password' type='password'>
         </div>
         <div class='form-group'>
-          <button :disabled="loggingIn" type='submit' class='btn btn-default'>Submit</button>
+          <button :disabled="loggingIn" type='submit' class='btn btn-default base05 base01-background'>Submit</button>
         </div>
       </form>
     </div>
@@ -23,3 +23,21 @@
 </template>
 
 <script src="./login_form.js" ></script>
+
+<style lang="scss">
+
+.login-form {
+  input {
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 5px;
+    padding: 0.2em;
+  }
+
+  .btn {
+    margin-top: 0.5em;
+    min-height: 28px;
+  }
+}
+
+</style>
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 517afeaa..fe0cca10 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -1,4 +1,8 @@
 @import '../../_variables.scss';
+
+.notifications button {
+  min-height: 20px;
+}
 .notification {
   padding: 0.4em 0 0 0.7em;
   display: flex;
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 785cc019..36908b1e 100644
--- a/src/components/notifications/notifications.vue
+++ b/src/components/notifications/notifications.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="notifications">
     <div class="panel panel-default base00-background">
-      <div class="panel-heading base01-background base04">Notifications ({{unseenCount}}) <button @click.prevent="markAsSeen">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}'>
           <a :href="notification.action.user.statusnet_profile_url">
diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
index d345ec13..ef8034a3 100644
--- a/src/components/post_status_form/post_status_form.vue
+++ b/src/components/post_status_form/post_status_form.vue
@@ -2,7 +2,7 @@
   <div class="post-status-form">
     <form @submit.prevent="postStatus(newStatus)">
       <div class="form-group" >
-        <textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="3" class="form-control" @keyup.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag"></textarea>
+        <textarea v-model="newStatus.status" placeholder="Just landed in L.A." rows="3" class="form-control base05-border" @keyup.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag"></textarea>
       </div>
       <div class="attachments">
         <div class="attachment" v-for="file in newStatus.files">
@@ -15,7 +15,7 @@
       </div>
       <div class='form-bottom'>
         <media-upload @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="enableSubmit" :drop-files="dropFiles"></media-upload>
-        <button :disabled="submitDisabled" type="submit" class="btn btn-default">Submit</button>
+        <button :disabled="submitDisabled" type="submit" class="btn btn-default base05 base01-background">Submit</button>
       </div>
     </form>
   </div>
@@ -58,7 +58,7 @@
             margin: 10px;
             padding: 5px;
             background: rgba(230,230,230,0.6);
-            border-radius: 0.5em;
+            border-radius: 5px;
             font-weight: bold;
          }
      }
@@ -77,10 +77,11 @@
      }
 
      form textarea {
-         border: none;
-         border-radius: 2px;
+         border: solid;
+         border-width: 1px;
+         border-radius: 5px;
          line-height:16px;
-         padding: 0.5em;
+         padding: 5px;
          resize: vertical;
      }
 
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
index 712f1a7b..585bf621 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -157,7 +157,8 @@
  .usercard {
    border-style: solid;
    border-width: 1px;
-   border-radius: 0.5em;
+   border-radius: 10px;
    margin-bottom: 1em;
+   margin-top: 0.2em;
  }
 </style>
diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue
index 10064d5f..fcdc7cca 100644
--- a/src/components/user_card_content/user_card_content.vue
+++ b/src/components/user_card_content/user_card_content.vue
@@ -15,22 +15,22 @@
           <div class="follow" v-if="loggedIn">
             <span v-if="user.following">
               <!--Following them!-->
-              <button @click="unfollowUser" class="base06 base01-background">
+              <button @click="unfollowUser" class="base01 base04-background">
                 Unfollow
               </button>
             </span>
             <span v-if="!user.following">
-              <button @click="followUser" class="base01 base04-background">
+              <button @click="followUser" class="base05 base01-background">
                 Follow
               </button>
             </span>
           </div>
           <div class='mute' v-if='isOtherUser'>
             <span v-if='user.muted'>
-              <button @click="toggleMute" class="base04 base01-background base06-border">Unmute</button>
+              <button @click="toggleMute" class="base01 base04-background">Unmute</button>
             </span>
             <span v-if='!user.muted'>
-              <button @click="toggleMute" class="base01 base04-background base01-border">Mute</button>
+              <button @click="toggleMute" class="base05 base01-background">Mute</button>
             </span>
           </div>
         </div>
@@ -102,7 +102,7 @@
 .profile-panel-background {
   background-color: #121517;
   background-size: cover;
-  border-radius: 0.5em 0.5em 0 0;
+  border-radius: 10px;
 }
 
 .profile-panel-body {
@@ -127,7 +127,7 @@
 
   img {
       border: 2px solid;
-      border-radius: 0.5em;
+      border-radius: 5px;
       flex: 1 0 100%;
       max-width: 48px;
       max-height: 48px;
@@ -185,7 +185,6 @@
     button {
       width: 92%;
       height: 100%;
-      border: 1px solid;
     }
   }
 }
-- 
cgit v1.2.3-70-g09d2


From 2bfd2190a0e61af57c41f6f93229e2f8505ab945 Mon Sep 17 00:00:00 2001
From: shpuld <shpuld@gmail.com>
Date: Fri, 24 Feb 2017 18:53:53 +0200
Subject: 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 | 92 +++++++++++++++----------
 src/components/notifications/notifications.vue  |  7 +-
 2 files changed, 59 insertions(+), 40 deletions(-)

(limited to 'src/components/notifications/notifications.vue')

diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index fe0cca10..5da6d495 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -1,49 +1,65 @@
 @import '../../_variables.scss';
 
-.notifications button {
-  min-height: 20px;
-}
-.notification {
-  padding: 0.4em 0 0 0.7em;
-  display: flex;
-  border-bottom: 1px solid silver;
-
-  .text {
-    min-width: 0px;
-    word-wrap: break-word;
-    line-height:18px;
-
-    .icon-retweet {
-      color: $green;
-    }
+.notifications {
 
-    .icon-reply {
-      color: $blue;
+  .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;
     }
+  }
 
-    h1 {
-      margin: 0 0 0.3em;
-      padding: 0;
-      font-size: 1em;
-      line-height:20px;
-    }
+  .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;
+      line-height:18px;
 
-    padding: 0.3em 0.8em 0.5em;
-    p {
-      margin: 0;
-      margin-top: 0;
-      margin-bottom: 0.3em;
+      .icon-retweet {
+        color: $green;
+      }
+
+      .icon-reply {
+        color: $blue;
+      }
+
+      h1 {
+        margin: 0 0 0.3em;
+        padding: 0;
+        font-size: 1em;
+        line-height:20px;
+      }
+
+      padding: 0.3em 0.8em 0.5em;
+      p {
+        margin: 0;
+        margin-top: 0;
+        margin-bottom: 0.3em;
+      }
     }
-  }
 
-  .avatar {
-    padding-top: 0.3em;
-    width: 32px;
-    height: 32px;
-    border-radius: 50%;
-  }
+    .avatar {
+      padding-top: 0.3em;
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+    }
 
-  &:last-child {
-    border: none
+    &:last-child {
+      border: none
+    }
   }
 }
diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue
index 36908b1e..41c274aa 100644
--- a/src/components/notifications/notifications.vue
+++ b/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>
-- 
cgit v1.2.3-70-g09d2

