Convert ConnectionPanel from ReactXP

2 files changed, 79 insertions, 108 deletions

diff --git a/gui/src/renderer/components/ConnectionPanel.tsx b/gui/src/renderer/components/ConnectionPanel.tsx
index 156a46ff89..248d466706 100644
--- a/gui/src/renderer/components/ConnectionPanel.tsx
+++ b/gui/src/renderer/components/ConnectionPanel.tsx
@@ -1,6 +1,7 @@
 import * as React from 'react';
-import { Component, Styles, Text, Types, View } from 'reactxp';
 import { sprintf } from 'sprintf-js';
+import styled from 'styled-components';
+import { colors } from '../../config.json';
 import {
   ProxyType,
   proxyTypeToString,
@@ -38,80 +39,76 @@ interface IProps {
   bridgeInfo?: IBridgeData;
   outAddress?: IOutAddress;
   onToggle: () => void;
-  style?: Types.ViewStyleRuleSet | Types.ViewStyleRuleSet[];
+  className?: string;
 }
 
-const styles = {
-  row: Styles.createViewStyle({
-    flexDirection: 'row',
-    marginTop: 3,
-  }),
-  caption: Styles.createTextStyle({
-    fontFamily: 'Open Sans',
-    fontSize: 13,
-    lineHeight: 15,
-    fontWeight: '600',
-    color: 'rgb(255, 255, 255)',
-    flex: 0,
-    marginRight: 8,
-  }),
-  value: Styles.createTextStyle({
-    fontFamily: 'Open Sans',
-    fontSize: 13,
-    lineHeight: 15,
-    fontWeight: '600',
-    color: 'rgb(255, 255, 255)',
-  }),
-  header: Styles.createViewStyle({
-    flexDirection: 'row',
-    alignItems: 'center',
-  }),
-};
+const Row = styled.div({
+  display: 'flex',
+  marginTop: '3px',
+});
 
-export default class ConnectionPanel extends Component<IProps> {
+const Text = styled.span({
+  fontFamily: 'Open Sans',
+  fontSize: '13px',
+  lineHeight: '15px',
+  fontWeight: 600,
+  color: colors.white,
+});
+
+const Caption = styled(Text)({
+  flex: 0,
+  marginRight: '8px',
+});
+
+const Header = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+export default class ConnectionPanel extends React.Component<IProps> {
   public render() {
     const { inAddress, outAddress, bridgeInfo } = this.props;
     const entryPoint = bridgeInfo && inAddress ? bridgeInfo : inAddress;
 
     return (
-      <View style={this.props.style}>
+      <div className={this.props.className}>
         {this.props.hostname && (
-          <View style={styles.header}>
+          <Header>
             <ConnectionPanelDisclosure pointsUp={this.props.isOpen} onToggle={this.props.onToggle}>
               {this.hostnameLine()}
             </ConnectionPanelDisclosure>
-          </View>
+          </Header>
         )}
 
         {this.props.isOpen && this.props.hostname && (
           <React.Fragment>
             {this.props.inAddress && (
-              <View style={styles.row}>
-                <Text style={styles.value}>{this.transportLine()}</Text>
-              </View>
+              <Row>
+                <Text>{this.transportLine()}</Text>
+              </Row>
             )}
 
             {entryPoint && (
-              <View style={styles.row}>
-                <Text style={styles.caption}>{messages.pgettext('connection-info', 'In')}</Text>
-                <Text style={styles.value}>
+              <Row>
+                <Caption>{messages.pgettext('connection-info', 'In')}</Caption>
+                <Text>
                   {`${entryPoint.ip}:${entryPoint.port} ${entryPoint.protocol.toUpperCase()}`}
                 </Text>
-              </View>
+              </Row>
             )}
 
             {outAddress && (outAddress.ipv4 || outAddress.ipv6) && (
-              <View style={styles.row}>
-                <Text style={styles.caption}>{messages.pgettext('connection-info', 'Out')}</Text>
-                <View>
-                  {outAddress.ipv4 && <Text style={styles.value}>{outAddress.ipv4}</Text>}
-                  {outAddress.ipv6 && <Text style={styles.value}>{outAddress.ipv6}</Text>}
-                </View>
-              </View>
+              <Row>
+                <Caption>{messages.pgettext('connection-info', 'Out')}</Caption>
+                <div>
+                  {outAddress.ipv4 && <Text>{outAddress.ipv4}</Text>}
+                  {outAddress.ipv6 && <Text>{outAddress.ipv6}</Text>}
+                </div>
+              </Row>
             )}
           </React.Fragment>
         )}
-      </View>
+      </div>
     );
   }
 
diff --git a/gui/src/renderer/components/ConnectionPanelDisclosure.tsx b/gui/src/renderer/components/ConnectionPanelDisclosure.tsx
index 17c3dc9919..ad7c092f9c 100644
--- a/gui/src/renderer/components/ConnectionPanelDisclosure.tsx
+++ b/gui/src/renderer/components/ConnectionPanelDisclosure.tsx
@@ -1,73 +1,47 @@
 import * as React from 'react';
-import { Component, Styles, Text, Types, View } from 'reactxp';
+import styled from 'styled-components';
+import { colors } from '../../config.json';
 import ImageView from './ImageView';
 
-const styles = {
-  container: Styles.createViewStyle({
-    flexDirection: 'row',
-    alignItems: 'center',
-  }),
-  caption: {
-    base: Styles.createTextStyle({
-      fontFamily: 'Open Sans',
-      fontSize: 15,
-      fontWeight: '600',
-      lineHeight: 20,
-      color: 'rgb(255, 255, 255, 0.4)',
-    }),
-    hovered: Styles.createTextStyle({
-      color: 'rgb(255, 255, 255)',
-    }),
+const Container = styled.div({
+  display: 'flex',
+  alignItems: 'center',
+});
+
+const Caption = styled.span((props: { open: boolean }) => ({
+  fontFamily: 'Open Sans',
+  fontSize: '15px',
+  fontWeight: 600,
+  lineHeight: '20px',
+  color: props.open ? colors.white : colors.white40,
+  [Container + ':hover &']: {
+    color: colors.white,
+  },
+}));
+
+const Chevron = styled(ImageView)({
+  [Container + ':hover &']: {
+    backgroundColor: colors.white,
   },
-};
+});
 
 interface IProps {
   pointsUp: boolean;
   onToggle?: () => void;
   children: React.ReactText;
-  style?: Types.ViewStyleRuleSet | Types.ViewStyleRuleSet[];
-}
-
-interface IState {
-  isHovered: boolean;
+  className?: string;
 }
 
-export default class ConnectionPanelDisclosure extends Component<IProps, IState> {
-  constructor(props: IProps) {
-    super(props);
-
-    this.state = {
-      isHovered: false,
-    };
-  }
-
-  public render() {
-    const tintColor = this.state.isHovered ? 'rgb(255, 255, 255)' : 'rgb(255, 255, 255, 0.4)';
-    const textHoverStyle =
-      this.props.pointsUp || this.state.isHovered ? styles.caption.hovered : undefined;
-
-    return (
-      <View
-        style={[styles.container, this.props.style]}
-        onMouseEnter={this.onMouseEnter}
-        onMouseLeave={this.onMouseLeave}
-        onPress={this.props.onToggle}>
-        <Text style={[styles.caption.base, textHoverStyle]}>{this.props.children}</Text>
-        <ImageView
-          source={this.props.pointsUp ? 'icon-chevron-up' : 'icon-chevron-down'}
-          width={24}
-          height={24}
-          tintColor={tintColor}
-        />
-      </View>
-    );
-  }
-
-  private onMouseEnter = () => {
-    this.setState({ isHovered: true });
-  };
-
-  private onMouseLeave = () => {
-    this.setState({ isHovered: false });
-  };
+export default function ConnectionPanelDisclosure(props: IProps) {
+  return (
+    <Container className={props.className} onClick={props.onToggle}>
+      <Caption open={props.pointsUp}>{props.children}</Caption>
+      <Chevron
+        source={props.pointsUp ? 'icon-chevron-up' : 'icon-chevron-down'}
+        width={24}
+        height={24}
+        tintColor={colors.white40}
+      />
+    </Container>
+  );
 }