2 files changed, 44 insertions, 20 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index b229d010..24ff830a 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -24,10 +24,15 @@ import {MentionInputControlled} from './MentionInputControlled';
 export interface AddCommentProps {
   momentId: string;
   placeholderText: string;
+  theme?: 'dark' | 'white';
 }
 
-const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
-  const {setShouldUpdateAllComments, commentTapped} =
+const AddComment: React.FC<AddCommentProps> = ({
+  momentId,
+  placeholderText,
+  theme = 'white',
+}) => {
+  const {setShouldUpdateAllComments = () => null, commentTapped} =
     useContext(CommentContext);
   const [inReplyToMention, setInReplyToMention] = useState('');
   const [comment, setComment] = useState('');
@@ -106,13 +111,14 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
       keyboardVerticalOffset={SCREEN_HEIGHT * 0.1}>
       <View
         style={[
-          styles.container,
-          keyboardVisible ? styles.whiteBackround : {},
+          theme === 'white' ? styles.containerWhite : styles.containerDark,
+          keyboardVisible && theme !== 'dark' ? styles.whiteBackround : {},
         ]}>
         <View style={styles.textContainer}>
           <Avatar style={styles.avatar} uri={avatar} />
           <MentionInputControlled
             containerStyle={styles.text}
+            placeholderTextColor={theme === 'dark' ? '#828282' : undefined}
             placeholder={placeholderText}
             value={inReplyToMention + comment}
             onChange={(newText: string) => {
@@ -124,11 +130,15 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
             inputRef={ref}
             partTypes={mentionPartTypes('blue')}
           />
-          <View style={styles.submitButton}>
-            <TouchableOpacity style={styles.submitButton} onPress={addComment}>
-              <UpArrowIcon width={35} height={35} color={'white'} />
-            </TouchableOpacity>
-          </View>
+          {(theme === 'white' || (theme === 'dark' && keyboardVisible)) && (
+            <View style={styles.submitButton}>
+              <TouchableOpacity
+                style={styles.submitButton}
+                onPress={addComment}>
+                <UpArrowIcon width={35} height={35} color={'white'} />
+              </TouchableOpacity>
+            </View>
+          )}
         </View>
       </View>
     </KeyboardAvoidingView>
@@ -136,7 +146,11 @@ const AddComment: React.FC<AddCommentProps> = ({momentId, placeholderText}) => {
 };
 
 const styles = StyleSheet.create({
-  container: {
+  containerDark: {
+    alignItems: 'center',
+    width: SCREEN_WIDTH,
+  },
+  containerWhite: {
     backgroundColor: '#f7f7f7',
     alignItems: 'center',
     width: SCREEN_WIDTH,
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',