Stylin'

components/labels.js

@@ -106,6 +106,6 @@ export const bleedingPrediction = {
 }
 
 export const passwordPrompt = {
-  title: 'Log in',
+  title: 'Unlock app',
   enterPassword: 'Enter password here'
 }

components/password-prompt.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react'
-import { View, TextInput, TouchableOpacity, Alert } from 'react-native'
+import { View, TextInput, TouchableOpacity, Alert, Image } from 'react-native'
 import nodejs from 'nodejs-mobile-react-native'
 import { AppText } from './app-text'
 import { hasEncryptionObservable } from '../local-storage'
@@ -55,33 +55,37 @@ export default class PasswordPrompt extends Component {
 
   render() {
     return (
-      <View style={styles.passwordPrompt}>
+      <View flex={1}>
         {this.state.showPasswordPrompt &&
-          <View>
+          <View style={styles.passwordPromptPage}>
+            <Image
+              source={require('../assets/drip_small.png')}
+              style={styles.passwordPromptImage}
+            />
             <TextInput
               onChangeText={val => this.setState({ password: val })}
-              style={styles.passwordField}
+              style={styles.passwordPromptField}
               secureTextEntry={true}
               placeholder={passwordPrompt.enterPassword}
             />
             <TouchableOpacity
-              style={styles.settingsButton}
+              style={styles.passwordPromptButton}
               onPress={() => {
                 requestHash(this.state.password)
               }}
             >
-              <AppText style={styles.settingsButtonText}>
+              <AppText style={styles.passwordPromptButtonText}>
                 {passwordPrompt.title}
               </AppText>
             </TouchableOpacity>
             <TouchableOpacity
-              style={styles.settingsButton}
+              style={styles.passwordPromptButton}
               onPress={async () => {
                 await deleteDbAndOpenNew()
                 this.setState({ showApp: true })
               }}
             >
-              <AppText style={styles.settingsButtonText}>
+              <AppText style={styles.passwordPromptButtonText}>
                 {'Delete old db and make unencrypted new'}
               </AppText>
             </TouchableOpacity>

styles/index.js

@@ -170,7 +170,7 @@ export default StyleSheet.create({
     backgroundColor: secondaryColor,
     padding: 10,
     alignItems: 'center',
-    margin: 10
+    margin: 10,
   },
   settingsButtonText: {
     color: fontOnPrimaryColor
@@ -251,16 +251,37 @@ export default StyleSheet.create({
     marginTop: 1
   },
   passwordField: {
-    backgroundColor: 'white',
     padding: 10,
     marginTop: 10,
-    marginHorizontal: 10
+    marginHorizontal: 10,
+    backgroundColor: 'white'
+  },
+  passwordPromptPage: {
+    padding: 30,
+    alignItems: 'center'
+  },
+  passwordPromptField: {
+    padding: 10,
+    marginTop: 10,
+    marginHorizontal: 10,
+    borderBottomWidth: 3,
+    borderBottomColor: primaryColor,
+    width: '100%',
+    fontSize: 20,
+    marginVertical: 20
+  },
+  passwordPromptButton: {
+    backgroundColor: secondaryColor,
+    padding: 10,
+    alignItems: 'center',
+    margin: 10,
+    width: '100%',
+    borderRadius: 10
+  },
+  passwordPromptButtonText: {
+    color: fontOnPrimaryColor,
+    fontSize: 20
   },
-  passwordPrompt: {
-    backgroundColor: 'lightgrey',
-    flex: 1,
-    padding: 30
-  }
 })
 
 export const iconStyles = {