Add css variable support and use MD icon

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

Author: skjnldsv

css/styles.scss

@@ -9,31 +9,47 @@
 	padding: 10px;
 	opacity: .6;
 
-	.svg {
-		width: 20px;
-		height: 20px;
-	}
-
 	&:hover,
 	&:focus {
 		opacity: 1 !important;
 	}
 
+	.notification__dot {
+		fill: #ff4402;
+		&--white {
+			fill: var(--color-primary-text);
+		}
+	}
+
 	&.hasNotifications {
 		opacity: 1 !important;
+		animation-name: pulse;
+		animation-duration: 1600ms;
+		animation-iteration-count: 4;
 
 		&:hover,
 		&:focus {
 			opacity: .6 !important;
 		}
 	}
 
-	&,
-	img {
+	* {
 		cursor: pointer;
 	}
 }
 
+@keyframes pulse {
+	0% {
+		opacity: 1;
+	}
+	60% {
+		opacity: .6;
+	}
+	100% {
+		opacity: 1;
+	}
+}
+
 .notification-container {
 	display: none;
 	right: 13px;
@@ -51,7 +67,7 @@
 		padding: 50px 0;
 		margin: 0;
 
-		@include icon-black-white('notifications-dark', 'notifications', 1);
+		@include icon-black-white('notifications', 'notifications', 1);
 	}
 
 	.dismiss-all {
@@ -157,16 +173,6 @@
 		}
 	}
 
-	img.notification-icon {
-		width: 32px;
-		height: 32px;
-		display: flex;
-
-		body.theme--dark & {
-			filter: invert(1);
-		}
-	}
-
 	strong {
 		font-weight: bold;
 		opacity: 1;