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

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

3 files changed, 68 insertions, 74 deletions

diff --git a/src/screens/profile/IndividualMoment.tsx b/src/screens/profile/IndividualMoment.tsx
index f13e1295..6b82b31c 100644
--- a/src/screens/profile/IndividualMoment.tsx
+++ b/src/screens/profile/IndividualMoment.tsx
@@ -80,7 +80,7 @@ const IndividualMoment: React.FC<IndividualMomentProps> = ({
   return (
     <BlurView
       blurType="light"
-      blurAmount={10}
+      blurAmount={30}
       reducedTransparencyFallbackColor="white"
       style={styles.contentContainer}>
       <IndividualMomentTitleBar
diff --git a/src/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index 1d27929e..dee86e15 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -1,17 +1,20 @@
-import * as React from 'react';
+import AsyncStorage from '@react-native-community/async-storage';
 import {RouteProp, useNavigation} from '@react-navigation/native';
-import {ProfileStackParams} from '../../routes/main';
-import {CenteredView, CommentTile} from '../../components';
-import {CommentType} from '../../types';
-import {ScrollView, StyleSheet, Text, View} from 'react-native';
-import {SCREEN_WIDTH} from '../../utils';
-import {Button} from 'react-native-elements';
-import {AddComment} from '../../components/';
+import * as React from 'react';
 import {useEffect} from 'react';
-import AsyncStorage from '@react-native-community/async-storage';
-import {getMomentComments} from '../..//services';
+import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import Animated from 'react-native-reanimated';
+import {SafeAreaView} from 'react-native-safe-area-context';
 import {useDispatch} from 'react-redux';
+import {getMomentComments} from '../..//services';
+import BackIcon from '../../assets/icons/back-arrow.svg';
+import {CommentTile, TabsGradient} from '../../components';
+import {AddComment} from '../../components/';
+import {ProfileStackParams} from '../../routes/main';
 import {logout} from '../../store/actions';
+import {CommentType} from '../../types';
+import {SCREEN_WIDTH} from '../../utils';
+import {SCREEN_HEIGHT} from '../../utils/screenDimensions';
 
 /**
  * Comments Screen for an image uploaded
@@ -51,88 +54,79 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
   }, [dispatch, moment_id, newCommentsAvailable]);
 
   return (
-    <CenteredView>
-      <View style={styles.modalView}>
+    <View style={styles.background}>
+      <SafeAreaView>
         <View style={styles.header}>
-          <Button
-            title="X"
-            buttonStyle={styles.button}
-            titleStyle={styles.buttonText}
+          <TouchableOpacity
+            style={styles.headerButton}
             onPress={() => {
               navigation.pop();
-            }}
-          />
+            }}>
+            <BackIcon height={'100%'} width={'100%'} color={'white'} />
+          </TouchableOpacity>
           <Text style={styles.headerText}>
             {commentsList.length + ' Comments'}
           </Text>
         </View>
-        <ScrollView
-          style={styles.modalScrollView}
-          contentContainerStyle={styles.modalScrollViewContent}>
-          {commentsList &&
-            commentsList.map((comment: CommentType) => (
-              <CommentTile
-                key={comment.comment_id}
-                comment_object={comment}
-                screenType={screenType}
-              />
-            ))}
-        </ScrollView>
-        <AddComment
-          setNewCommentsAvailable={setNewCommentsAvailable}
-          moment_id={moment_id}
-        />
-      </View>
-    </CenteredView>
+        <View style={styles.body}>
+          <Animated.ScrollView
+            style={styles.scrollView}
+            contentContainerStyle={styles.scrollViewContent}>
+            {commentsList &&
+              commentsList.map((comment: CommentType) => (
+                <CommentTile
+                  key={comment.comment_id}
+                  comment_object={comment}
+                  screenType={screenType}
+                />
+              ))}
+          </Animated.ScrollView>
+          <AddComment
+            setNewCommentsAvailable={setNewCommentsAvailable}
+            moment_id={moment_id}
+          />
+        </View>
+      </SafeAreaView>
+      <TabsGradient />
+    </View>
   );
 };
 
 const styles = StyleSheet.create({
-  header: {flexDirection: 'row'},
+  background: {
+    backgroundColor: 'white',
+    height: '100%',
+  },
+  header: {justifyContent: 'center', padding: '3%'},
   headerText: {
-    position: 'relative',
-    left: '180%',
+    position: 'absolute',
     alignSelf: 'center',
-    fontSize: 18,
-    fontWeight: '500',
-  },
-  container: {
-    position: 'relative',
-    top: '5%',
-    left: '5%',
-    backgroundColor: 'white',
-    borderRadius: 5,
-    width: SCREEN_WIDTH / 1.1,
-    height: '55%',
+    fontSize: 20.5,
+    fontWeight: '600',
   },
-  button: {
-    backgroundColor: 'transparent',
+  headerButton: {
+    width: '5%',
+    aspectRatio: 1,
+    padding: 0,
+    marginLeft: '5%',
+    alignSelf: 'flex-start',
   },
-  buttonText: {
+  headerButtonText: {
     color: 'black',
     fontSize: 18,
     fontWeight: '400',
   },
-  modalView: {
-    width: '85%',
-    height: '70%',
-    backgroundColor: '#fff',
-    shadowColor: '#000',
-    shadowOpacity: 30,
-    shadowOffset: {width: 0, height: 2},
-    shadowRadius: 5,
-    borderRadius: 8,
-    paddingBottom: 15,
+  body: {
+    width: SCREEN_WIDTH,
+    height: (4.9 / 6) * SCREEN_HEIGHT,
+    paddingTop: '3%',
+  },
+  scrollView: {
     paddingHorizontal: 20,
-    paddingTop: 5,
-    justifyContent: 'space-between',
   },
-  modalScrollViewContent: {
+  scrollViewContent: {
     justifyContent: 'center',
   },
-  modalScrollView: {
-    marginBottom: 10,
-  },
 });
 
 export default MomentCommentsScreen;
diff --git a/src/screens/profile/MomentUploadPromptScreen.tsx b/src/screens/profile/MomentUploadPromptScreen.tsx
index 6111985d..9d46c1e9 100644
--- a/src/screens/profile/MomentUploadPromptScreen.tsx
+++ b/src/screens/profile/MomentUploadPromptScreen.tsx
@@ -6,6 +6,7 @@ import CloseIcon from '../../assets/ionicons/close-outline.svg';
 import {StyleSheet, Text, View} from 'react-native';
 import {Moment} from '../../components';
 import {Image} from 'react-native-animatable';
+import {UPLOAD_MOMENT_PROMPT_ONE_MESSAGE} from '../../constants/strings';
 
 type MomentUploadPromptScreenRouteProp = RouteProp<
   MainStackParams,
@@ -38,10 +39,7 @@ const MomentUploadPromptScreen: React.FC<MomentUploadPromptScreenProps> = ({
         }}
       />
 
-      <Text style={styles.text}>
-        Post your first moment to {'\n'} continue building your digital {'\n'}{' '}
-        identity!
-      </Text>
+      <Text style={styles.text}>{UPLOAD_MOMENT_PROMPT_ONE_MESSAGE}</Text>
       <Image
         source={require('../../assets/gifs/dotted-arrow-white.gif')}
         style={styles.arrowGif}
@@ -54,6 +52,8 @@ const MomentUploadPromptScreen: React.FC<MomentUploadPromptScreenProps> = ({
         screenType={screenType}
         handleMomentCategoryDelete={() => {}}
         shouldAllowDeletion={false}
+        showDownButton={false}
+        showUpButton={false}
         externalStyles={{
           container: styles.momentContainer,
           titleText: styles.momentHeaderText,