From 1f227b51cfbff4f132844f8fa703e9ea5ebd5780 Mon Sep 17 00:00:00 2001
From: Ivan Chen <ivan@tagg.id>
Date: Fri, 21 May 2021 21:33:48 -0400
Subject: Clean up styles

---
 src/screens/moments/TagSelectionScreen.tsx | 34 +++++++++++-------------------
 src/screens/profile/CaptionScreen.tsx      | 27 ++++++++++++------------
 2 files changed, 26 insertions(+), 35 deletions(-)

diff --git a/src/screens/moments/TagSelectionScreen.tsx b/src/screens/moments/TagSelectionScreen.tsx
index 8d679b87..a698a07b 100644
--- a/src/screens/moments/TagSelectionScreen.tsx
+++ b/src/screens/moments/TagSelectionScreen.tsx
@@ -1,13 +1,8 @@
+import {useBottomTabBarHeight} from '@react-navigation/bottom-tabs';
 import {useNavigation} from '@react-navigation/core';
 import {RouteProp} from '@react-navigation/native';
 import React, {useEffect, useState} from 'react';
-import {
-  SafeAreaView,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
 import {FlatList} from 'react-native-gesture-handler';
 import BackIcon from '../../assets/icons/back-arrow.svg';
 import {SearchBar, TaggUserSelectionCell} from '../../components';
@@ -16,10 +11,12 @@ import {MainStackParams} from '../../routes';
 import {loadSearchResults} from '../../services';
 import {ProfilePreviewType} from '../../types';
 import {
+  isIPhoneX,
   loadTaggUserSuggestions,
   normalize,
   SCREEN_HEIGHT,
   SCREEN_WIDTH,
+  StatusBarHeight,
 } from '../../utils';
 
 type TagSelectionScreenRouteProps = RouteProp<
@@ -39,6 +36,7 @@ const TagSelectionScreen: React.FC<TagSelectionScreenProps> = ({route}) => {
   const [searching, setSearching] = useState(false);
   const [query, setQuery] = useState<string>('');
   const [label, setLabel] = useState<string>('Recent');
+  const paddingBottom = useBottomTabBarHeight();
 
   /*
    * Add back button, Send selected users to CaptionScreen
@@ -112,7 +110,7 @@ const TagSelectionScreen: React.FC<TagSelectionScreenProps> = ({route}) => {
   }, [query]);
 
   return (
-    <SafeAreaView style={styles.safeAreaView}>
+    <View style={styles.container}>
       <View style={styles.searchBarContainer}>
         <SearchBar
           onChangeText={setQuery}
@@ -122,10 +120,11 @@ const TagSelectionScreen: React.FC<TagSelectionScreenProps> = ({route}) => {
           value={query}
         />
       </View>
-      <Text style={styles.title}>{label}</Text>
+      {label !== '' && <Text style={styles.title}>{label}</Text>}
       {users && (
         <FlatList
           data={users}
+          contentContainerStyle={{paddingBottom: paddingBottom}}
           keyExtractor={(item) => item.id}
           renderItem={(item) => (
             <TaggUserSelectionCell
@@ -137,12 +136,13 @@ const TagSelectionScreen: React.FC<TagSelectionScreenProps> = ({route}) => {
           )}
         />
       )}
-    </SafeAreaView>
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
-  safeAreaView: {
+  container: {
+    paddingTop: StatusBarHeight,
     backgroundColor: 'white',
     height: SCREEN_HEIGHT,
   },
@@ -153,24 +153,14 @@ const styles = StyleSheet.create({
   searchBarContainer: {
     width: SCREEN_WIDTH * 0.9,
     alignSelf: 'flex-end',
-    marginTop: 10,
-  },
-  searchContainer: {
-    alignSelf: 'center',
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    width: '100%',
-    height: normalize(42),
-    alignItems: 'center',
+    marginTop: isIPhoneX() ? 15 : 12,
     marginBottom: '3%',
-    marginHorizontal: 10,
   },
   title: {
     fontWeight: '700',
     fontSize: normalize(17),
     lineHeight: normalize(20.29),
     marginHorizontal: '7%',
-    marginTop: '4%',
     marginBottom: '2%',
   },
 });
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 2fe30645..188ccc1f 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -168,7 +168,14 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
               onChange={setCaption}
               partTypes={mentionPartTypes('blue')}
             />
-            <View
+            <TouchableOpacity
+              onPress={() =>
+                navigation.navigate('TagFriendsScreen', {
+                  image: image,
+                  screenType: screenType,
+                  selectedUsers: taggedUsers,
+                })
+              }
               style={{
                 marginHorizontal: '5%',
                 marginTop: '3%',
@@ -194,17 +201,8 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
                 {taggedList}
                 {taggedList.length > 21 ? '. . .' : ''}
               </Text>
-              <TouchableOpacity
-                onPress={() =>
-                  navigation.navigate('TagFriendsScreen', {
-                    image: image,
-                    screenType: screenType,
-                    selectedUsers: taggedUsers,
-                  })
-                }>
-                <FrontArrow width={12} height={12} color={'white'} />
-              </TouchableOpacity>
-            </View>
+              <FrontArrow width={12} height={12} color={'white'} />
+            </TouchableOpacity>
           </View>
         </KeyboardAvoidingView>
       </TouchableWithoutFeedback>
@@ -256,7 +254,10 @@ const styles = StyleSheet.create({
     letterSpacing: normalize(0.3),
     fontWeight: '600',
   },
-  tagFriendsContainer: {flexDirection: 'row', marginTop: '3%'},
+  tagFriendsContainer: {
+    flexDirection: 'row',
+    marginTop: '3%',
+  },
 });
 
 export default CaptionScreen;
-- 
cgit v1.2.3-70-g09d2