Create new SettingsCopy component and update Select Autopilot styles.

Author: valentinewallace

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
 //

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>
 );