2 files changed, 49 insertions, 69 deletions

diff --git a/gui/src/renderer/components/Connect.tsx b/gui/src/renderer/components/Connect.tsx
index a2bc35d505..a0ebe53820 100644
--- a/gui/src/renderer/components/Connect.tsx
+++ b/gui/src/renderer/components/Connect.tsx
@@ -1,9 +1,11 @@
 import * as React from 'react';
-import { Component, View } from 'reactxp';
+import { Component, Styles, View } from 'reactxp';
 import { links } from '../../config.json';
 import { ITunnelEndpoint, parseSocketAddress } from '../../shared/daemon-rpc-types';
+import AccountExpiry from '../lib/account-expiry';
 import { AuthFailureError, AuthFailureKind } from '../lib/auth-failure';
-import styles from './ConnectStyles';
+import { IConnectionReduxState } from '../redux/connection/reducers';
+import { IVersionReduxState } from '../redux/version/reducers';
 import ExpiredAccountErrorView, { RecoveryAction } from './ExpiredAccountErrorView';
 import { Brand, HeaderBarStyle, SettingsBarButton } from './HeaderBar';
 import ImageView from './ImageView';
@@ -12,10 +14,6 @@ import Map, { MarkerStyle, ZoomLevel } from './Map';
 import NotificationArea from './NotificationArea';
 import TunnelControl, { IRelayInAddress, IRelayOutAddress } from './TunnelControl';
 
-import AccountExpiry from '../lib/account-expiry';
-import { IConnectionReduxState } from '../redux/connection/reducers';
-import { IVersionReduxState } from '../redux/version/reducers';
-
 interface IProps {
   connection: IConnectionReduxState;
   version: IVersionReduxState;
@@ -33,6 +31,49 @@ interface IProps {
 
 type MarkerOrSpinner = 'marker' | 'spinner';
 
+const styles = {
+  connect: Styles.createViewStyle({
+    flex: 1,
+  }),
+  map: Styles.createViewStyle({
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    // @ts-ignore
+    zIndex: 0,
+  }),
+  body: Styles.createViewStyle({
+    flex: 1,
+    paddingTop: 0,
+    paddingLeft: 24,
+    paddingRight: 24,
+    paddingBottom: 0,
+    marginTop: 186,
+  }),
+  container: Styles.createViewStyle({
+    flex: 1,
+    flexDirection: 'column',
+    position: 'relative' /* need this for z-index to work to cover the map */,
+    // @ts-ignore
+    zIndex: 1,
+  }),
+  statusIcon: Styles.createViewStyle({
+    position: 'absolute',
+    alignSelf: 'center',
+    width: 60,
+    height: 60,
+    marginTop: 94,
+  }),
+  notificationArea: Styles.createViewStyle({
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    right: 0,
+  }),
+};
+
 export default class Connect extends Component<IProps> {
   public render() {
     return (
@@ -88,7 +129,7 @@ export default class Connect extends Component<IProps> {
         <View style={styles.container}>
           {/* show spinner when connecting */}
           {this.showMarkerOrSpinner() === 'spinner' ? (
-            <View style={styles.status_icon}>
+            <View style={styles.statusIcon}>
               <ImageView source="icon-spinner" height={60} width={60} />
             </View>
           ) : null}
@@ -109,7 +150,7 @@ export default class Connect extends Component<IProps> {
           />
 
           <NotificationArea
-            style={styles.notification_area}
+            style={styles.notificationArea}
             tunnelState={this.props.connection.status}
             version={this.props.version}
             accountExpiry={this.props.accountExpiry}
diff --git a/gui/src/renderer/components/ConnectStyles.tsx b/gui/src/renderer/components/ConnectStyles.tsx
deleted file mode 100644
index 645541000b..0000000000
--- a/gui/src/renderer/components/ConnectStyles.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { Styles } from 'reactxp';
-import { colors } from '../../config.json';
-
-export default {
-  connect: Styles.createViewStyle({
-    flex: 1,
-  }),
-  map: Styles.createViewStyle({
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-    // @ts-ignore
-    zIndex: 0,
-  }),
-  body: Styles.createViewStyle({
-    paddingTop: 0,
-    paddingLeft: 24,
-    paddingRight: 24,
-    paddingBottom: 0,
-    marginTop: 186,
-    flex: 1,
-  }),
-  container: Styles.createViewStyle({
-    flexDirection: 'column',
-    flex: 1,
-    position: 'relative' /* need this for z-index to work to cover map */,
-    // @ts-ignore
-    zIndex: 1,
-  }),
-  status_icon: Styles.createViewStyle({
-    position: 'absolute',
-    alignSelf: 'center',
-    width: 60,
-    height: 60,
-    marginTop: 94,
-  }),
-  notification_area: Styles.createViewStyle({
-    position: 'absolute',
-    left: 0,
-    top: 0,
-    right: 0,
-  }),
-  error_title: Styles.createTextStyle({
-    fontFamily: 'DINPro',
-    fontSize: 32,
-    fontWeight: '900',
-    lineHeight: 40,
-    color: colors.white,
-    marginBottom: 8,
-  }),
-  error_message: Styles.createTextStyle({
-    fontFamily: 'Open Sans',
-    fontSize: 13,
-    lineHeight: 20,
-    fontWeight: '600',
-    color: colors.white,
-    marginBottom: 24,
-  }),
-};