From cf430b33c7ab7913ba92e64cf1aca3f619728c10 Mon Sep 17 00:00:00 2001
From: Valentine Wallace <vwallace@protonmail.com>
Date: Thu, 11 Jul 2019 16:43:30 -0700
Subject: [PATCH 1/7] Add copy prop to SettingItem component.

---
 src/component/setting.js | 31 +++++++++++++++++++++++++++----
 1 file changed, 27 insertions(+), 4 deletions(-)

diff --git a/src/component/setting.js b/src/component/setting.js
index dd07b69dc..e0c8d639a 100644
--- a/src/component/setting.js
+++ b/src/component/setting.js
@@ -85,11 +85,20 @@ const iStyles = StyleSheet.create({
   item: {
     height: 60,
   },
-  name: {
+  left: {
     flex: 1,
+  },
+  name: {
     color: color.grey,
     fontSize: font.sizeSub,
   },
+  copy: {
+    width: '80%',
+    fontSize: font.sizeS,
+    lineHeight: font.lineHeightS,
+    color: color.greyListLabel,
+    opacity: 0.74,
+  },
   lbl: {
     fontSize: font.sizeS,
     color: color.greyListLabel,
@@ -100,9 +109,22 @@ const iStyles = StyleSheet.create({
   },
 });
 
-export const SettingItem = ({ name, onSelect, label, arrow, children }) => (
-  <ListItem style={iStyles.item} onSelect={onSelect}>
-    <Text style={iStyles.name}>{name}</Text>
+export const SettingItem = ({
+  name,
+  copy,
+  onSelect,
+  label,
+  arrow,
+  children,
+}) => (
+  <ListItem
+    style={[iStyles.item, copy ? { height: 80 } : null]}
+    onSelect={onSelect}
+  >
+    <View style={iStyles.left}>
+      <Text style={iStyles.name}>{name}</Text>
+      {copy ? <Text style={iStyles.copy}>{copy}</Text> : null}
+    </View>
     {label ? <Text style={iStyles.lbl}>{label}</Text> : null}
     {children}
     {arrow ? (
@@ -115,6 +137,7 @@ export const SettingItem = ({ name, onSelect, label, arrow, children }) => (
 
 SettingItem.propTypes = {
   name: PropTypes.string.isRequired,
+  copy: PropTypes.string,
   onSelect: PropTypes.func,
   label: PropTypes.string,
   arrow: PropTypes.bool,

From 507c9aabe4733dd79a6435d665f31a2d20e3fcff Mon Sep 17 00:00:00 2001
From: Valentine Wallace <vwallace@protonmail.com>
Date: Thu, 11 Jul 2019 16:43:42 -0700
Subject: [PATCH 2/7] Add select autopilot view for mobile.

---
 src/view/select-atpl-mobile.js | 91 ++++++++++++++++++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 src/view/select-atpl-mobile.js

diff --git a/src/view/select-atpl-mobile.js b/src/view/select-atpl-mobile.js
new file mode 100644
index 000000000..04b2734d3
--- /dev/null
+++ b/src/view/select-atpl-mobile.js
@@ -0,0 +1,91 @@
+import React from 'react';
+import { View } from 'react-native';
+import { createStyles, maxWidth } from '../component/media-query';
+import { observer } from 'mobx-react';
+import PropTypes from 'prop-types';
+import Background from '../component/background';
+import MainContent from '../component/main-content';
+import { CopyOnboardText, Text } from '../component/text';
+import { RadioButton, GlasButton } from '../component/button';
+import { SettingItem } from '../component/setting';
+import { color, font, smallBreakWidth } from '../component/style';
+
+//
+// Select Autopilot View
+//
+
+const baseStyles = {
+  content: {
+    paddingLeft: 20,
+    paddingRight: 20,
+  },
+  title: {
+    marginTop: 60,
+    textAlign: 'center',
+  },
+  copyTxt: {
+    textAlign: 'center',
+    marginTop: 10,
+    maxWidth: 300,
+  },
+  list: {
+    marginTop: 50,
+    width: undefined,
+    alignSelf: 'stretch',
+  },
+};
+
+const styles = createStyles(
+  baseStyles,
+
+  maxWidth(smallBreakWidth, {
+    title: {
+      fontSize: font.sizeL + 10,
+      lineHeight: font.sizeL + 10,
+      marginTop: 40,
+    },
+    list: {
+      marginTop: 20,
+    },
+  })
+);
+
+const SelectAutopilotView = ({ store, autopilot, info }) => (
+  <Background color={color.blackDark}>
+    <MainContent style={styles.content}>
+      <CopyOnboardText style={styles.title}>
+        Automatically set up channels?
+      </CopyOnboardText>
+      <Text style={styles.copyTxt}>
+        {
+          "If you want to avoid manual channel creation, the app can allocate funds to channels for you. It's called autopilot."
+        }
+      </Text>
+      <View style={styles.list}>
+        <SettingItem
+          name="Use autopilot (recommended)"
+          copy="I want the app to create channels and move my funds into those channels automatically."
+          onSelect={() => (store.settings.autopilot ? {} : autopilot.toggle())}
+        >
+          <RadioButton selected={store.settings.autopilot === true} />
+        </SettingItem>
+        <SettingItem
+          name="Create channels manually"
+          copy="I don't want the app to automatically create channels for me. I can do this all myself."
+          onSelect={() => (!store.settings.autopilot ? {} : autopilot.toggle())}
+        >
+          <RadioButton selected={store.settings.autopilot === false} />
+        </SettingItem>
+      </View>
+    </MainContent>
+    <GlasButton onPress={() => info.initLoaderSyncing()}>Next</GlasButton>
+  </Background>
+);
+
+SelectAutopilotView.propTypes = {
+  store: PropTypes.object.isRequired,
+  autopilot: PropTypes.object.isRequired,
+  info: PropTypes.object.isRequired,
+};
+
+export default observer(SelectAutopilotView);

From 9512fc392bb50475535d6409ce24299ddfe3740e Mon Sep 17 00:00:00 2001
From: Valentine Wallace <vwallace@protonmail.com>
Date: Thu, 11 Jul 2019 16:45:57 -0700
Subject: [PATCH 3/7] Add nav action mobile to screen storybook.

---
 stories/screen-story.js | 52 ++++++++++++++++++++++++-----------------
 1 file changed, 31 insertions(+), 21 deletions(-)

diff --git a/stories/screen-story.js b/stories/screen-story.js
index f32695265..1231bc6c5 100644
--- a/stories/screen-story.js
+++ b/stories/screen-story.js
@@ -5,6 +5,7 @@ import { action } from '@storybook/addon-actions';
 import sinon from 'sinon';
 import { Store } from '../src/store';
 import NavAction from '../src/action/nav';
+import NavActionMobile from '../src/action/nav-mobile';
 import IpcAction from '../src/action/ipc';
 import GrpcAction from '../src/action/grpc';
 import InfoAction from '../src/action/info';
@@ -93,6 +94,7 @@ const store = new Store();
 store.init();
 const file = sinon.createStubInstance(FileAction);
 const nav = sinon.createStubInstance(NavAction);
+const navMobile = sinon.createStubInstance(NavActionMobile);
 const db = sinon.createStubInstance(AppStorage);
 const ipc = sinon.createStubInstance(IpcAction);
 const grpc = sinon.createStubInstance(GrpcAction);
@@ -133,14 +135,14 @@ storiesOf('Screens', module)
   .add('Select Seed', () => (
     <SelectSeed store={store} wallet={wallet} setting={setting} />
   ))
-  .add('Seed Intro (Mobile)', () => <SeedIntro nav={nav} />)
+  .add('Seed Intro (Mobile)', () => <SeedIntro nav={navMobile} />)
   .add('Seed', () => <Seed store={store} wallet={wallet} />)
   .add('Seed (Mobile)', () => <SeedMobile store={store} wallet={wallet} />)
   .add('Seed Verify', () => (
     <SeedVerify store={store} nav={nav} wallet={wallet} />
   ))
   .add('Seed Verify (Mobile)', () => (
-    <SeedVerifyMobile store={store} nav={nav} wallet={wallet} />
+    <SeedVerifyMobile store={store} nav={navMobile} wallet={wallet} />
   ))
   .add('Restore Wallet: Seed', () => (
     <RestoreSeed store={store} wallet={wallet} />
@@ -157,7 +159,7 @@ storiesOf('Screens', module)
     <SetPasswordConfirm store={store} wallet={wallet} />
   ))
   .add('Set PIN (Mobile)', () => (
-    <SetPinMobile store={store} auth={auth} nav={nav} />
+    <SetPinMobile store={store} auth={auth} nav={navMobile} />
   ))
   .add('Set PIN Confirm (Mobile)', () => (
     <SetPinConfirmMobile store={store} auth={auth} />
@@ -175,7 +177,7 @@ storiesOf('Screens', module)
   ))
   .add('Reset Password - Saved', () => <ResetPasswordSaved nav={nav} />)
   .add('Reset PIN - Current (Mobile)', () => (
-    <ResetPinCurrent store={store} auth={auth} nav={nav} />
+    <ResetPinCurrent store={store} auth={auth} nav={navMobile} />
   ))
   .add('Reset PIN - New (Mobile)', () => (
     <ResetPinNew store={store} auth={auth} />
@@ -183,7 +185,7 @@ storiesOf('Screens', module)
   .add('Reset PIN - Confirm New (Mobile)', () => (
     <ResetPinConfirm store={store} auth={auth} />
   ))
-  .add('Reset PIN - Saved (Mobile)', () => <ResetPinSaved nav={nav} />)
+  .add('Reset PIN - Saved (Mobile)', () => <ResetPinSaved nav={navMobile} />)
   .add('New Address', () => (
     <NewAddress store={store} invoice={invoice} info={info} />
   ))
@@ -218,24 +220,28 @@ storiesOf('Screens', module)
   ))
   .add('Notifications', () => <Notification store={store} nav={nav} />)
   .add('Notifications (Mobile)', () => (
-    <NotificationMobile store={store} nav={nav} />
+    <NotificationMobile store={store} nav={navMobile} />
   ))
   .add('CLI', () => <CLI store={store} nav={nav} file={file} />)
   .add('Transactions', () => (
     <Transaction store={store} transaction={transaction} nav={nav} />
   ))
   .add('Transactions (Mobile)', () => (
-    <TransactionMobile store={store} transaction={transaction} nav={nav} />
+    <TransactionMobile
+      store={store}
+      transaction={transaction}
+      nav={navMobile}
+    />
   ))
   .add('Transaction Details', () => (
     <TransactionDetail store={store} nav={nav} />
   ))
   .add('Transaction Details (Mobile)', () => (
-    <TransactionDetailMobile store={store} nav={nav} />
+    <TransactionDetailMobile store={store} nav={navMobile} />
   ))
   .add('Channels', () => <Channel store={store} channel={channel} nav={nav} />)
   .add('Channels (Mobile)', () => (
-    <ChannelMobile store={store} channel={channel} nav={nav} />
+    <ChannelMobile store={store} channel={channel} nav={navMobile} />
   ))
   .add('Channels (Opening)', () => (
     <Channel store={{ computedChannels: [] }} channel={channel} nav={nav} />
@@ -244,12 +250,12 @@ storiesOf('Screens', module)
     <ChannelMobile
       store={{ computedChannels: [] }}
       channel={channel}
-      nav={nav}
+      nav={navMobile}
     />
   ))
   .add('Channel Details', () => <ChannelDetail store={store} nav={nav} />)
   .add('Channel Details (Mobile)', () => (
-    <ChannelDetailMobile store={store} nav={nav} />
+    <ChannelDetailMobile store={store} nav={navMobile} />
   ))
   .add('Channel Delete', () => (
     <ChannelDelete store={store} channel={channel} nav={nav} />
@@ -258,54 +264,58 @@ storiesOf('Screens', module)
     <ChannelCreate store={store} channel={channel} nav={nav} />
   ))
   .add('Channel Create (Mobile)', () => (
-    <ChannelCreateMobile store={store} channel={channel} nav={nav} />
+    <ChannelCreateMobile store={store} channel={channel} nav={navMobile} />
   ))
   .add('Deposit', () => <Deposit store={store} invoice={invoice} nav={nav} />)
   .add('Deposit (Mobile)', () => (
-    <DepositMobile store={store} invoice={invoice} nav={nav} />
+    <DepositMobile store={store} invoice={invoice} nav={navMobile} />
   ))
   .add('Payment', () => <Payment store={store} payment={payment} nav={nav} />)
   .add('Pay Lightning Confirm', () => (
     <PayLightningConfirm store={store} payment={payment} nav={nav} />
   ))
   .add('Pay Lightning Confirm (Mobile)', () => (
-    <PayLightningConfirmMobile store={store} payment={payment} nav={nav} />
+    <PayLightningConfirmMobile
+      store={store}
+      payment={payment}
+      nav={navMobile}
+    />
   ))
   .add('Pay Lightning Done', () => (
     <PayLightningDone store={store} payment={payment} nav={nav} />
   ))
   .add('Pay Lightning Done (Mobile)', () => (
-    <PayLightningDoneMobile store={store} payment={payment} nav={nav} />
+    <PayLightningDoneMobile store={store} payment={payment} nav={navMobile} />
   ))
   .add('Payment Failed', () => <PaymentFailed channel={channel} nav={nav} />)
   .add('Payment Failed (Mobile)', () => (
-    <PaymentFailedMobile channel={channel} nav={nav} />
+    <PaymentFailedMobile channel={channel} nav={navMobile} />
   ))
   .add('Pay Bitcoin', () => (
     <PayBitcoin store={store} payment={payment} nav={nav} />
   ))
   .add('Pay Bitcoin (Mobile)', () => (
-    <PayBitcoinMobile store={store} payment={payment} nav={nav} />
+    <PayBitcoinMobile store={store} payment={payment} nav={navMobile} />
   ))
   .add('Pay Bitcoin Confirm', () => (
     <PayBitcoinConfirm store={store} payment={payment} nav={nav} />
   ))
   .add('Pay Bitcoin Confirm (Mobile)', () => (
-    <PayBitcoinConfirmMobile store={store} payment={payment} nav={nav} />
+    <PayBitcoinConfirmMobile store={store} payment={payment} nav={navMobile} />
   ))
   .add('Pay Bitcoin Done', () => <PayBitcoinDone payment={payment} nav={nav} />)
   .add('Pay Bitcoin Done (Mobile)', () => (
-    <PayBitcoinDoneMobile payment={payment} nav={nav} />
+    <PayBitcoinDoneMobile payment={payment} nav={navMobile} />
   ))
   .add('Invoice', () => <Invoice store={store} invoice={invoice} nav={nav} />)
   .add('Invoice (Mobile)', () => (
-    <InvoiceMobile store={store} invoice={invoice} nav={nav} />
+    <InvoiceMobile store={store} invoice={invoice} nav={navMobile} />
   ))
   .add('Invoice QR', () => (
     <InvoiceQR store={store} invoice={invoice} nav={nav} />
   ))
   .add('Invoice QR (Mobile)', () => (
-    <InvoiceQRMobile store={store} invoice={invoice} nav={nav} />
+    <InvoiceQRMobile store={store} invoice={invoice} nav={navMobile} />
   ));
 
 // set some dummy data

From d7a777b30faa047627af2e4c9cbf009b7f092f5e Mon Sep 17 00:00:00 2001
From: Valentine Wallace <vwallace@protonmail.com>
Date: Thu, 11 Jul 2019 16:46:10 -0700
Subject: [PATCH 4/7] Wire up Select Autopilot mobile view.

---
 src/action/nav-mobile.js       | 4 ++++
 src/view/main-mobile.js        | 8 +++++++-
 src/view/new-address-mobile.js | 6 +++---
 stories/screen-story.js        | 6 +++++-
 4 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/src/action/nav-mobile.js b/src/action/nav-mobile.js
index 4a7078de6..9312cffbb 100644
--- a/src/action/nav-mobile.js
+++ b/src/action/nav-mobile.js
@@ -97,6 +97,10 @@ class NavAction {
     this._navigate('NewAddress');
   }
 
+  goSelectAutopilot() {
+    this._navigate('SelectAutopilot');
+  }
+
   goLoaderSyncing() {
     this._navigate('LoaderSyncing');
     this._reset('Main', 'LoaderSyncing');
diff --git a/src/view/main-mobile.js b/src/view/main-mobile.js
index 981437f16..7e9a2dee1 100644
--- a/src/view/main-mobile.js
+++ b/src/view/main-mobile.js
@@ -18,6 +18,7 @@ import SetPinConfirmView from './set-pin-confirm-mobile';
 import SeedSuccessView from './seed-success-mobile';
 import RestoreSeedView from './restore-seed-mobile';
 import NewAddressView from './new-address-mobile';
+import SelectAutopilotView from './select-atpl-mobile';
 
 import PinView from './pin-mobile';
 import ResetPinCurrentView from './reset-pin-current-mobile';
@@ -93,7 +94,11 @@ const SeedSuccess = () => <SeedSuccessView wallet={wallet} />;
 const RestoreSeed = () => <RestoreSeedView store={store} wallet={wallet} />;
 
 const NewAddress = () => (
-  <NewAddressView store={store} invoice={invoice} info={info} />
+  <NewAddressView store={store} invoice={invoice} nav={nav} />
+);
+
+const SelectAutopilot = () => (
+  <SelectAutopilotView store={store} autopilot={autopilot} info={info} />
 );
 
 const Password = () => <PinView store={store} auth={auth} />;
@@ -212,6 +217,7 @@ const MainStack = createStackNavigator(
     SeedSuccess,
     RestoreSeed,
     NewAddress,
+    SelectAutopilot,
     Password,
     LoaderSyncing,
     Home,
diff --git a/src/view/new-address-mobile.js b/src/view/new-address-mobile.js
index deb32cc79..e87975777 100644
--- a/src/view/new-address-mobile.js
+++ b/src/view/new-address-mobile.js
@@ -59,7 +59,7 @@ const styles = createStyles(
   })
 );
 
-const NewAddressView = ({ store, invoice, info }) => (
+const NewAddressView = ({ store, invoice, nav }) => (
   <SplitBackground image="purple-gradient-bg" bottom={color.blackDark}>
     <MainContent style={styles.content}>
       <View style={styles.copyWrapper}>
@@ -80,7 +80,7 @@ const NewAddressView = ({ store, invoice, info }) => (
         >
           {store.walletAddress}
         </CopyButton>
-        <SmallGlasButton onPress={() => info.initLoaderSyncing()}>
+        <SmallGlasButton onPress={() => nav.goSelectAutopilot()}>
           Done
         </SmallGlasButton>
       </View>
@@ -96,7 +96,7 @@ const NewAddressView = ({ store, invoice, info }) => (
 NewAddressView.propTypes = {
   store: PropTypes.object.isRequired,
   invoice: PropTypes.object.isRequired,
-  info: PropTypes.object.isRequired,
+  nav: PropTypes.object.isRequired,
 };
 
 export default observer(NewAddressView);
diff --git a/stories/screen-story.js b/stories/screen-story.js
index 1231bc6c5..3ec7a4a46 100644
--- a/stories/screen-story.js
+++ b/stories/screen-story.js
@@ -85,6 +85,7 @@ import ResetPinConfirm from '../src/view/reset-pin-confirm-mobile';
 import ResetPinSaved from '../src/view/reset-pin-saved-mobile';
 import NewAddress from '../src/view/new-address';
 import NewAddressMobile from '../src/view/new-address-mobile';
+import SelectAutopilotMobile from '../src/view/select-atpl-mobile';
 import Wait from '../src/view/wait';
 import WaitMobile from '../src/view/wait-mobile';
 import RestoreSeed from '../src/view/restore-seed';
@@ -190,7 +191,10 @@ storiesOf('Screens', module)
     <NewAddress store={store} invoice={invoice} info={info} />
   ))
   .add('New Address (Mobile)', () => (
-    <NewAddressMobile store={store} invoice={invoice} info={info} />
+    <NewAddressMobile store={store} invoice={invoice} nav={navMobile} />
+  ))
+  .add('Select Autopilot (Mobile)', () => (
+    <SelectAutopilotMobile store={store} autopilot={autopilot} info={info} />
   ))
   .add('Loader - Syncing Chain', () => <LoaderSyncing store={store} />)
   .add('Loader - Syncing Chain (Mobile)', () => (

From a69eb0c811fc0f78b759148f00bded4a352d4cae Mon Sep 17 00:00:00 2001
From: Valentine Wallace <vwallace@protonmail.com>
Date: Tue, 20 Aug 2019 16:07:54 -0700
Subject: [PATCH 5/7] Create new SettingsCopy component and update Select
 Autopilot styles.

---
 src/component/setting.js       | 75 ++++++++++++++++++++++------------
 src/view/select-atpl-mobile.js | 18 ++++----
 2 files changed, 57 insertions(+), 36 deletions(-)

diff --git a/src/component/setting.js b/src/component/setting.js
index e0c8d639a..93d9ecfd8 100644
--- a/src/component/setting.js
+++ b/src/component/setting.js
@@ -85,20 +85,11 @@ const iStyles = StyleSheet.create({
   item: {
     height: 60,
   },
-  left: {
-    flex: 1,
-  },
   name: {
+    flex: 1,
     color: color.grey,
     fontSize: font.sizeSub,
   },
-  copy: {
-    width: '80%',
-    fontSize: font.sizeS,
-    lineHeight: font.lineHeightS,
-    color: color.greyListLabel,
-    opacity: 0.74,
-  },
   lbl: {
     fontSize: font.sizeS,
     color: color.greyListLabel,
@@ -109,22 +100,9 @@ const iStyles = StyleSheet.create({
   },
 });
 
-export const SettingItem = ({
-  name,
-  copy,
-  onSelect,
-  label,
-  arrow,
-  children,
-}) => (
-  <ListItem
-    style={[iStyles.item, copy ? { height: 80 } : null]}
-    onSelect={onSelect}
-  >
-    <View style={iStyles.left}>
-      <Text style={iStyles.name}>{name}</Text>
-      {copy ? <Text style={iStyles.copy}>{copy}</Text> : null}
-    </View>
+export const SettingItem = ({ name, onSelect, label, arrow, children }) => (
+  <ListItem style={iStyles.item} onSelect={onSelect}>
+    <Text style={iStyles.name}>{name}</Text>
     {label ? <Text style={iStyles.lbl}>{label}</Text> : null}
     {children}
     {arrow ? (
@@ -137,13 +115,56 @@ export const SettingItem = ({
 
 SettingItem.propTypes = {
   name: PropTypes.string.isRequired,
-  copy: PropTypes.string,
   onSelect: PropTypes.func,
   label: PropTypes.string,
   arrow: PropTypes.bool,
   children: PropTypes.node,
 };
 
+//
+// Setting Copy Item
+//
+
+const iCopyStyles = StyleSheet.create({
+  item: {
+    height: 100,
+  },
+  left: {
+    flex: 1,
+    flexDirection: 'column',
+    justifyContent: 'center',
+  },
+  name: {
+    color: color.grey,
+    fontSize: font.sizeSub,
+    marginBottom: 5,
+  },
+  copy: {
+    width: '80%',
+    fontSize: font.sizeS,
+    lineHeight: font.lineHeightS,
+    color: color.greyListLabel,
+    opacity: 0.74,
+  },
+});
+
+export const SettingCopyItem = ({ name, onSelect, copy, children }) => (
+  <ListItem style={iCopyStyles.item} onSelect={onSelect}>
+    <View style={iCopyStyles.left}>
+      <Text style={iCopyStyles.name}>{name}</Text>
+      <Text style={iCopyStyles.copy}>{copy}</Text>
+    </View>
+    {children}
+  </ListItem>
+);
+
+SettingCopyItem.propTypes = {
+  name: PropTypes.string.isRequired,
+  onSelect: PropTypes.func,
+  copy: PropTypes.string,
+  children: PropTypes.node,
+};
+
 //
 // Setting Header
 //
diff --git a/src/view/select-atpl-mobile.js b/src/view/select-atpl-mobile.js
index 04b2734d3..fc2dd9811 100644
--- a/src/view/select-atpl-mobile.js
+++ b/src/view/select-atpl-mobile.js
@@ -7,7 +7,7 @@ import Background from '../component/background';
 import MainContent from '../component/main-content';
 import { CopyOnboardText, Text } from '../component/text';
 import { RadioButton, GlasButton } from '../component/button';
-import { SettingItem } from '../component/setting';
+import { SettingCopyItem } from '../component/setting';
 import { color, font, smallBreakWidth } from '../component/style';
 
 //
@@ -20,16 +20,16 @@ const baseStyles = {
     paddingRight: 20,
   },
   title: {
-    marginTop: 60,
+    marginTop: 80,
     textAlign: 'center',
   },
   copyTxt: {
     textAlign: 'center',
     marginTop: 10,
-    maxWidth: 300,
+    maxWidth: 260,
   },
   list: {
-    marginTop: 50,
+    marginTop: 40,
     width: undefined,
     alignSelf: 'stretch',
   },
@@ -62,23 +62,23 @@ const SelectAutopilotView = ({ store, autopilot, info }) => (
         }
       </Text>
       <View style={styles.list}>
-        <SettingItem
+        <SettingCopyItem
           name="Use autopilot (recommended)"
           copy="I want the app to create channels and move my funds into those channels automatically."
           onSelect={() => (store.settings.autopilot ? {} : autopilot.toggle())}
         >
           <RadioButton selected={store.settings.autopilot === true} />
-        </SettingItem>
-        <SettingItem
+        </SettingCopyItem>
+        <SettingCopyItem
           name="Create channels manually"
           copy="I don't want the app to automatically create channels for me. I can do this all myself."
           onSelect={() => (!store.settings.autopilot ? {} : autopilot.toggle())}
         >
           <RadioButton selected={store.settings.autopilot === false} />
-        </SettingItem>
+        </SettingCopyItem>
       </View>
     </MainContent>
-    <GlasButton onPress={() => info.initLoaderSyncing()}>Next</GlasButton>
+    <GlasButton onPress={() => info.initLoaderSyncing()}>Save</GlasButton>
   </Background>
 );
 

From c95a9a384e4e610a2766748084b5c45e2518d407 Mon Sep 17 00:00:00 2001
From: Tankred Hase <mail@tankredhase.de>
Date: Wed, 21 Aug 2019 14:26:43 +0200
Subject: [PATCH 6/7] Refactor SettingCopyItem styles

---
 src/component/setting.js | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/component/setting.js b/src/component/setting.js
index 93d9ecfd8..bcc68c74a 100644
--- a/src/component/setting.js
+++ b/src/component/setting.js
@@ -127,24 +127,24 @@ SettingItem.propTypes = {
 
 const iCopyStyles = StyleSheet.create({
   item: {
-    height: 100,
+    height: null,
+    paddingTop: 20,
+    paddingBottom: 20,
   },
   left: {
     flex: 1,
-    flexDirection: 'column',
-    justifyContent: 'center',
   },
   name: {
     color: color.grey,
     fontSize: font.sizeSub,
-    marginBottom: 5,
   },
   copy: {
-    width: '80%',
     fontSize: font.sizeS,
     lineHeight: font.lineHeightS,
     color: color.greyListLabel,
     opacity: 0.74,
+    paddingRight: 50,
+    marginTop: 5,
   },
 });
 

From 95e022ada83c573875fdb59d47519016b03f9eac Mon Sep 17 00:00:00 2001
From: Tankred Hase <mail@tankredhase.de>
Date: Wed, 21 Aug 2019 14:27:01 +0200
Subject: [PATCH 7/7] Cleanup select-atpl-mobile.js

---
 src/view/select-atpl-mobile.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/view/select-atpl-mobile.js b/src/view/select-atpl-mobile.js
index fc2dd9811..760352156 100644
--- a/src/view/select-atpl-mobile.js
+++ b/src/view/select-atpl-mobile.js
@@ -25,7 +25,7 @@ const baseStyles = {
   },
   copyTxt: {
     textAlign: 'center',
-    marginTop: 10,
+    marginTop: 20,
     maxWidth: 260,
   },
   list: {
@@ -45,7 +45,7 @@ const styles = createStyles(
       marginTop: 40,
     },
     list: {
-      marginTop: 20,
+      marginTop: 50,
     },
   })
 );
@@ -65,14 +65,14 @@ const SelectAutopilotView = ({ store, autopilot, info }) => (
         <SettingCopyItem
           name="Use autopilot (recommended)"
           copy="I want the app to create channels and move my funds into those channels automatically."
-          onSelect={() => (store.settings.autopilot ? {} : autopilot.toggle())}
+          onSelect={() => !store.settings.autopilot && autopilot.toggle()}
         >
           <RadioButton selected={store.settings.autopilot === true} />
         </SettingCopyItem>
         <SettingCopyItem
           name="Create channels manually"
           copy="I don't want the app to automatically create channels for me. I can do this all myself."
-          onSelect={() => (!store.settings.autopilot ? {} : autopilot.toggle())}
+          onSelect={() => store.settings.autopilot && autopilot.toggle()}
         >
           <RadioButton selected={store.settings.autopilot === false} />
         </SettingCopyItem>