From c3bed9ba177af1ecd4b14b9739d85c9e8331d7db Mon Sep 17 00:00:00 2001
From: Hope Tambala <hopetambala@outlook.com>
Date: Tue, 6 Oct 2020 00:28:19 -0400
Subject: [PATCH] feat: change styling of forms view

---
 .../FormikFields/PaperInputPicker/index.js    | 40 +++----------------
 .../PaperInputPicker/index.style.js           | 29 ++++++++++++++
 .../Forms/IdentificationForm/config/config.js | 38 +++++++++---------
 package-lock.json                             | 14 +++----
 4 files changed, 60 insertions(+), 61 deletions(-)

diff --git a/components/FormikFields/PaperInputPicker/index.js b/components/FormikFields/PaperInputPicker/index.js
index 3306c2e96..1029c4987 100644
--- a/components/FormikFields/PaperInputPicker/index.js
+++ b/components/FormikFields/PaperInputPicker/index.js
@@ -1,16 +1,18 @@
 import * as React from 'react';
 import {
-  View, Text, StyleSheet
+  View, Text
 } from 'react-native';
 import {
-  TextInput, Button, Title
+  TextInput, Button, Headline
 } from 'react-native-paper';
 
 import AutoFill from './AutoFill';
 import HouseholdManager from './HouseholdManager';
 
 import getLocation from '../../../modules/geolocation';
+
 import { theme, layout } from '../../../modules/theme';
+import styles from './index.style';
 
 const PaperInputPicker = ({
   data, formikProps, scrollViewScroll, setScrollViewScroll, ...rest
@@ -103,20 +105,9 @@ const PaperInputPicker = ({
           />
         </View>
       )}
-      {fieldType === 'topLabel' && (
-        <View>
-          <Title>{label}</Title>
-          <View
-            style={styles.horizontalLine}
-          />
-        </View>
-      )}
       {fieldType === 'header' && (
         <View>
-          <View
-            style={styles.horizontalLine}
-          />
-          <Title>{label}</Title>
+          <Headline style={styles.header}>{label}</Headline>
           <View
             style={styles.horizontalLine}
           />
@@ -127,7 +118,7 @@ const PaperInputPicker = ({
           <Text>{label}</Text>
           <View style={styles.multiInputContainer}>
             {data.options.map((result) => (
-              <View style={styles.inputItem}>
+              <View key={result} style={styles.inputItem}>
                 <TextInput
                   label={result}
                   onChangeText={handleChange(result)}
@@ -148,23 +139,4 @@ const PaperInputPicker = ({
   );
 };
 
-const styles = StyleSheet.create({
-  horizontalLine: {
-    borderBottomColor: '#D0D0D0',
-    borderBottomWidth: 1,
-    marginTop: 10,
-    marginBottom: 10,
-
-  },
-  inputItem: {
-    flex: 1,
-    marginHorizontal: 5
-  },
-  multiInputContainer: {
-    flexDirection: 'row'
-  },
-  container: {
-    flexDirection: 'column'
-  }
-});
 export default PaperInputPicker;
diff --git a/components/FormikFields/PaperInputPicker/index.style.js b/components/FormikFields/PaperInputPicker/index.style.js
index e69de29bb..651470d52 100644
--- a/components/FormikFields/PaperInputPicker/index.style.js
+++ b/components/FormikFields/PaperInputPicker/index.style.js
@@ -0,0 +1,29 @@
+import {
+  StyleSheet
+} from 'react-native';
+
+const styles = StyleSheet.create({
+  horizontalLine: {
+    borderBottomColor: '#D0D0D0',
+    borderBottomWidth: 1,
+    marginTop: 10,
+    marginBottom: 10,
+
+  },
+  inputItem: {
+    flex: 1,
+    marginHorizontal: 5
+  },
+  multiInputContainer: {
+    flexDirection: 'row'
+  },
+  container: {
+    flexDirection: 'column'
+  },
+  header: {
+    fontWeight: 'bold',
+    marginTop: 10
+  }
+});
+
+export default styles;
diff --git a/domains/DataCollection/Forms/IdentificationForm/config/config.js b/domains/DataCollection/Forms/IdentificationForm/config/config.js
index 0f657af29..453106cdb 100644
--- a/domains/DataCollection/Forms/IdentificationForm/config/config.js
+++ b/domains/DataCollection/Forms/IdentificationForm/config/config.js
@@ -1,7 +1,9 @@
 const configArray = [
   {
-    label: 'Basic Information',
-    fieldType: 'header'
+    label: 'Demographics',
+    fieldType: 'header',
+    formikKey: 'none_bi',
+
   },
   {
     label: 'First Name',
@@ -16,12 +18,6 @@ const configArray = [
     fieldType: 'input'
 
   },
-  // {
-  //   label: "Relationship",
-  //   formikKey: 'relationship',
-  //   value: "",
-  //   fieldType: "input"
-  // },
   {
     label: 'Nickname',
     formikKey: 'nickname',
@@ -56,10 +52,12 @@ const configArray = [
     value: '',
     fieldType: 'input'
   },
-  {
-    label: 'Basic Information',
-    fieldType: 'header'
-  },
+  // {
+  //   label: 'Demographic Information',
+  //   fieldType: 'header',
+  //   formikKey: 'none_bi2',
+
+  // },
   {
     label: 'Marriage Status',
     formikKey: 'marriageStatus',
@@ -72,11 +70,6 @@ const configArray = [
       'widow'
     ]
   },
-  // {
-  //   label: "Family Relationships",
-  //   formikKey: 'familyRelationships',
-  //   value: ""
-  // },
   {
     label: 'Occupation',
     formikKey: 'occupation',
@@ -100,7 +93,8 @@ const configArray = [
   },
   {
     label: 'Location',
-    fieldType: 'header'
+    fieldType: 'header',
+    formikKey: 'none_location',
   },
   {
     label: 'Community Name',
@@ -123,7 +117,9 @@ const configArray = [
   // },
   {
     label: 'Insurance',
-    fieldType: 'header'
+    fieldType: 'header',
+    formikKey: 'none_insurance',
+
   },
   {
     label: 'Insurance Number',
@@ -162,7 +158,9 @@ const configArray = [
   },
   {
     label: 'Household',
-    fieldType: 'header'
+    fieldType: 'header',
+    formikKey: 'none_household',
+
   },
   {
     label: 'Household',
diff --git a/package-lock.json b/package-lock.json
index b88d33c26..dc40c4243 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "puente-reactnative",
-  "version": "5.6.1",
+  "version": "5.7.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -4255,9 +4255,9 @@
       "dev": true
     },
     "@types/node": {
-      "version": "14.11.2",
-      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.11.2.tgz",
-      "integrity": "sha512-jiE3QIxJ8JLNcb1Ps6rDbysDhN4xa8DJJvuC9prr6w+1tIh+QAbYyNF3tyiZNLDBIuBCf4KEcV2UvQm/V60xfA=="
+      "version": "14.11.4",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-14.11.4.tgz",
+      "integrity": "sha512-KmoLCUeW2cWKkEOQ0gQcECuqOc0g7B7zcmRPQNMT4ntNm0luKv3BTLcqIyWpTxkhLDzLTdMus11j/6DROaZdPw=="
     },
     "@types/normalize-package-data": {
       "version": "2.4.0",
@@ -6524,9 +6524,9 @@
       "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0="
     },
     "electron-to-chromium": {
-      "version": "1.3.576",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.576.tgz",
-      "integrity": "sha512-uSEI0XZ//5ic+0NdOqlxp0liCD44ck20OAGyLMSymIWTEAtHKVJi6JM18acOnRgUgX7Q65QqnI+sNncNvIy8ew=="
+      "version": "1.3.577",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.577.tgz",
+      "integrity": "sha512-dSb64JQSFif/pD8mpVAgSFkbVi6YHbK6JeEziwNNmXlr/Ne2rZtseFK5SM7JoWSLf6gP0gVvRGi4/2ZRhSX/rA=="
     },
     "emoji-regex": {
       "version": "8.0.0",