From 644ba3ebeec125e3cfa2811f5ec35b0ee13306ad Mon Sep 17 00:00:00 2001
From: Pablo Carballeda <pcarballeda@gmail.com>
Date: Tue, 24 Jan 2023 19:49:59 +0100
Subject: [PATCH] Minor UI fixes

-Spacing in add contact bottom sheet.
-Properly position FABs in some views.
---
 frontend/Pages/ContactsFeed/index.tsx      | 19 ++++++++++++++++---
 frontend/Pages/ConversationsFeed/index.tsx |  2 +-
 frontend/Pages/HomeFeed/index.tsx          |  2 +-
 3 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/frontend/Pages/ContactsFeed/index.tsx b/frontend/Pages/ContactsFeed/index.tsx
index 66f6f389..3455b9eb 100644
--- a/frontend/Pages/ContactsFeed/index.tsx
+++ b/frontend/Pages/ContactsFeed/index.tsx
@@ -186,7 +186,9 @@ export const ContactsFeed: React.FC = () => {
     return {
       container: {
         backgroundColor: theme.colors.background,
-        padding: 16,
+        paddingLeft: 16,
+        paddingRight: 16,
+        paddingBottom: 32,
         borderTopRightRadius: 28,
         borderTopLeftRadius: 28,
       },
@@ -312,7 +314,7 @@ export const ContactsFeed: React.FC = () => {
       {renderScene[tabKey]}
       {privateKey && (
         <AnimatedFAB
-          style={[styles.fab, { top: Dimensions.get('window').height - 200 }]}
+          style={[styles.fab, { top: Dimensions.get('window').height - 220 }]}
           icon='account-multiple-plus-outline'
           label='Label'
           onPress={() => bottomSheetAddContactRef.current?.open()}
@@ -325,7 +327,6 @@ export const ContactsFeed: React.FC = () => {
       <RBSheet
         ref={bottomSheetProfileRef}
         closeOnDragDown={true}
-        height={280}
         customStyles={bottomSheetStyles}
       >
         <ProfileCard userPubKey={profileCardPubkey ?? ''} bottomSheetRef={bottomSheetProfileRef} />
@@ -341,6 +342,7 @@ export const ContactsFeed: React.FC = () => {
           <Text variant='titleLarge'>{t('contactsFeed.addContactTitle')}</Text>
           <Text variant='bodyMedium'>{t('contactsFeed.addContactDescription')}</Text>
           <TextInput
+            style={styles.input}
             mode='outlined'
             label={t('contactsFeed.addContact') ?? ''}
             onChangeText={setContactInput}
@@ -354,6 +356,7 @@ export const ContactsFeed: React.FC = () => {
             }
           />
           <Button
+            style={styles.addContactButton}
             mode='contained'
             disabled={!contactInput || contactInput === ''}
             onPress={onPressAddContact}
@@ -396,6 +399,16 @@ const styles = StyleSheet.create({
     justifyContent: 'space-between',
     height: 70,
   },
+  bottomSheet: {
+    paddingBottom: 24
+  },
+  input: {
+    marginTop: 16,
+    marginBottom: 16
+  },
+  addContactButton: {
+    marginBottom: 16
+  },
   tab: {
     flex: 1,
     height: '100%',
diff --git a/frontend/Pages/ConversationsFeed/index.tsx b/frontend/Pages/ConversationsFeed/index.tsx
index 21e3f777..3ae929e0 100644
--- a/frontend/Pages/ConversationsFeed/index.tsx
+++ b/frontend/Pages/ConversationsFeed/index.tsx
@@ -245,7 +245,7 @@ export const ConversationsFeed: React.FC = () => {
         </View>
       )}
       <AnimatedFAB
-        style={[styles.fab, { top: Dimensions.get('window').height - 200 }]}
+        style={[styles.fab, { top: Dimensions.get('window').height - 220 }]}
         icon='pencil-outline'
         label='Label'
         onPress={() => bottomSheetCreateRef.current?.open()}
diff --git a/frontend/Pages/HomeFeed/index.tsx b/frontend/Pages/HomeFeed/index.tsx
index 122bc840..4f04dba1 100644
--- a/frontend/Pages/HomeFeed/index.tsx
+++ b/frontend/Pages/HomeFeed/index.tsx
@@ -201,7 +201,7 @@ export const HomeFeed: React.FC<HomeFeedProps> = ({ navigation }) => {
       )}
       {privateKey && (
         <AnimatedFAB
-          style={[styles.fab, { top: Dimensions.get('window').height - 200 }]}
+          style={[styles.fab, { top: Dimensions.get('window').height - 220 }]}
           icon='pencil-outline'
           label='Label'
           onPress={() => navigate('Send')}