3 files changed, 25 insertions, 44 deletions
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);