Merge branch 'desktop-add-reconnect-button'

2 files changed, 34 insertions, 5 deletions

diff --git a/gui/src/renderer/components/Connect.tsx b/gui/src/renderer/components/Connect.tsx
index 7f73fb7ea0..4cb63c6a5b 100644
--- a/gui/src/renderer/components/Connect.tsx
+++ b/gui/src/renderer/components/Connect.tsx
@@ -23,6 +23,7 @@ interface IProps {
   onSelectLocation: () => void;
   onConnect: () => void;
   onDisconnect: () => void;
+  onReconnect: () => void;
   onExternalLinkWithAuth: (url: string) => Promise<void>;
 }
 
@@ -163,6 +164,7 @@ export default class Connect extends Component<IProps, IState> {
             country={this.props.connection.country}
             onConnect={this.props.onConnect}
             onDisconnect={this.props.onDisconnect}
+            onReconnect={this.props.onReconnect}
             onSelectLocation={this.props.onSelectLocation}
           />
 
diff --git a/gui/src/renderer/components/TunnelControl.tsx b/gui/src/renderer/components/TunnelControl.tsx
index 700603bd2e..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 {
@@ -14,6 +15,7 @@ interface ITunnelControlProps {
   country?: string;
   onConnect: () => void;
   onDisconnect: () => void;
+  onReconnect: () => void;
   onSelectLocation: () => void;
 }
 
@@ -58,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> {
@@ -94,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} />
     );
@@ -148,7 +166,10 @@ export default class TunnelControl extends Component<ITunnelControlProps> {
             </Body>
             <Footer>
               <SwitchLocation />
-              <Cancel />
+              <View style={styles.button_row}>
+                <Cancel />
+                <Reconnect />
+              </View>
             </Footer>
           </Wrapper>
         );
@@ -165,7 +186,10 @@ export default class TunnelControl extends Component<ITunnelControlProps> {
             </Body>
             <Footer>
               <SwitchLocation />
-              <Disconnect />
+              <View style={styles.button_row}>
+                <Disconnect />
+                <Reconnect />
+              </View>
             </Footer>
           </Wrapper>
         );
@@ -178,7 +202,10 @@ export default class TunnelControl extends Component<ITunnelControlProps> {
             </Body>
             <Footer>
               <SwitchLocation />
-              <Cancel />
+              <View style={styles.button_row}>
+                <Cancel />
+                <Reconnect />
+              </View>
             </Footer>
           </Wrapper>
         );