tightened up notifciations display

brain/views/frame.pug

@@ -5,8 +5,8 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en")
         meta(content="text/html;charset=utf-8", http-equiv="Content-Type")
         meta(meta content="utf-8", http-equiv="encoding")
         meta(name='viewport', content='width=device-width, initial-scale=1.0')
-        meta(name="keywords" content="creative technoglogist, graphic design, web development, designer developer, social thought, political discussion, music producer, creative culture, black creative, black geek")
+        meta(name="keywords" content="")
-        meta(name="description" content="The home site of Creative Technologist, music maker, and social philoshoper, Ro. Ha, I know. Me too.")
+        meta(name="description" content="")
         meta(http-equiv="content-type", content="text/html; charset=utf-8")
         //meta(property="og:image" content="https://thetwelfth.house/base-assets/images/current.png")
         //meta(name="twitter:image" content="https://thetwelfth.house/base-assets/images/current.png")
@@ -14,6 +14,9 @@ html(xmlns='http://www.w3.org/1999/xhtml', lang='en', xml:lang="en")
     body
       #notifications.notifications
         #notifyMessage.notifyMessage
+          .notify-icon
+            svg(viewBox="0 0 20 20" class="icons")
+              use#submit-update(xlink:href='/assets/images/global/sprite.svg#entypo-bell') 
           p#message-text This is a message
       .main-container#main-content
         section#dash-index-content

src/com/ui/Notifications.js

@@ -16,10 +16,25 @@ export default class Notfications {
 		notifcation.style.display = 'flex';
 		var color = '';
 		status ? (color = '#32cd32') : (color = '#F64747');
+		anime({
+			targets: messageText,
+			backgroundColor: color,
+			easing: 'easeInOutQuint',
+			duration: 500,
+			complete: () => {
+				setTimeout(() => {
+					anime({
+						targets: messageText,
+						backgroundColor: '#374857',
+						easing: 'easeOutQuint',
+						duration: 500
+					});
+				}, 1000);
+			}
+		});
 		anime({
 			targets: message,
 			marginTop: '-20px',
-			backgroundColor: color,
 			easing: 'easeInOutQuint',
 			duration: 500,
 			opacity: 1,
@@ -28,7 +43,6 @@ export default class Notfications {
 					anime({
 						targets: message,
 						marginTop: '-125px',
-						backgroundColor: '#374857',
 						easing: 'easeOutQuint',
 						duration: 500,
 						opacity: 0,

src/styles/main/_structure.styl

@@ -21,23 +21,40 @@ svg.icons
   z-index 2000
   height 10%
   width 100%
-  display none
+  display block
   align-items center
   justify-content center
   padding 0 
   margin 0 
   #notifyMessage
-    background-color: $highlight
+    margin-top: 0px;
-    margin-top: -125px;
+    padding-top -125px
-    padding-top 0
     height 50px;
     width 500px
     display: flex;
     align-items center
     justify-content center
     opacity: 0
+    .notify-icon
+      background $black
+      padding 8px 5px 5px 5px
+      border-radius 5px 0 0 5px
+      height 30px
+      width 30px
+      text-align center
+      border 2px solid $white
     p
       color $white
+      background $highlight
+      width 400px
+      height 28px
+      padding 15px 0 0 5px
+      border-radius 0 5px 5px 0
+      border 2px solid $white
+      text-align center
+      
+    .icons
+      fill $white
 
 .blog-container
   width 100%