Convert Modal.tsx to pure React

1 files changed, 70 insertions, 66 deletions

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>
     );
   }