summaryrefslogtreecommitdiffhomepage
path: root/gui
diff options
context:
space:
mode:
Diffstat (limited to 'gui')
-rw-r--r--gui/package-lock.json80
-rw-r--r--gui/package.json9
-rw-r--r--gui/src/renderer/components/Modal.tsx136
3 files changed, 135 insertions, 90 deletions
diff --git a/gui/package-lock.json b/gui/package-lock.json
index 3a31490963..206d69dfaa 100644
--- a/gui/package-lock.json
+++ b/gui/package-lock.json
@@ -375,18 +375,18 @@
"dev": true
},
"@types/react": {
- "version": "16.8.10",
- "resolved": "https://registry.npmjs.org/@types/react/-/react-16.8.10.tgz",
- "integrity": "sha512-7bUQeZKP4XZH/aB4i7k1i5yuwymDu/hnLMhD9NjVZvQQH7ZUgRN3d6iu8YXzx4sN/tNr0bj8jgguk8hhObzGvA==",
+ "version": "16.9.33",
+ "resolved": "https://registry.npmjs.org/@types/react/-/react-16.9.33.tgz",
+ "integrity": "sha512-ovgoy7p9999HDzwv8Sewhl8GJjn/r0GRsFrM9UMwp1uodh0kQ0pwIHLQ6LNfqGSyjNzJ8II/HIg0BL7Yn/B9yA==",
"requires": {
"@types/prop-types": "*",
"csstype": "^2.2.0"
}
},
"@types/react-dom": {
- "version": "16.8.3",
- "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.8.3.tgz",
- "integrity": "sha512-HF5hD5YR3z9Mn6kXcW1VKe4AQ04ZlZj1EdLBae61hzQ3eEWWxMgNLUbIxeZp40BnSxqY1eAYLsH9QopQcxzScA==",
+ "version": "16.9.6",
+ "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-16.9.6.tgz",
+ "integrity": "sha512-S6ihtlPMDotrlCJE9ST1fRmYrQNNwfgL61UB4I1W7M6kPulUKx9fXAleW5zpdIjUQ4fTaaog8uERezjsGUj9HQ==",
"requires": {
"@types/react": "*"
}
@@ -774,6 +774,16 @@
}
}
},
+ "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",
@@ -1120,6 +1130,11 @@
"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",
@@ -2226,6 +2241,15 @@
"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",
@@ -5676,6 +5700,11 @@
"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",
@@ -5756,6 +5785,14 @@
"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",
@@ -6311,8 +6348,7 @@
"isobject": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
- "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8=",
- "dev": true
+ "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
},
"js-tokens": {
"version": "4.0.0",
@@ -8378,25 +8414,24 @@
}
},
"react": {
- "version": "16.7.0",
- "resolved": "https://registry.npmjs.org/react/-/react-16.7.0.tgz",
- "integrity": "sha512-StCz3QY8lxTb5cl2HJxjwLFOXPIFQp+p+hxQfc8WE0QiLfCtIlKj8/+5tjjKm8uSTlAW+fCPaavGFS06V9Ar3A==",
+ "version": "16.13.1",
+ "resolved": "https://registry.npmjs.org/react/-/react-16.13.1.tgz",
+ "integrity": "sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==",
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
- "prop-types": "^15.6.2",
- "scheduler": "^0.12.0"
+ "prop-types": "^15.6.2"
}
},
"react-dom": {
- "version": "16.7.0",
- "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.7.0.tgz",
- "integrity": "sha512-D0Ufv1ExCAmF38P2Uh1lwpminZFRXEINJe53zRAbm4KPwSyd6DY/uDoS0Blj9jvPpn1+wivKpZYc8aAAN/nAkg==",
+ "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==",
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1",
"prop-types": "^15.6.2",
- "scheduler": "^0.12.0"
+ "scheduler": "^0.19.1"
}
},
"react-is": {
@@ -9040,9 +9075,9 @@
"integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
},
"scheduler": {
- "version": "0.12.0",
- "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.12.0.tgz",
- "integrity": "sha512-t7MBR28Akcp4Jm+QoR63XgAi9YgCUmgvDHqf5otgAj4QvdoBE4ImCX0ffehefePPG+aitiYHp0g/mW6s4Tp+dw==",
+ "version": "0.19.1",
+ "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.19.1.tgz",
+ "integrity": "sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==",
"requires": {
"loose-envify": "^1.1.0",
"object-assign": "^4.1.1"
@@ -9840,6 +9875,11 @@
"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 53c95bb37f..5b3eb3e8f0 100644
--- a/gui/package.json
+++ b/gui/package.json
@@ -12,6 +12,7 @@
"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",
@@ -22,8 +23,8 @@
"moment": "^2.24.0",
"node-gettext": "^3.0.0",
"rbush": "^2.0.2",
- "react": "^16.5.0",
- "react-dom": "^16.5.0",
+ "react": "^16.13.1",
+ "react-dom": "^16.13.1",
"react-redux": "^5.1.0",
"react-router": "^4.3.1",
"react-simple-maps": "^0.12.1",
@@ -49,8 +50,8 @@
"@types/node": "^10.12.3",
"@types/node-gettext": "^3.0.0",
"@types/rbush": "^2.0.2",
- "@types/react": "^16.8.8",
- "@types/react-dom": "^16.8.2",
+ "@types/react": "^16.9.33",
+ "@types/react-dom": "^16.9.6",
"@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 c00a1be466..4cd3ab87a2 100644
--- a/gui/src/renderer/components/Modal.tsx
+++ b/gui/src/renderer/components/Modal.tsx
@@ -1,60 +1,77 @@
+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 = {
- modalAlertBackground: Styles.createViewStyle({
+const styles = StyleSheet.create({
+ modalAlertBackground: {
+ display: 'flex',
flex: 1,
- justifyContent: 'center',
- 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({
+ 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: {
fontFamily: 'Open Sans',
- fontSize: 16,
- fontWeight: '500',
- lineHeight: 20,
+ fontSize: '16px',
+ fontWeight: 500,
+ lineHeight: '20px',
color: colors.white80,
- }),
- modalAlertButtonContainer: Styles.createViewStyle({
- marginTop: 16,
- }),
-};
+ },
+ 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,
+ },
+});
interface IModalContentProps {
children?: React.ReactNode;
}
export const ModalContent: React.FC = (props: IModalContentProps) => {
- return (
- <div
- style={{
- position: 'absolute',
- display: 'flex',
- flexDirection: 'column',
- flex: 1,
- top: 0,
- left: 0,
- right: 0,
- bottom: 0,
- }}>
- {props.children}
- </div>
- );
+ return <div className={css(styles.modalContent)}>{props.children}</div>;
};
interface IModalBackgroundProps {
@@ -62,22 +79,7 @@ interface IModalBackgroundProps {
}
const ModalBackground: React.FC = (props: IModalBackgroundProps) => {
- 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>
- );
+ return <div className={css(styles.modalBackground)}>{props.children}</div>;
};
interface IModalContainerProps {
@@ -86,7 +88,7 @@ interface IModalContainerProps {
export const ModalContainer: React.FC = (props: IModalContainerProps) => {
return (
- <div id={MODAL_CONTAINER_ID} style={{ position: 'relative', flex: 1 }}>
+ <div id={MODAL_CONTAINER_ID} className={css(styles.modalContainer)}>
<ModalContent>{props.children}</ModalContent>
</div>
);
@@ -104,7 +106,7 @@ interface IModalAlertProps {
children?: React.ReactNode;
}
-export class ModalAlert extends Component<IModalAlertProps> {
+export class ModalAlert extends React.Component<IModalAlertProps> {
private element = document.createElement('div');
private modalContainer?: Element;
@@ -131,22 +133,24 @@ export class ModalAlert extends Component<IModalAlertProps> {
private renderModal() {
return (
<ModalBackground>
- <View style={styles.modalAlertBackground}>
- <View style={styles.modalAlert}>
+ <div className={css(styles.modalAlertBackground)}>
+ <div className={css(styles.modalAlert)}>
{this.props.type && (
- <View style={styles.modalAlertIcon}>{this.renderTypeIcon(this.props.type)}</View>
+ <div className={css(styles.modalAlertIcon)}>
+ {this.renderTypeIcon(this.props.type)}
+ </div>
)}
{this.props.message && (
- <Text style={styles.modalAlertMessage}>{this.props.message}</Text>
+ <span className={css(styles.modalAlertMessage)}>{this.props.message}</span>
)}
{this.props.children}
{this.props.buttons.map((button, index) => (
- <View key={index} style={styles.modalAlertButtonContainer}>
+ <div key={index} className={css(styles.modalAlertButtonContainer)}>
{button}
- </View>
+ </div>
))}
- </View>
- </View>
+ </div>
+ </div>
</ModalBackground>
);
}
Copyright © 2025 - 2026 Wayne Cole. WTFPL. Attribution appreciated. No warranty. Not liable for bodily damages.