Merge branch 'master' of https://github.com/browngraphicslab/Dash-Web into new_audio

1 files changed, 5 insertions, 2 deletions

diff --git a/src/client/views/MainViewModal.tsx b/src/client/views/MainViewModal.tsx
index a7bd5882d..249715511 100644
--- a/src/client/views/MainViewModal.tsx
+++ b/src/client/views/MainViewModal.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import "./MainViewModal.scss";
+import { observer } from 'mobx-react';
 
 export interface MainViewOverlayProps {
     isDisplayed: boolean;
@@ -9,8 +10,10 @@ export interface MainViewOverlayProps {
     overlayStyle?: React.CSSProperties;
     dialogueBoxDisplayedOpacity?: number;
     overlayDisplayedOpacity?: number;
+    closeOnExternalClick?: () => void;
 }
 
+@observer
 export default class MainViewModal extends React.Component<MainViewOverlayProps> {
 
     render() {
@@ -18,11 +21,10 @@ export default class MainViewModal extends React.Component<MainViewOverlayProps>
         const dialogueOpacity = p.dialogueBoxDisplayedOpacity || 1;
         const overlayOpacity = p.overlayDisplayedOpacity || 0.4;
         return !p.isDisplayed ? (null) : (
-            <div style={{ pointerEvents: p.isDisplayed ? p.interactive ? "all" : "none" : "none" }}>
+            <div style={{ pointerEvents: p.isDisplayed && p.interactive ? "all" : "none" }}>
                 <div
                     className={"dialogue-box"}
                     style={{
-                        backgroundColor: "gainsboro",
                         borderColor: "black",
                         ...(p.dialogueBoxStyle || {}),
                         opacity: p.isDisplayed ? dialogueOpacity : 0
@@ -30,6 +32,7 @@ export default class MainViewModal extends React.Component<MainViewOverlayProps>
                 >{p.contents}</div>
                 <div
                     className={"overlay"}
+                    onClick={this.props?.closeOnExternalClick}
                     style={{
                         backgroundColor: "gainsboro",
                         ...(p.overlayStyle || {}),