Merge pull request #74 from esteemapp/pin-code-design

Pin code design
2024-12-29 16:44:27 +03:00 · 2018-10-28 17:52:08 +02:00 · 2018-10-28 17:52:08 +02:00 · a307b6980a
commit a307b6980a
parent e845961a49 6a10b52ac8
11 changed files with 106 additions and 88 deletions
--- a/src/components/buttons/views/circularButtonStyles.js
+++ b/src/components/buttons/views/circularButtonStyles.js
@ -1,18 +1,19 @@
-import EStyleSheet from "react-native-extended-stylesheet";
+import EStyleSheet from 'react-native-extended-stylesheet';

 export default EStyleSheet.create({
  button: {
-    width: 60,
-    height: 60,
-    borderRadius: 60 / 2,
-    borderColor: "#357ce6",
+    width: '$deviceWidth / 7',
+    height: '$deviceWidth / 7',
+    borderRadius: '$deviceWidth / 14',
+    borderColor: '#357ce6',
    borderWidth: 1,
-    backgroundColor: "transparent",
-    alignItems: "center",
-    justifyContent: "center",
+    backgroundColor: 'transparent',
+    alignItems: 'center',
+    justifyContent: 'center',
  },
  buttonText: {
-    color: "#357ce6",
-    fontSize: 16,
+    color: '#357ce6',
+    fontSize: 24,
+    fontWeight: '500',
  },
 });
--- a/src/components/buttons/views/iconButtomView.js
+++ b/src/components/buttons/views/iconButtomView.js
@ -1,9 +1,9 @@
-import React, { Component } from "react";
-import { TouchableOpacity, Platform } from "react-native";
-import Ionicons from "react-native-vector-icons/Ionicons";
+import React, { Component } from 'react';
+import { TouchableOpacity, Platform } from 'react-native';
+import Ionicons from 'react-native-vector-icons/Ionicons';

 // Styles
-import styles from "./iconButtonStyles";
+import styles from './iconButtonStyles';

 /*
 *            Props Name        Description                                     Value
@ -37,7 +37,7 @@ class IconButtonView extends Component {
    const { name, androidName } = this.props;

    if (name) {
-      const isIos = Platform.OS === "ios";
+      const isIos = Platform.OS === 'ios';
      let iconName;

      if (isIos) {
@ -52,20 +52,15 @@ class IconButtonView extends Component {

  render() {
    const {
-      buttonStyle,
-      size,
-      style,
-      isCircle,
-      color,
-      buttonColor,
+      buttonStyle, size, style, isCircle, color, buttonColor,
    } = this.props;

    return (
      <TouchableOpacity
        style={[
-          buttonStyle,
          isCircle && styles.circleButton,
          buttonColor && { backgroundColor: buttonColor },
+          buttonStyle,
        ]}
        onPress={() => this._handleOnPress()}
      >
--- a/src/components/numericKeyboard/views/numericKeyboardStyles.js
+++ b/src/components/numericKeyboard/views/numericKeyboardStyles.js
@ -1,28 +1,34 @@
-import EStyleSheet from "react-native-extended-stylesheet";
+import EStyleSheet from 'react-native-extended-stylesheet';

 export default EStyleSheet.create({
  container: {
    flex: 1,
-    flexDirection: "column",
-    alignItems: "center",
-    justifyContent: "space-between",
-    width: "$deviceWidth / 1.8",
+    flexDirection: 'column',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: '$deviceWidth / 1.8',
  },
  buttonGroup: {
-    width: "100%",
+    width: '100%',
    flex: 1,
-    flexDirection: "row",
-    justifyContent: "space-between",
+    flexDirection: 'row',
+    justifyContent: 'space-between',
  },
  lastButtonGroup: {
-    width: "63%",
+    width: '63%',
    flex: 1,
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignSelf: "flex-end",
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignSelf: 'flex-end',
  },
  iconButton: {
-    fontSize: 20,
-    color: "$primaryBlue",
+    fontSize: 25,
+    color: '$primaryBlue',
+  },
+  buttonWithoutBorder: {
+    borderWidth: 0,
+  },
+  button: {
+    borderColor: 'rgba(53, 124, 230, 0.2)',
  },
 });
--- a/src/components/numericKeyboard/views/numericKeyboardView.js
+++ b/src/components/numericKeyboard/views/numericKeyboardView.js
@ -94,12 +94,12 @@ class NumericKeyboard extends Component {
            value={0}
            onPress={value => onPress && onPress(value)}
          />
-
          <IconButton
            handleOnPress={() => onPress && onPress('clear')}
            isCircle
+            buttonStyle={styles.buttonWithoutBorder}
            style={styles.iconButton}
-            name="close"
+            name="arrow-round-back"
          />
        </View>
      </View>
--- a/src/components/pinAnimatedInput/views/pinAnimatedInputStyles.js
+++ b/src/components/pinAnimatedInput/views/pinAnimatedInputStyles.js
@ -1,22 +1,28 @@
-import EStyleSheet from "react-native-extended-stylesheet";
+import EStyleSheet from 'react-native-extended-stylesheet';

 export default EStyleSheet.create({
  container: {
-    flexDirection: "row",
-    alignSelf: "center",
+    flexDirection: 'row',
+    alignSelf: 'center',
  },
  activeInput: {
-    backgroundColor: "$primaryBlue",
+    backgroundColor: '$primaryBlue',
+    height: 10,
+    width: 10,
+    borderRadius: 20 / 2,
+  },
+  inputWithBackground: {
+    backgroundColor: '$primaryBlue',
  },
  input: {
-    alignItems: "center",
-    justifyContent: "center",
-    height: 20,
-    margin: 5,
-    width: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: 18,
+    margin: 10,
+    width: 18,
    borderRadius: 20 / 2,
    borderWidth: 1,
-    borderColor: "$primaryBlue",
-    backgroundColor: "#fff",
+    borderColor: '$primaryBlue',
+    backgroundColor: '$white',
  },
 });
--- a/src/components/pinAnimatedInput/views/pinAnimatedInputView.js
+++ b/src/components/pinAnimatedInput/views/pinAnimatedInputView.js
@ -1,8 +1,8 @@
-import React, { Component } from "react";
-import { Animated } from "react-native";
+import React, { Component } from 'react';
+import { Animated } from 'react-native';

 // Styles
-import styles from "./pinAnimatedInputStyles";
+import styles from './pinAnimatedInputStyles';

 class PinAnimatedInput extends Component {
  /* Props
@ -32,21 +32,26 @@ class PinAnimatedInput extends Component {
        ]}
      >
        {[...Array(4)].map((val, index) => {
-          if (pin.length > index) {
+          if (pin.length - 1 === index) {
            return (
+              <Animated.View key={`passwordItem-${index}`} style={styles.input}>
                <Animated.View
-                key={"passwordItem-" + index}
+                  key={`passwordItem-${index}`}
                  style={[styles.input, styles.activeInput]}
                />
+              </Animated.View>
            );
-          } else {
+          } if (pin.length > index) {
            return (
+              <Animated.View key={`passwordItem-${index}`} style={styles.input}>
                <Animated.View
-                key={"passwordItem-" + index}
-                style={styles.input}
+                  key={`passwordItem-${index}`}
+                  style={[styles.input, styles.inputWithBackground]}
                />
+              </Animated.View>
            );
          }
+          return <Animated.View key={`passwordItem-${index}`} style={styles.input} />;
        })}
      </Animated.View>
    );
--- a/src/components/sideMenu/view/sideMenuStyles.js
+++ b/src/components/sideMenu/view/sideMenuStyles.js
@ -59,7 +59,7 @@ export default EStyleSheet.create({
  },
  buttonText: {
    fontSize: 18,
-    fontFamily: '$primaryFontFamily',
+    fontFamily: '$primaryFont',
    textAlign: 'center',
    margin: 10,
    color: '$white',
--- a/src/screens/pinCode/screen/pinCodeScreen.js
+++ b/src/screens/pinCode/screen/pinCodeScreen.js
@ -52,7 +52,7 @@ class PinCodeScreen extends Component {
    return (
      <Container style={styles.container}>
        <View style={styles.logoView}>
-          <Logo />
+          <Logo style={styles.logo} />
        </View>
        <View style={styles.titleView}>
          <Text style={styles.title}>{`@${username}`}</Text>
--- a/src/screens/pinCode/screen/pinCodeStyles.js
+++ b/src/screens/pinCode/screen/pinCodeStyles.js
@ -1,47 +1,50 @@
-import EStyleSheet from "react-native-extended-stylesheet";
+import EStyleSheet from 'react-native-extended-stylesheet';

 export default EStyleSheet.create({
  container: {
    flex: 1,
-    paddingTop: "$deviceHeight / 15",
+    paddingTop: '$deviceHeight / 15',
  },
  logoView: {
    flex: 2,
  },
+  logo: {
+    width: '$deviceWidth / 7',
+  },
  titleView: {
    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
+    justifyContent: 'center',
+    alignItems: 'center',
  },
  title: {
-    color: "#357ce6",
+    color: '#357ce6',
    fontSize: 20,
-    fontWeight: "bold",
+    fontWeight: 'bold',
  },
  informationView: {
    flex: 1,
-    alignItems: "center",
+    alignItems: 'center',
  },
  animatedView: {
    flex: 1,
-    alignItems: "center",
+    alignItems: 'center',
  },
  numericKeyboardView: {
    flex: 6,
-    justifyContent: "center",
-    alignItems: "center",
-    alignSelf: "center",
+    justifyContent: 'center',
+    alignItems: 'center',
+    alignSelf: 'center',
  },
  forgotButtonView: {
    flex: 2,
-    justifyContent: "center",
-    alignItems: "center",
+    justifyContent: 'center',
+    alignItems: 'center',
  },
  forgotButtonText: {
-    color: "#788187",
+    color: '$primaryDarkGray',
    fontSize: 14,
    marginTop: 25,
-    alignSelf: "center",
+    alignSelf: 'center',
    marginBottom: 25,
  },
 });
--- a/src/screens/splash/container/splashContainer.js
+++ b/src/screens/splash/container/splashContainer.js
@ -18,7 +18,8 @@ class SplashContainer extends Component {
    getAuthStatus().then((res) => {
      getUserData().then((response) => {
        if (response) {
-          navigation.navigate(ROUTES.DRAWER.MAIN);
+          navigation.navigate(ROUTES.SCREENS.PINCODE);
+          // navigation.navigate(ROUTES.DRAWER.MAIN);
        } else {
          navigation.navigate(ROUTES.SCREENS.LOGIN);
        }
--- a/src/styles/logo.styles.js
+++ b/src/styles/logo.styles.js
@ -1,14 +1,15 @@
-import EStyleSheet from "react-native-extended-stylesheet";
+import EStyleSheet from 'react-native-extended-stylesheet';

 export default EStyleSheet.create({
  container: {
    flex: 1,
-    alignItems: "center",
-    justifyContent: "center"
+    alignItems: 'center',
+    justifyContent: 'center',
  },
  logo: {
-    width: "100%",
-    height: "100%",
-    backgroundColor: "transparent"
-  }
+    alignSelf: 'center',
+    width: '100%',
+    height: '100%',
+    backgroundColor: 'transparent',
+  },
 });