Adjust most styling for caption screen

2 files changed, 75 insertions, 43 deletions

diff --git a/src/components/moments/CaptionScreenHeader.tsx b/src/components/moments/CaptionScreenHeader.tsx
index 0638c128..cda85e57 100644
--- a/src/components/moments/CaptionScreenHeader.tsx
+++ b/src/components/moments/CaptionScreenHeader.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import {Text, View, StyleSheet, ViewProps} from 'react-native';
+import {normalize} from '../../utils';
 interface CaptionScreenHeaderProps extends ViewProps {
   title: string;
 }
@@ -26,8 +27,8 @@ const styles = StyleSheet.create({
     width: '90%',
   },
   header: {
-    fontSize: 20,
-    fontWeight: 'bold',
+    fontSize: normalize(18),
+    fontWeight: '700',
     color: 'white',
     textAlign: 'center',
   },
diff --git a/src/screens/profile/CaptionScreen.tsx b/src/screens/profile/CaptionScreen.tsx
index 2c5356c0..1d2946bb 100644
--- a/src/screens/profile/CaptionScreen.tsx
+++ b/src/screens/profile/CaptionScreen.tsx
@@ -4,6 +4,7 @@ import React, {FC, useEffect, useState} from 'react';
 import {
   Alert,
   Image,
+  ImageSourcePropType,
   Keyboard,
   KeyboardAvoidingView,
   Platform,
@@ -13,7 +14,8 @@ import {
   TouchableWithoutFeedback,
   View,
 } from 'react-native';
-import {Button, normalize} from 'react-native-elements';
+import {openContactForm} from 'react-native-contacts';
+import {Button} from 'react-native-elements';
 import Video from 'react-native-video';
 import {useDispatch, useSelector} from 'react-redux';
 import FrontArrow from '../../assets/icons/front-arrow.svg';
@@ -39,7 +41,7 @@ import {
 } from '../../store/actions';
 import {RootState} from '../../store/rootReducer';
 import {MomentTagType} from '../../types';
-import {StatusBarHeight} from '../../utils';
+import {normalize, StatusBarHeight} from '../../utils';
 import {mentionPartTypes} from '../../utils/comments';
 
 /**
@@ -66,7 +68,7 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   const [tags, setTags] = useState<MomentTagType[]>(
     selectedTags ? selectedTags : [],
   );
-  const [taggedList, setTaggedList] = useState<string>('');
+  const [taggedUsersText, setTaggedUsersText] = useState('');
   const mediaUri = moment ? moment.moment_url : route.params.media!.uri;
   // TODO: change this once moment refactor is done
   const isMediaAVideo = moment
@@ -83,18 +85,17 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
   }, [selectedTags]);
 
   useEffect(() => {
-    const getTaggedUsersListString = () => {
-      let listString = '';
-      for (let i = 0; i < tags.length; i++) {
-        if (listString.length < 21) {
-          listString = listString.concat(`@${tags[i].user.username} `);
-        } else {
-          break;
-        }
+    let listString = '';
+    for (const tag of tags) {
+      const usernameStr = `@${tag.user.username} `;
+      if (listString.length + usernameStr.length > 21) {
+        listString = listString.concat('. . .');
+        break;
+      } else {
+        listString = listString.concat(usernameStr);
       }
-      setTaggedList(listString);
-    };
-    getTaggedUsersListString();
+    }
+    setTaggedUsersText(listString);
   }, [tags]);
 
   const navigateToProfile = () => {
@@ -203,28 +204,24 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
     }
   };
 
-  const SelectableItem: FC = () => (
-    <TouchableOpacity
-      onPress={() =>
-        navigation.navigate('TagFriendsScreen', {
-          media: {
-            uri: mediaUri,
-            isVideo: isMediaAVideo,
-          },
-          selectedTags: tags,
-        })
-      }
-      style={styles.tagFriendsContainer}>
-      <Image
-        source={require('../../assets/icons/tagging/tag-icon.png')}
-        style={styles.tagIcon}
-      />
-      <Text style={styles.tagFriendsTitle}>Tag Friends</Text>
-      <Text numberOfLines={1} style={styles.taggedListContainer}>
-        {taggedList}
-        {taggedList.length > 21 ? '. . .' : ''}
-      </Text>
-      <FrontArrow width={12} height={12} color={'white'} />
+  const SelectableItem: FC<{
+    text: string;
+    imageUri: ImageSourcePropType;
+    onPress: () => void;
+  }> = ({text, imageUri, onPress}) => (
+    <TouchableOpacity onPress={onPress} style={styles.tagFriendsContainer}>
+      <View style={styles.row}>
+        <Image style={styles.tagIcon} source={imageUri} />
+        <Text style={styles.tagFriendsTitle}>{text}</Text>
+      </View>
+      <View style={styles.row}>
+        <Text style={styles.taggedUsersText}>{taggedUsersText}</Text>
+        <FrontArrow
+          width={normalize(13)}
+          height={normalize(13)}
+          color={'white'}
+        />
+      </View>
     </TouchableOpacity>
   );
 
@@ -273,7 +270,32 @@ const CaptionScreen: React.FC<CaptionScreenProps> = ({route, navigation}) => {
                 partTypes={mentionPartTypes('blue', 'caption')}
               />
             </View>
-            <SelectableItem />
+            <SelectableItem
+              text={'Category'}
+              imageUri={require('../../assets/images/images.png')}
+              onPress={() =>
+                navigation.navigate('TagFriendsScreen', {
+                  media: {
+                    uri: mediaUri,
+                    isVideo: isMediaAVideo,
+                  },
+                  selectedTags: tags,
+                })
+              }
+            />
+            <SelectableItem
+              text={'Tag Friends'}
+              imageUri={require('../../assets/icons/tagging/tag-icon.png')}
+              onPress={() =>
+                navigation.navigate('TagFriendsScreen', {
+                  media: {
+                    uri: mediaUri,
+                    isVideo: isMediaAVideo,
+                  },
+                  selectedTags: tags,
+                })
+              }
+            />
           </View>
         </KeyboardAvoidingView>
       </TouchableWithoutFeedback>
@@ -306,6 +328,7 @@ const styles = StyleSheet.create({
     backgroundColor: 'white',
     flexDirection: 'row',
     padding: normalize(15),
+    marginBottom: normalize(35),
   },
   media: {
     height: normalize(150),
@@ -322,27 +345,35 @@ const styles = StyleSheet.create({
   },
   tagFriendsTitle: {
     color: 'white',
-    fontSize: normalize(12),
+    fontSize: normalize(14),
     lineHeight: normalize(16.71),
     letterSpacing: normalize(0.3),
     fontWeight: '600',
   },
   tagFriendsContainer: {
     marginHorizontal: '5%',
-    marginTop: '3%',
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
+    marginBottom: normalize(20),
   },
-  taggedListContainer: {
+  taggedUsersText: {
     color: 'white',
     width: 150,
     fontSize: normalize(10),
     lineHeight: normalize(11),
     letterSpacing: normalize(0.3),
     textAlign: 'right',
+    marginRight: 5,
+  },
+  tagIcon: {
+    width: normalize(20),
+    height: normalize(20),
+    marginRight: 15,
+  },
+  row: {
+    flexDirection: 'row',
   },
-  tagIcon: {width: 20, height: 20},
 });
 
 export default CaptionScreen;