Browse Source

#146 - Styling sign in screen

Elena Cristina Raffay Iglesias 1 year ago
parent
commit
853a4c496b

BIN
apps/wallet/assets/images/decode-hexagon.png


+ 31 - 16
apps/wallet/screens/Home.js

@@ -1,6 +1,6 @@
1 1
 import React from 'react';
2 2
 import { connect } from 'react-redux';
3
-import { Image, TextInput, View } from 'react-native';
3
+import { Image, Text, TextInput, View, KeyboardAvoidingView } from 'react-native';
4 4
 import { SecureStore } from 'expo';
5 5
 import PropTypes from 'prop-types';
6 6
 import { goQRScannerIntro, goToPetitionSummary } from '../application/redux/actions/navigation';
@@ -42,23 +42,38 @@ class Home extends React.Component {
42 42
 
43 43
   render() {
44 44
     return (
45
-      <View style={styles.homeContainer}>
46
-        <Image
47
-          style={styles.homeLogo}
48
-          source={decodeLogo}
49
-          resizeMode="center"
50
-        />
51
-        <View style={styles.homeTextInput}>
52
-          <TextInput
53
-            style={styles.homePassword}
54
-            secureTextEntry
55
-            underlineColorAndroid="rgb(0,163,158)"
56
-            onChangeText={pin => this.props.updatePin(pin)}
57
-            value={this.props.pinCode}
45
+      <KeyboardAvoidingView
46
+        behavior="position"
47
+        keyboardVerticalOffset={50}
48
+      >
49
+        <View style={styles.homeContainer}>
50
+          <Image
51
+            style={styles.homeLogo}
52
+            source={decodeLogo}
58 53
           />
54
+          <View style={styles.homeTextInput}>
55
+            <Text style={{ marginVertical: 10 }}>PIN:&nbsp;&nbsp;</Text>
56
+            <TextInput
57
+              style={styles.homePassword}
58
+              placeholder=" Pin"
59
+              secureTextEntry
60
+              underlineColorAndroid="transparent"
61
+              onChangeText={pin => this.props.updatePin(pin)}
62
+              value={this.props.pinCode}
63
+            />
64
+          </View>
65
+          <View style={{ flexDirection: 'row' }}>
66
+            <Button
67
+              name="Sign In"
68
+              onPress={this.goToNextPage}
69
+              style={{
70
+                width: 150,
71
+                alignItems: 'center',
72
+              }}
73
+            />
74
+          </View>
59 75
         </View>
60
-        <Button name="LOG IN" onPress={this.goToNextPage} />
61
-      </View>
76
+      </KeyboardAvoidingView>
62 77
     );
63 78
   }
64 79
 }

+ 15 - 12
apps/wallet/screens/styles.js

@@ -1,9 +1,5 @@
1 1
 import { Platform, StyleSheet } from 'react-native';
2 2
 
3
-
4
-export const TURQUOISE = 'rgb(73,162,153)';
5
-export const PPP = '001dcb';
6
-
7 3
 const styles = StyleSheet.create({
8 4
 
9 5
   authorisationBox: {
@@ -54,21 +50,28 @@ const styles = StyleSheet.create({
54 50
   homeContainer: {
55 51
     alignItems: 'center',
56 52
     backgroundColor: '#fff',
57
-    flex: 1,
58 53
   },
59 54
   homeLogo: {
60
-    marginTop: 30,
61
-    flex: 2,
55
+    height: 275,
56
+    marginTop: 75,
57
+    marginBottom: 50,
58
+    width: 320,
62 59
   },
63 60
   homePassword: {
64
-    height: Platform.OS === 'ios' ? 30 : 40,
65
-    width: 300,
61
+    height: Platform.OS === 'ios' ? 35 : 40,
62
+    width: 150,
63
+    borderWidth: 1,
64
+    alignItems: 'center',
65
+    paddingHorizontal: 10,
66 66
   },
67 67
   homeTextInput: {
68
-    borderBottomWidth: Platform.OS === 'ios' ? 1 : 0,
69
-    borderColor: TURQUOISE,
70 68
     marginBottom: 20,
71
-    flex: 1,
69
+    marginRight: 32,
70
+    flexDirection: 'row',
71
+  },
72
+  homeWelcomeMessage: {
73
+    fontSize: 18,
74
+    marginBottom: 30,
72 75
   },
73 76
   petitionDescription: {
74 77
     color: 'rgba(0, 0, 0, 0.87)',