aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/common/FriendsButton.tsx1
-rw-r--r--src/components/common/GenericMoreInfoDrawer.tsx8
-rw-r--r--src/components/common/SocialIcon.tsx7
-rw-r--r--src/components/profile/Content.tsx5
-rw-r--r--src/components/profile/ProfileMoreInfoDrawer.tsx27
-rw-r--r--src/components/taggs/Tagg.tsx32
-rw-r--r--src/components/taggs/TaggsBar.tsx10
7 files changed, 55 insertions, 35 deletions
diff --git a/src/components/common/FriendsButton.tsx b/src/components/common/FriendsButton.tsx
index a1e107c5..46421bd1 100644
--- a/src/components/common/FriendsButton.tsx
+++ b/src/components/common/FriendsButton.tsx
@@ -128,6 +128,7 @@ const styles = StyleSheet.create({
row: {
flex: 1,
flexDirection: 'row',
+ justifyContent: 'space-between',
},
});
diff --git a/src/components/common/GenericMoreInfoDrawer.tsx b/src/components/common/GenericMoreInfoDrawer.tsx
index a23d7736..ff32a464 100644
--- a/src/components/common/GenericMoreInfoDrawer.tsx
+++ b/src/components/common/GenericMoreInfoDrawer.tsx
@@ -11,7 +11,7 @@ import {
import {useSafeAreaInsets} from 'react-native-safe-area-context';
import {BottomDrawer} from '.';
import {TAGG_LIGHT_BLUE} from '../../constants';
-import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
+import {normalize, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
// conforms the JSX onPress attribute type
type OnPressHandler = (event: GestureResponderEvent) => void;
@@ -75,8 +75,10 @@ const styles = StyleSheet.create({
borderTopRightRadius: 20,
},
panelButtonTitle: {
- fontSize: 18,
- fontWeight: 'bold',
+ fontSize: 17,
+ fontWeight: '600',
+ lineHeight: normalize(20),
+ letterSpacing: normalize(0.1),
},
icon: {
height: 25,
diff --git a/src/components/common/SocialIcon.tsx b/src/components/common/SocialIcon.tsx
index 8216b6ff..cb3b926b 100644
--- a/src/components/common/SocialIcon.tsx
+++ b/src/components/common/SocialIcon.tsx
@@ -1,11 +1,10 @@
import React from 'react';
import {Image} from 'react-native';
-import {ScreenType} from '../../types';
interface SocialIconProps {
social: string;
style: object;
- screenType: ScreenType;
+ whiteRing: boolean | undefined;
}
/**
* An image component that returns the <Image> of the icon for a specific social media platform.
@@ -13,12 +12,12 @@ interface SocialIconProps {
const SocialIcon: React.FC<SocialIconProps> = ({
social: social,
style: style,
- screenType,
+ whiteRing,
}) => {
switch (social) {
case 'Instagram':
var icon = require('../../assets/socials/instagram-icon.png');
- if (screenType === ScreenType.SuggestedPeople) {
+ if (whiteRing) {
icon = require('../../assets/socials/instagram-icon-white-bg.png');
}
break;
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 86d40f1b..e75ae949 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -309,9 +309,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
isBlocked,
}}
/>
- <View style={styles.taggsbarContainer}>
- <TaggsBar {...{y, profileBodyHeight, userXId, screenType}} />
- </View>
+ <TaggsBar {...{y, profileBodyHeight, userXId, screenType}} />
<View style={styles.momentsContainer}>
{userXId && moments.length === 0 && (
<View style={styles.plusIconContainer}>
@@ -418,7 +416,6 @@ const styles = StyleSheet.create({
color: 'gray',
marginVertical: '8%',
},
- taggsbarContainer: {paddingHorizontal: 15},
});
export default Content;
diff --git a/src/components/profile/ProfileMoreInfoDrawer.tsx b/src/components/profile/ProfileMoreInfoDrawer.tsx
index daa83eb3..90f5da48 100644
--- a/src/components/profile/ProfileMoreInfoDrawer.tsx
+++ b/src/components/profile/ProfileMoreInfoDrawer.tsx
@@ -1,10 +1,11 @@
import {useNavigation} from '@react-navigation/native';
import React from 'react';
-import {StyleSheet, TouchableOpacity} from 'react-native';
+import {Alert, Image, 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_LIGHT_BLUE} from '../../constants';
+import {ERROR_ATTEMPT_EDIT_SP} from '../../constants/strings';
import {RootState} from '../../store/rootreducer';
import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
import {GenericMoreInfoDrawer} from '../common';
@@ -25,6 +26,9 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
user: {userId, username},
} = useSelector((state: RootState) => state.user);
const isOwnProfile = !userXId || userXName === username;
+ const {suggested_people_linked} = useSelector(
+ (state: RootState) => state.user.profile,
+ );
const goToEditProfile = () => {
navigation.push('EditProfile', {
@@ -34,6 +38,15 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
setIsOpen(false);
};
+ const goToUpdateSPProfile = () => {
+ if (suggested_people_linked === 0) {
+ Alert.alert(ERROR_ATTEMPT_EDIT_SP);
+ } else {
+ navigation.push('UpdateSPPicture');
+ setIsOpen(false);
+ }
+ };
+
const onBlockUnblock = () => {
handleBlockUnblock(() => setIsOpen(false));
};
@@ -66,6 +79,14 @@ const ProfileMoreInfoDrawer: React.FC<ProfileMoreInfoDrawerProps> = (props) => {
showIcons={true}
textColor={'black'}
buttons={[
+ [
+ 'Edit Suggested',
+ goToUpdateSPProfile,
+ <Image
+ source={require('../../assets/ionicons/suggested-outlined.png')}
+ style={styles.image}
+ />,
+ ],
['Edit Profile', goToEditProfile, <PersonOutline color="black" />],
]}
/>
@@ -109,6 +130,10 @@ const styles = StyleSheet.create({
right: '5%',
zIndex: 1,
},
+ image: {
+ width: 25,
+ height: 25,
+ },
});
export default ProfileMoreInfoDrawer;
diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx
index 66694132..547a77cb 100644
--- a/src/components/taggs/Tagg.tsx
+++ b/src/components/taggs/Tagg.tsx
@@ -1,5 +1,5 @@
import {useNavigation} from '@react-navigation/native';
-import React, {Fragment, useContext, useEffect, useState} from 'react';
+import React, {Fragment, useState} from 'react';
import {Alert, Linking, StyleSheet, TouchableOpacity, View} from 'react-native';
import PurpleRingPlus from '../../assets/icons/purple_ring+.svg';
import PurpleRing from '../../assets/icons/purple_ring.svg';
@@ -17,7 +17,7 @@ import {
registerNonIntegratedSocialLink,
} from '../../services';
import {SmallSocialIcon, SocialIcon, SocialLinkModal} from '../common';
-import {ScreenType, UserType} from '../../types';
+import {UserType} from '../../types';
import {
ERROR_LINK,
ERROR_UNABLE_TO_FIND_PROFILE,
@@ -33,7 +33,7 @@ interface TaggProps {
setSocialDataNeedUpdate: (social: string, username: string) => void;
userXId: string | undefined;
user: UserType;
- screenType: ScreenType;
+ whiteRing: boolean | undefined;
}
const Tagg: React.FC<TaggProps> = ({
@@ -44,7 +44,7 @@ const Tagg: React.FC<TaggProps> = ({
setSocialDataNeedUpdate,
userXId,
user,
- screenType,
+ whiteRing,
}) => {
const navigation = useNavigation();
const [modalVisible, setModalVisible] = useState(false);
@@ -100,8 +100,9 @@ const Tagg: React.FC<TaggProps> = ({
const pickTheRightRingHere = () => {
if (youMayPass) {
- if (screenType === ScreenType.SuggestedPeople)
+ if (whiteRing) {
return <WhiteRing width={TAGG_RING_DIM} height={TAGG_RING_DIM} />;
+ }
if (social === 'Tagg') {
return <Ring width={TAGG_RING_DIM} height={TAGG_RING_DIM} />;
} else {
@@ -141,23 +142,14 @@ const Tagg: React.FC<TaggProps> = ({
setModalVisible={setModalVisible}
completionCallback={linkNonIntegratedSocial}
/>
- <View
- style={
- screenType === ScreenType.SuggestedPeople
- ? styles.spcontainer
- : styles.container
- }>
+ <View style={whiteRing ? styles.spcontainer : styles.container}>
<TouchableOpacity
style={styles.iconTap}
onPress={modalOrAuthBrowserOrPass}>
- <SocialIcon
- style={styles.icon}
- social={social}
- screenType={screenType}
- />
+ <SocialIcon style={styles.icon} social={social} whiteRing />
{pickTheRightRingHere()}
</TouchableOpacity>
- {screenType !== ScreenType.SuggestedPeople && (
+ {!whiteRing && (
<View style={styles.smallIconContainer}>
<SmallSocialIcon
style={[
@@ -182,13 +174,15 @@ const styles = StyleSheet.create({
spcontainer: {
justifyContent: 'space-between',
alignItems: 'center',
- marginRight: 34,
+ marginRight: 15,
+ marginLeft: 19,
height: normalize(60),
},
container: {
justifyContent: 'space-between',
alignItems: 'center',
- marginRight: 34,
+ marginRight: 15,
+ marginLeft: 15,
height: normalize(90),
},
iconTap: {
diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx
index c23f56a9..05ee18bb 100644
--- a/src/components/taggs/TaggsBar.tsx
+++ b/src/components/taggs/TaggsBar.tsx
@@ -20,12 +20,14 @@ interface TaggsBarProps {
profileBodyHeight: number;
userXId: string | undefined;
screenType: ScreenType;
+ whiteRing: boolean | undefined;
}
const TaggsBar: React.FC<TaggsBarProps> = ({
y,
profileBodyHeight,
userXId,
screenType,
+ whiteRing,
}) => {
let [taggs, setTaggs] = useState<Object[]>([]);
let [taggsNeedUpdate, setTaggsNeedUpdate] = useState(true);
@@ -72,12 +74,12 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1}
setTaggsNeedUpdate={setTaggsNeedUpdate}
setSocialDataNeedUpdate={handleSocialUpdate}
- screenType={screenType}
+ whiteRing={whiteRing ? whiteRing : undefined}
/>,
);
i++;
}
- if (!userXId && screenType !== ScreenType.SuggestedPeople) {
+ if (!userXId && !whiteRing) {
for (let social of unlinkedSocials) {
new_taggs.push(
<Tagg
@@ -89,7 +91,7 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
setSocialDataNeedUpdate={handleSocialUpdate}
userXId={userXId}
user={user}
- screenType={screenType}
+ whiteRing={whiteRing ? whiteRing : undefined}
/>,
);
i++;
@@ -126,7 +128,7 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
return taggs.length > 0 ? (
<View
style={
- screenType === ScreenType.SuggestedPeople
+ whiteRing
? [styles.spContainer]
: [styles.container, {shadowOpacity, paddingTop}]
}>
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-18 00:12:44 +0000