Merge branch 'convert-platform-window-from-reactxp' into master

6 files changed, 27 insertions, 80 deletions

diff --git a/gui/assets/css/global.css b/gui/assets/css/global.css
index 213e965086..06f8838934 100644
--- a/gui/assets/css/global.css
+++ b/gui/assets/css/global.css
@@ -25,7 +25,7 @@ body {
   display: flex;
 }
 
-.app-container {
+#app {
   height: 100%;
   width: 100%;
   display: flex;
diff --git a/gui/package-lock.json b/gui/package-lock.json
index 621514da3c..b08585b38d 100644
--- a/gui/package-lock.json
+++ b/gui/package-lock.json
@@ -10483,29 +10483,6 @@
         }
       }
     },
-    "reactxp": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/reactxp/-/reactxp-2.0.0.tgz",
-      "integrity": "sha512-HAWwZFL7gXQXnQi87FOBybugSRo+/Xq30rj8tgX77i0uAHWRQHMFw4N10GPLWeacjDuC3/t0RjY6bSftGNJaFg==",
-      "requires": {
-        "lodash": "^4.17.15",
-        "prop-types": "^15.7.2",
-        "rebound": "^0.1.0",
-        "subscribableevent": "^1.0.1"
-      },
-      "dependencies": {
-        "prop-types": {
-          "version": "15.7.2",
-          "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
-          "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-          "requires": {
-            "loose-envify": "^1.4.0",
-            "object-assign": "^4.1.1",
-            "react-is": "^16.8.1"
-          }
-        }
-      }
-    },
     "read-config-file": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/read-config-file/-/read-config-file-6.0.0.tgz",
@@ -10572,11 +10549,6 @@
         "readable-stream": "^2.0.2"
       }
     },
-    "rebound": {
-      "version": "0.1.0",
-      "resolved": "https://registry.npmjs.org/rebound/-/rebound-0.1.0.tgz",
-      "integrity": "sha1-BjjGGpNma7UVpYoD4c+zQCHoi3I="
-    },
     "rechoir": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.6.2.tgz",
@@ -12171,11 +12143,6 @@
         }
       }
     },
-    "subscribableevent": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/subscribableevent/-/subscribableevent-1.0.1.tgz",
-      "integrity": "sha512-rFXit43+QoyWRUV/aTiYMUUJl71xmDcxED2cza3PEED75pgHTofMyPcPQrnHzyPqZh+kazEd36eydUKbOZBCpQ=="
-    },
     "success-symbol": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/success-symbol/-/success-symbol-0.1.0.tgz",
diff --git a/gui/package.json b/gui/package.json
index 30875340cf..c8792c0ca1 100644
--- a/gui/package.json
+++ b/gui/package.json
@@ -12,8 +12,8 @@
   "repository": "https://github.com/mullvad/mullvadvpn-app",
   "license": "GPL-3.0",
   "dependencies": {
-    "argv-split": "^2.0.1",
     "@grpc/grpc-js": "^1.1.2",
+    "argv-split": "^2.0.1",
     "connected-react-router": "^6.8.0",
     "d3-geo-projection": "^2.7.0",
     "electron-log": "^4.1.1",
@@ -30,7 +30,6 @@
     "react-redux": "^7.2.0",
     "react-router": "^5.1.2",
     "react-simple-maps": "^0.12.1",
-    "reactxp": "^2.0.0",
     "redux": "^4.0.5",
     "sprintf-js": "^1.1.2",
     "styled-components": "^5.1.0",
diff --git a/gui/src/renderer/components/PlatformWindow.tsx b/gui/src/renderer/components/PlatformWindow.tsx
index cc10374fec..c461b647f6 100644
--- a/gui/src/renderer/components/PlatformWindow.tsx
+++ b/gui/src/renderer/components/PlatformWindow.tsx
@@ -1,42 +1,26 @@
-import * as React from 'react';
-import { Component, Styles, Types, View } from 'reactxp';
+import styled from 'styled-components';
 
-interface IProps {
-  arrowPosition?: number;
-}
+const ARROW_WIDTH = 30;
 
-const containerStyle = Styles.createViewStyle({ flex: 1 });
+export default styled.div({}, ({ arrowPosition }: { arrowPosition?: number }) => {
+  let mask: string | undefined;
 
-export default class PlatformWindow extends Component<IProps> {
-  public render() {
-    return <View style={[containerStyle, this.platformStyle()]}>{this.props.children}</View>;
-  }
-
-  private platformStyle(): Types.ViewStyleRuleSet {
-    if (process.platform === 'darwin') {
-      const arrowPosition = this.props.arrowPosition;
-      let arrowPositionCss = '50%';
-
-      if (typeof arrowPosition === 'number') {
-        const arrowWidth = 30;
-        const adjustedArrowPosition = arrowPosition - arrowWidth * 0.5;
-        arrowPositionCss = `${adjustedArrowPosition}px`;
-      }
+  if (process.platform === 'darwin') {
+    const arrowPositionCss =
+      arrowPosition !== undefined ? `${arrowPosition - ARROW_WIDTH * 0.5}px` : '50%';
 
-      const webkitMask = [
-        `url(../../assets/images/app-triangle.svg) ${arrowPositionCss} 0% no-repeat`,
-        `url(../../assets/images/app-header-backdrop.svg) no-repeat`,
-      ];
-
-      return Styles.createViewStyle(
-        {
-          // @ts-ignore
-          WebkitMask: webkitMask.join(','),
-        },
-        false,
-      );
-    } else {
-      return undefined;
-    }
+    mask = [
+      `url(../../assets/images/app-triangle.svg) ${arrowPositionCss} 0% no-repeat`,
+      `url(../../assets/images/app-header-backdrop.svg) no-repeat`,
+    ].join(',');
   }
-}
+
+  return {
+    position: 'relative',
+    overflow: 'hidden',
+    display: 'flex',
+    flexDirection: 'column',
+    flex: 1,
+    mask,
+  };
+});
diff --git a/gui/src/renderer/index.html b/gui/src/renderer/index.html
index d757d23bdd..3f2da3d633 100644
--- a/gui/src/renderer/index.html
+++ b/gui/src/renderer/index.html
@@ -6,7 +6,7 @@
     <meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline'">
   </head>
   <body>
-    <div class="app-container"></div>
+    <div id="app"></div>
     <script>var exports = {};</script>
     <script src="./index.js"></script>
   </body>
diff --git a/gui/src/renderer/index.ts b/gui/src/renderer/index.ts
index aada6fd97b..906be20bfa 100644
--- a/gui/src/renderer/index.ts
+++ b/gui/src/renderer/index.ts
@@ -1,9 +1,6 @@
-import * as RX from 'reactxp';
+import ReactDOM from 'react-dom';
 import App from './app';
 
 const app = new App();
-const view = app.renderView();
-
-RX.App.initialize(true, true);
-RX.UserInterface.setMainView(view);
-RX.UserInterface.useCustomScrollbars(true);
+const container = document.getElementById('app');
+ReactDOM.render(app.renderView(), container);