- Switch the tour title bar to the info blue color

- Move the tour up so it doesn’t hit the olark
- Have the spotlight use a rounded rect

static/css/quay.css

@@ -2730,7 +2730,7 @@ p.editable:hover i {
 .angular-tour-ui-element.overlay {
   display: block;
   position: fixed;
-  bottom: 20px;
+  bottom: 50px;
   right: 20px;
   border-radius: 10px;
   z-index: 9999999;
@@ -2760,7 +2760,7 @@ p.editable:hover i {
 }
 
 .angular-tour-ui-element.overlay .tour-title {
-  background: #778EA2;
+  background-color: #5bc0de;
   color: white;
   padding: 4px;
   padding-left: 6px;

static/lib/jquery.spotlight.js

@@ -5,7 +5,7 @@
  * Original Plugin code by Gilbert Pellegrom (2009)
  * Licensed under the GPL license (http://www.gnu.org/licenses/gpl-3.0.html)
  * Version 1.1 (2011)
- * Modified by jschorr (Fix Opacity bug, fix handling of events)
+ * Modified by jschorr (Fix Opacity bug, fix handling of events, add rounded corners)
  */
 (function ($) {
   var currentOverlay;
@@ -74,6 +74,19 @@
     parent,
     context;
 
+    function roundRect(context, x, y, w, h, r) {
+      if (w < 2 * r) r = w / 2;
+      if (h < 2 * r) r = h / 2;
+      context.beginPath();
+      context.moveTo(x+r, y);
+      context.arcTo(x+w, y,   x+w, y+h, r);
+      context.arcTo(x+w, y+h, x,   y+h, r);
+      context.arcTo(x,   y+h, x,   y,   r);
+      context.arcTo(x,   y,   x+w, y,   r);
+      context.closePath();
+      return context;
+    }
+
     /**
      * Colour in the overlay and clear all element masks
      */
@@ -85,13 +98,15 @@
       elements.each(function (i, e) {
         var ej = $(e);
 
-        var currentPos = e.getBoundingClientRect();
+        var currentPos = e.getBoundingClientRect();        
-        context.clearRect(
+        context.save();
-          currentPos.left - settings.paddingX,
+        context.globalCompositeOperation = 'destination-out';
+        roundRect(context, currentPos.left - settings.paddingX,
           currentPos.top - settings.paddingY,
           ej.outerWidth() + (settings.paddingX * 2),
-          ej.outerHeight() + (settings.paddingY * 2)
+                           ej.outerHeight() + (settings.paddingY * 2),
-        );
+                           6).fill();
+        context.restore();
       });
     }
 
@@ -143,6 +158,7 @@
     $(window).resize(handleResize);
 
     context = overlay[0].getContext('2d');
+    context.globalCompositeOperation = 'source-over';
 
     fillOverlay();