Adjust styling

1 files changed, 20 insertions, 10 deletions

diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index c59a9c39..e76a8ceb 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -4,6 +4,7 @@ import {Image, StyleSheet, Text, View, ViewProps} from 'react-native';
 import {TouchableWithoutFeedback} from 'react-native-gesture-handler';
 import Animated, {EasingNode} from 'react-native-reanimated';
 import {useDispatch, useStore} from 'react-redux';
+import {ADD_COMMENT_TEXT} from '../../constants/strings';
 import {RootState} from '../../store/rootReducer';
 import {MomentPostType, MomentTagType, ScreenType, UserType} from '../../types';
 import {
@@ -13,7 +14,7 @@ import {
   SCREEN_WIDTH,
 } from '../../utils';
 import {mentionPartTypes, renderTextWithMentions} from '../../utils/comments';
-import {CommentsCount} from '../comments';
+import {AddComment, CommentsCount} from '../comments';
 import {MomentTags} from '../common';
 
 interface MomentPostContentProps extends ViewProps {
@@ -38,7 +39,6 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
   const [fadeValue, setFadeValue] = useState<Animated.Value<number>>(
     new Animated.Value(0),
   );
-
   useEffect(() => {
     setTags(momentTags);
   }, [momentTags]);
@@ -96,19 +96,27 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
         />
         <Text style={styles.text}>{elapsedTime}</Text>
       </View>
-      {renderTextWithMentions({
-        value: moment.caption,
-        styles: styles.captionText,
-        partTypes: mentionPartTypes('white'),
-        onPress: (user: UserType) =>
-          navigateToProfile(state, dispatch, navigation, screenType, user),
-      })}
+      {moment.caption !== '' &&
+        renderTextWithMentions({
+          value: moment.caption,
+          styles: styles.captionText,
+          partTypes: mentionPartTypes('white'),
+          onPress: (user: UserType) =>
+            navigateToProfile(state, dispatch, navigation, screenType, user),
+        })}
+      <AddComment
+        placeholderText={'Add a comment here!'}
+        momentId={moment.moment_id}
+        theme={'dark'}
+      />
     </View>
   );
 };
 
 const styles = StyleSheet.create({
-  container: {},
+  container: {
+    borderWidth: 1,
+  },
   image: {
     width: SCREEN_WIDTH,
     aspectRatio: 1,
@@ -117,6 +125,7 @@ const styles = StyleSheet.create({
   footerContainer: {
     flexDirection: 'row',
     justifyContent: 'space-between',
+    borderWidth: 1,
     marginLeft: '7%',
     marginRight: '5%',
     marginBottom: '2%',
@@ -140,6 +149,7 @@ const styles = StyleSheet.create({
     fontSize: normalize(13),
     lineHeight: normalize(15.51),
     letterSpacing: normalize(0.6),
+    borderWidth: 1,
   },
   tapTag: {
     position: 'absolute',