1 files changed, 22 insertions, 5 deletions
diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
index 3c500b36..a739d52e 100644
--- a/src/components/notifications/notifications.scss
+++ b/src/components/notifications/notifications.scss
@@ -4,21 +4,33 @@
   // a bit of a hack to allow scrolling below notifications
   padding-bottom: 15em;
 
+  .panel {
+    background: var(--bg)
+  }
+
+  .panel-body {
+    border-color: var(--border)
+  }
+
   .panel-heading {
     // force the text to stay centered, while keeping
     // the button in the right side of the panel heading
     position: relative;
+    background: var(--btn);
+    color: var(--faint);
     .read-button {
       position: absolute;
       right: 0.7em;
       height: 1.8em;
       line-height: 100%;
+      background-color: var(--btn);
+      color: var(--faint);
     }
   }
 
   .unseen-count {
     display: inline-block;
-    background-color: rgba(255, 16, 8, 0.8);
+    background-color: var(--cRed);
     text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);
     min-width: 1.3em;
     border-radius: 1.3em;
@@ -27,6 +39,7 @@
     font-size: 0.9em;
     text-align: center;
     line-height: 1.3em;
+    padding: 1px;
   }
 
   .notification {
@@ -48,19 +61,23 @@
       overflow: hidden;
 
       .icon-retweet.lit {
-        color: $green;
+        color: $green_;
+        color: var(--cGreen);
       }
 
       .icon-user-plus.lit {
-        color: $blue;
+        color: $blue_;
+        color: var(--cBlue);
       }
 
       .icon-reply.lit {
-        color: $blue;
+        color: $blue_;
+        color: var(--cBlue);
       }
 
       .icon-star.lit {
         color: orange;
+        color: var(--cOrange);
       }
 
       .status-content {
@@ -134,7 +151,7 @@
   }
 
   .unseen {
-    border-left: 4px solid rgba(255, 16, 8, 0.75);
+    border-left: 4px solid var(--cRed);
     padding-left: 6px;
   }
 }