From 4c915c05cc8b857388b07b894fce8a5517f63fe8 Mon Sep 17 00:00:00 2001
From: Willy Bruns <willy@entropi.info>
Date: Tue, 22 Nov 2016 20:45:26 -0800
Subject: [PATCH] modal overlays: all but top overlay should have transparent
 background

- tried several CSS-only solutions for ensuring only the top-most modal had a gray background,
  but I think using some JS is actually simpler, so that is what I did here

- keeping modalOverlay background when opening iframe w/ Coinbase widget
  (decision made w/ @bsclifton after trying alternatives)

fixes #4808
---
 js/components/modalOverlay.js | 34 +++++++++++++++++++++++++++++++++-
 less/modalOverlay.less        | 20 +++++++++++++++-----
 2 files changed, 48 insertions(+), 6 deletions(-)

diff --git a/js/components/modalOverlay.js b/js/components/modalOverlay.js
index 0a751d9e2fe..81ad0905727 100644
--- a/js/components/modalOverlay.js
+++ b/js/components/modalOverlay.js
@@ -9,7 +9,39 @@ const ImmutableComponent = require('./immutableComponent')
  * Represents a modal overlay
  */
 
+var globalInstanceCounter = 0
+var mountedInstances = []
+
 class ModalOverlay extends ImmutableComponent {
+
+  componentWillMount () {
+    this.instanceId = globalInstanceCounter++
+
+    this.setState({last: true})
+
+    if (mountedInstances.length) {
+      let lastModal = mountedInstances[mountedInstances.length - 1]
+      lastModal.setState({last: false})
+      lastModal.forceUpdate()
+    }
+
+    mountedInstances.push(this)
+  }
+
+  componentWillUnmount () {
+    let instId = this.instanceId
+
+    mountedInstances = mountedInstances.filter(function (inst) {
+      return inst.instanceId !== instId
+    })
+
+    if (mountedInstances.length) {
+      let lastModal = mountedInstances[mountedInstances.length - 1]
+      lastModal.setState({last: true})
+      lastModal.forceUpdate()
+    }
+  }
+
   get dialogContent () {
     var close = null
     var button = null
@@ -35,7 +67,7 @@ class ModalOverlay extends ImmutableComponent {
   }
 
   render () {
-    return <div className='modal fade' role='alert'>
+    return <div className={'modal fade' + (this.state.last ? ' last' : '') + (this.props.transparentBackground ? ' transparentBackground' : '')} role='alert'>
       {this.dialogContent}
     </div>
   }
diff --git a/less/modalOverlay.less b/less/modalOverlay.less
index 200e103d330..ff48cea18de 100644
--- a/less/modalOverlay.less
+++ b/less/modalOverlay.less
@@ -4,19 +4,31 @@
 
 @import "variables.less";
 
+.modal.last + .modal.last {
+  background: transparent;
+}
+
 .modal {
   opacity: 1;
   overflow: auto;
   position: fixed;
-  background: @black25;
+  background: transparent;
   width: 100vw;
   height: 100vh;
   left: 0;
   top: 0;
   z-index: 8999;
 
-  &.fade {
-    transition: @transitionFast;
+  +.modal {
+    background: transparent;
+  }
+
+  &.last {
+    background: @black25;
+
+    &.transparentBackground {
+      background: transparent;
+    }
   }
 
   &.hidden {
@@ -25,8 +37,6 @@
   }
 
   .modal {
-    background: transparent;
-
     .dialog {
       left: 0;
       top: 0;