From 89d6cfa4793a4c6ed192a84499aab52991c6e4d6 Mon Sep 17 00:00:00 2001 From: mistikk Date: Fri, 28 Sep 2018 23:39:45 +0300 Subject: [PATCH] Updated pin code desing --- .../views/numericKeyboardStyles.js | 8 +- .../views/numericKeyboardView.js | 29 ++-- src/index.js | 60 ++++---- src/navigation.js | 2 +- src/screens/pinCode/pinCodeScreen.js | 134 +++++++----------- src/screens/splash/splashContainer.js | 39 +++-- src/styles/pinCode.styles.js | 56 ++++---- 7 files changed, 149 insertions(+), 179 deletions(-) diff --git a/src/components/numericKeyboard/views/numericKeyboardStyles.js b/src/components/numericKeyboard/views/numericKeyboardStyles.js index 3766ab492..cf009ab06 100644 --- a/src/components/numericKeyboard/views/numericKeyboardStyles.js +++ b/src/components/numericKeyboard/views/numericKeyboardStyles.js @@ -3,14 +3,20 @@ import EStyleSheet from "react-native-extended-stylesheet"; export default EStyleSheet.create({ container: { flex: 1, + flexDirection: "column", alignItems: "center", - justifyContent: "center", + justifyContent: "space-between", marginTop: 20, + width: "$deviceWidth / 1.5", }, buttonGroup: { + width: "100%", flex: 1, flexDirection: "row", marginBottom: 15, justifyContent: "space-between", }, + button: { + marginBottom: 15, + }, }); diff --git a/src/components/numericKeyboard/views/numericKeyboardView.js b/src/components/numericKeyboard/views/numericKeyboardView.js index 4595b476d..8ea7676cf 100644 --- a/src/components/numericKeyboard/views/numericKeyboardView.js +++ b/src/components/numericKeyboard/views/numericKeyboardView.js @@ -25,30 +25,21 @@ class NumericKeyboard extends Component { return ( - - - + + + - - - + + + - - - + + + - + ); } diff --git a/src/index.js b/src/index.js index fcba62b6e..27b7fb81b 100755 --- a/src/index.js +++ b/src/index.js @@ -6,42 +6,42 @@ import { StatusBar, Dimensions } from "react-native"; import EStyleSheet from "react-native-extended-stylesheet"; EStyleSheet.build({ - // Primary Colors - $white: "#FFFFFF", - $black: "#000000", - $primaryBlue: "#357ce6", - $primaryGray: "#788187", - $primaryLightGray: "#f6f6f6", - $primaryRed: "#e63535", + // Primary Colors + $white: "#FFFFFF", + $black: "#000000", + $primaryBlue: "#357ce6", + $primaryGray: "#788187", + $primaryLightGray: "#f6f6f6", + $primaryRed: "#e63535", - // General Colors - $borderColor: "#ffff", - $bubblesBlue: "#5CCDFF", - $iconColor: "#c1c5c7", - $dangerColor: "#fff", - $warningColor: "#fff", - $successColor: "#fff", - $disableButton: "#fff", - $shadowColor: "#fff", - $disableGray: "#fff", + // General Colors + $borderColor: "#ffff", + $bubblesBlue: "#5CCDFF", + $iconColor: "#c1c5c7", + $dangerColor: "#fff", + $warningColor: "#fff", + $successColor: "#fff", + $disableButton: "#fff", + $shadowColor: "#fff", + $disableGray: "#fff", - // Devices Sizes - $deviceHeight: Dimensions.get("window").height, - $deviceWidth: Dimensions.get("window").width, + // Devices Sizes + $deviceHeight: Dimensions.get("window").height, + $deviceWidth: Dimensions.get("window").width, - // Fonts Properties - $primaryFont: "Roboto", - $primaryLatterSpacing: 0, + // Fonts Properties + $primaryFont: "Roboto", + $primaryLatterSpacing: 0, }); registerScreens(); Navigation.events().registerAppLaunchedListener(() => { - Navigation.setRoot({ - root: { - component: { - name: "navigation.eSteem.Splash", - }, - }, - }); + Navigation.setRoot({ + root: { + component: { + name: "navigation.eSteem.Splash", + }, + }, + }); }); diff --git a/src/navigation.js b/src/navigation.js index 224bbf8c2..a141a65f5 100755 --- a/src/navigation.js +++ b/src/navigation.js @@ -309,7 +309,7 @@ export const goToNoAuthScreens = () => { // TODO before commit navigation.eSteem.Login component: { - name: "navigation.eSteem.Login", + name: "navigation.eSteem.PinCode", }, }, ], diff --git a/src/screens/pinCode/pinCodeScreen.js b/src/screens/pinCode/pinCodeScreen.js index c6c18cc27..ac9b69106 100644 --- a/src/screens/pinCode/pinCodeScreen.js +++ b/src/screens/pinCode/pinCodeScreen.js @@ -35,87 +35,61 @@ class PinCodeScreen extends React.Component { const pass = [0, 1]; return ( - - - Enter Pin Code - - {[...Array(4)].map((val, index) => { - if (pass[index] === undefined) { - return ( - - ); - } else { - return ( - - ); - } - })} - - - - {/* this._handleOnChangeInput(e)} - value={this.state.pin} - /> */} - {/* - this.setState({ - showPassword: !this.state.showPassword, - }) - } - > - - */} - - - Oh, I forgot it… - + + Enter Pin Code + + {[...Array(4)].map((val, index) => { + if (pass[index] === undefined) { + return ( + + ); + } else { + return ( + + ); + } + })} + + + + Oh, I forgot it… + - - {this.props.informationText} - - + + {this.props.informationText} + ); } diff --git a/src/screens/splash/splashContainer.js b/src/screens/splash/splashContainer.js index b5d8928e1..4fe88fb5f 100644 --- a/src/screens/splash/splashContainer.js +++ b/src/screens/splash/splashContainer.js @@ -7,28 +7,27 @@ import { getAuthStatus } from "../../realm/realm"; import SplashScreen from "./splashScreen"; class SplashContainer extends React.Component { - constructor(props) { - super(props); - } + constructor(props) { + super(props); + } - async componentDidMount() { - await getAuthStatus() - .then(result => { - if (result === true) { - goToAuthScreens(); - } else { - goToNoAuthScreens(); - } - }) - .catch(error => { - console.log(error); - goToAuthScreens(); - }); - } + async componentDidMount() { + await getAuthStatus() + .then(result => { + if (result === true) { + goToAuthScreens(); + } else { + goToNoAuthScreens(); + } + }) + .catch(() => { + goToAuthScreens(); + }); + } - render() { - return ; - } + render() { + return ; + } } export default SplashContainer; diff --git a/src/styles/pinCode.styles.js b/src/styles/pinCode.styles.js index 2abfdda9f..30bb72d5b 100644 --- a/src/styles/pinCode.styles.js +++ b/src/styles/pinCode.styles.js @@ -1,32 +1,32 @@ import EStyleSheet from "react-native-extended-stylesheet"; export default EStyleSheet.create({ - title: { - color: "#357ce6", - fontSize: 20, - fontWeight: "bold", - marginTop: 25, - alignSelf: "center", - marginBottom: 25, - }, - logo: { - marginTop: "$deviceHeight / 8", - }, - forgotButtonText: { - color: "#788187", - fontSize: 14, - marginTop: 25, - alignSelf: "center", - marginBottom: 25, - }, - input: { - backgroundColor: "#f5f5f5", - borderColor: "#fff", - borderRadius: 5, - paddingLeft: 15, - minWidth: "$deviceWidth / 2", - }, - icon: { - color: "#357ce6", - }, + title: { + flex: 1, + color: "#357ce6", + fontSize: 20, + fontWeight: "bold", + alignSelf: "center", + }, + logo: { + marginTop: "$deviceHeight / 8", + flex: 1, + }, + forgotButtonText: { + color: "#788187", + fontSize: 14, + marginTop: 25, + alignSelf: "center", + marginBottom: 25, + }, + input: { + backgroundColor: "#f5f5f5", + borderColor: "#fff", + borderRadius: 5, + paddingLeft: 15, + minWidth: "$deviceWidth / 2", + }, + icon: { + color: "#357ce6", + }, });