Revert "Convert Modal.tsx to pure React"

This reverts commit 84f41658296c8bfa14ca432f0096cd9769afaecd.

3 files changed, 90 insertions, 135 deletions

diff --git a/gui/package-lock.json b/gui/package-lock.json
index 936569ea76..1003724c9d 100644
--- a/gui/package-lock.json
+++ b/gui/package-lock.json
@@ -375,18 +375,18 @@
       "dev": true
     },
     "@types/react": {
-      "version": "16.9.33",
-      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.33.tgz",
-      "integrity": "sha512-ovgoy7p9999HDzwv8Sewhl8GJjn/r0GRsFrM9UMwp1uodh0kQ0pwIHLQ6LNfqGSyjNzJ8II/HIg0BL7Yn/B9yA==",
+      "version": "16.8.10",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.10.tgz",
+      "integrity": "sha512-7bUQeZKP4XZH/aB4i7k1i5yuwymDu/hnLMhD9NjVZvQQH7ZUgRN3d6iu8YXzx4sN/tNr0bj8jgguk8hhObzGvA==",
       "requires": {
         "@types/prop-types": "*",
         "csstype": "^2.2.0"
       }
     },
     "@types/react-dom": {
-      "version": "16.9.6",
-      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.6.tgz",
-      "integrity": "sha512-S6ihtlPMDotrlCJE9ST1fRmYrQNNwfgL61UB4I1W7M6kPulUKx9fXAleW5zpdIjUQ4fTaaog8uERezjsGUj9HQ==",
+      "version": "16.8.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.8.3.tgz",
+      "integrity": "sha512-HF5hD5YR3z9Mn6kXcW1VKe4AQ04ZlZj1EdLBae61hzQ3eEWWxMgNLUbIxeZp40BnSxqY1eAYLsH9QopQcxzScA==",
       "requires": {
         "@types/react": "*"
       }
@@ -774,16 +774,6 @@
         }
       }
     },
-    "aphrodite": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/aphrodite/-/aphrodite-2.4.0.tgz",
-      "integrity": "sha512-1rVRlLco+j1YAT5aKEE8Wuw5zWV+tI41/quEheJAG0vNaGHE64iJ/a2SiVMz8Uc80VdP2/Hjlfd2bPJOWsqJuQ==",
-      "requires": {
-        "asap": "^2.0.3",
-        "inline-style-prefixer": "^5.1.0",
-        "string-hash": "^1.1.3"
-      }
-    },
     "app-builder-bin": {
       "version": "3.4.3",
       "resolved": "https://registry.npmjs.org/app-builder-bin/-/app-builder-bin-3.4.3.tgz",
@@ -1130,11 +1120,6 @@
       "integrity": "sha512-wGUIVQXuehL5TCqQun8OW81jGzAWycqzFF8lFp+GOM5BXLYj3bKNsYC4daB7n6XjCqxQA/qgTJ+8ANR3acjrog==",
       "dev": true
     },
-    "asap": {
-      "version": "2.0.6",
-      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
-    },
     "assertion-error": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/assertion-error/-/assertion-error-1.1.0.tgz",
@@ -2241,15 +2226,6 @@
       "integrity": "sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=",
       "dev": true
     },
-    "css-in-js-utils": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/css-in-js-utils/-/css-in-js-utils-2.0.1.tgz",
-      "integrity": "sha512-PJF0SpJT+WdbVVt0AOYp9C8GnuruRlL/UFW7932nLWmFLQTaWEzTBQEx7/hn4BuV+WON75iAViSUJLiU3PKbpA==",
-      "requires": {
-        "hyphenate-style-name": "^1.0.2",
-        "isobject": "^3.0.1"
-      }
-    },
     "css-select": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
@@ -5700,11 +5676,6 @@
         "requires-port": "1.x.x"
       }
     },
-    "hyphenate-style-name": {
-      "version": "1.0.3",
-      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.3.tgz",
-      "integrity": "sha512-EcuixamT82oplpoJ2XU4pDtKGWQ7b00CD9f1ug9IaQ3p1bkHMiKCZ9ut9QDI6qsa6cpUuB+A/I+zLtdNK4n2DQ=="
-    },
     "iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -5785,14 +5756,6 @@
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
       "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw=="
     },
-    "inline-style-prefixer": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/inline-style-prefixer/-/inline-style-prefixer-5.1.2.tgz",
-      "integrity": "sha512-PYUF+94gDfhy+LsQxM0g3d6Hge4l1pAqOSOiZuHWzMvQEGsbRQ/ck2WioLqrY2ZkHyPgVUXxn+hrkF7D6QUGbA==",
-      "requires": {
-        "css-in-js-utils": "^2.0.0"
-      }
-    },
     "inquirer": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/inquirer/-/inquirer-7.0.4.tgz",
@@ -6348,7 +6311,8 @@
     "isobject": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
-      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
+      "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
+      "dev": true
     },
     "js-tokens": {
       "version": "4.0.0",
@@ -8414,24 +8378,25 @@
       }
     },
     "react": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz",
-      "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==",
+      "version": "16.7.0",
+      "resolved": "https://registry.npmjs.org/react/-/react-16.7.0.tgz",
+      "integrity": "sha512-StCz3QY8lxTb5cl2HJxjwLFOXPIFQp+p+hxQfc8WE0QiLfCtIlKj8/+5tjjKm8uSTlAW+fCPaavGFS06V9Ar3A==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
-        "prop-types": "^15.6.2"
+        "prop-types": "^15.6.2",
+        "scheduler": "^0.12.0"
       }
     },
     "react-dom": {
-      "version": "16.13.1",
-      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.13.1.tgz",
-      "integrity": "sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag==",
+      "version": "16.7.0",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.7.0.tgz",
+      "integrity": "sha512-D0Ufv1ExCAmF38P2Uh1lwpminZFRXEINJe53zRAbm4KPwSyd6DY/uDoS0Blj9jvPpn1+wivKpZYc8aAAN/nAkg==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1",
         "prop-types": "^15.6.2",
-        "scheduler": "^0.19.1"
+        "scheduler": "^0.12.0"
       }
     },
     "react-is": {
@@ -9075,9 +9040,9 @@
       "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
     },
     "scheduler": {
-      "version": "0.19.1",
-      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
-      "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
+      "version": "0.12.0",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.12.0.tgz",
+      "integrity": "sha512-t7MBR28Akcp4Jm+QoR63XgAi9YgCUmgvDHqf5otgAj4QvdoBE4ImCX0ffehefePPG+aitiYHp0g/mW6s4Tp+dw==",
       "requires": {
         "loose-envify": "^1.1.0",
         "object-assign": "^4.1.1"
@@ -9875,11 +9840,6 @@
       "integrity": "sha512-mBqPGEOMNJKXRo7z0keX0wlAhbBAjilUdPW13nN0PecVryZxdHIeM7TqbsSUA7VYuS00HGC6mojP7DlQzfa9ZA==",
       "dev": true
     },
-    "string-hash": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/string-hash/-/string-hash-1.1.3.tgz",
-      "integrity": "sha1-6Kr8CsGFW0Zmkp7X3RJ1311sgRs="
-    },
     "string-width": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
diff --git a/gui/package.json b/gui/package.json
index a66eaae045..bc1880425b 100644
--- a/gui/package.json
+++ b/gui/package.json
@@ -12,7 +12,6 @@
   "repository": "https://github.com/mullvad/mullvadvpn-app",
   "license": "GPL-3.0",
   "dependencies": {
-    "aphrodite": "^2.4.0",
     "connected-react-router": "^5.0.1",
     "d3-geo-projection": "^2.7.0",
     "electron-log": "^4.1.1",
@@ -23,8 +22,8 @@
     "moment": "^2.24.0",
     "node-gettext": "^3.0.0",
     "rbush": "^2.0.2",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
+    "react": "^16.5.0",
+    "react-dom": "^16.5.0",
     "react-redux": "^5.1.0",
     "react-router": "^4.3.1",
     "react-simple-maps": "^0.12.1",
@@ -50,8 +49,8 @@
     "@types/node": "^10.12.3",
     "@types/node-gettext": "^3.0.0",
     "@types/rbush": "^2.0.2",
-    "@types/react": "^16.9.33",
-    "@types/react-dom": "^16.9.6",
+    "@types/react": "^16.8.8",
+    "@types/react-dom": "^16.8.2",
     "@types/react-redux": "^7.0.6",
     "@types/react-router": "^4.4.3",
     "@types/react-simple-maps": "^0.12.1",
diff --git a/gui/src/renderer/components/Modal.tsx b/gui/src/renderer/components/Modal.tsx
index 4cd3ab87a2..c00a1be466 100644
--- a/gui/src/renderer/components/Modal.tsx
+++ b/gui/src/renderer/components/Modal.tsx
@@ -1,77 +1,60 @@
-import { StyleSheet, css } from 'aphrodite';
 import * as React from 'react';
 import ReactDOM from 'react-dom';
+import { Component, Styles, Text, View } from 'reactxp';
 import { colors } from '../../config.json';
 import ImageView from './ImageView';
 
 const MODAL_CONTAINER_ID = 'modalContainer';
 
-const styles = StyleSheet.create({
-  modalAlertBackground: {
-    display: 'flex',
+const styles = {
+  modalAlertBackground: Styles.createViewStyle({
     flex: 1,
-    alignItems: 'center',
-    paddingLeft: '14px',
-    paddingRight: '14px',
-  },
-  modalAlert: {
-    display: 'flex',
-    flex: 1,
-    flexDirection: 'column',
-    backgroundColor: colors.darkBlue,
-    borderRadius: '11px',
-    padding: '16px',
-  },
-  modalAlertIcon: {
-    display: 'flex',
     justifyContent: 'center',
-    margin: '4px 0 12px',
-  },
-  modalAlertMessage: {
+    paddingLeft: 14,
+    paddingRight: 14,
+  }),
+  modalAlert: Styles.createViewStyle({
+    backgroundColor: colors.darkBlue,
+    borderRadius: 11,
+    padding: 16,
+  }),
+  modalAlertIcon: Styles.createViewStyle({
+    alignItems: 'center',
+    marginBottom: 12,
+    marginTop: 4,
+  }),
+  modalAlertMessage: Styles.createTextStyle({
     fontFamily: 'Open Sans',
-    fontSize: '16px',
-    fontWeight: 500,
-    lineHeight: '20px',
+    fontSize: 16,
+    fontWeight: '500',
+    lineHeight: 20,
     color: colors.white80,
-  },
-  modalAlertButtonContainer: {
-    display: 'flex',
-    flexDirection: 'column',
-    marginTop: '16px',
-  },
-  modalContent: {
-    position: 'absolute',
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
-  modalBackground: {
-    backgroundColor: 'rgba(0,0,0,0.5)',
-    position: 'absolute',
-    display: 'flex',
-    flexDirection: 'column',
-    flex: 1,
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
-  modalContainer: {
-    position: 'relative',
-    flex: 1,
-  },
-});
+  }),
+  modalAlertButtonContainer: Styles.createViewStyle({
+    marginTop: 16,
+  }),
+};
 
 interface IModalContentProps {
   children?: React.ReactNode;
 }
 
 export const ModalContent: React.FC = (props: IModalContentProps) => {
-  return <div className={css(styles.modalContent)}>{props.children}</div>;
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        display: 'flex',
+        flexDirection: 'column',
+        flex: 1,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+      }}>
+      {props.children}
+    </div>
+  );
 };
 
 interface IModalBackgroundProps {
@@ -79,7 +62,22 @@ interface IModalBackgroundProps {
 }
 
 const ModalBackground: React.FC = (props: IModalBackgroundProps) => {
-  return <div className={css(styles.modalBackground)}>{props.children}</div>;
+  return (
+    <div
+      style={{
+        backgroundColor: 'rgba(0,0,0,0.5)',
+        position: 'absolute',
+        display: 'flex',
+        flexDirection: 'column',
+        flex: 1,
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+      }}>
+      {props.children}
+    </div>
+  );
 };
 
 interface IModalContainerProps {
@@ -88,7 +86,7 @@ interface IModalContainerProps {
 
 export const ModalContainer: React.FC = (props: IModalContainerProps) => {
   return (
-    <div id={MODAL_CONTAINER_ID} className={css(styles.modalContainer)}>
+    <div id={MODAL_CONTAINER_ID} style={{ position: 'relative', flex: 1 }}>
       <ModalContent>{props.children}</ModalContent>
     </div>
   );
@@ -106,7 +104,7 @@ interface IModalAlertProps {
   children?: React.ReactNode;
 }
 
-export class ModalAlert extends React.Component<IModalAlertProps> {
+export class ModalAlert extends Component<IModalAlertProps> {
   private element = document.createElement('div');
   private modalContainer?: Element;
 
@@ -133,24 +131,22 @@ export class ModalAlert extends React.Component<IModalAlertProps> {
   private renderModal() {
     return (
       <ModalBackground>
-        <div className={css(styles.modalAlertBackground)}>
-          <div className={css(styles.modalAlert)}>
+        <View style={styles.modalAlertBackground}>
+          <View style={styles.modalAlert}>
             {this.props.type && (
-              <div className={css(styles.modalAlertIcon)}>
-                {this.renderTypeIcon(this.props.type)}
-              </div>
+              <View style={styles.modalAlertIcon}>{this.renderTypeIcon(this.props.type)}</View>
             )}
             {this.props.message && (
-              <span className={css(styles.modalAlertMessage)}>{this.props.message}</span>
+              <Text style={styles.modalAlertMessage}>{this.props.message}</Text>
             )}
             {this.props.children}
             {this.props.buttons.map((button, index) => (
-              <div key={index} className={css(styles.modalAlertButtonContainer)}>
+              <View key={index} style={styles.modalAlertButtonContainer}>
                 {button}
-              </div>
+              </View>
             ))}
-          </div>
-        </div>
+          </View>
+        </View>
       </ModalBackground>
     );
   }