Add button which tells the daemon to reconnect

3 files changed, 35 insertions, 5 deletions

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8042ac35e5..06743eb420 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -23,6 +23,9 @@ Line wrap the file at 100 chars.                                              Th
 
 
 ## [Unreleased]
+### Added
+- Add reconnect button to the desktop app
+
 ### Changed
 - Change project copyright and company name from Amagicom AB to Mullvad VPN AB
 - Only reconnect when settings change if a relevant tunnel protocol is used.
diff --git a/gui/assets/images/icon-reload.svg b/gui/assets/images/icon-reload.svg
new file mode 100644
index 0000000000..33c7e5ec2c
--- /dev/null
+++ b/gui/assets/images/icon-reload.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="feather feather-rotate-cw"><polyline points="23 4 23 10 17 10"></polyline><path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path></svg>
\ No newline at end of file
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>
         );