From 54c7690e26a234e7d639b9d546aed1ff06810e2e Mon Sep 17 00:00:00 2001
From: Ro <ro@playvicio.us>
Date: Tue, 16 Jun 2020 13:20:11 -0700
Subject: [PATCH] tightened up notifciations display

---
 brain/views/frame.pug           |  7 +++++--
 src/com/ui/Notifications.js     | 18 ++++++++++++++++--
 src/styles/main/_structure.styl | 25 +++++++++++++++++++++----
 3 files changed, 42 insertions(+), 8 deletions(-)

diff --git a/brain/views/frame.pug b/brain/views/frame.pug
index 19dd78d..de0b9a2 100644
--- a/brain/views/frame.pug
+++ b/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="description" content="The home site of Creative Technologist, music maker, and social philoshoper, Ro. Ha, I know. Me too.")
+        meta(name="keywords" content="")
+        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
diff --git a/src/com/ui/Notifications.js b/src/com/ui/Notifications.js
index c2586b7..598515a 100644
--- a/src/com/ui/Notifications.js
+++ b/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,
diff --git a/src/styles/main/_structure.styl b/src/styles/main/_structure.styl
index 012f9d5..0f85353 100644
--- a/src/styles/main/_structure.styl
+++ b/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: -125px;
-    padding-top 0
+    margin-top: 0px;
+    padding-top -125px
     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%