Fix the switch control layout when used within cells

3 files changed, 22 insertions, 9 deletions

diff --git a/gui/src/renderer/components/AdvancedSettings.tsx b/gui/src/renderer/components/AdvancedSettings.tsx
index be1dd6b104..b3a24a95bd 100644
--- a/gui/src/renderer/components/AdvancedSettings.tsx
+++ b/gui/src/renderer/components/AdvancedSettings.tsx
@@ -15,7 +15,6 @@ import {
   TitleBarItem,
 } from './NavigationBar';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
-import Switch from './Switch';
 
 const MIN_MSSFIX_VALUE = 1000;
 const MAX_MSSFIX_VALUE = 1450;
@@ -107,7 +106,7 @@ export default class AdvancedSettings extends Component<IProps, IState> {
 
                   <Cell.Container>
                     <Cell.Label>{pgettext('advanced-settings-view', 'Enable IPv6')}</Cell.Label>
-                    <Switch isOn={this.props.enableIpv6} onChange={this.props.setEnableIpv6} />
+                    <Cell.Switch isOn={this.props.enableIpv6} onChange={this.props.setEnableIpv6} />
                   </Cell.Container>
                   <Cell.Footer>
                     {pgettext(
@@ -120,7 +119,7 @@ export default class AdvancedSettings extends Component<IProps, IState> {
                     <Cell.Label textStyle={styles.advanced_settings__block_when_disconnected_label}>
                       {pgettext('advanced-settings-view', 'Block when disconnected')}
                     </Cell.Label>
-                    <Switch
+                    <Cell.Switch
                       isOn={this.props.blockWhenDisconnected}
                       onChange={this.props.setBlockWhenDisconnected}
                     />
diff --git a/gui/src/renderer/components/Cell.tsx b/gui/src/renderer/components/Cell.tsx
index b108708934..126bcf63d0 100644
--- a/gui/src/renderer/components/Cell.tsx
+++ b/gui/src/renderer/components/Cell.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { Button, Component, Styles, Text, TextInput, Types, View } from 'reactxp';
 import { colors } from '../../config.json';
 import ImageView from './ImageView';
+import { default as SwitchControl } from './Switch';
 
 const styles = {
   cellButton: {
@@ -62,6 +63,9 @@ const styles = {
       color: colors.white,
     }),
   },
+  switch: Styles.createViewStyle({
+    flex: 0,
+  }),
   input: {
     frame: Styles.createViewStyle({
       flexGrow: 0,
@@ -222,6 +226,14 @@ export function Label(props: ILabelProps) {
   );
 }
 
+export const Switch = function CellSwitch(props: SwitchControl['props']) {
+  return (
+    <View style={styles.switch}>
+      <SwitchControl {...props} />
+    </View>
+  );
+};
+
 interface InputFrameProps {
   children?: React.ReactNode;
   style?: Types.StyleRuleSetRecursive<Types.ViewStyleRuleSet>;
diff --git a/gui/src/renderer/components/Preferences.tsx b/gui/src/renderer/components/Preferences.tsx
index 9804a1c953..a3a1140253 100644
--- a/gui/src/renderer/components/Preferences.tsx
+++ b/gui/src/renderer/components/Preferences.tsx
@@ -12,7 +12,6 @@ import {
 } from './NavigationBar';
 import styles from './PreferencesStyles';
 import SettingsHeader, { HeaderTitle } from './SettingsHeader';
-import Switch from './Switch';
 
 export interface IPreferencesProps {
   autoStart: boolean;
@@ -59,13 +58,16 @@ export default class Preferences extends Component<IPreferencesProps> {
                       <Cell.Label>
                         {pgettext('preferences-view', 'Launch app on start-up')}
                       </Cell.Label>
-                      <Switch isOn={this.props.autoStart} onChange={this.onChangeAutoStart} />
+                      <Cell.Switch isOn={this.props.autoStart} onChange={this.onChangeAutoStart} />
                     </Cell.Container>
                     <View style={styles.preferences__separator} />
 
                     <Cell.Container>
                       <Cell.Label>{pgettext('preferences-view', 'Auto-connect')}</Cell.Label>
-                      <Switch isOn={this.props.autoConnect} onChange={this.props.setAutoConnect} />
+                      <Cell.Switch
+                        isOn={this.props.autoConnect}
+                        onChange={this.props.setAutoConnect}
+                      />
                     </Cell.Container>
                     <Cell.Footer>
                       {pgettext(
@@ -78,7 +80,7 @@ export default class Preferences extends Component<IPreferencesProps> {
                       <Cell.Label>
                         {pgettext('preferences-view', 'Local network sharing')}
                       </Cell.Label>
-                      <Switch isOn={this.props.allowLan} onChange={this.props.setAllowLan} />
+                      <Cell.Switch isOn={this.props.allowLan} onChange={this.props.setAllowLan} />
                     </Cell.Container>
                     <Cell.Footer>
                       {pgettext(
@@ -126,7 +128,7 @@ class MonochromaticIconToggle extends Component<IMonochromaticIconProps> {
         <View>
           <Cell.Container>
             <Cell.Label>{pgettext('preferences-view', 'Monochromatic tray icon')}</Cell.Label>
-            <Switch isOn={this.props.monochromaticIcon} onChange={this.props.onChange} />
+            <Cell.Switch isOn={this.props.monochromaticIcon} onChange={this.props.onChange} />
           </Cell.Container>
           <Cell.Footer>
             {pgettext(
@@ -155,7 +157,7 @@ class StartMinimizedToggle extends Component<IStartMinimizedProps> {
         <View>
           <Cell.Container>
             <Cell.Label>{pgettext('preferences-view', 'Start minimized')}</Cell.Label>
-            <Switch isOn={this.props.startMinimized} onChange={this.props.onChange} />
+            <Cell.Switch isOn={this.props.startMinimized} onChange={this.props.onChange} />
           </Cell.Container>
           <Cell.Footer>
             {pgettext('preferences-view', 'Show only the tray icon when the app starts.')}