Change beta alert message to fix electron focus problem

app/components/AlertDialog/AlertDialog.scss

@@ -0,0 +1,27 @@
+//@import "../../colors";
+@import "../commonDialog.scss";
+
+.alertDialog {
+  .dialogContent {
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+
+    .row {
+      display: flex;
+      flex-direction: row;
+      img {
+        width: auto;
+        margin-right: 10px;
+        margin-top: 3px;
+      }
+    }
+    h1 {
+      font-family: Roboto;
+      font-size: 12pt;
+      height: 1em;
+      font-weight: bold;
+      margin: 0;
+    }
+  }
+}

app/components/AlertDialog/AlertDialog.tsx

@@ -0,0 +1,68 @@
+import * as React from "react";
+import ReactModal from "react-modal";
+import "./AlertDialog.scss";
+import CloseOnEscape from "react-close-on-escape";
+import { locate } from "../../crossPlatformUtilities";
+import { Trans } from "@lingui/react";
+
+interface IState {
+  isOpen: boolean;
+  config: IConfig;
+}
+interface IConfig {
+  message: string;
+  buttonText?: string;
+}
+export default class AlertDialog extends React.Component<{}, IState> {
+  private static singleton: AlertDialog;
+
+  constructor() {
+    super({});
+    this.state = {
+      isOpen: false,
+      config: { message: "message is not set yet" }
+    };
+    AlertDialog.singleton = this;
+  }
+  private handleCloseModal(doDelete: boolean) {
+    this.setState({ isOpen: false });
+  }
+
+  public static async show(config: IConfig) {
+    AlertDialog.singleton.setState({
+      isOpen: true,
+      config
+    });
+  }
+  public render() {
+    return (
+      <CloseOnEscape
+        onEscape={() => {
+          this.handleCloseModal(false);
+        }}
+      >
+        <ReactModal
+          ariaHideApp={false}
+          className="alertDialog"
+          isOpen={this.state.isOpen}
+          shouldCloseOnOverlayClick={true}
+          onRequestClose={() => this.handleCloseModal(false)}
+        >
+          <div className="dialogContent">
+            <div className="row">
+              <img src={locate("assets/warning.png")} />
+              <h1>{this.state.config.message}</h1>
+            </div>
+          </div>
+          <div className={"bottomButtonRow"}>
+            <div className={"okCancelGroup"}>
+              <button id="confirm" onClick={() => this.handleCloseModal(true)}>
+                {this.state.config.buttonText || <Trans>"Cancel"</Trans>}
+              </button>
+            </div>
+          </div>
+        </ReactModal>
+      </CloseOnEscape>
+    );
+  }
+}

app/containers/HomePage.tsx

@@ -21,6 +21,8 @@ import { t } from "@lingui/macro";
 import { i18n } from "../localization";
 import { analyticsEvent } from "../analytics";
 import RegistrationDialog from "../components/registration/RegistrationDialog";
+import AlertDialog from "../components/AlertDialog/AlertDialog";
+
 const isDev = require("electron-is-dev");
 
 // tslint:disable-next-line:no-empty-interface
@@ -93,15 +95,10 @@ export default class HomePage extends React.Component<IProps, IState> {
 
   public componentDidMount() {
     if (!this.isRunningFromSource()) {
-      // NB: From code (at least on windows), it is safe to just show windows.alert. But on macos, when run from DMG,
-      // a blank window comes up, and the alert is hidden behind it. So the timeout here is just to get it in front.
-      window.setTimeout(
-        () =>
-          window.alert(
-            `Thanks for helping to test SayMore X! Warning: this is a "beta", so make sure you have a backup of your work.`
-          ),
-        2000
-      );
+      AlertDialog.show({
+        message: `Warning: this is a beta test version, so make sure you have a backup of your work.`,
+        buttonText: "I understand"
+      });
     }
 
     if (userSettings.HowUsing === "") {
@@ -239,6 +236,7 @@ export default class HomePage extends React.Component<IProps, IState> {
           ""
         )}
         <ExportDialog projectHolder={this.projectHolder} />
+        <AlertDialog />
       </div>
     );
   }

app/package.json

@@ -1,7 +1,7 @@
 {
   "name": "saymore-x",
   "productName": "SayMore X",
-  "version": "0.8.1",
+  "version": "0.8.2",
   "description": "File & metadata organization for language documentation projects.",
   "main": "./main-bundle.js",
   "author": {