3 files changed, 24 insertions, 17 deletions
diff --git a/src/components/notification/notification.scss b/src/components/notification/notification.scss
index 654aca3c..ad05a2f3 100644
--- a/src/components/notification/notification.scss
+++ b/src/components/notification/notification.scss
@@ -1,10 +1,7 @@
-@import "../../variables";
-
 // TODO Copypaste from Status, should unify it somehow
 .Notification {
   border-bottom: 1px solid;
-  border-color: $fallback--border;
-  border-color: var(--border, $fallback--border);
+  border-color: var(--border);
   word-wrap: break-word;
   word-break: break-word;
 
@@ -71,28 +68,22 @@
   }
 
   &.-type--repeat .type-icon {
-    color: $fallback--cGreen;
-    color: var(--cGreen, $fallback--cGreen);
+    color: var(--cGreen);
   }
 
   &.-type--follow .type-icon {
-    color: $fallback--cBlue;
-    color: var(--cBlue, $fallback--cBlue);
+    color: var(--cBlue);
   }
 
   &.-type--follow-request .type-icon {
-    color: $fallback--cBlue;
-    color: var(--cBlue, $fallback--cBlue);
+    color: var(--cBlue);
   }
 
   &.-type--like .type-icon {
-    color: orange;
-    color: $fallback--cOrange;
-    color: var(--cOrange, $fallback--cOrange);
+    color: var(--cOrange);
   }
 
   &.-type--move .type-icon {
-    color: $fallback--cBlue;
-    color: var(--cBlue, $fallback--cBlue);
+    color: var(--cBlue);
   }
 }
diff --git a/src/components/notification/notification.style.js b/src/components/notification/notification.style.js
new file mode 100644
index 00000000..0d36760a
--- /dev/null
+++ b/src/components/notification/notification.style.js
@@ -0,0 +1,17 @@
+export default {
+  name: 'Notification',
+  selector: '.Notification',
+  validInnerComponents: [
+    'Text',
+    'Link',
+    'Icon',
+    'Border',
+    'Button',
+    'ButtonUnstyled',
+    'RichContent',
+    'Input',
+    'Avatar',
+    'Attachment'
+  ],
+  defaultRules: []
+}
diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
index a8eceab0..632ae6e9 100644
--- a/src/components/notification/notification.vue
+++ b/src/components/notification/notification.vue
@@ -155,7 +155,7 @@
             <router-link
               v-if="notification.status"
               :to="{ name: 'conversation', params: { id: notification.status.id } }"
-              class="timeago-link faint-link"
+              class="timeago-link faint"
             >
               <Timeago
                 :time="notification.created_at"
@@ -247,7 +247,6 @@
         />
         <template v-else>
           <StatusContent
-            :class="{ faint: !statusExpanded }"
             :compact="!statusExpanded"
             :status="notification.status"
           />