aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/comments/AddComment.tsx155
-rw-r--r--src/components/common/AcceptDeclineButtons.tsx8
-rw-r--r--src/components/common/GenericMoreInfoDrawer.tsx4
-rw-r--r--src/components/common/SocialLinkModal.tsx4
-rw-r--r--src/components/moments/Moment.tsx19
-rw-r--r--src/components/moments/MomentPostContent.tsx1
-rw-r--r--src/components/onboarding/TaggBigInput.tsx12
-rw-r--r--src/components/profile/Content.tsx91
-rw-r--r--src/components/profile/FriendsCount.tsx5
-rw-r--r--src/components/profile/ProfileBody.tsx17
-rw-r--r--src/components/profile/ProfileHeader.tsx44
-rw-r--r--src/components/profile/ProfileMoreInfoDrawer.tsx5
-rw-r--r--src/components/profile/ProfilePreview.tsx33
-rw-r--r--src/components/profile/ToggleButton.tsx8
-rw-r--r--src/components/profile/UniversityIcon.tsx12
-rw-r--r--src/components/search/Explore.tsx4
-rw-r--r--src/components/search/ExploreSection.tsx3
-rw-r--r--src/components/search/ExploreSectionUser.tsx6
-rw-r--r--src/components/search/RecentSearches.tsx4
-rw-r--r--src/components/taggs/Tagg.tsx3
-rw-r--r--src/components/taggs/TwitterTaggPost.tsx4
21 files changed, 228 insertions, 214 deletions
diff --git a/src/components/comments/AddComment.tsx b/src/components/comments/AddComment.tsx
index f8c0b6bc..24b3473c 100644
--- a/src/components/comments/AddComment.tsx
+++ b/src/components/comments/AddComment.tsx
@@ -1,17 +1,19 @@
-import * as React from 'react';
+import React, {useEffect} from 'react';
import {
Image,
+ Keyboard,
KeyboardAvoidingView,
Platform,
StyleSheet,
View,
} from 'react-native';
-import AsyncStorage from '@react-native-community/async-storage';
-import {TaggBigInput} from '../onboarding';
+import {TextInput, TouchableOpacity} from 'react-native-gesture-handler';
+import {useSelector} from 'react-redux';
+import UpArrowIcon from '../../assets/icons/up_arrow.svg';
+import {TAGG_LIGHT_BLUE} from '../../constants';
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.
@@ -29,87 +31,114 @@ const AddComment: React.FC<AddCommentProps> = ({
moment_id,
}) => {
const [comment, setComment] = React.useState('');
+ const [keyboardVisible, setKeyboardVisible] = React.useState(false);
- const dispatch = useDispatch();
const {
avatar,
user: {userId},
} = useSelector((state: RootState) => state.user);
- const handleCommentUpdate = (comment: string) => {
- setComment(comment);
- };
-
const postComment = async () => {
- try {
- const token = await AsyncStorage.getItem('token');
- if (!token) {
- dispatch(logout());
- return;
- }
- const postedComment = await postMomentComment(
- userId,
- comment,
- moment_id,
- token,
- );
+ const postedComment = await postMomentComment(
+ userId,
+ comment.trim(),
+ moment_id,
+ );
- if (postedComment) {
- //Set the current comment to en empty string if the comment was posted successfully.
- handleCommentUpdate('');
-
- //Indicate the MomentCommentsScreen that it needs to download the new comments again
- setNewCommentsAvailable(true);
- }
- } catch (err) {
- console.log('Error while posting comment!');
+ if (postedComment) {
+ setComment('');
+ setNewCommentsAvailable(true);
}
};
+ useEffect(() => {
+ const showKeyboard = () => setKeyboardVisible(true);
+ Keyboard.addListener('keyboardWillShow', showKeyboard);
+ return () => Keyboard.removeListener('keyboardWillShow', showKeyboard);
+ }, []);
+
+ useEffect(() => {
+ const hideKeyboard = () => setKeyboardVisible(false);
+ Keyboard.addListener('keyboardWillHide', hideKeyboard);
+ return () => Keyboard.removeListener('keyboardWillHide', hideKeyboard);
+ }, []);
+
return (
<KeyboardAvoidingView
behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
- keyboardVerticalOffset={130}>
- <View style={styles.container}>
- <Image
- style={styles.avatar}
- source={
- avatar
- ? {uri: avatar}
- : require('../../assets/images/avatar-placeholder.png')
- }
- />
- <TaggBigInput
- style={styles.text}
- multiline
- placeholder="Add a comment....."
- placeholderTextColor="gray"
- onChangeText={handleCommentUpdate}
- onSubmitEditing={postComment}
- value={comment}
- />
+ keyboardVerticalOffset={SCREEN_HEIGHT * 0.1}>
+ <View
+ style={[
+ styles.container,
+ keyboardVisible ? {backgroundColor: '#fff'} : {},
+ ]}>
+ <View style={styles.textContainer}>
+ <Image
+ style={styles.avatar}
+ source={
+ avatar
+ ? {uri: avatar}
+ : require('../../assets/images/avatar-placeholder.png')
+ }
+ />
+ <TextInput
+ style={styles.text}
+ placeholder="Add a comment..."
+ placeholderTextColor="grey"
+ onChangeText={setComment}
+ value={comment}
+ autoCorrect={false}
+ multiline={true}
+ />
+ <View style={styles.submitButton}>
+ <TouchableOpacity style={styles.submitButton} onPress={postComment}>
+ <UpArrowIcon width={35} height={35} color={'white'} />
+ </TouchableOpacity>
+ </View>
+ </View>
</View>
</KeyboardAvoidingView>
);
};
const styles = StyleSheet.create({
- container: {flexDirection: 'row'},
+ container: {
+ backgroundColor: '#f7f7f7',
+ alignItems: 'center',
+ width: SCREEN_WIDTH,
+ },
+ textContainer: {
+ width: '95%',
+ flexDirection: 'row',
+ backgroundColor: '#e8e8e8',
+ alignItems: 'center',
+ justifyContent: 'space-between',
+ margin: '3%',
+ borderRadius: 25,
+ },
text: {
- position: 'relative',
- right: '18%',
- backgroundColor: 'white',
- width: '70%',
- paddingLeft: '2%',
- paddingRight: '2%',
- paddingBottom: '1%',
- paddingTop: '1%',
- height: 60,
+ flex: 1,
+ padding: '1%',
+ marginHorizontal: '1%',
},
avatar: {
- height: 40,
- width: 40,
+ height: 35,
+ width: 35,
borderRadius: 30,
- marginRight: 15,
+ marginRight: 10,
+ marginLeft: '3%',
+ marginVertical: '2%',
+ alignSelf: 'flex-end',
+ },
+ submitButton: {
+ height: 35,
+ width: 35,
+ backgroundColor: TAGG_LIGHT_BLUE,
+ borderRadius: 999,
+ justifyContent: 'center',
+ alignItems: 'center',
+ marginRight: '3%',
+ marginVertical: '2%',
+ alignSelf: 'flex-end',
},
});
diff --git a/src/components/common/AcceptDeclineButtons.tsx b/src/components/common/AcceptDeclineButtons.tsx
index 221056c0..9caaffca 100644
--- a/src/components/common/AcceptDeclineButtons.tsx
+++ b/src/components/common/AcceptDeclineButtons.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import {StyleProp, StyleSheet, Text, View, ViewStyle} from 'react-native';
-import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {TAGG_LIGHT_BLUE} from '../../constants';
import {ProfilePreviewType} from '../../types';
import {SCREEN_WIDTH} from '../../utils';
import {TouchableOpacity} from 'react-native-gesture-handler';
@@ -55,18 +55,18 @@ const styles = StyleSheet.create({
},
acceptButton: {
padding: 0,
- backgroundColor: TAGG_TEXT_LIGHT_BLUE,
+ backgroundColor: TAGG_LIGHT_BLUE,
},
rejectButton: {
borderWidth: 1,
backgroundColor: 'white',
- borderColor: TAGG_TEXT_LIGHT_BLUE,
+ borderColor: TAGG_LIGHT_BLUE,
},
acceptButtonTitleColor: {
color: 'white',
},
rejectButtonTitleColor: {
- color: TAGG_TEXT_LIGHT_BLUE,
+ color: TAGG_LIGHT_BLUE,
},
buttonTitle: {
padding: 0,
diff --git a/src/components/common/GenericMoreInfoDrawer.tsx b/src/components/common/GenericMoreInfoDrawer.tsx
index 098482ae..a23d7736 100644
--- a/src/components/common/GenericMoreInfoDrawer.tsx
+++ b/src/components/common/GenericMoreInfoDrawer.tsx
@@ -10,7 +10,7 @@ import {
} from 'react-native';
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {BottomDrawer} from '.';
-import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {TAGG_LIGHT_BLUE} from '../../constants';
import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
// conforms the JSX onPress attribute type
@@ -87,7 +87,7 @@ const styles = StyleSheet.create({
panelButtonTitleCancel: {
fontSize: 18,
fontWeight: 'bold',
- color: TAGG_TEXT_LIGHT_BLUE,
+ color: TAGG_LIGHT_BLUE,
},
divider: {height: 1, borderWidth: 1, borderColor: '#e7e7e7'},
});
diff --git a/src/components/common/SocialLinkModal.tsx b/src/components/common/SocialLinkModal.tsx
index b307a62c..41b044fe 100644
--- a/src/components/common/SocialLinkModal.tsx
+++ b/src/components/common/SocialLinkModal.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import {Modal, StyleSheet, Text, TouchableHighlight, View} from 'react-native';
import {TextInput} from 'react-native-gesture-handler';
-import { TAGG_TEXT_LIGHT_BLUE } from '../../constants';
+import { TAGG_LIGHT_BLUE } from '../../constants';
import {SCREEN_WIDTH} from '../../utils';
interface SocialLinkModalProps {
@@ -105,7 +105,7 @@ const styles = StyleSheet.create({
fontSize: 14,
/* identical to box height */
textAlign: 'center',
- color: TAGG_TEXT_LIGHT_BLUE,
+ color: TAGG_LIGHT_BLUE,
},
textInput: {
height: 20,
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index 7905e8a9..a6b553b1 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -11,9 +11,9 @@ import DownIcon from '../../assets/icons/down_icon.svg';
import PlusIcon from '../../assets/icons/plus_icon-01.svg';
import BigPlusIcon from '../../assets/icons/plus_icon-02.svg';
import UpIcon from '../../assets/icons/up_icon.svg';
-import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {TAGG_LIGHT_BLUE} from '../../constants';
import {ERROR_UPLOAD_MOMENT_SHORT} from '../../constants/strings';
-import {SCREEN_WIDTH} from '../../utils';
+import {normalize, SCREEN_WIDTH} from '../../utils';
import MomentTile from './MomentTile';
interface MomentProps {
@@ -87,7 +87,7 @@ const Moment: React.FC<MomentProps> = ({
width={19}
height={19}
onPress={() => move('up', title)}
- color={TAGG_TEXT_LIGHT_BLUE}
+ color={TAGG_LIGHT_BLUE}
style={{marginLeft: 5}}
/>
)}
@@ -96,7 +96,7 @@ const Moment: React.FC<MomentProps> = ({
width={19}
height={19}
onPress={() => move('down', title)}
- color={TAGG_TEXT_LIGHT_BLUE}
+ color={TAGG_LIGHT_BLUE}
style={{marginLeft: 5}}
/>
)}
@@ -111,7 +111,7 @@ const Moment: React.FC<MomentProps> = ({
width={21}
height={21}
onPress={() => navigateToImagePicker()}
- color={TAGG_TEXT_LIGHT_BLUE}
+ color={TAGG_LIGHT_BLUE}
style={{marginRight: 10}}
/>
{shouldAllowDeletion && (
@@ -171,15 +171,10 @@ const styles = StyleSheet.create({
alignItems: 'center',
},
titleText: {
- fontSize: 16,
+ fontSize: normalize(16),
fontWeight: 'bold',
- color: TAGG_TEXT_LIGHT_BLUE,
+ color: TAGG_LIGHT_BLUE,
},
- // titleContainer: {
- // flex: 1,
- // flexDirection: 'row',
- // justifyContent: 'flex-end',
- // },
flexer: {
flex: 1,
},
diff --git a/src/components/moments/MomentPostContent.tsx b/src/components/moments/MomentPostContent.tsx
index 93271fa1..508b6d9f 100644
--- a/src/components/moments/MomentPostContent.tsx
+++ b/src/components/moments/MomentPostContent.tsx
@@ -27,6 +27,7 @@ const MomentPostContent: React.FC<MomentPostContentProps> = ({
setElapsedTime(getTimePosted(dateTime));
getMomentCommentsCount(momentId, setCommentsCount);
}, [dateTime, momentId]);
+
return (
<View style={[styles.container, style]}>
<Image
diff --git a/src/components/onboarding/TaggBigInput.tsx b/src/components/onboarding/TaggBigInput.tsx
index 4e8e1ef7..0e42bd13 100644
--- a/src/components/onboarding/TaggBigInput.tsx
+++ b/src/components/onboarding/TaggBigInput.tsx
@@ -1,5 +1,11 @@
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';
@@ -8,13 +14,15 @@ interface TaggBigInputProps extends TextInputProps {
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]}
placeholderTextColor="#ddd"
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index e7fb566b..a35a5820 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -1,3 +1,4 @@
+import {useFocusEffect, useNavigation} from '@react-navigation/native';
import React, {useCallback, useEffect, useState} from 'react';
import {
Alert,
@@ -9,52 +10,49 @@ import {
Text,
View,
} from 'react-native';
+import {TouchableOpacity} from 'react-native-gesture-handler';
import Animated from 'react-native-reanimated';
+import {useDispatch, useSelector, useStore} from 'react-redux';
+import {Cover} from '.';
+import GreyPlusLogo from '../../assets/icons/grey-plus-logo.svg';
+import {COVER_HEIGHT, TAGG_LIGHT_BLUE} from '../../constants';
import {
- CategorySelectionScreenType,
- FriendshipStatusType,
- MomentCategoryType,
- MomentType,
- ProfilePreviewType,
- ProfileType,
- ScreenType,
- UserType,
-} from '../../types';
-import {COVER_HEIGHT, TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+ UPLOAD_MOMENT_PROMPT_THREE_HEADER,
+ UPLOAD_MOMENT_PROMPT_THREE_MESSAGE,
+ UPLOAD_MOMENT_PROMPT_TWO_HEADER,
+ UPLOAD_MOMENT_PROMPT_TWO_MESSAGE,
+} from '../../constants/strings';
+import {
+ blockUnblockUser,
+ deleteUserMomentsForCategory,
+ friendUnfriendUser,
+ loadFriendsData,
+ updateMomentCategories,
+ updateUserXFriends,
+ updateUserXProfileAllScreens,
+} from '../../store/actions';
+import {
+ EMPTY_MOMENTS_LIST,
+ EMPTY_PROFILE_PREVIEW_LIST,
+ NO_PROFILE,
+ NO_USER,
+} from '../../store/initialStates';
+import {RootState} from '../../store/rootreducer';
+import {CategorySelectionScreenType, MomentType, ScreenType} from '../../types';
import {
fetchUserX,
getUserAsProfilePreviewType,
moveCategory,
+ normalize,
SCREEN_HEIGHT,
userLogin,
} from '../../utils';
-import TaggsBar from '../taggs/TaggsBar';
+import {TaggPrompt} from '../common';
import {Moment} from '../moments';
+import TaggsBar from '../taggs/TaggsBar';
import ProfileBody from './ProfileBody';
import ProfileCutout from './ProfileCutout';
import ProfileHeader from './ProfileHeader';
-import {useDispatch, useSelector, useStore} from 'react-redux';
-import {RootState} from '../../store/rootreducer';
-import {
- friendUnfriendUser,
- blockUnblockUser,
- loadFriendsData,
- updateUserXFriends,
- updateMomentCategories,
- deleteUserMomentsForCategory,
- updateUserXProfileAllScreens,
-} from '../../store/actions';
-import {
- NO_USER,
- NO_PROFILE,
- EMPTY_PROFILE_PREVIEW_LIST,
- EMPTY_MOMENTS_LIST,
-} from '../../store/initialStates';
-import {Cover} from '.';
-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';
interface ContentProps {
y: Animated.Value<number>;
@@ -113,9 +111,10 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
const [isStageOnePromptClosed, setIsStageOnePromptClosed] = useState<boolean>(
false,
);
- const [isStageThreePromptClosed, setIsStageThreePromptClosed] = useState<
- boolean
- >(false);
+ const [
+ isStageThreePromptClosed,
+ setIsStageThreePromptClosed,
+ ] = useState<boolean>(false);
const onRefresh = useCallback(() => {
const refrestState = async () => {
@@ -284,7 +283,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
momentCategories.filter((mc) => mc !== category),
false,
),
- )
+ );
dispatch(deleteUserMomentsForCategory(category));
},
},
@@ -352,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);
@@ -366,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);
@@ -423,7 +418,7 @@ const styles = StyleSheet.create({
flexDirection: 'column',
},
createCategoryButton: {
- backgroundColor: TAGG_TEXT_LIGHT_BLUE,
+ backgroundColor: TAGG_LIGHT_BLUE,
justifyContent: 'center',
alignItems: 'center',
width: '70%',
@@ -432,7 +427,7 @@ const styles = StyleSheet.create({
alignSelf: 'center',
},
createCategoryButtonLabel: {
- fontSize: 16,
+ fontSize: normalize(16),
fontWeight: '500',
color: 'white',
},
@@ -443,7 +438,7 @@ const styles = StyleSheet.create({
marginVertical: '10%',
},
noMomentsText: {
- fontSize: 14,
+ fontSize: normalize(14),
fontWeight: 'bold',
color: 'gray',
marginVertical: '8%',
diff --git a/src/components/profile/FriendsCount.tsx b/src/components/profile/FriendsCount.tsx
index 23a24787..9647710e 100644
--- a/src/components/profile/FriendsCount.tsx
+++ b/src/components/profile/FriendsCount.tsx
@@ -5,6 +5,7 @@ import {useNavigation} from '@react-navigation/native';
import {RootState} from '../../store/rootReducer';
import {useSelector} from 'react-redux';
import {ScreenType} from '../../types';
+import {normalize} from '../../utils';
interface FriendsCountProps extends ViewProps {
userXId: string | undefined;
@@ -55,11 +56,11 @@ const styles = StyleSheet.create({
},
count: {
fontWeight: '700',
- fontSize: 13,
+ fontSize: normalize(14),
},
label: {
fontWeight: '500',
- fontSize: 13,
+ fontSize: normalize(14),
},
});
diff --git a/src/components/profile/ProfileBody.tsx b/src/components/profile/ProfileBody.tsx
index 6284ff59..d10e2e15 100644
--- a/src/components/profile/ProfileBody.tsx
+++ b/src/components/profile/ProfileBody.tsx
@@ -1,9 +1,9 @@
import React from 'react';
import {StyleSheet, View, Text, LayoutChangeEvent, Linking} from 'react-native';
-import {Button} from 'react-native-elements';
+import {Button, normalize} from 'react-native-elements';
import {
TAGG_DARK_BLUE,
- TAGG_TEXT_LIGHT_BLUE,
+ TAGG_LIGHT_BLUE,
TOGGLE_BUTTON_TYPE,
} from '../../constants';
import ToggleButton from './ToggleButton';
@@ -160,16 +160,15 @@ const styles = StyleSheet.create({
},
username: {
fontWeight: '600',
- fontSize: 16.5,
+ fontSize: normalize(12),
marginBottom: '1%',
- marginTop: '-3%',
},
biography: {
- fontSize: 16,
+ fontSize: normalize(12),
marginBottom: '1.5%',
},
website: {
- fontSize: 16,
+ fontSize: normalize(12),
color: TAGG_DARK_BLUE,
marginBottom: '1%',
},
@@ -178,7 +177,7 @@ const styles = StyleSheet.create({
alignItems: 'center',
width: SCREEN_WIDTH * 0.4,
height: SCREEN_WIDTH * 0.09,
- borderColor: TAGG_TEXT_LIGHT_BLUE,
+ borderColor: TAGG_LIGHT_BLUE,
borderWidth: 3,
borderRadius: 5,
marginRight: '2%',
@@ -186,7 +185,7 @@ const styles = StyleSheet.create({
backgroundColor: 'transparent',
},
requestedButtonTitle: {
- color: TAGG_TEXT_LIGHT_BLUE,
+ color: TAGG_LIGHT_BLUE,
padding: 0,
fontSize: 14,
fontWeight: '700',
@@ -205,7 +204,7 @@ const styles = StyleSheet.create({
padding: 0,
borderRadius: 5,
marginRight: '2%',
- backgroundColor: TAGG_TEXT_LIGHT_BLUE,
+ backgroundColor: TAGG_LIGHT_BLUE,
},
});
diff --git a/src/components/profile/ProfileHeader.tsx b/src/components/profile/ProfileHeader.tsx
index 8d502d97..7dad2a68 100644
--- a/src/components/profile/ProfileHeader.tsx
+++ b/src/components/profile/ProfileHeader.tsx
@@ -2,10 +2,10 @@ import React, {useState} from 'react';
import {StyleSheet, Text, View} from 'react-native';
import {useSelector} from 'react-redux';
import {UniversityIcon} from '.';
-import {NO_MOMENTS} from '../../store/initialStates';
+import {PROFILE_CUTOUT_TOP_Y} from '../../constants';
import {RootState} from '../../store/rootreducer';
import {ScreenType} from '../../types';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {normalize} from '../../utils';
import Avatar from './Avatar';
import FriendsCount from './FriendsCount';
import ProfileMoreInfoDrawer from './ProfileMoreInfoDrawer';
@@ -31,7 +31,6 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
: useSelector((state: RootState) => state.user);
const [drawerVisible, setDrawerVisible] = useState(false);
const [firstName, lastName] = [...name.split(' ')];
-
return (
<View style={styles.container}>
<ProfileMoreInfoDrawer
@@ -59,13 +58,8 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
</View>
)}
<View style={styles.friendsAndUniversity}>
- <FriendsCount
- style={styles.friends}
- screenType={screenType}
- userXId={userXId}
- />
+ <FriendsCount screenType={screenType} userXId={userXId} />
<UniversityIcon
- style={styles.university}
university="brown"
university_class={university_class}
/>
@@ -78,7 +72,7 @@ const ProfileHeader: React.FC<ProfileHeaderProps> = ({
const styles = StyleSheet.create({
container: {
- top: SCREEN_HEIGHT / 2.4,
+ top: PROFILE_CUTOUT_TOP_Y * 1.02,
width: '100%',
position: 'absolute',
},
@@ -87,35 +81,27 @@ const styles = StyleSheet.create({
},
header: {
flexDirection: 'column',
- justifyContent: 'center',
+ justifyContent: 'space-evenly',
alignItems: 'center',
- marginTop: SCREEN_WIDTH / 18.2,
- marginLeft: SCREEN_WIDTH / 8,
- marginBottom: SCREEN_WIDTH / 50,
+ marginRight: '15%',
+ marginLeft: '5%',
+ flex: 1,
},
avatar: {
- bottom: SCREEN_WIDTH / 80,
- left: '10%',
+ marginLeft: '3%',
+ top: '-8%',
},
name: {
- marginLeft: SCREEN_WIDTH / 8,
- fontSize: 17,
+ fontSize: normalize(17),
fontWeight: '500',
alignSelf: 'center',
},
- friends: {
- alignSelf: 'flex-start',
- marginRight: SCREEN_WIDTH / 20,
- },
- university: {
- alignSelf: 'flex-end',
- bottom: 3,
- },
friendsAndUniversity: {
flexDirection: 'row',
- flex: 1,
- marginLeft: SCREEN_WIDTH / 10,
- marginTop: SCREEN_WIDTH / 40,
+ alignItems: 'center',
+ justifyContent: 'space-evenly',
+ width: '100%',
+ height: 50,
},
});
diff --git a/src/components/profile/ProfileMoreInfoDrawer.tsx b/src/components/profile/ProfileMoreInfoDrawer.tsx
index 76f0f27f..daa83eb3 100644
--- a/src/components/profile/ProfileMoreInfoDrawer.tsx
+++ b/src/components/profile/ProfileMoreInfoDrawer.tsx
@@ -4,7 +4,7 @@ import {StyleSheet, TouchableOpacity} from 'react-native';
import {useSelector} from 'react-redux';
import MoreIcon from '../../assets/icons/more_horiz-24px.svg';
import PersonOutline from '../../assets/ionicons/person-outline.svg';
-import {TAGG_DARK_BLUE, TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {TAGG_DARK_BLUE, TAGG_LIGHT_BLUE} from '../../constants';
import {RootState} from '../../store/rootreducer';
import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
import {GenericMoreInfoDrawer} from '../common';
@@ -101,13 +101,12 @@ const styles = StyleSheet.create({
panelButtonTitleCancel: {
fontSize: 18,
fontWeight: 'bold',
- color: TAGG_TEXT_LIGHT_BLUE,
+ color: TAGG_LIGHT_BLUE,
},
divider: {height: 1, borderWidth: 1, borderColor: '#e7e7e7'},
more: {
position: 'absolute',
right: '5%',
- marginTop: '4%',
zIndex: 1,
},
});
diff --git a/src/components/profile/ProfilePreview.tsx b/src/components/profile/ProfilePreview.tsx
index b2c0a24d..389ca367 100644
--- a/src/components/profile/ProfilePreview.tsx
+++ b/src/components/profile/ProfilePreview.tsx
@@ -1,27 +1,26 @@
-import React, {useEffect, useState, useContext} from 'react';
-import {ProfilePreviewType, ScreenType} from '../../types';
+import AsyncStorage from '@react-native-community/async-storage';
+import {useNavigation} from '@react-navigation/native';
+import React, {useEffect, useState} from 'react';
import {
- View,
- Text,
+ Alert,
Image,
StyleSheet,
- ViewProps,
+ Text,
TouchableOpacity,
- Alert,
+ View,
+ ViewProps,
} from 'react-native';
-import {useNavigation} from '@react-navigation/native';
-import RNFetchBlob from 'rn-fetch-blob';
-import AsyncStorage from '@react-native-community/async-storage';
-import {PROFILE_PHOTO_THUMBNAIL_ENDPOINT} from '../../constants';
-import {UserType, PreviewType} from '../../types';
-import {isUserBlocked, loadAvatar} from '../../services';
-import {useSelector, useDispatch, useStore} from 'react-redux';
+import {useDispatch, useSelector, useStore} from 'react-redux';
+import {ERROR_UNABLE_TO_VIEW_PROFILE} from '../../constants/strings';
+import {loadAvatar} from '../../services';
import {RootState} from '../../store/rootreducer';
-import {logout} from '../../store/actions';
+import {
+ PreviewType,
+ ProfilePreviewType,
+ ScreenType,
+ UserType,
+} from '../../types';
import {checkIfUserIsBlocked, fetchUserX, userXInStore} from '../../utils';
-import {SearchResultsBackground} from '../search';
-import NavigationBar from 'src/routes/tabs';
-import {ERROR_UNABLE_TO_VIEW_PROFILE} from '../../constants/strings';
const NO_USER: UserType = {
userId: '',
diff --git a/src/components/profile/ToggleButton.tsx b/src/components/profile/ToggleButton.tsx
index 5d8f7874..236d811c 100644
--- a/src/components/profile/ToggleButton.tsx
+++ b/src/components/profile/ToggleButton.tsx
@@ -1,7 +1,7 @@
import * as React from 'react';
import {StyleSheet, Text} from 'react-native';
import {TouchableOpacity} from 'react-native-gesture-handler';
-import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {TAGG_LIGHT_BLUE} from '../../constants';
import {getToggleButtonText, SCREEN_WIDTH} from '../../utils';
type ToggleButtonProps = {
@@ -36,7 +36,7 @@ const styles = StyleSheet.create({
alignItems: 'center',
width: SCREEN_WIDTH * 0.4,
height: SCREEN_WIDTH * 0.08,
- borderColor: TAGG_TEXT_LIGHT_BLUE,
+ borderColor: TAGG_LIGHT_BLUE,
borderWidth: 3,
borderRadius: 5,
marginRight: '2%',
@@ -45,10 +45,10 @@ const styles = StyleSheet.create({
fontWeight: 'bold',
},
buttonColor: {
- backgroundColor: TAGG_TEXT_LIGHT_BLUE,
+ backgroundColor: TAGG_LIGHT_BLUE,
},
textColor: {color: 'white'},
buttonColorToggled: {backgroundColor: 'white'},
- textColorToggled: {color: TAGG_TEXT_LIGHT_BLUE},
+ textColorToggled: {color: TAGG_LIGHT_BLUE},
});
export default ToggleButton;
diff --git a/src/components/profile/UniversityIcon.tsx b/src/components/profile/UniversityIcon.tsx
index 13586359..95aef8b9 100644
--- a/src/components/profile/UniversityIcon.tsx
+++ b/src/components/profile/UniversityIcon.tsx
@@ -1,7 +1,7 @@
import React from 'react';
import {StyleSheet, ViewProps} from 'react-native';
import {Image, Text, View} from 'react-native-animatable';
-import {getUniversityClass} from '../../utils';
+import {getUniversityClass, normalize} from '../../utils';
export interface UniversityIconProps extends ViewProps {
university: string;
@@ -38,19 +38,19 @@ const UniversityIcon: React.FC<UniversityIconProps> = ({
const styles = StyleSheet.create({
container: {
- flex: 1,
flexDirection: 'column',
flexWrap: 'wrap',
justifyContent: 'center',
+ alignItems: 'center',
+ height: '100%',
},
univClass: {
- fontSize: 13,
+ fontSize: normalize(14),
fontWeight: '500',
},
icon: {
- alignSelf: 'center',
- width: 17,
- height: 19,
+ width: normalize(17),
+ height: normalize(19),
},
});
diff --git a/src/components/search/Explore.tsx b/src/components/search/Explore.tsx
index c07c66b8..4a71249b 100644
--- a/src/components/search/Explore.tsx
+++ b/src/components/search/Explore.tsx
@@ -4,6 +4,7 @@ import {useSelector} from 'react-redux';
import {EXPLORE_SECTION_TITLES} from '../../constants';
import {RootState} from '../../store/rootReducer';
import {ExploreSectionType} from '../../types';
+import {normalize} from '../../utils';
import ExploreSection from './ExploreSection';
const Explore: React.FC = () => {
@@ -21,11 +22,10 @@ const Explore: React.FC = () => {
const styles = StyleSheet.create({
container: {
zIndex: 0,
- // margin: '5%',
},
header: {
fontWeight: '700',
- fontSize: 22,
+ fontSize: normalize(22),
color: '#fff',
marginBottom: '2%',
margin: '5%',
diff --git a/src/components/search/ExploreSection.tsx b/src/components/search/ExploreSection.tsx
index 8e8b4988..17079e77 100644
--- a/src/components/search/ExploreSection.tsx
+++ b/src/components/search/ExploreSection.tsx
@@ -1,6 +1,7 @@
import React, {Fragment} from 'react';
import {ScrollView, StyleSheet, Text, View} from 'react-native';
import {ProfilePreviewType} from '../../types';
+import {normalize} from '../../utils';
import ExploreSectionUser from './ExploreSectionUser';
/**
@@ -34,7 +35,7 @@ const styles = StyleSheet.create({
},
header: {
fontWeight: '600',
- fontSize: 20,
+ fontSize: normalize(18),
color: '#fff',
marginLeft: '5%',
marginBottom: '5%',
diff --git a/src/components/search/ExploreSectionUser.tsx b/src/components/search/ExploreSectionUser.tsx
index 0bf68a20..68e077e3 100644
--- a/src/components/search/ExploreSectionUser.tsx
+++ b/src/components/search/ExploreSectionUser.tsx
@@ -12,7 +12,7 @@ import {useDispatch, useSelector, useStore} from 'react-redux';
import {loadAvatar} from '../../services';
import {RootState} from '../../store/rootReducer';
import {ProfilePreviewType, ScreenType} from '../../types';
-import {fetchUserX, userXInStore} from '../../utils';
+import {fetchUserX, normalize, userXInStore} from '../../utils';
/**
* Search Screen for user recommendations and a search
@@ -110,13 +110,13 @@ const styles = StyleSheet.create({
name: {
fontWeight: '600',
flexWrap: 'wrap',
- fontSize: 16,
+ fontSize: normalize(16),
color: '#fff',
textAlign: 'center',
},
username: {
fontWeight: '400',
- fontSize: 14,
+ fontSize: normalize(14),
color: '#fff',
},
});
diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx
index 8a06017c..bdbd5773 100644
--- a/src/components/search/RecentSearches.tsx
+++ b/src/components/search/RecentSearches.tsx
@@ -7,7 +7,7 @@ import {
TouchableOpacityProps,
} from 'react-native';
import {PreviewType, ProfilePreviewType, ScreenType} from 'src/types';
-import {TAGG_TEXT_LIGHT_BLUE} from '../../constants';
+import {TAGG_LIGHT_BLUE} from '../../constants';
import SearchResults from './SearchResults';
interface RecentSearchesProps extends TouchableOpacityProps {
@@ -55,7 +55,7 @@ const styles = StyleSheet.create({
clear: {
fontSize: 18,
fontWeight: 'bold',
- color: TAGG_TEXT_LIGHT_BLUE,
+ color: TAGG_LIGHT_BLUE,
},
});
diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx
index 82ac07df..5fa8b395 100644
--- a/src/components/taggs/Tagg.tsx
+++ b/src/components/taggs/Tagg.tsx
@@ -22,6 +22,7 @@ import {
ERROR_UNABLE_TO_FIND_PROFILE,
SUCCESS_LINK,
} from '../../constants/strings';
+import {normalize} from '../../utils';
interface TaggProps {
social: string;
@@ -165,7 +166,7 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
alignItems: 'center',
marginHorizontal: 15,
- height: 90,
+ height: normalize(90),
},
iconTap: {
justifyContent: 'center',
diff --git a/src/components/taggs/TwitterTaggPost.tsx b/src/components/taggs/TwitterTaggPost.tsx
index c971a82c..0cfde857 100644
--- a/src/components/taggs/TwitterTaggPost.tsx
+++ b/src/components/taggs/TwitterTaggPost.tsx
@@ -6,7 +6,7 @@ import LinearGradient from 'react-native-linear-gradient';
import {
AVATAR_DIM,
TAGGS_GRADIENT,
- TAGG_TEXT_LIGHT_BLUE,
+ TAGG_LIGHT_BLUE,
} from '../../constants';
import {TwitterPostType} from '../../types';
import {handleOpenSocialUrlOnBrowser, SCREEN_WIDTH} from '../../utils';
@@ -237,7 +237,7 @@ const styles = StyleSheet.create({
},
replyShowThisThread: {
fontSize: 15,
- color: TAGG_TEXT_LIGHT_BLUE,
+ color: TAGG_LIGHT_BLUE,
},
});
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 15:56:09 +0000