[WIP] Add seed selection screen to mobile.

mobile/main.js

@@ -8,6 +8,7 @@ import { SecureStore, LocalAuthentication } from 'expo';
 import { createStackNavigator, NavigationActions } from 'react-navigation';
 import FontLoader from './component/font-loader';
 
+import SelectSeedView from '../src/view/select-seed';
 import SetPinView from '../src/view/set-pin-mobile';
 import SetPinConfirmView from '../src/view/set-pin-confirm-mobile';
 import SeedSuccessView from '../src/view/seed-success';
@@ -76,6 +77,10 @@ const auth = new AuthAction(
   Alert
 );
 
+const SelectSeed = () => (
+  <SelectSeedView store={store} wallet={wallet} nav={nav} />
+);
+
 const SetPin = () => <SetPinView store={store} auth={auth} nav={nav} />;
 
 const SetPinConfirm = () => (
@@ -132,6 +137,7 @@ const Pay = () => <PaymentView store={store} payment={payment} nav={nav} />;
 
 const MainStack = createStackNavigator(
   {
+    SelectSeed,
     SetPin,
     SetPinConfirm,
     SeedSuccess,

src/component/header.js

@@ -1,14 +1,15 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
 import PropTypes from 'prop-types';
+import { createStyles, maxWidth } from './media-query';
 import Text from './text';
-import { color } from './style';
+import { color, breakWidth } from './style';
 
 //
 // Header
 //
 
-const styles = StyleSheet.create({
+const baseStyles = {
   header: {
     height: 75,
     flexDirection: 'row',
@@ -29,7 +30,19 @@ const styles = StyleSheet.create({
   centerTitle: {
     justifyContent: 'center',
   },
-});
+};
+
+const styles = createStyles(
+  baseStyles,
+
+  maxWidth(breakWidth, {
+    separator: {
+      shadowOffset: { width: 0, height: 0 },
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: color.white,
+    },
+  })
+);
 
 export const Header = ({ style, children, color, shadow, separator }) => (
   <View

src/component/list.js

@@ -1,9 +1,10 @@
 import React, { Component, PureComponent } from 'react';
 import { View, ListView, TouchableOpacity, StyleSheet } from 'react-native';
 import PropTypes from 'prop-types';
+import { createStyles, maxWidth } from './media-query';
 import Text from './text';
 import ForwardIcon from '../asset/icon/forward';
-import { color, font } from './style';
+import { color, font, breakWidth } from './style';
 
 //
 // List Content
@@ -68,7 +69,7 @@ List.propTypes = {
 // List Item
 //
 
-const itemStyles = StyleSheet.create({
+const itemBaseStyles = {
   item: {
     alignSelf: 'stretch',
     flexDirection: 'row',
@@ -78,7 +79,20 @@ const itemStyles = StyleSheet.create({
     shadowOffset: { width: 0, height: 0.5 },
     shadowColor: color.greyBorder,
   },
-});
+};
+
+const itemStyles = createStyles(
+  itemBaseStyles,
+
+  maxWidth(breakWidth, {
+    item: {
+      marginTop: 0,
+      shadowOffset: { width: 0, height: 0 },
+      borderBottomWidth: StyleSheet.hairlineWidth,
+      borderBottomColor: color.greyBorder,
+    },
+  })
+);
 
 export class ListItem extends PureComponent {
   render() {
@@ -106,6 +120,7 @@ ListItem.propTypes = {
 const headStyles = StyleSheet.create({
   head: {
     shadowOffset: { width: 0, height: 0 },
+    borderBottomWidth: 0,
   },
 });
 

src/component/style.js

@@ -47,7 +47,7 @@ export const font = {
   lineHeightXS: 14,
   lineHeightS: 16,
   lineHeightSub: 18,
-  lineHeightBase: 20,
+  lineHeightBase: 22,
   lineHeightM: 22,
   lineHeightL: 24,
   lineHeightXXL: 60,
@@ -69,3 +69,5 @@ export const invisible = {
   paddingLeft: 0,
   paddingBottom: 0,
 };
+
+export const breakWidth = 400;

src/component/text.js

@@ -36,8 +36,6 @@ Text.propTypes = {
 const copyStyles = StyleSheet.create({
   text: {
     fontFamily: 'OpenSans Light',
-    fontSize: font.sizeBase,
-    lineHeight: 22,
   },
 });
 

src/view/loader.js

@@ -4,7 +4,7 @@ import { createStyles, maxWidth } from '../component/media-query';
 import Background from '../component/background';
 import { CopyOnboardText } from '../component/text';
 import MainContent from '../component/main-content';
-import { color, invisible } from '../component/style';
+import { color, invisible, breakWidth } from '../component/style';
 
 const baseStyles = {
   content: {
@@ -34,7 +34,7 @@ const baseStyles = {
 const styles = createStyles(
   baseStyles,
 
-  maxWidth(500, {
+  maxWidth(breakWidth, {
     copy2: invisible,
   })
 );

src/view/select-seed.js

@@ -1,43 +1,61 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+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 { H1Text, CopyText } from '../component/text';
+import { CopyOnboardText, Text } from '../component/text';
 import { RadioButton, GlasButton } from '../component/button';
 import { SettingItem } from '../component/list';
-import { color } from '../component/style';
+import { color, breakWidth } from '../component/style';
 
 //
 // Select Seed View
 //
 
-const styles = StyleSheet.create({
+const baseStyles = {
   content: {
-    justifyContent: 'center',
-    paddingLeft: 50,
-    paddingRight: 50,
+    paddingLeft: 20,
+    paddingRight: 20,
+  },
+  title: {
+    marginTop: 60,
+    textAlign: 'center',
   },
   copyTxt: {
     textAlign: 'center',
     marginTop: 10,
-    maxWidth: 450,
+    maxWidth: 300,
   },
   list: {
     marginTop: 50,
     width: 400,
   },
-});
+};
+
+const styles = createStyles(
+  baseStyles,
+
+  maxWidth(breakWidth, {
+    title: {
+      marginTop: 50,
+    },
+    list: {
+      width: undefined,
+      alignSelf: 'stretch',
+    },
+  })
+);
 
 const SelectSeedView = ({ store, wallet, nav }) => (
   <Background color={color.blackDark}>
     <MainContent style={styles.content}>
-      <H1Text>Recovery phrase?</H1Text>
-      <CopyText style={styles.copyTxt}>
+      <CopyOnboardText style={styles.title}>Recovery phrase?</CopyOnboardText>
+      <Text style={styles.copyTxt}>
         If you already have a recovery phrase, you can use that now. Otherwise,
         you should generate a new wallet.
-      </CopyText>
+      </Text>
       <View style={styles.list}>
         <SettingItem
           name="Generate a new wallet"