switched from modal to full screen view

3 files changed, 91 insertions, 77 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/screens/profile/MomentCommentsScreen.tsx b/src/screens/profile/MomentCommentsScreen.tsx
index ebe4da28..3008728e 100644
--- a/src/screens/profile/MomentCommentsScreen.tsx
+++ b/src/screens/profile/MomentCommentsScreen.tsx
@@ -1,17 +1,19 @@
 import * as React from 'react';
-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/screenDimensions';
-import {Button} from 'react-native-elements';
-import {AddComment} from '../../components/';
-import {useEffect} from 'react';
+import { RouteProp, useNavigation } from '@react-navigation/native';
+import { ProfileStackParams } from '../../routes/main';
+import { CommentTile, TabsGradient } from '../../components';
+import { CommentType } from '../../types';
+import { StyleSheet, Text, View } from 'react-native';
+import { SCREEN_HEIGHT, SCREEN_WIDTH } from '../../utils/screenDimensions';
+import { Button } from 'react-native-elements';
+import { AddComment } from '../../components/';
+import { useEffect } from 'react';
 import AsyncStorage from '@react-native-community/async-storage';
-import {getMomentComments} from '../..//services';
-import {useDispatch} from 'react-redux';
-import {logout} from '../../store/actions';
+import { getMomentComments } from '../..//services';
+import { useDispatch } from 'react-redux';
+import { logout } from '../../store/actions';
+import { SafeAreaView } from 'react-native-safe-area-context';
+import Animated from 'react-native-reanimated';
 
 /**
  * Comments Screen for an image uploaded
@@ -28,9 +30,9 @@ interface MomentCommentsScreenProps {
   route: MomentCommentsScreenRouteProps;
 }
 
-const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
+const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({ route }) => {
   const navigation = useNavigation();
-  const {moment_id, screenType} = route.params;
+  const { moment_id, screenType } = route.params;
   const [commentsList, setCommentsList] = React.useState([]);
   const [newCommentsAvailable, setNewCommentsAvailable] = React.useState(true);
   const dispatch = useDispatch();
@@ -51,13 +53,13 @@ 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}
+            buttonStyle={styles.headerButton}
+            titleStyle={styles.headerButtonText}
             onPress={() => {
               navigation.pop();
             }}
@@ -66,72 +68,64 @@ const MomentCommentsScreen: React.FC<MomentCommentsScreenProps> = ({route}) => {
             {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',
+    fontSize: 20.5,
+    fontWeight: '600',
   },
-  container: {
-    position: 'relative',
-    top: '5%',
-    left: '5%',
-    backgroundColor: 'white',
-    borderRadius: 5,
-    width: SCREEN_WIDTH / 1.1,
-    height: '55%',
-  },
-  button: {
+  headerButton: {
     backgroundColor: 'transparent',
+    width: 30,
+    aspectRatio: 1,
+    padding: 0,
+    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,
-    paddingHorizontal: 20,
+  body: {
+    width: SCREEN_WIDTH,
+    height: (4.9 / 6) * SCREEN_HEIGHT,
     paddingTop: 5,
-    justifyContent: 'space-between',
   },
-  modalScrollViewContent: {
-    justifyContent: 'center',
+  scrollView: {
+    paddingHorizontal: 20,
   },
-  modalScrollView: {
-    marginBottom: 10,
+  scrollViewContent: {
+    justifyContent: 'center',
   },
 });