Fixes to notification style issues mostly

src/App.scss

@@ -391,6 +391,11 @@ nav {
   }
 }
 
+.faint {
+  color: $fallback--faint;
+  color: var($fallback--faint, --faint);
+}
+
 @media all and (max-width: 959px) {
   .mobile-hidden {
     display: none;

src/components/notification/notification.vue

@@ -1,14 +1,15 @@
 <template>
   <status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status>
   <div class="non-mention" v-else>
-    <a :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
+    <a class='avatar-container' :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded">
       <StillImage class='avatar-compact' :src="notification.action.user.profile_image_url_original"/>
     </a>
     <div class='notification-right'>
-      <div class="base03-border usercard" v-if="userExpanded">
+      <div class="usercard notification-usercard" v-if="userExpanded">
         <user-card-content :user="notification.action.user" :switcher="false"></user-card-content>
       </div>
       <span class="notification-details">
+        <div class="name-and-action">
           <span class="username" :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
           <span v-if="notification.type === 'favorite'">
             <i class="fa icon-star lit"></i>
@@ -22,12 +23,13 @@
             <i class="fa icon-user-plus lit"></i>
             <small>{{$t('notifications.followed_you')}}</small>
           </span>
+        </div>
         <small class="timeago"><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
       </span>
       <div class="follow-text" v-if="notification.type === 'follow'">
         <router-link :to="{ name: 'user-profile', params: { id: notification.action.user.id } }">@{{notification.action.user.screen_name}}</router-link>
       </div>
-      <status v-else class="base04" :compact="true" :statusoid="notification.status" :noHeading="true"></status>
+      <status v-else class="faint" :compact="true" :statusoid="notification.status" :noHeading="true"></status>
     </div>
   </div>
 </template>

src/components/notifications/notifications.scss

@@ -46,15 +46,47 @@
     font-size: 0.9em;
     text-align: center;
     line-height: 1.3em;
-    padding: 1px;
   }
 
-  .notification {
-    padding-left: 4px;
+  .unseen {
+    border-left: 4px solid $fallback--cRed;
+    border-left: 4px solid var(--cRed, $fallback--cRed);
+    padding-left: 0;
+  }
+}
+
+.notification {
   box-sizing: border-box;
   display: flex;
   border-bottom: 1px solid;
   border-bottom-color: inherit;
+  padding-left: 4px;
+
+  .avatar-compact {
+    width: 32px;
+    height: 32px;
+    border-radius: $fallback--avatarAltRadius;
+    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
+    overflow: hidden;
+    line-height: 0;
+
+    &.animated::before {
+      display: none;
+    }
+  }
+
+  &:hover .animated.avatar {
+    canvas {
+      display: none;
+    }
+    img {
+      visibility: visible;
+    }
+  }
+
+  .notification-usercard {
+    margin: 0;
+  }
 
   .non-mention {
     display: flex;
@@ -62,9 +94,15 @@
     flex-wrap: nowrap;
     padding: 0.6em;
     min-width: 0;
+    .avatar-container {
+      width: 32px;
+      height: 32px;
+    }
     .status-el {
       .status {
         padding: 0.25em 0;
+        color: $fallback--faint;
+        color: var($fallback--faint, --faint);
       }
       padding: 0;
       .status-content.media-body {
@@ -99,8 +137,13 @@
     overflow: hidden;
     width: 100%;
     flex: 1;
+    display: flex;
     flex-wrap: nowrap;
 
+    .name-and-action {
+      flex: 1;
+    }
+
     .username {
       font-weight: bolder;
     }
@@ -156,9 +199,9 @@
   &:last-child {
     border-bottom: none;
   }
-  }
+}
 
-  .notification-content {
+.notification-content {
   max-height: 12em;
   overflow-y: hidden;
   //text-overflow: ellipsis;
@@ -166,41 +209,4 @@
   img {
       object-fit: contain;
   }
-  }
-
-  .unseen {
-    border-left: 4px solid $fallback--cRed;
-    border-left: 4px solid var(--cRed, $fallback--cRed);
-    padding-left: 6px;
-  }
-}
-
-.notification {
-  .avatar-compact {
-    margin-top: 0.3em;
-    width: 32px;
-    height: 32px;
-    border-radius: $fallback--avatarAltRadius;
-    border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
-    overflow: hidden;
-    line-height: 0;
-
-    &.animated::before {
-      display: none;
-    }
-
-  }
-
-  &:hover .animated.avatar {
-    canvas {
-      display: none;
-    }
-    img {
-      visibility: visible;
-    }
-  }
-
-  .notification-usercard {
-    margin-left: 0.8em;
-  }
 }

src/components/status/status.vue

@@ -10,7 +10,7 @@
     <template v-else>
       <div v-if="retweet && !noHeading" class="media container retweet-info">
         <StillImage v-if="retweet" class='avatar' :src="statusoid.user.profile_image_url_original"/>
-        <div class="media-body">
+        <div class="media-body faint">
           <a :href="statusoid.user.statusnet_profile_url" style="font-weight: bold;" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a>
           <i class='fa icon-retweet retweeted'></i>
           {{$t('timeline.repeated')}}
@@ -134,12 +134,13 @@
   border-radius: $fallback--tooltipRadius;
   border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
   box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5);
-  margin-top: 0.5em;
-  margin-left: 1em;
+  margin-top: 0.25em;
+  margin-left: 0.5em;
   z-index: 50;
   .status {
     flex: 1;
     border: 0;
+    min-width: 15em;
   }
 }
 
@@ -439,6 +440,11 @@ a.unmute {
     width: 40px;
     height: 40px;
   }
+
+  .status .avatar-compact {
+    width: 32px;
+    height: 32px;
+  }
 }
 
 </style>