From 12b95764b93fb51b4131f2da97a6c2dbf622f98d Mon Sep 17 00:00:00 2001 From: Valentine Wallace Date: Thu, 8 Nov 2018 20:55:57 -0800 Subject: [PATCH 1/6] Add seed selection screen to mobile. --- mobile/main.js | 6 ++++++ src/view/select-seed.js | 22 ++++++++++++++++++---- 2 files changed, 24 insertions(+), 4 deletions(-) diff --git a/mobile/main.js b/mobile/main.js index 24c30dda7..3d0ece486 100644 --- a/mobile/main.js +++ b/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 = () => ( + +); + const SetPin = () => ; const SetPinConfirm = () => ( @@ -132,6 +137,7 @@ const Pay = () => ; const MainStack = createStackNavigator( { + SelectSeed, SetPin, SetPinConfirm, SeedSuccess, diff --git a/src/view/select-seed.js b/src/view/select-seed.js index 0fa748268..f26ffa332 100644 --- a/src/view/select-seed.js +++ b/src/view/select-seed.js @@ -1,5 +1,6 @@ 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'; @@ -13,7 +14,7 @@ import { color } from '../component/style'; // Select Seed View // -const styles = StyleSheet.create({ +const baseStyles = { content: { justifyContent: 'center', paddingLeft: 50, @@ -28,12 +29,25 @@ const styles = StyleSheet.create({ marginTop: 50, width: 400, }, -}); + header: { + textAlign: 'center', + }, +}; + +const styles = createStyles( + baseStyles, + + maxWidth(400, { + list: { + width: 300, + }, + }) +); const SelectSeedView = ({ store, wallet, nav }) => ( - Recovery phrase? + Recovery phrase? If you already have a recovery phrase, you can use that now. Otherwise, you should generate a new wallet. From 0ea03b6e1e531608c94451e0235e0d8113c7a8a9 Mon Sep 17 00:00:00 2001 From: Tankred Hase Date: Mon, 12 Nov 2018 16:19:18 +0000 Subject: [PATCH 2/6] Increase Text component base line height --- src/component/style.js | 2 +- src/component/text.js | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) diff --git a/src/component/style.js b/src/component/style.js index 00c980e14..c5db09430 100644 --- a/src/component/style.js +++ b/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, diff --git a/src/component/text.js b/src/component/text.js index 21d267f00..c4e2661b9 100644 --- a/src/component/text.js +++ b/src/component/text.js @@ -36,8 +36,6 @@ Text.propTypes = { const copyStyles = StyleSheet.create({ text: { fontFamily: 'OpenSans Light', - fontSize: font.sizeBase, - lineHeight: 22, }, }); From fa7a14a43a28015990da98511ceda542ff85c358 Mon Sep 17 00:00:00 2001 From: Tankred Hase Date: Mon, 12 Nov 2018 16:22:15 +0000 Subject: [PATCH 3/6] Use global breakWidth for media queries --- src/component/style.js | 2 ++ src/view/loader.js | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/component/style.js b/src/component/style.js index c5db09430..9551cfbb6 100644 --- a/src/component/style.js +++ b/src/component/style.js @@ -69,3 +69,5 @@ export const invisible = { paddingLeft: 0, paddingBottom: 0, }; + +export const breakWidth = 400; diff --git a/src/view/loader.js b/src/view/loader.js index 4b3ba9bc5..3e5b05509 100644 --- a/src/view/loader.js +++ b/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, }) ); From 2cf3911d0c1518417cebcf1115aa86ba4520ed56 Mon Sep 17 00:00:00 2001 From: Tankred Hase Date: Mon, 12 Nov 2018 16:26:26 +0000 Subject: [PATCH 4/6] Fix list items bottom border on mobile --- src/component/list.js | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/src/component/list.js b/src/component/list.js index 59df69051..654d3e000 100644 --- a/src/component/list.js +++ b/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, }, }); From 2425d898e59b8df1c35fbab25b99ac7a49d7930c Mon Sep 17 00:00:00 2001 From: Tankred Hase Date: Mon, 12 Nov 2018 16:29:59 +0000 Subject: [PATCH 5/6] Fix seperator on header --- src/component/header.js | 19 ++++++++++++++++--- 1 file changed, 16 insertions(+), 3 deletions(-) diff --git a/src/component/header.js b/src/component/header.js index 30c3315b4..9293cfe95 100644 --- a/src/component/header.js +++ b/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 }) => ( Date: Mon, 12 Nov 2018 16:31:44 +0000 Subject: [PATCH 6/6] Fix select seed styles --- src/view/select-seed.js | 32 ++++++++++++++++++-------------- 1 file changed, 18 insertions(+), 14 deletions(-) diff --git a/src/view/select-seed.js b/src/view/select-seed.js index f26ffa332..941a61922 100644 --- a/src/view/select-seed.js +++ b/src/view/select-seed.js @@ -5,10 +5,10 @@ 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 @@ -16,30 +16,34 @@ import { color } from '../component/style'; 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, }, - header: { - textAlign: 'center', - }, }; const styles = createStyles( baseStyles, - maxWidth(400, { + maxWidth(breakWidth, { + title: { + marginTop: 50, + }, list: { - width: 300, + width: undefined, + alignSelf: 'stretch', }, }) ); @@ -47,11 +51,11 @@ const styles = createStyles( const SelectSeedView = ({ store, wallet, nav }) => ( - Recovery phrase? - + Recovery phrase? + If you already have a recovery phrase, you can use that now. Otherwise, you should generate a new wallet. - +