aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/assets/icons/back-arrow.svg1
-rw-r--r--src/components/comments/AddComment.tsx22
-rw-r--r--src/components/onboarding/TaggBigInput.tsx16
-rw-r--r--src/routes/main/MainStackScreen.tsx27
-rw-r--r--src/screens/profile/IndividualMoment.tsx2
-rw-r--r--src/screens/profile/MomentCommentsScreen.tsx119
6 files changed, 101 insertions, 86 deletions
diff --git a/src/assets/icons/back-arrow.svg b/src/assets/icons/back-arrow.svg
new file mode 100644
index 00000000..aa203dea
--- /dev/null
+++ b/src/assets/icons/back-arrow.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 385.86 696.76"><defs><style>.cls-1{fill:none;stroke:#000;stroke-linecap:round;stroke-linejoin:round;stroke-width:77.17px;}</style></defs><polyline class="cls-1" points="347.28 38.58 38.58 351.69 347.28 658.17"/></svg> \ No newline at end of file
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/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index b4eaa213..3e425101 100644
--- a/src/routes/main/MainStackScreen.tsx
+++ b/src/routes/main/MainStackScreen.tsx
@@ -54,7 +54,7 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
})();
const modalStyle: StackNavigationOptions = {
- cardStyle: {backgroundColor: 'transparent'},
+ cardStyle: {backgroundColor: 'rgba(80,80,80,0.9)'},
gestureDirection: 'vertical',
cardOverlayEnabled: true,
cardStyleInterpolator: ({current: {progress}}) => ({
@@ -64,14 +64,6 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
outputRange: [0, 0.25, 0.7, 1],
}),
},
- overlayStyle: {
- backgroundColor: '#505050',
- opacity: progress.interpolate({
- inputRange: [0, 1],
- outputRange: [0, 0.9],
- extrapolate: 'clamp',
- }),
- },
}),
};
@@ -156,16 +148,25 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
name="IndividualMoment"
component={IndividualMoment}
options={{
- ...modalStyle,
+ gestureEnabled: false,
+ cardStyle: {
+ backgroundColor: 'rgba(0, 0, 0, 0.6)',
+ },
+ cardOverlayEnabled: true,
+ cardStyleInterpolator: ({current: {progress}}) => ({
+ cardStyle: {
+ opacity: progress.interpolate({
+ inputRange: [0, 0.5, 0.9, 1],
+ outputRange: [0, 0.25, 0.7, 1],
+ }),
+ },
+ }),
}}
initialParams={{screenType}}
/>
<MainStack.Screen
name="MomentCommentsScreen"
component={MomentCommentsScreen}
- options={{
- ...modalStyle,
- }}
initialParams={{screenType}}
/>
<MainStack.Screen
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 ebe4da28..b2611b62 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 {CommentTile, TabsGradient} 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 {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils/screenDimensions';
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 {SafeAreaView} from 'react-native-safe-area-context';
+import Animated from 'react-native-reanimated';
+import BackIcon from '../../assets/icons/back-arrow.svg';
/**
* Comments Screen for an image uploaded
@@ -51,88 +53,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;
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 18:08:35 +0000