Convert TunnelControl components from ReactXP

2 files changed, 46 insertions, 70 deletions

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) {