Improve appearance of reconnect button

4 files changed, 65 insertions, 32 deletions

diff --git a/gui/src/config.json b/gui/src/config.json
index 455c2e8e34..d81a0a5357 100644
--- a/gui/src/config.json
+++ b/gui/src/config.json
@@ -10,8 +10,8 @@
   "colors": {
     "darkBlue": "rgb(25, 46, 69)",
     "blue": "rgb(41, 77, 115)",
-    "green": "rgb(68, 173, 77)",
     "darkGreen": "rgb(32, 84, 37)",
+    "green": "rgb(68, 173, 77)",
     "red": "rgb(227, 64, 57)",
     "darkYellow": "rgb(142, 78, 19)",
     "yellow": "rgb(255, 213, 36)",
diff --git a/gui/src/renderer/components/AppButton.tsx b/gui/src/renderer/components/AppButton.tsx
index 6f14fd16e9..212e5cb1a3 100644
--- a/gui/src/renderer/components/AppButton.tsx
+++ b/gui/src/renderer/components/AppButton.tsx
@@ -73,9 +73,10 @@ export class Icon extends Component<IIconProps> {
 
 interface IProps {
   children?: React.ReactNode;
-  style?: Types.ButtonStyleRuleSet;
+  style?: Types.StyleRuleSetRecursive<Types.ButtonStyleRuleSet>;
   disabled?: boolean;
   onPress?: () => void;
+  textOffset?: number;
 }
 
 interface IState {
@@ -139,6 +140,7 @@ class BaseButton extends Component<IProps, IState> {
   }
 
   private async updateTextAdjustment(containerLayout: Types.LayoutInfo) {
+    const textOffset = this.props.textOffset || 0;
     const labelView = this.textViewRef.current;
 
     if (labelView) {
@@ -149,7 +151,7 @@ class BaseButton extends Component<IProps, IState> {
       const trailingSpace = containerLayout.width - (labelLayout.x + labelLayout.width);
 
       // calculate text adjustment
-      const textAdjustment = labelLayout.x - trailingSpace;
+      const textAdjustment = labelLayout.x - trailingSpace - textOffset;
 
       // re-render the view with the new text adjustment if it changed
       if (this.state.textAdjustment !== textAdjustment) {
diff --git a/gui/src/renderer/components/MultiButton.tsx b/gui/src/renderer/components/MultiButton.tsx
new file mode 100644
index 0000000000..efd21ee9ca
--- /dev/null
+++ b/gui/src/renderer/components/MultiButton.tsx
@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { Component, Styles, Types, View } from 'reactxp';
+
+const SIDE_BUTTON_WIDTH = 50;
+
+const styles = {
+  buttonRow: Styles.createViewStyle({
+    flexDirection: 'row',
+  }),
+  mainButton: Styles.createViewStyle({
+    flex: 1,
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
+  }),
+  sideButton: Styles.createViewStyle({
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
+    width: SIDE_BUTTON_WIDTH,
+    alignItems: 'center',
+    marginLeft: 1,
+  }),
+};
+
+interface IProps {
+  mainButton: React.ComponentType<IMainButtonProps>;
+  sideButton: React.ComponentType<ISideButtonProps>;
+}
+
+export interface IMainButtonProps {
+  textOffset: number;
+  style?: Types.StyleRuleSetRecursive<Types.ViewStyleRuleSet>;
+}
+
+export interface ISideButtonProps {
+  style?: Types.StyleRuleSetRecursive<Types.ViewStyleRuleSet>;
+}
+
+export class MultiButton extends Component<IProps> {
+  public render() {
+    const { mainButton: MainButton, sideButton: SideButton } = this.props;
+
+    return (
+      <View style={styles.buttonRow}>
+        <MainButton textOffset={SIDE_BUTTON_WIDTH} style={styles.mainButton} />
+        <SideButton style={styles.sideButton} />
+      </View>
+    );
+  }
+}
diff --git a/gui/src/renderer/components/TunnelControl.tsx b/gui/src/renderer/components/TunnelControl.tsx
index 5fbfaebc86..eba2a3190b 100644
--- a/gui/src/renderer/components/TunnelControl.tsx
+++ b/gui/src/renderer/components/TunnelControl.tsx
@@ -6,6 +6,7 @@ import { messages } from '../../shared/gettext';
 import ConnectionPanelContainer from '../containers/ConnectionPanelContainer';
 import * as AppButton from './AppButton';
 import ImageView from './ImageView';
+import { IMainButtonProps, ISideButtonProps, MultiButton } from './MultiButton';
 import SecuredLabel, { SecuredDisplayStyle } from './SecuredLabel';
 
 interface ITunnelControlProps {
@@ -60,16 +61,6 @@ 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> {
@@ -105,22 +96,22 @@ export default class TunnelControl extends Component<ITunnelControlProps> {
       </AppButton.GreenButton>
     );
 
-    const Disconnect = () => (
-      <AppButton.RedTransparentButton onPress={this.props.onDisconnect} style={styles.large_button}>
+    const Disconnect = (props: IMainButtonProps) => (
+      <AppButton.RedTransparentButton onPress={this.props.onDisconnect} {...props}>
         {messages.pgettext('tunnel-control', 'Disconnect')}
       </AppButton.RedTransparentButton>
     );
 
-    const Cancel = () => (
-      <AppButton.RedTransparentButton onPress={this.props.onDisconnect} style={styles.large_button}>
+    const Cancel = (props: IMainButtonProps) => (
+      <AppButton.RedTransparentButton onPress={this.props.onDisconnect} {...props}>
         {messages.pgettext('tunnel-control', 'Cancel')}
       </AppButton.RedTransparentButton>
     );
 
-    const Reconnect = () => (
-      <AppButton.TransparentButton onPress={this.props.onReconnect} style={styles.reconnect_button}>
+    const Reconnect = (props: ISideButtonProps) => (
+      <AppButton.RedTransparentButton onPress={this.props.onReconnect} {...props}>
         <ImageView height={22} width={22} source="icon-reload" tintColor="white" />
-      </AppButton.TransparentButton>
+      </AppButton.RedTransparentButton>
     );
 
     const Secured = ({ displayStyle }: { displayStyle: SecuredDisplayStyle }) => (
@@ -166,10 +157,7 @@ export default class TunnelControl extends Component<ITunnelControlProps> {
             </Body>
             <Footer>
               <SwitchLocation />
-              <View style={styles.button_row}>
-                <Cancel />
-                <Reconnect />
-              </View>
+              <MultiButton mainButton={Cancel} sideButton={Reconnect} />
             </Footer>
           </Wrapper>
         );
@@ -186,10 +174,7 @@ export default class TunnelControl extends Component<ITunnelControlProps> {
             </Body>
             <Footer>
               <SwitchLocation />
-              <View style={styles.button_row}>
-                <Disconnect />
-                <Reconnect />
-              </View>
+              <MultiButton mainButton={Disconnect} sideButton={Reconnect} />
             </Footer>
           </Wrapper>
         );
@@ -202,10 +187,7 @@ export default class TunnelControl extends Component<ITunnelControlProps> {
             </Body>
             <Footer>
               <SwitchLocation />
-              <View style={styles.button_row}>
-                <Cancel />
-                <Reconnect />
-              </View>
+              <MultiButton mainButton={Cancel} sideButton={Reconnect} />
             </Footer>
           </Wrapper>
         );