Adjust styling

5 files changed, 48 insertions, 24 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',
diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index ba6a731c..5ac8aeab 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -7,7 +7,7 @@ import {useSelector} from 'react-redux';
 import {IndividualMomentTitleBar, MomentPost} from '../../components';
 import {MainStackParams} from '../../routes';
 import {RootState} from '../../store/rootreducer';
-import {MomentPostType, MomentType} from '../../types';
+import {MomentPostType} from '../../types';
 import {normalize, StatusBarHeight} from '../../utils';
 
 /**
@@ -47,7 +47,7 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
       style={styles.contentContainer}>
       <IndividualMomentTitleBar
         style={styles.header}
-        close={() => navigation.pop()}
+        close={() => navigation.goBack()}
         title={moment_category}
       />
       <FlatList
diff --git a/src/services/MomentService.ts b/src/services/MomentService.ts
index e227bc9e..e4db95b5 100644
--- a/src/services/MomentService.ts
+++ b/src/services/MomentService.ts
@@ -6,7 +6,7 @@ import {
   MOMENT_TAGS_ENDPOINT,
   MOMENT_THUMBNAIL_ENDPOINT,
 } from '../constants';
-import {MomentPostType, MomentTagType, MomentType} from '../types';
+import {MomentPostType, MomentTagType} from '../types';
 import {checkImageUploadStatus} from '../utils';
 
 export const postMoment = async (
diff --git a/src/types/types.ts b/src/types/types.ts
index 1e50eba8..1bdade5c 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -122,7 +122,7 @@ export interface MomentType {
 export interface MomentPostType extends MomentType {
   comments_count: number;
   comment_preview: {
-    user: ProfilePreviewType;
+    commenter: ProfilePreviewType;
     comment: string;
   };
 }