Merge branch 'master' into tma552-adjust-styles-and-sizes

# Conflicts:
#	src/screens/profile/MomentCommentsScreen.tsx

3 files changed, 39 insertions, 17 deletions

diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index f8c0b6bc..c6c816b9 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -12,6 +12,7 @@ import {postMomentComment} from '../../services';
 import {logout} from '../../store/actions';
 import {useSelector, useDispatch} from 'react-redux';
 import {RootState} from '../../store/rootreducer';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
 
 /**
  * This file provides the add comment view for a user.
@@ -69,7 +70,7 @@ const AddComment: React.FC<AddCommentProps> = ({
   return (
     <KeyboardAvoidingView
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-      keyboardVerticalOffset={130}>
+      keyboardVerticalOffset={(1 / 9) * SCREEN_HEIGHT}>
       <View style={styles.container}>
         <Image
           style={styles.avatar}
@@ -79,8 +80,10 @@ const AddComment: React.FC<AddCommentProps> = ({
               : require('../../assets/images/avatar-placeholder.png')
           }
         />
+
         <TaggBigInput
           style={styles.text}
+          containerStyle={styles.textContainer}
           multiline
           placeholder="Add a comment....."
           placeholderTextColor="gray"
@@ -93,10 +96,18 @@ const AddComment: React.FC<AddCommentProps> = ({
   );
 };
 const styles = StyleSheet.create({
-  container: {flexDirection: 'row'},
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    width: SCREEN_WIDTH,
+    marginTop: '5%',
+  },
+  textContainer: {
+    width: '100%',
+    alignItems: 'flex-start',
+    marginVertical: 11,
+  },
   text: {
-    position: 'relative',
-    right: '18%',
     backgroundColor: 'white',
     width: '70%',
     paddingLeft: '2%',
@@ -109,7 +120,8 @@ const styles = StyleSheet.create({
     height: 40,
     width: 40,
     borderRadius: 30,
-    marginRight: 15,
+    marginRight: 10,
+    marginLeft: 20,
   },
 });
 
diff --git a/src/components/onboarding/TaggBigInput.tsx b/src/components/onboarding/TaggBigInput.tsx
index 4e8e1ef7..4212afd1 100644
--- a/src/components/onboarding/TaggBigInput.tsx
+++ b/src/components/onboarding/TaggBigInput.tsx
@@ -1,22 +1,30 @@
 import React from 'react';
-import {View, TextInput, StyleSheet, TextInputProps} from 'react-native';
+import {
+  View,
+  TextInput,
+  StyleSheet,
+  TextInputProps,
+  ViewStyle,
+} from 'react-native';
 import * as Animatable from 'react-native-animatable';
-import {TAGG_LIGHT_PURPLE} from '../../constants';
+import { TAGG_LIGHT_PURPLE } from '../../constants';
 
 interface TaggBigInputProps extends TextInputProps {
   valid?: boolean;
   invalidWarning?: string;
   attemptedSubmit?: boolean;
   width?: number | string;
+  containerStyle?: ViewStyle;
 }
 /**
  * An input component that receives all props a normal TextInput component does. TaggInput components grow to 60% of their parent's width by default, but this can be set using the `width` prop.
  */
 const TaggBigInput = React.forwardRef((props: TaggBigInputProps, ref: any) => {
   return (
-    <View style={styles.container}>
+    <View
+      style={props.containerStyle ? props.containerStyle : styles.container}>
       <TextInput
-        style={[{width: props.width}, styles.input]}
+        style={[{ width: props.width }, styles.input]}
         placeholderTextColor="#ddd"
         clearButtonMode="while-editing"
         ref={ref}
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 140c911c..4082f734 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -47,6 +47,12 @@ import {TouchableOpacity} from 'react-native-gesture-handler';
 import {useFocusEffect, useNavigation} from '@react-navigation/native';
 import GreyPlusLogo from '../../assets/icons/grey-plus-logo.svg';
 import {TaggPrompt} from '../common';
+import {
+  UPLOAD_MOMENT_PROMPT_THREE_HEADER,
+  UPLOAD_MOMENT_PROMPT_THREE_MESSAGE,
+  UPLOAD_MOMENT_PROMPT_TWO_HEADER,
+  UPLOAD_MOMENT_PROMPT_TWO_MESSAGE,
+} from '../../constants/strings';
 
 interface ContentProps {
   y: Animated.Value<number>;
@@ -345,10 +351,8 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
           profile.profile_completion_stage === 2 &&
           !isStageTwoPromptClosed && (
             <TaggPrompt
-              messageHeader="Create a new category"
-              messageBody={
-                'Post your first moment to continue building your digital identity!'
-              }
+              messageHeader={UPLOAD_MOMENT_PROMPT_TWO_HEADER}
+              messageBody={UPLOAD_MOMENT_PROMPT_TWO_MESSAGE}
               logoType=""
               onClose={() => {
                 setIsStageTwoPromptClosed(true);
@@ -359,10 +363,8 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
           profile.profile_completion_stage === 3 &&
           !isStageThreePromptClosed && (
             <TaggPrompt
-              messageHeader="Continue to build your profile"
-              messageBody={
-                'Continue to personalize your own digital space in\nthis community by filling your profile with\ncategories and moments!'
-              }
+              messageHeader={UPLOAD_MOMENT_PROMPT_THREE_HEADER}
+              messageBody={UPLOAD_MOMENT_PROMPT_THREE_MESSAGE}
               logoType=""
               onClose={() => {
                 setIsStageThreePromptClosed(true);