Add button which tells the daemon to reconnect

1 files changed, 31 insertions, 5 deletions

diff --git a/gui/src/renderer/components/TunnelControl.tsx b/gui/src/renderer/components/TunnelControl.tsx
index aa7c762d17..5fbfaebc86 100644
--- a/gui/src/renderer/components/TunnelControl.tsx
+++ b/gui/src/renderer/components/TunnelControl.tsx
@@ -5,6 +5,7 @@ import { TunnelState } from '../../shared/daemon-rpc-types';
 import { messages } from '../../shared/gettext';
 import ConnectionPanelContainer from '../containers/ConnectionPanelContainer';
 import * as AppButton from './AppButton';
+import ImageView from './ImageView';
 import SecuredLabel, { SecuredDisplayStyle } from './SecuredLabel';
 
 interface ITunnelControlProps {
@@ -59,6 +60,16 @@ const styles = {
     letterSpacing: -0.9,
     color: colors.white,
   }),
+  button_row: Styles.createViewStyle({
+    flexDirection: 'row',
+  }),
+  large_button: Styles.createViewStyle({
+    flex: 1,
+  }),
+  reconnect_button: Styles.createViewStyle({
+    marginLeft: 16,
+    paddingHorizontal: 12,
+  }),
 };
 
 export default class TunnelControl extends Component<ITunnelControlProps> {
@@ -95,17 +106,23 @@ export default class TunnelControl extends Component<ITunnelControlProps> {
     );
 
     const Disconnect = () => (
-      <AppButton.RedTransparentButton onPress={this.props.onDisconnect}>
+      <AppButton.RedTransparentButton onPress={this.props.onDisconnect} style={styles.large_button}>
         {messages.pgettext('tunnel-control', 'Disconnect')}
       </AppButton.RedTransparentButton>
     );
 
     const Cancel = () => (
-      <AppButton.RedTransparentButton onPress={this.props.onDisconnect}>
+      <AppButton.RedTransparentButton onPress={this.props.onDisconnect} style={styles.large_button}>
         {messages.pgettext('tunnel-control', 'Cancel')}
       </AppButton.RedTransparentButton>
     );
 
+    const Reconnect = () => (
+      <AppButton.TransparentButton onPress={this.props.onReconnect} style={styles.reconnect_button}>
+        <ImageView height={22} width={22} source="icon-reload" tintColor="white" />
+      </AppButton.TransparentButton>
+    );
+
     const Secured = ({ displayStyle }: { displayStyle: SecuredDisplayStyle }) => (
       <SecuredLabel style={styles.status_security} displayStyle={displayStyle} />
     );
@@ -149,7 +166,10 @@ export default class TunnelControl extends Component<ITunnelControlProps> {
             </Body>
             <Footer>
               <SwitchLocation />
-              <Cancel />
+              <View style={styles.button_row}>
+                <Cancel />
+                <Reconnect />
+              </View>
             </Footer>
           </Wrapper>
         );
@@ -166,7 +186,10 @@ export default class TunnelControl extends Component<ITunnelControlProps> {
             </Body>
             <Footer>
               <SwitchLocation />
-              <Disconnect />
+              <View style={styles.button_row}>
+                <Disconnect />
+                <Reconnect />
+              </View>
             </Footer>
           </Wrapper>
         );
@@ -179,7 +202,10 @@ export default class TunnelControl extends Component<ITunnelControlProps> {
             </Body>
             <Footer>
               <SwitchLocation />
-              <Cancel />
+              <View style={styles.button_row}>
+                <Cancel />
+                <Reconnect />
+              </View>
             </Footer>
           </Wrapper>
         );