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/components/profile/Content.tsx20
-rw-r--r--src/constants/strings.ts15
-rw-r--r--src/routes/main/MainStackScreen.tsx13
-rw-r--r--src/screens/profile/MomentCommentsScreen.tsx119
-rw-r--r--src/screens/profile/MomentUploadPromptScreen.tsx8
8 files changed, 112 insertions, 102 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/components/profile/Content.tsx b/src/components/profile/Content.tsx
index e7fb566b..345079ad 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -55,6 +55,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>;
@@ -284,7 +290,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
momentCategories.filter((mc) => mc !== category),
false,
),
- )
+ );
dispatch(deleteUserMomentsForCategory(category));
},
},
@@ -352,10 +358,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);
@@ -366,10 +370,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);
diff --git a/src/constants/strings.ts b/src/constants/strings.ts
index b5344afd..a1793658 100644
--- a/src/constants/strings.ts
+++ b/src/constants/strings.ts
@@ -12,23 +12,23 @@ export const ERROR_DOUBLE_CHECK_CONNECTION = 'Please double-check your network c
export const ERROR_DUP_OLD_PWD = 'You may not use a previously used password';
export const ERROR_EMAIL_IN_USE = 'Email already in use, please try another one';
export const ERROR_FAILED_LOGIN_INFO = 'Login failed, please try re-entering your login information';
-export const ERROR_FAILED_TO_COMMENT = 'Unable to post comment, refresh and try again!';
+export const ERROR_FAILED_TO_COMMENT = 'Unable to post comment, refresh and try again!';
export const ERROR_INVALID_INVITATION_CODE = 'Invitation code invalid, try again or talk to the friend that sent it 😬';
export const ERROR_INVALID_LOGIN = 'Invalid login, Please login again';
export const ERROR_INVALID_PWD_CODE = 'Looks like you have entered the wrong code, please try again';
export const ERROR_INVALID_VERIFICATION_CODE = 'Invalid verification code, try re-entering or tap the resend code button for a new code';
export const ERROR_INVALID_VERIFICATION_CODE_FORMAT = 'Please enter the 6 digit code sent to your phone';
export const ERROR_INVLAID_CODE = 'The code entered is not valid!';
-export const ERROR_LINK = (str: string) => `Unable to link with ${str}, Please check your login and try again`;
-export const ERROR_LOGIN = 'There was a problem logging you in, please refresh and try again';
+export const ERROR_LINK = (str: string) => `Unable to link with ${str}, Please check your login and try again`;
+export const ERROR_LOGIN = 'There was a problem logging you in, please refresh and try again';
export const ERROR_LOGIN_FAILED = 'Login failed. Check your username and passoword, and try again';
export const ERROR_NEXT_PAGE = 'There was a problem while loading the next page πŸ˜“, try again in a couple minutes';
export const ERROR_PROFILE_CREATION_SHORT = 'Profile creation failed πŸ˜“';
export const ERROR_PWD_ACCOUNT = (str: string) => `Please make sure that the email / username entered is registered with us. You may contact our customer support at ${str}`;
-export const ERROR_REGISTRATION = (str: string) => `Registration failed πŸ˜”, ${str}`;
+export const ERROR_REGISTRATION = (str: string) => `Registration failed πŸ˜”, ${str}`;
export const ERROR_SELECT_CLASS_YEAR = 'Please select your Class Year';
export const ERROR_SERVER_DOWN = 'mhm, looks like our servers are down, please refresh and try again in a few mins';
-export const ERROR_SOMETHING_WENT_WRONG = "Oh dear, don’t worry someone will be held responsible for this error, In the meantime refresh the app";
+export const ERROR_SOMETHING_WENT_WRONG = 'Oh dear, don’t worry someone will be held responsible for this error, In the meantime refresh the app';
export const ERROR_SOMETHING_WENT_WRONG_REFRESH = "Ha, looks like this one's on us, please refresh and try again";
export const ERROR_SOMETHING_WENT_WRONG_RELOAD = "You broke it, Just kidding! we don't know what happened... Please reload the app and try again";
export const ERROR_UNABLE_TO_FIND_PROFILE = 'We were unable to find this profile. Please check username and try again';
@@ -45,3 +45,8 @@ export const SUCCESS_LINK = (str: string) => `Successfully linked ${str} πŸŽ‰`;
export const SUCCESS_PIC_UPLOAD = 'Beautiful, the picture was uploaded successfully!';
export const SUCCESS_PWD_RESET = 'Your password was reset successfully!';
export const SUCCESS_VERIFICATION_CODE_SENT = 'New verification code sent! Check your phone messages for your code';
+export const UPLOAD_MOMENT_PROMPT_ONE_MESSAGE = 'Post your first moment to\n continue building your digital\nidentity!';
+export const UPLOAD_MOMENT_PROMPT_THREE_HEADER = 'Continue to build your profile';
+export const UPLOAD_MOMENT_PROMPT_THREE_MESSAGE = 'Continue to personalize your own digital space in\nthis community by filling your profile with\ncategories and moments!';
+export const UPLOAD_MOMENT_PROMPT_TWO_HEADER = 'Create a new category';
+export const UPLOAD_MOMENT_PROMPT_TWO_MESSAGE = 'You can now create new categories \nand continue to fill your profile with moments!';
diff --git a/src/routes/main/MainStackScreen.tsx b/src/routes/main/MainStackScreen.tsx
index 9250d0d1..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',
- }),
- },
}),
};
@@ -175,9 +167,6 @@ const MainStackScreen: React.FC<MainStackProps> = ({route}) => {
<MainStack.Screen
name="MomentCommentsScreen"
component={MomentCommentsScreen}
- options={{
- ...modalStyle,
- }}
initialParams={{screenType}}
/>
<MainStack.Screen
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;
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,
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 23:32:26 +0000