consolidated z-indexes in variables file (#377)

src/components/common/Modal.jsx

@@ -12,13 +12,7 @@ const Modal = ({
   });
 
   return (
-    <div
-      className={modalClassName}
-      // This z-index is greater than the Menu component's z-index but less than
-      // the Header and Footer. The modal will cover the Menu when open, but not
-      // the Header or Footer.
-      style={{ zIndex: '10000' }}
-    >
+    <div className={modalClassName}>
       <div className="modal-background" />
       <div className="modal-content" style={{ overflow: 'visible', ...style }}>
         {content}

src/components/main/footer/Footer.jsx

@@ -22,8 +22,6 @@ const Footer = ({
       bottom: '0',
       height: '45px',
       background: '#002449',
-      // Really high z-index here to ensure Footer is on top of modal
-      zIndex: '20000',
     }}
   >
     <div className="level" style={{ width: '100vw' }}>

src/styles/_base.scss

@@ -1,11 +1,4 @@
 
-// layout vars
-$header-height: 62px;
-$footer-height: 52px;
-$menu-width: 509px;
-$menu-transition: all 0.5s ease 0s;
-$chart-max-width: 840px;
-
 h1 {
   font-family: $brand-heading-family;
   color: $brand-heading-color;
@@ -20,6 +13,10 @@ h2 {
   font-weight: bold;
 }
 
+.modal {
+  z-index: $z-modal;
+}
+
 // modifies bulma loader
 .loader {
   animation: spinAround 750ms infinite linear;

src/styles/_brand.scss → src/styles/_variables.scss

@@ -1,5 +1,5 @@
 
-// see brand stylesheet here:
+/////////////////// BRAND /////////////////////
 // https://www.figma.com/file/9RJJyaGAdT5hcRuv9PUMOY/311-Wireframe-v1.0?node-id=16%3A4
 
 // colors
@@ -19,3 +19,28 @@ $brand-text-family:     Roboto, sans-serif;
 $brand-heading-size:    20px;
 $brand-subheading-size: 18px;
 $brand-text-size:       16px;
+
+//////////////////// LAYOUT ////////////////////
+
+$header-height: 62px;
+$footer-height: 52px;
+$menu-width: 509px;
+$chart-max-width: 840px;
+
+//////////////////// Z-INDEX ///////////////////
+
+$z-snapshot-renderer: -100000;
+
+// leaflet-pane: 400
+// leaflet-control-layers: 800
+// leaflet-top, bottom, left, right: 1000
+
+$z-map-export-button: 1000;
+$z-visualizations: 1050;
+$z-menu: 1100;
+$z-tooltip: 1150;
+$z-loader: 1200;
+$z-modal: 10000;
+
+// header and footer
+$z-navbar: 20000;

src/styles/main/_body.scss

@@ -7,7 +7,7 @@
   .comparison,
   .loader-container,
   .menu-container {
-    transition: $menu-transition;
+    transition: all 0.5s ease 0s;
   }
 
   &.menu-is-open {

src/styles/main/_export.scss

@@ -1,6 +1,5 @@
 .snapshot-renderer {
-  // switch to positive for debugging
-  z-index: -100000;
+  z-index: $z-snapshot-renderer;
   background-color: white;
   outline: 3px red solid;
 
@@ -44,7 +43,6 @@
 }
 
 .chart-export-select {
-  z-index: 1;
   .loader-button {
     padding: 0 8px;
     border: 1px solid $brand-stroke-color;
@@ -66,7 +64,6 @@
   white-space: nowrap;
   text-align: left;
   background-color: $brand-bg-color;
-  z-index: 10000;
   font-size: 14px;
   line-height: 18px;
   cursor: default;

src/styles/main/_header.scss

@@ -1,9 +1,9 @@
 .navbar {
   font-family: $brand-heading-family;
   font-weight: bold;
-  height: '60px';
-  box-shadow: '0 2px 4px rgba(0, 0, 0, 0.5)';
-  z-index: '20000';
+  height: $header-height;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
+  z-index: $z-navbar;
   background-color: $brand-heading-color;
 
   .navbar-brand {

src/styles/main/_loader.scss

@@ -4,7 +4,7 @@
   bottom: 0;
   left: 0;
   right: 0;
-  z-index: 1200;
+  z-index: $z-loader;
   pointer-events: none;
 
   .inner {

src/styles/main/_map.scss

@@ -10,7 +10,7 @@
     position: absolute;
     top: 18px;
     right: 50px;
-    z-index: 1000;
+    z-index: $z-map-export-button;
     height: auto;
   }
 }

src/styles/main/_menu.scss

@@ -6,7 +6,7 @@
   top: $header-height;
   bottom: $footer-height;
   width: $menu-width;
-  z-index: 1100;
+  z-index: $z-menu;
   background: $brand-bg-color;
   box-shadow: 0px 4px 5px rgba(108, 108, 108, 0.3);
 

src/styles/main/_tooltip.scss

@@ -5,7 +5,7 @@
   $margin: 6px;
 
   position: absolute;
-  z-index: 1101;
+  z-index: $z-tooltip;
   pointer-events: none;
   background-color: $bg-color;
   border-radius: 4px;

src/styles/main/_visualizations.scss

@@ -1,6 +1,6 @@
 .visualizations {
 
-  z-index: 1000;
+  z-index: $z-visualizations;
   background-color: $brand-bg-color;
   overflow: scroll;
   position: absolute;

src/styles/styles.scss

@@ -1,6 +1,6 @@
 @charset "utf-8";
 
-@import './brand';
+@import './variables';
 @import './bulma';
 @import './base';