Pulse the add to dash icon

resources/frontend_client/app/components/icons/icons.css

@@ -11,6 +11,29 @@
     height: 42.5px;
 }
 
+@keyframes icon-pulse {
+    0% {
+        box-shadow: 0 0 5px rgba(80,158,227, 1.0);
+    }
+    50% {
+        box-shadow: 0 0 5px rgba(80,158,227, 0.25);
+    }
+    100% {
+        box-shadow: 0 0 5px rgba(80,158,227, 1.0);
+    }
+}
+
+
+.Icon--pulse {
+    border-radius: 99px;
+    box-shadow: 0 0 5px #509EE3;
+    padding: 0.75em;
+    animation-name: icon-pulse;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+    animation-timing-function: linear;
+}
+
 @media screen and (--breakpoint-min-md) {
     .Logo .Icon {
         width: 66px;

resources/frontend_client/app/dashboard/components/DashboardHeader.react.js

@@ -15,6 +15,8 @@ import {
     deleteDashboard
 } from '../actions';
 
+import cx from "classnames";
+
 export default class DashboardHeader extends React.Component {
 
     onEditDashboard() {
@@ -100,11 +102,13 @@ export default class DashboardHeader extends React.Component {
         //         <Icon name="add" width="16px" height="16px" />
         //     </a>
         // ]);
+
+        var isEmpty = dashboard.ordered_cards.length === 0;
         buttonSections.push([
             <PopoverWithTrigger
                 ref="addQuestionModal"
                 tether={false}
-                triggerElement={<Icon name="add" width="16px" height="16px" />}
+                triggerElement={<Icon className={cx({ "Icon--pulse": isEmpty })} name="add" width="16px" height="16px" />}
             >
                 <AddToDashSelectQuestionModal
                     dispatch={this.props.dispatch}