From a74eb4080578efc18d285b26bd3e38b904b497b2 Mon Sep 17 00:00:00 2001
From: Julia Friesel <julia.friesel@gmail.com>
Date: Fri, 14 Sep 2018 13:08:11 +0200
Subject: [PATCH] Stylin'

---
 assets/drip_small.png         | Bin 0 -> 5232 bytes
 components/labels.js          |   2 +-
 components/password-prompt.js |  20 ++++++++++--------
 styles/index.js               |  37 ++++++++++++++++++++++++++--------
 4 files changed, 42 insertions(+), 17 deletions(-)
 create mode 100644 assets/drip_small.png

diff --git a/assets/drip_small.png b/assets/drip_small.png
new file mode 100644
index 0000000000000000000000000000000000000000..abdcde1a17e2008629a6df73d3f44417d5a0f120
GIT binary patch
literal 5232
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

literal 0
HcmV?d00001

diff --git a/components/labels.js b/components/labels.js
index 8c5d427..1c90f88 100644
--- a/components/labels.js
+++ b/components/labels.js
@@ -106,6 +106,6 @@ export const bleedingPrediction = {
 }
 
 export const passwordPrompt = {
-  title: 'Log in',
+  title: 'Unlock app',
   enterPassword: 'Enter password here'
 }
\ No newline at end of file
diff --git a/components/password-prompt.js b/components/password-prompt.js
index 85bed6b..7351689 100644
--- a/components/password-prompt.js
+++ b/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>
diff --git a/styles/index.js b/styles/index.js
index 00b958d..82c6e71 100644
--- a/styles/index.js
+++ b/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 = {