From ac268d4a3dfe73418a95d6bc5dd5f006470a7967 Mon Sep 17 00:00:00 2001
From: Roland Osborne <rolandosborne@gmail.com>
Date: Tue, 12 Sep 2023 17:43:13 -0700
Subject: [PATCH] removing float label input, maybe related to oom crash

---
 app/mobile/src/constants/Colors.js            |  6 +-
 app/mobile/src/constants/Strings.js           | 18 ++++-
 app/mobile/src/session/profile/Profile.jsx    | 80 ++++++++-----------
 .../src/session/profile/Profile.styled.js     | 34 +++++++-
 app/mobile/src/utils/InputField.jsx           | 16 ++++
 5 files changed, 99 insertions(+), 55 deletions(-)
 create mode 100644 app/mobile/src/utils/InputField.jsx

diff --git a/app/mobile/src/constants/Colors.js b/app/mobile/src/constants/Colors.js
index 9a7d086c..3cfec076 100644
--- a/app/mobile/src/constants/Colors.js
+++ b/app/mobile/src/constants/Colors.js
@@ -66,8 +66,8 @@ const DarkColors = {
   unsetText: '#aaaaaa',
   descriptionText: '#bbbbbb',
   text: '#ffffff',
-  screenBase: '#333333',
-  areaBase: '#555555',
+  screenBase: '#222222',
+  areaBase: '#444444',
   modalBase: '#111111',
   modalOverlay: 'rgba(88,88,88,0.8)',
   headerBar: '#555555',
@@ -99,7 +99,7 @@ const DarkColors = {
   disabledIndicator: '#eeeeee',
   disconnectedIndicator: '#aa0000',
   sliderGrip: '#eeeeee',
-  areaBorder: '#ffffff',
+  areaBorder: '#aaaaaa',
 };
 
 function getColor(label) {
diff --git a/app/mobile/src/constants/Strings.js b/app/mobile/src/constants/Strings.js
index b9a585eb..d57205f3 100644
--- a/app/mobile/src/constants/Strings.js
+++ b/app/mobile/src/constants/Strings.js
@@ -81,6 +81,9 @@ const Strings = [
     registryVisible: 'Visible in Registry',
     editImage: 'Edit Image',
     editDetails: 'Edit Details',
+
+    // contacts page
+    add: 'Add',
   },
   {
     visibleRegistry: 'Visible dans le Registre',
@@ -158,7 +161,10 @@ const Strings = [
     description: 'Description',
     registryVisible: 'Visible dans le Registre',
     editImage: 'Modifier l\'Image',
-    editDetails: 'Modifier les Détails', 
+    editDetails: 'Modifier les Détails',
+
+    //constacts page
+    add: 'Ajouter',
   },
   {
     visibleRegistry: 'Visible en el Registro',
@@ -236,7 +242,10 @@ const Strings = [
     description: 'Descripción',
     registryVisible: 'Visible en el Registro',
     editImage: 'Editar Imagen',
-    editDetails: 'Editar Detalles', 
+    editDetails: 'Editar Detalles',
+
+    // contacts page
+    add: 'Agregar', 
   },
   {
     visibleRegistry: 'Sichtbar in der Registrierung',
@@ -314,7 +323,10 @@ const Strings = [
     description: 'Beschreibung',
     registryVisible: 'Sichtbar in der Registrierung',
     editImage: 'Bild Bearbeiten',
-    editDetails: 'Details bearbeiten', 
+    editDetails: 'Details Bearbeiten',
+    
+    //contacts page
+    add: 'Hinzufügen',
   }
 ];
 
diff --git a/app/mobile/src/session/profile/Profile.jsx b/app/mobile/src/session/profile/Profile.jsx
index 92bd48d1..3a65938a 100644
--- a/app/mobile/src/session/profile/Profile.jsx
+++ b/app/mobile/src/session/profile/Profile.jsx
@@ -1,4 +1,4 @@
-import { ActivityIndicator, KeyboardAvoidingView, Image, Modal, View, Switch, Text, ScrollView, TextInput, TouchableOpacity, Alert } from 'react-native';
+import { ActivityIndicator, KeyboardAvoidingView, Image, Modal, View, Switch, Text, Platform, ScrollView, TextInput, TouchableOpacity, Alert } from 'react-native';
 import { useState } from 'react';
 import AntIcons from 'react-native-vector-icons/AntDesign';
 import MatIcons from 'react-native-vector-icons/MaterialCommunityIcons';
@@ -8,6 +8,7 @@ import { FloatingLabelInput } from 'react-native-floating-label-input';
 import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
 import { Menu, MenuOptions, MenuOption, MenuTrigger } from 'react-native-popup-menu';
 import { Colors } from 'constants/Colors';
+import { InputField } from 'utils/InputField';
 import { useProfile } from './useProfile.hook';
 import { styles } from './Profile.styled';
 import avatar from 'images/avatar.png';
@@ -142,74 +143,63 @@ export function Profile() {
         supportedOrientations={['portrait', 'landscape']}
         onRequestClose={actions.hideDetails}
       >
-        <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black">
-          <View style={styles.modalContainer}>
-            <View style={styles.modalClose}>
-              <TouchableOpacity style={styles.dismissButton} activeOpacity={1} onPress={actions.hideDetails}>
-                <MatIcons name="close" size={20} color={Colors.descriptionText} />
-              </TouchableOpacity>
-            </View>
-            <Text style={styles.modalHeader}>{ state.strings.editDetails }</Text>
+          <KeyboardAvoidingView behavior={Platform.OS === 'ios' ? 'padding' : 'height'}>
+          <BlurView style={styles.modalOverlay} blurType={Colors.overlay} blurAmount={2} reducedTransparencyFallbackColor="black">
+            <View style={styles.modalContainer}>
+              <View style={styles.modalClose}>
+                <TouchableOpacity style={styles.dismissButton} activeOpacity={1} onPress={actions.hideDetails}>
+                  <MatIcons name="close" size={20} color={Colors.descriptionText} />
+                </TouchableOpacity>
+              </View>
+              <Text style={styles.modalHeader}>{ state.strings.editDetails }</Text>
 
-            <View style={styles.modalInput}>
-              <FloatingLabelInput
+              <InputField
                 label={state.strings.name}
                 value={state.detailName}
                 autoCapitalize={'none'}
                 spellCheck={false}
-                inputStyles={styles.floatingInput}
-                labelStyles={styles.floatingLabel}
-                customLabelStyles={styles.floatingCustomLabel}
-                containerStyles={styles.floatingContainer}
+                multiline={false}
+                style={styles.field}
                 onChangeText={actions.setDetailName}
               />
-            </View>
 
-            <View style={styles.modalInput}>
-              <FloatingLabelInput
+              <InputField
                 label={state.strings.location}
                 value={state.detailLocation}
                 autoCapitalize={'none'}
                 spellCheck={false}
-                inputStyles={styles.floatingInput}
-                labelStyles={styles.floatingLabel}
-                customLabelStyles={styles.floatingCustomLabel}
-                containerStyles={styles.floatingContainer}
+                multiline={false}
+                style={styles.field}
                 onChangeText={actions.setDetailLocation}
               />
-            </View>
 
-            <View style={styles.modalInput}>
-              <FloatingLabelInput
+              <InputField
                 label={state.strings.description}
                 value={state.detailDescription}
                 autoCapitalize={'none'}
                 spellCheck={false}
                 multiline={true}
-                inputStyles={styles.floatingInput}
-                labelStyles={styles.floatingLabel}
-                customLabelStyles={styles.floatingCustomLabel}
-                containerStyles={styles.floatingContainer}
+                style={styles.field}
                 onChangeText={actions.setDetailDescription}
               />
-            </View>
 
-            <View style={styles.buttons}>
-              <TouchableOpacity style={styles.cancelButton} activeOpacity={1} onPress={actions.hideDetails}>
-                <Text style={styles.cancelButtonText}>{ state.strings.cancel }</Text>
-              </TouchableOpacity>
-              <TouchableOpacity style={styles.saveButton} activeOpacity={1} onPress={saveDetails}>
-                { busyDetail && (
-                  <ActivityIndicator animating={true} color={Colors.primaryButtonText} />
-                )}
-                { !busyDetail && (
-                  <Text style={styles.saveButtonText}>{ state.strings.save }</Text>
-                )}
-              </TouchableOpacity>
-            </View>
+              <View style={styles.buttons}>
+                <TouchableOpacity style={styles.cancelButton} activeOpacity={1} onPress={actions.hideDetails}>
+                  <Text style={styles.cancelButtonText}>{ state.strings.cancel }</Text>
+                </TouchableOpacity>
+                <TouchableOpacity style={styles.saveButton} activeOpacity={1} onPress={saveDetails}>
+                  { busyDetail && (
+                    <ActivityIndicator animating={true} color={Colors.primaryButtonText} />
+                  )}
+                  { !busyDetail && (
+                    <Text style={styles.saveButtonText}>{ state.strings.save }</Text>
+                  )}
+                </TouchableOpacity>
+              </View>
 
-          </View>
-        </BlurView>
+            </View>
+          </BlurView>
+        </KeyboardAvoidingView>
       </Modal>
 
     </ScrollView>
diff --git a/app/mobile/src/session/profile/Profile.styled.js b/app/mobile/src/session/profile/Profile.styled.js
index d96d15b0..88cc2104 100644
--- a/app/mobile/src/session/profile/Profile.styled.js
+++ b/app/mobile/src/session/profile/Profile.styled.js
@@ -92,17 +92,17 @@ export const styles = StyleSheet.create({
     display: 'flex',
     alignItems: 'center',
     flexDirection: 'row',
-    padding: 4,
-    height: 48,
+    padding: 8,
   },
   icon: {
     paddingLeft: 8,
-    paddingRight: 8,
+    paddingRight: 16,
   },
   locationSet: {
     fontSize: 16,
     color: Colors.text,
     fontFamily: 'roboto',
+    flex: 1,
   },
   locationUnset: {
     fontSize: 16,
@@ -114,6 +114,7 @@ export const styles = StyleSheet.create({
     fontSize: 16,
     color: Colors.text,
     fontFamily: 'roboto',
+    flex: 1,
   },
   descriptionUnset: {
     fontSize: 16,
@@ -144,7 +145,7 @@ export const styles = StyleSheet.create({
     borderColor: Colors.areaBorder,
   },
   option: {
-    padding: 4,
+    padding: 6,
     color: Colors.text,
     backgroundColor: Colors.areaBase,
     fontFamily: 'roboto',
@@ -192,6 +193,30 @@ export const styles = StyleSheet.create({
     justifyContent: 'center',
     flexDirection: 'row',
   },
+  field: {
+    input: {
+      backgroundColor: Colors.inputBase,
+      color: Colors.inputText,
+      borderRadius: 8,
+      minHeight: 48,
+      maxHeight: 128,
+      paddingLeft: 8,
+    },
+    label: {
+      height: 16,
+      paddingLeft: 8,
+    },
+    labelText: {
+      color: Colors.inputPlaceholder,
+      fontSize: 12,
+    },
+    container: {
+      width: '100%',
+      paddingLeft: 16,
+      paddingRight: 16,
+      paddingTop: 8,
+    },
+  },
   floatingInput: {
     color: Colors.inputText,
     paddingTop: 20,
@@ -208,6 +233,7 @@ export const styles = StyleSheet.create({
   floatingContainer: {
     paddingHorizontal: 12,
     backgroundColor: Colors.inputBase,
+    width: '100%',
     borderRadius: 8,
     minHeight: 48,
     maxHeight: 128,
diff --git a/app/mobile/src/utils/InputField.jsx b/app/mobile/src/utils/InputField.jsx
new file mode 100644
index 00000000..68b8b87a
--- /dev/null
+++ b/app/mobile/src/utils/InputField.jsx
@@ -0,0 +1,16 @@
+import { TextInput, Text, View } from 'react-native';
+
+export function InputField({ label, value, autoCapitalize, spellCheck, multiline, onChangeText, style }) {
+
+  return (
+    <View style={style?.container}>
+      <View style={style?.label}>
+        { !(value == null || value.length == 0) && (
+          <Text style={style?.labelText}>{ label }</Text>
+        )}
+      </View>
+      <TextInput placeholder={label} lineBreakStategyIOS={'standard'} placeholderTextColor={style?.labelText?.color} value={value} autoCapitalize={autoCapitalize} spellCheck={spellCheck} multiline={multiline} style={style?.input} onChangeText={onChangeText} />
+    </View>
+  );
+}
+