Add a styled tip to the menu of the 'Validate and Save' button

This helps keep the behaviour of the dropdown button as close as possible to the dropdown component.

src/components/DropdownButton/DropdownButton.js

@@ -62,7 +62,8 @@ class DropdownButton extends React.Component {
 
     this.closeMenu()
     this.setState({
-      value: option
+      value: option,
+      firstItemHover: false
     })
   }
 
@@ -72,6 +73,18 @@ class DropdownButton extends React.Component {
     }
   }
 
+  onMenuItemMouseEnter(index) {
+    if (index === 0) {
+      this.setState({ firstItemHover: true })
+    }
+  }
+
+  onMenuItemMouseLeave(index) {
+    if (index === 0) {
+      this.setState({ firstItemHover: false })
+    }
+  }
+
   isDisabled() {
     return typeof this.props.disabled !== 'undefined' ? this.props.disabled : false
   }
@@ -92,10 +105,12 @@ class DropdownButton extends React.Component {
     }
 
     return (
-      <div className={s.menu}>
-        {this.state.options.map(o => (
+      <div className={s.menu + (this.state.firstItemHover ? ' ' + s.firstItemHover : '')}>
+        {this.state.options.map((o, i) => (
           <div key={o.value}
             className={s.menuItem + (o.value === this.state.value.value ? ' ' + s.selected : '')}
+            onMouseEnter={() => { this.onMenuItemMouseEnter(i) }}
+            onMouseLeave={() => { this.onMenuItemMouseLeave(i) }}
             onMouseDown={() => { this.itemMouseDown = true }}
             onMouseUp={() => { this.itemMouseDown = false }}
             onClick={() => { this.onMenuItemClick(o) }}

src/components/DropdownButton/DropdownButton.scss

@@ -63,6 +63,35 @@ along with this program.  If not, see <http://www.gnu.org/licenses/>.
     box-sizing: border-box;
     margin-top: 8px;
     border-radius: $border-radius;
+    overflow: visible;
+
+    &:after {
+      content: " ";
+      display: block;
+      position: absolute;
+      border: 1px solid $gray;
+      width: 10px;
+      height: 10px;
+      right: 9px;
+      top: -6px;
+      transform: rotate(135deg);
+      border-color: transparent transparent $gray $gray;
+      background-color: white;
+    }
+
+    &.firstItemHover:after {
+      background-color: $blue;
+    }
+
+    :first-child {
+      border-top-left-radius: $border-radius;
+      border-top-right-radius: $border-radius;
+    }
+
+    :last-child {
+      border-bottom-left-radius: $border-radius;
+      border-bottom-right-radius: $border-radius;
+    }
 
     .menuItem {
       box-sizing: border-box;