Revert "use z-index utils for nav and onclickoutside (#4079)"

This reverts commit 0c869f1a.

frontend/src/metabase/components/OnClickOutsideWrapper.jsx

 import React, { Component, PropTypes } from "react";
-import { findDOMNode } from "react-dom";
+import ReactDOM from "react-dom";
 
 // keep track of the order popovers were opened so we only close the last one when clicked outside
 const popoverStack = [];
@@ -21,10 +21,9 @@ export default class OnClickOutsideWrapper extends Component {
         this._timeout = setTimeout(() => {
             popoverStack.push(this);
 
-            // HACK: set the z-index of the parent element to ensure it's always on top
-            // NOTE: this actually doesn"t seem to be working correctly for
-            // popovers since PopoverBody creates a stacking context
-            findDOMNode(this).parentNode.classList.add('zF');
+            // HACK: set the z-index of the parent element to ensure it"s always on top
+            // NOTE: this actually doesn"t seem to be working correctly for popovers since PopoverBody creates a stacking context
+            ReactDOM.findDOMNode(this).parentNode.style.zIndex = popoverStack.length + 2; // HACK: add 2 to ensure it"s in front of main and nav elements
 
             if (this.props.dismissOnEscape) {
                 document.addEventListener("keydown", this._handleKeyPress, false);
@@ -39,7 +38,6 @@ export default class OnClickOutsideWrapper extends Component {
         document.removeEventListener("keydown", this._handleKeyPress, false);
         window.removeEventListener("click", this._handleClick, true);
         clearTimeout(this._timeout);
-        findDOMNode(this).parentNode.classList.remove('zF');
 
         // remove from the stack after a delay, if it is removed through some other
         // means this will happen too early causing parent modal to close
@@ -52,7 +50,7 @@ export default class OnClickOutsideWrapper extends Component {
     }
 
     _handleClick = (e) => {
-        if (!findDOMNode(this).contains(e.target)) {
+        if (!ReactDOM.findDOMNode(this).contains(e.target)) {
             setTimeout(this._handleDismissal, 0);
         }
     }

frontend/src/metabase/css/components/modal.css

+.ModalContainer {
+    z-index: 3;
+}
+
 .Modal {
   margin: auto;
   width: 640px;

frontend/src/metabase/css/home.css

+.Nav {
+    z-index: 3;
+}
+
 .CheckBg {
     background-image: url('/app/components/icons/assets/header_rect.svg');
     background-repeat: repeat;
@@ -51,7 +55,9 @@
 .NavDropdown {
     position: relative;
 }
-
+.NavDropdown.open {
+    z-index: 100;
+}
 .NavDropdown .NavDropdown-content {
     display: none;
 }

frontend/src/metabase/nav/containers/Navbar.jsx

@@ -106,7 +106,7 @@ export default class Navbar extends Component {
 
     renderMainNav() {
         return (
-            <nav className={cx("CheckBg CheckBg-offset z4 relative bg-brand sm-py2 sm-py1 xl-py3", this.props.className)}>
+            <nav className={cx("Nav CheckBg CheckBg-offset relative bg-brand sm-py2 sm-py1 xl-py3", this.props.className)}>
                 <ul className="pl4 pr1 flex align-center">
                     <li>
                         <Link to="/" data-metabase-event={"Navbar;Logo"} className="NavItem cursor-pointer text-white flex align-center my1 transition-background">
@@ -115,11 +115,7 @@ export default class Navbar extends Component {
                     </li>
                     <li className="pl3">
                         <DashboardsDropdown {...this.props}>
-                            <a
-                                className={cx("NavDropdown-button NavItem text-white text-bold cursor-pointer px2 flex align-center transition-background", {"NavItem--selected": this.isActive("/dash/")})}
-                                data-metabase-event={"Navbar;Dashboard Dropdown;Toggle"}
-                                style={this.styles.navButton}
-                            >
+                            <a data-metabase-event={"Navbar;Dashboard Dropdown;Toggle"} style={this.styles.navButton} className={cx("NavDropdown-button NavItem text-white text-bold cursor-pointer px2 flex align-center transition-background", {"NavItem--selected": this.isActive("/dash/")})}>
                                 <span className="NavDropdown-button-layer">
                                     Dashboards
                                     <Icon className="ml1" name={'chevrondown'} size={8}></Icon>