Convert ErrorBoundary from ReactXP

1 files changed, 37 insertions, 39 deletions

diff --git a/gui/src/renderer/components/ErrorBoundary.tsx b/gui/src/renderer/components/ErrorBoundary.tsx
index 8be0e8b5b8..bd20abcbdc 100644
--- a/gui/src/renderer/components/ErrorBoundary.tsx
+++ b/gui/src/renderer/components/ErrorBoundary.tsx
@@ -1,6 +1,5 @@
 import log from 'electron-log';
-import * as React from 'react';
-import { Component, Styles, Text, View } from 'reactxp';
+import React from 'react';
 import styled from 'styled-components';
 import { colors, links } from '../../config.json';
 import { messages } from '../../shared/gettext';
@@ -16,40 +15,41 @@ interface IState {
   hasError: boolean;
 }
 
-const styles = {
-  container: Styles.createViewStyle({
-    flex: 1,
-    flexDirection: 'column',
-    alignItems: 'center',
-    justifyContent: 'center',
-    backgroundColor: colors.blue,
-  }),
-  title: Styles.createTextStyle({
-    fontFamily: 'DINPro',
-    fontSize: 24,
-    fontWeight: '900',
-    lineHeight: 30,
-    color: colors.white60,
-    marginBottom: 4,
-  }),
-  subtitle: Styles.createTextStyle({
-    fontFamily: 'Open Sans',
-    fontSize: 14,
-    lineHeight: 20,
-    color: colors.white40,
-    marginHorizontal: 22,
-    textAlign: 'center',
-  }),
-  email: Styles.createTextStyle({
-    fontWeight: '900',
-  }),
-};
+const StyledContainer = styled(Container)({
+  flex: 1,
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+  backgroundColor: colors.blue,
+});
+
+const Title = styled.span({
+  fontFamily: 'DINPro',
+  fontSize: '24px',
+  fontWeight: 900,
+  lineHeight: '30px',
+  color: colors.white60,
+  marginBottom: '4px',
+});
+
+const Subtitle = styled.span({
+  fontFamily: 'Open Sans',
+  fontSize: '14px',
+  lineHeight: '20px',
+  color: colors.white40,
+  marginHorizontal: '22px',
+  textAlign: 'center',
+});
+
+const Email = styled.span({
+  fontWeight: 900,
+});
 
 const Logo = styled(ImageView)({
   marginBottom: '5px',
 });
 
-export default class ErrorBoundary extends Component<IProps, IState> {
+export default class ErrorBoundary extends React.Component<IProps, IState> {
   public state = { hasError: false };
 
   public componentDidCatch(error: Error, info: React.ErrorInfo) {
@@ -71,18 +71,16 @@ export default class ErrorBoundary extends Component<IProps, IState> {
         messages
           .pgettext('error-boundary-view', 'Something went wrong. Please contact us at %(email)s')
           .split('%(email)s', 2);
-      reachBackMessage.splice(1, 0, <Text style={styles.email}>{links.supportEmail}</Text>);
+      reachBackMessage.splice(1, 0, <Email>{links.supportEmail}</Email>);
 
       return (
         <PlatformWindowContainer>
           <Layout>
-            <Container>
-              <View style={styles.container}>
-                <Logo height={106} width={106} source="logo-icon" />
-                <Text style={styles.title}>{messages.pgettext('generic', 'MULLVAD VPN')}</Text>
-                <Text style={styles.subtitle}>{reachBackMessage}</Text>
-              </View>
-            </Container>
+            <StyledContainer>
+              <Logo height={106} width={106} source="logo-icon" />
+              <Title>{messages.pgettext('generic', 'MULLVAD VPN')}</Title>
+              <Subtitle>{reachBackMessage}</Subtitle>
+            </StyledContainer>
           </Layout>
         </PlatformWindowContainer>
       );