Notifications: clean up styles

app/styles/components/emoji-reacts.scss

@@ -25,14 +25,13 @@
   vertical-align: middle;
   display: inline-flex;
 
-  i.fa {
-    color: var(--highlight-text-color);
-    font-size: 20px;
-    margin-right: 0.2em;
-  }
-
   .svg-icon {
     margin-right: 0.2em;
+    color: var(--highlight-text-color);
+
+    svg {
+      stroke-width: 3px;
+    }
   }
 }
 

app/styles/components/notification.scss

@@ -1,3 +1,12 @@
+.notification {
+  border-bottom: 1px solid var(--brand-color--med);
+  padding: 10px 0;
+}
+
+.notification-mention {
+  padding: 15px 0;
+}
+
 .notification-favourite {
   .status.status-direct {
     background: transparent;
@@ -28,12 +37,22 @@
   }
 }
 
-.notification__favourite-icon-wrapper {
+.notification__icon-wrapper {
   left: -26px;
   position: absolute;
 
-  .star-icon {
+  .svg-icon {
-    color: $gold-star;
+    width: 20px;
+    height: 20px;
+    color: var(--highlight-text-color);
+
+    svg.icon-tabler-thumb-up {
+      color: $gold-star;
+    }
+
+    svg.feather-repeat {
+      color: var(--highlight-text-color);
+    }
   }
 }
 
@@ -55,3 +74,18 @@
 .notification .status__wrapper {
   box-shadow: none;
 }
+
+.notification {
+  .status-container {
+    padding: 0;
+  }
+
+  .status__wrapper {
+    border-radius: 0;
+    padding: 0;
+  }
+
+  .status {
+    padding-bottom: 8px !important;
+  }
+}

app/styles/ui.scss

@@ -444,6 +444,7 @@
     flex: 1 1 auto;
     position: relative;
     min-height: 120px;
+    padding: 30px 15px;
   }
 }