Style intro.js highlight helper layer & tooltips to go nice with WP

[MAILPOET-1446]

assets/css/src/admin.styl

@@ -34,3 +34,4 @@
 
 @require 'newsletter_templates'
 @require 'welcome_wizard'
+@require 'intro'

assets/css/src/intro.styl

@@ -0,0 +1,18 @@
+.mailpoet-intro-active #adminmenuback
+  z-index: auto;
+
+#adminmenu li.introjs-showElement
+  background: inherit
+
+.introjs-helperLayer
+  border: none
+  border-radius: 3px
+  background-color: rgba(255, 255, 255, .7)
+
+.introjs-tooltip
+  min-width: 240px
+
+  // fix for wrong bottom-up tooltip vertical align, bottom-up tooltips
+  // have (negative) 'top' set in intro.js, no other way to select them
+  &[style*="top:"]
+    margin-top: -8px

assets/js/src/intro.jsx

@@ -29,6 +29,18 @@ function Intro() {
     skipLabel: 'Skip',
     doneLabel: 'Done',
     positionPrecedence: ['right', 'left', 'bottom', 'top'],
+    helperElementPadding: 12,
+    scrollToElement: false,
+    showStepNumbers: false,
+    tooltipPosition: 'auto',
+  });
+
+  intro.onafterchange(() => {
+    document.body.classList.add('mailpoet-intro-active');
+  });
+
+  intro.onexit(() => {
+    document.body.classList.remove('mailpoet-intro-active');
   });
 
   intro.start();