#1515 tokenNotification close + styles improvement

src/content/functions/tokenNotification.js

@@ -22,6 +22,7 @@ const isInFrame = require('./isInFrame');
 const { createElement, createSVGElement, createTextElement } = require('../../partials/DOMElements');
 const iconSrc = require('../../images/notification-logo.svg');
 const copySrc = require('../../images/copy-icon.svg');
+const closeSrc = require('../../images/notification-close.svg');
 const S = require('../../selectors');
 
 const tokenNotification = token => {
@@ -44,7 +45,27 @@ const tokenNotification = token => {
     tokenButton: null,
     tokenButtonText: null,
     notificationText: null,
-    p: null
+    p: null,
+    closeBtn: null,
+    close: null
+  };
+
+  const closeNotification = e => {
+    if (e) {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+
+    if (n && n.notification) {
+      n.notification.classList.remove('visible');
+    }
+
+    setTimeout(() => {
+      if (n && n.notification) {
+        n.notification.classList.add('hidden');
+        n = null;
+      }
+    }, 300);
   };
 
   if (!n.container) {
@@ -53,6 +74,12 @@ const tokenNotification = token => {
   }
 
   n.notification = createElement('div', 'twofas-be-notification');
+  n.closeBtn = createElement('button', 'twofas-be-notification-close');
+  n.closeBtn.addEventListener('click', closeNotification);
+  n.close = createSVGElement(closeSrc);
+  n.closeBtn.appendChild(n.close);
+  n.notification.appendChild(n.closeBtn);
+
   n.firstCol = createElement('div', 'twofas-be-col');
   n.logo = createSVGElement(iconSrc);
 
@@ -99,16 +126,7 @@ const tokenNotification = token => {
   setTimeout(() => n.notification.classList.add('visible'), 300);
 
   window.addEventListener('beforeunload', () => {
-    if (n && n.notification) {
-      n.notification.classList.remove('visible');
-    }
-
-    setTimeout(() => {
-      if (n && n.notification) {
-        n.notification.classList.add('hidden');
-        n = null;
-      }
-    }, 300);
+    closeNotification();
   });
 
   setTimeout(() => {

src/content/styles/content_script.scss

@@ -57,9 +57,12 @@
     margin-bottom: 25px !important;
     max-width: 380px !important;
     overflow: hidden !important;
+    position: relative !important;
     text-align: left !important;
     transform: translateX(425px) !important;
     transition: box-shadow .3s ease-in-out, max-height .3s ease-in-out, margin-bottom .3s ease-in-out, transform .3s ease-in-out !important;
+    z-index: 999999 !important;
+    z-index: infinite !important;
 
     &.visible {
       box-shadow: 0 0 20px 5px $shadow-color !important;
@@ -71,6 +74,24 @@
       max-height: 0 !important;
     }
 
+    &-close {
+      appearance: none !important;
+      background: transparent !important;
+      border: 0 !important;
+      cursor: pointer !important;
+      padding: 0 !important;
+      position: absolute !important;
+      right: 2px !important;
+      top: 2px !important;
+
+      > svg {
+        height: auto !important;
+        margin-right: 0 !important;
+        max-width: unset !important;
+        width: 24px !important;
+      }
+    }
+
     &-buttons {
       border-radius: 0 !important;
       box-shadow: none !important;
@@ -133,6 +154,10 @@
           color: $color !important;
           font-size: 32px !important;
           font-weight: 700 !important;
+
+          @media all and (max-width: 400px) {
+            font-size: 24px !important;
+          }
         }
       }
 
@@ -209,6 +234,13 @@
       &:last-of-type {
         margin-right: 18px !important;
       }
+
+      > svg {
+        height: 34px !important;
+        margin-right: 16px !important;
+        max-width: 28px !important;
+        width: 28px !important;
+      }
     }
 
     /* ProtonMail FIX */
@@ -221,13 +253,6 @@
     }
     /* ProtonMail FIX */
 
-    svg {
-      height: 34px !important;
-      margin-right: 16px;
-      max-width: 28px !important;
-      width: 28px !important;
-    }
-
     h3,
     p {
       font-family: 'Montserrat', sans-serif !important;

src/images/notification-close.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="2.143" height="21.429" rx="1.071" transform="rotate(-45 21.339 -7.324)" fill="#B3B3B3"/>
+<rect x="26.581" y="11.429" width="2.143" height="21.429" rx="1.071" transform="rotate(45 26.581 11.429)" fill="#B3B3B3"/>
+</svg>