Merge branch 'convert-tunnel-control-from-reactxp'

3 files changed, 73 insertions, 106 deletions

diff --git a/gui/src/renderer/components/Connect.tsx b/gui/src/renderer/components/Connect.tsx
index 636f445bc1..9ee96c273e 100644
--- a/gui/src/renderer/components/Connect.tsx
+++ b/gui/src/renderer/components/Connect.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Component, Styles, View } from 'reactxp';
+import { Styles } from 'reactxp';
 import styled from 'styled-components';
 import { hasExpired } from '../../shared/account-expiry';
 import ExpiredAccountErrorViewContainer from '../containers/ExpiredAccountErrorViewContainer';
@@ -38,32 +38,25 @@ const StyledMap = styled(Map)({
   zIndex: 0,
 });
 
+const StyledContainer = styled(Container)({
+  position: 'relative',
+});
+
+const Content = styled.div({
+  display: 'flex',
+  flex: 1,
+  flexDirection: 'column',
+  position: 'relative', // need this for z-index to work to cover the map
+  zIndex: 1,
+});
+
+const StatusIcon = styled(ImageView)({
+  position: 'absolute',
+  alignSelf: 'center',
+  marginTop: 94,
+});
+
 const styles = {
-  connect: Styles.createViewStyle({
-    flex: 1,
-  }),
-  body: Styles.createViewStyle({
-    flex: 1,
-    paddingTop: 0,
-    paddingLeft: 24,
-    paddingRight: 24,
-    paddingBottom: 0,
-    marginTop: 176,
-  }),
-  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,
@@ -76,7 +69,7 @@ interface IState {
   isAccountExpired: boolean;
 }
 
-export default class Connect extends Component<IProps, IState> {
+export default class Connect extends React.Component<IProps, IState> {
   constructor(props: IProps) {
     super(props);
 
@@ -97,7 +90,7 @@ export default class Connect extends Component<IProps, IState> {
             <Brand />
             <SettingsBarButton onPress={this.props.onSettings} />
           </Header>
-          <Container>
+          <StyledContainer>
             {this.state.isAccountExpired ||
             (this.props.loginState.type === 'ok' &&
               this.props.loginState.method === 'new_account') ? (
@@ -105,7 +98,7 @@ export default class Connect extends Component<IProps, IState> {
             ) : (
               this.renderMap()
             )}
-          </Container>
+          </StyledContainer>
         </Layout>
       </ModalContainer>
     );
@@ -145,14 +138,12 @@ export default class Connect extends Component<IProps, IState> {
 
   private renderMap() {
     return (
-      <View style={styles.connect}>
+      <>
         <StyledMap {...this.getMapProps()} />
-        <View style={styles.container}>
+        <Content>
           {/* show spinner when connecting */}
           {this.showMarkerOrSpinner() === 'spinner' ? (
-            <View style={styles.statusIcon}>
-              <ImageView source="icon-spinner" height={60} width={60} />
-            </View>
+            <StatusIcon source="icon-spinner" height={60} width={60} />
           ) : null}
 
           <TunnelControl
@@ -168,8 +159,8 @@ export default class Connect extends Component<IProps, IState> {
           />
 
           <NotificationArea style={styles.notificationArea} />
-        </View>
-      </View>
+        </Content>
+      </>
     );
   }
 
diff --git a/gui/src/renderer/components/SecuredLabel.tsx b/gui/src/renderer/components/SecuredLabel.tsx
index 453388acb4..7f68b100ae 100644
--- a/gui/src/renderer/components/SecuredLabel.tsx
+++ b/gui/src/renderer/components/SecuredLabel.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Component, Styles, Text, Types } from 'reactxp';
+import styled from 'styled-components';
 import { colors } from '../../config.json';
 import { messages } from '../../shared/gettext';
 
@@ -11,59 +11,42 @@ export enum SecuredDisplayStyle {
   failedToSecure,
 }
 
-interface IProps {
-  displayStyle: SecuredDisplayStyle;
-  style: Types.TextStyleRuleSet;
-}
-
-const styles = {
-  securing: Styles.createTextStyle({
-    color: colors.white,
-  }),
-  secured: Styles.createTextStyle({
-    color: colors.green,
-  }),
-  unsecured: Styles.createTextStyle({
-    color: colors.red,
-  }),
+const securedDisplayStyleColorMap = {
+  [SecuredDisplayStyle.securing]: colors.white,
+  [SecuredDisplayStyle.secured]: colors.green,
+  [SecuredDisplayStyle.blocked]: colors.green,
+  [SecuredDisplayStyle.unsecured]: colors.red,
+  [SecuredDisplayStyle.failedToSecure]: colors.red,
 };
 
-export default class SecuredLabel extends Component<IProps> {
-  public render() {
-    return <Text style={[this.props.style, this.getTextStyle()]}>{this.getText()}</Text>;
-  }
-
-  private getText() {
-    switch (this.props.displayStyle) {
-      case SecuredDisplayStyle.secured:
-        return messages.gettext('SECURE CONNECTION');
+const StyledSecuredLabel = styled.span((props: { displayStyle: SecuredDisplayStyle }) => ({
+  color: securedDisplayStyleColorMap[props.displayStyle],
+}));
 
-      case SecuredDisplayStyle.blocked:
-        return messages.gettext('BLOCKED CONNECTION');
+interface ISecuredLabelProps {
+  displayStyle: SecuredDisplayStyle;
+  className?: string;
+}
 
-      case SecuredDisplayStyle.securing:
-        return messages.gettext('CREATING SECURE CONNECTION');
+export default function SecuredLabel(props: ISecuredLabelProps) {
+  return <StyledSecuredLabel {...props}>{getLabelText(props.displayStyle)}</StyledSecuredLabel>;
+}
 
-      case SecuredDisplayStyle.unsecured:
-        return messages.gettext('UNSECURED CONNECTION');
+function getLabelText(displayStyle: SecuredDisplayStyle) {
+  switch (displayStyle) {
+    case SecuredDisplayStyle.secured:
+      return messages.gettext('SECURE CONNECTION');
 
-      case SecuredDisplayStyle.failedToSecure:
-        return messages.gettext('FAILED TO SECURE CONNECTION');
-    }
-  }
+    case SecuredDisplayStyle.blocked:
+      return messages.gettext('BLOCKED CONNECTION');
 
-  private getTextStyle() {
-    switch (this.props.displayStyle) {
-      case SecuredDisplayStyle.secured:
-      case SecuredDisplayStyle.blocked:
-        return styles.secured;
+    case SecuredDisplayStyle.securing:
+      return messages.gettext('CREATING SECURE CONNECTION');
 
-      case SecuredDisplayStyle.securing:
-        return styles.securing;
+    case SecuredDisplayStyle.unsecured:
+      return messages.gettext('UNSECURED CONNECTION');
 
-      case SecuredDisplayStyle.unsecured:
-      case SecuredDisplayStyle.failedToSecure:
-        return styles.unsecured;
-    }
+    case SecuredDisplayStyle.failedToSecure:
+      return messages.gettext('FAILED TO SECURE CONNECTION');
   }
 }
diff --git a/gui/src/renderer/components/TunnelControl.tsx b/gui/src/renderer/components/TunnelControl.tsx
index aa8ae80183..7136f18e13 100644
--- a/gui/src/renderer/components/TunnelControl.tsx
+++ b/gui/src/renderer/components/TunnelControl.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { Component, Styles, View } from 'reactxp';
 import styled from 'styled-components';
 import { colors } from '../../config.json';
 import { TunnelState } from '../../shared/daemon-rpc-types';
@@ -27,21 +26,22 @@ const SwitchLocationButton = styled(AppButton.TransparentButton)({
   marginBottom: 16,
 });
 
-const styles = {
-  footer: Styles.createViewStyle({
-    flex: 0,
-    paddingBottom: 16,
-    paddingLeft: 24,
-    paddingRight: 24,
-  }),
-  status_security: Styles.createTextStyle({
-    fontFamily: 'Open Sans',
-    fontSize: 16,
-    fontWeight: '800',
-    lineHeight: 22,
-    marginBottom: 2,
-  }),
-};
+const Secured = styled(SecuredLabel)({
+  fontFamily: 'Open Sans',
+  fontSize: '16px',
+  fontWeight: 800,
+  lineHeight: '22px',
+  marginBottom: '2px',
+});
+
+const Footer = styled.div({
+  display: 'flex',
+  flexDirection: 'column',
+  flex: 0,
+  paddingBottom: '16px',
+  paddingLeft: '24px',
+  paddingRight: '24px',
+});
 
 const Body = styled.div({
   display: 'flex',
@@ -73,7 +73,7 @@ const StyledMarquee = styled(Marquee)({
   color: colors.white,
 });
 
-export default class TunnelControl extends Component<ITunnelControlProps> {
+export default class TunnelControl extends React.Component<ITunnelControlProps> {
   public render() {
     const SwitchLocation = () => {
       return (
@@ -120,13 +120,6 @@ export default class TunnelControl extends Component<ITunnelControlProps> {
       </AppButton.RedTransparentButton>
     );
 
-    const Secured = ({ displayStyle }: { displayStyle: SecuredDisplayStyle }) => (
-      <SecuredLabel style={styles.status_security} displayStyle={displayStyle} />
-    );
-    const Footer = ({ children }: { children: React.ReactNode }) => (
-      <View style={styles.footer}>{children}</View>
-    );
-
     let state = this.props.tunnelState.state;
 
     switch (this.props.tunnelState.state) {