Work on Portal Style (#4003)

* Reduce Portal size and close on click outside

* PR Grumbles

js/src/ui/Portal/portal.css

@@ -15,6 +15,32 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 
+$left: 1.5em;
+$right: $left;
+$bottom: $left;
+$top: 20vh;
+
+.backOverlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background-color: rgba(255, 255, 255, 0.25);
+  z-index: -10;
+  opacity: 0;
+
+  transform-origin: 100% 0;
+  transition-property: opacity, z-index;
+  transition-duration: 0.25s;
+  transition-timing-function: ease-out;
+
+  &.expanded {
+    opacity: 1;
+    z-index: 2500;
+  }
+}
+
 .parityBackground {
   position: absolute;
   top: 0;
@@ -28,10 +54,10 @@
 .overlay {
   display: flex;
   position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
+  top: $top;
+  left: $left;
+  width: calc(100vw - $left - $right);
+  height: calc(100vh - $top - $bottom);
 
   transform-origin: 100% 0;
   transition-property: opacity, z-index;
@@ -48,7 +74,7 @@
 
   &.expanded {
     opacity: 1;
-    z-index: 9999;
+    z-index: 3500;
   }
 }
 

js/src/ui/Portal/portal.js

@@ -59,21 +59,26 @@ export default class Portal extends Component {
     const { children, className } = this.props;
 
     const classes = [ styles.overlay, className ];
+    const backClasses = [ styles.backOverlay ];
 
     if (expanded) {
       classes.push(styles.expanded);
+      backClasses.push(styles.expanded);
     }
 
     return (
       <ReactPortal isOpened onClose={ this.handleClose }>
-        <div
-          className={ classes.join(' ') }
-          onKeyDown={ this.handleKeyDown }
-        >
-          <ParityBackground className={ styles.parityBackground } />
+        <div className={ backClasses.join(' ') } onClick={ this.handleClose }>
+          <div
+            className={ classes.join(' ') }
+            onClick={ this.stopEvent }
+            onKeyDown={ this.handleKeyDown }
+          >
+            <ParityBackground className={ styles.parityBackground } />
 
-          { this.renderCloseIcon() }
-          { children }
+            { this.renderCloseIcon() }
+            { children }
+          </div>
         </div>
       </ReactPortal>
     );
@@ -93,6 +98,11 @@ export default class Portal extends Component {
     );
   }
 
+  stopEvent = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+  }
+
   handleClose = () => {
     this.props.onClose();
   }