aboutsummaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/assets/icons/ring-white.svg1
-rw-r--r--src/assets/socials/instagram-icon-white-bg.pngbin0 -> 531448 bytes
-rw-r--r--src/components/common/SocialIcon.tsx6
-rw-r--r--src/components/common/SocialLinkModal.tsx12
-rw-r--r--src/components/moments/Moment.tsx2
-rw-r--r--src/components/moments/MomentTile.tsx2
-rw-r--r--src/components/onboarding/LinkSocialMedia.tsx8
-rw-r--r--src/components/onboarding/SocialMediaLinker.tsx8
-rw-r--r--src/components/profile/Content.tsx6
-rw-r--r--src/components/search/RecentSearches.tsx2
-rw-r--r--src/components/taggs/SocialMediaInfo.tsx7
-rw-r--r--src/components/taggs/Tagg.tsx41
-rw-r--r--src/components/taggs/TaggsBar.tsx19
-rw-r--r--src/screens/profile/EditProfile.tsx14
-rw-r--r--src/screens/profile/SocialMediaTaggs.tsx2
-rw-r--r--src/screens/suggestedPeople/SuggestedPeopleScreen.tsx23
-rw-r--r--src/services/UserFriendsService.ts2
-rw-r--r--src/services/UserProfileService.ts3
18 files changed, 118 insertions, 40 deletions
diff --git a/src/assets/icons/ring-white.svg b/src/assets/icons/ring-white.svg
new file mode 100644
index 00000000..c78e9418
--- /dev/null
+++ b/src/assets/icons/ring-white.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 216 216"><defs><style>.cls-1{fill:#fff;}</style></defs><path class="cls-1" d="M108,1.83A106.17,106.17,0,1,0,214.17,108,106.16,106.16,0,0,0,108,1.83Zm0,198.58A92.41,92.41,0,1,1,200.41,108,92.41,92.41,0,0,1,108,200.41Z"/></svg> \ No newline at end of file
diff --git a/src/assets/socials/instagram-icon-white-bg.png b/src/assets/socials/instagram-icon-white-bg.png
new file mode 100644
index 00000000..2d6940ca
--- /dev/null
+++ b/src/assets/socials/instagram-icon-white-bg.png
Binary files differ
diff --git a/src/components/common/SocialIcon.tsx b/src/components/common/SocialIcon.tsx
index 3c9deb6d..8216b6ff 100644
--- a/src/components/common/SocialIcon.tsx
+++ b/src/components/common/SocialIcon.tsx
@@ -1,9 +1,11 @@
import React from 'react';
import {Image} from 'react-native';
+import {ScreenType} from '../../types';
interface SocialIconProps {
social: string;
style: object;
+ screenType: ScreenType;
}
/**
* An image component that returns the <Image> of the icon for a specific social media platform.
@@ -11,10 +13,14 @@ interface SocialIconProps {
const SocialIcon: React.FC<SocialIconProps> = ({
social: social,
style: style,
+ screenType,
}) => {
switch (social) {
case 'Instagram':
var icon = require('../../assets/socials/instagram-icon.png');
+ if (screenType === ScreenType.SuggestedPeople) {
+ icon = require('../../assets/socials/instagram-icon-white-bg.png');
+ }
break;
case 'Facebook':
var icon = require('../../assets/socials/facebook-icon.png');
diff --git a/src/components/common/SocialLinkModal.tsx b/src/components/common/SocialLinkModal.tsx
index 67a3f074..20061cd0 100644
--- a/src/components/common/SocialLinkModal.tsx
+++ b/src/components/common/SocialLinkModal.tsx
@@ -1,6 +1,7 @@
import React from 'react';
import {Modal, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import {TextInput} from 'react-native-gesture-handler';
+import {ScreenType} from '../../types';
import {SocialIcon} from '.';
import CloseIcon from '../../assets/ionicons/close-outline.svg';
import {normalize, SCREEN_WIDTH} from '../../utils';
@@ -46,7 +47,11 @@ const SocialLinkModal: React.FC<SocialLinkModalProps> = ({
<TouchableOpacity style={styles.closeButton} onPress={onClosePress}>
<CloseIcon height={'100%'} width={'100%'} color={'grey'} />
</TouchableOpacity>
- <SocialIcon style={styles.icon} social={social} />
+ <SocialIcon
+ style={styles.icon}
+ social={social}
+ screenType={ScreenType.Profile}
+ />
<Text style={styles.titleLabel}>{social}</Text>
<Text style={styles.descriptionLabel}>
Insert your {social.toLowerCase()} username to link your{' '}
@@ -64,8 +69,9 @@ const SocialLinkModal: React.FC<SocialLinkModalProps> = ({
<TaggSquareButton
title={'Submit'}
onPress={onSubmit}
- mode={'gradient'}
- color={'white'}
+ buttonStyle={'gradient'}
+ buttonColor={'white'}
+ labelColor={'white'}
/>
</View>
</CenteredView>
diff --git a/src/components/moments/Moment.tsx b/src/components/moments/Moment.tsx
index a6b553b1..10cf6070 100644
--- a/src/components/moments/Moment.tsx
+++ b/src/components/moments/Moment.tsx
@@ -5,7 +5,7 @@ import {Text} from 'react-native-animatable';
import {ScrollView, TouchableOpacity} from 'react-native-gesture-handler';
import ImagePicker from 'react-native-image-crop-picker';
import LinearGradient from 'react-native-linear-gradient';
-import {MomentType, ScreenType} from 'src/types';
+import {MomentType, ScreenType} from '../../types';
import DeleteIcon from '../../assets/icons/delete-logo.svg';
import DownIcon from '../../assets/icons/down_icon.svg';
import PlusIcon from '../../assets/icons/plus_icon-01.svg';
diff --git a/src/components/moments/MomentTile.tsx b/src/components/moments/MomentTile.tsx
index 69701192..96eb35b6 100644
--- a/src/components/moments/MomentTile.tsx
+++ b/src/components/moments/MomentTile.tsx
@@ -1,7 +1,7 @@
import {useNavigation} from '@react-navigation/native';
import React from 'react';
import {StyleSheet, View, Image, TouchableOpacity} from 'react-native';
-import {MomentType, ScreenType} from 'src/types';
+import {MomentType, ScreenType} from '../../types';
interface MomentTileProps {
moment: MomentType;
diff --git a/src/components/onboarding/LinkSocialMedia.tsx b/src/components/onboarding/LinkSocialMedia.tsx
index 8938b9a0..f3915752 100644
--- a/src/components/onboarding/LinkSocialMedia.tsx
+++ b/src/components/onboarding/LinkSocialMedia.tsx
@@ -18,7 +18,7 @@ import {
handlePressForAuthBrowser,
registerNonIntegratedSocialLink,
} from '../../services';
-import {LinkerType} from '../../types';
+import {LinkerType, ScreenType} from '../../types';
import SocialIcon from '../common/SocialIcon';
interface SocialMediaLinkerProps extends TouchableOpacityProps {
@@ -91,7 +91,11 @@ const SocialMediaLinker: React.FC<SocialMediaLinkerProps> = ({
activeOpacity={0.7}
onPress={modelOrAuthBrowser}
style={styles.container}>
- <SocialIcon social={label} style={styles.icon} />
+ <SocialIcon
+ social={label}
+ style={styles.icon}
+ screenType={ScreenType.Profile}
+ />
<Text style={[styles.label, {color: font_color}]}>{label}</Text>
{authenticated && (
<Image
diff --git a/src/components/onboarding/SocialMediaLinker.tsx b/src/components/onboarding/SocialMediaLinker.tsx
index da637f99..559a2990 100644
--- a/src/components/onboarding/SocialMediaLinker.tsx
+++ b/src/components/onboarding/SocialMediaLinker.tsx
@@ -6,7 +6,7 @@ import {
TouchableOpacity,
TouchableOpacityProps,
} from 'react-native';
-import {LinkerType} from 'src/types';
+import {LinkerType, ScreenType} from '../../types';
import {SOCIAL_FONT_COLORS} from '../../constants/constants';
import {handlePressForAuthBrowser} from '../../services';
import SocialIcon from '../common/SocialIcon';
@@ -66,7 +66,11 @@ const SocialMediaLinker: React.FC<SocialMediaLinkerProps> = ({
activeOpacity={0.7}
onPress={handlePress}
style={styles.container}>
- <SocialIcon social={label} style={styles.icon} />
+ <SocialIcon
+ social={label}
+ style={styles.icon}
+ screenType={ScreenType.Profile}
+ />
<Text style={[styles.label, {color: font_color}]}>{label}</Text>
{state.socialLinked && (
<Image
diff --git a/src/components/profile/Content.tsx b/src/components/profile/Content.tsx
index 28000dd7..86d40f1b 100644
--- a/src/components/profile/Content.tsx
+++ b/src/components/profile/Content.tsx
@@ -309,7 +309,9 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
isBlocked,
}}
/>
- <TaggsBar {...{y, profileBodyHeight, userXId, screenType}} />
+ <View style={styles.taggsbarContainer}>
+ <TaggsBar {...{y, profileBodyHeight, userXId, screenType}} />
+ </View>
<View style={styles.momentsContainer}>
{userXId && moments.length === 0 && (
<View style={styles.plusIconContainer}>
@@ -382,6 +384,7 @@ const Content: React.FC<ContentProps> = ({y, userXId, screenType}) => {
const styles = StyleSheet.create({
container: {
flex: 1,
+ backgroundColor: '#fff',
},
momentsContainer: {
backgroundColor: '#f2f2f2',
@@ -415,6 +418,7 @@ const styles = StyleSheet.create({
color: 'gray',
marginVertical: '8%',
},
+ taggsbarContainer: {paddingHorizontal: 15},
});
export default Content;
diff --git a/src/components/search/RecentSearches.tsx b/src/components/search/RecentSearches.tsx
index bdbd5773..bebf6bcf 100644
--- a/src/components/search/RecentSearches.tsx
+++ b/src/components/search/RecentSearches.tsx
@@ -6,7 +6,7 @@ import {
StyleSheet,
TouchableOpacityProps,
} from 'react-native';
-import {PreviewType, ProfilePreviewType, ScreenType} from 'src/types';
+import {PreviewType, ProfilePreviewType, ScreenType} from '../../types';
import {TAGG_LIGHT_BLUE} from '../../constants';
import SearchResults from './SearchResults';
diff --git a/src/components/taggs/SocialMediaInfo.tsx b/src/components/taggs/SocialMediaInfo.tsx
index c25d0297..46e651f9 100644
--- a/src/components/taggs/SocialMediaInfo.tsx
+++ b/src/components/taggs/SocialMediaInfo.tsx
@@ -1,5 +1,6 @@
import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
+import { ScreenType } from '../../types';
import {SocialIcon} from '..';
import {handleOpenSocialUrlOnBrowser} from '../../utils';
@@ -30,7 +31,11 @@ const SocialMediaInfo: React.FC<SocialMediaInfoProps> = ({
)}
<View style={styles.row}>
<View />
- <SocialIcon style={styles.icon} social={type} />
+ <SocialIcon
+ style={styles.icon}
+ social={type}
+ screenType={ScreenType.Profile}
+ />
<Text
style={styles.name}
onPress={() => {
diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx
index cba7777a..bb450b64 100644
--- a/src/components/taggs/Tagg.tsx
+++ b/src/components/taggs/Tagg.tsx
@@ -5,6 +5,7 @@ import PurpleRingPlus from '../../assets/icons/purple_ring+.svg';
import PurpleRing from '../../assets/icons/purple_ring.svg';
import RingPlus from '../../assets/icons/ring+.svg';
import Ring from '../../assets/icons/ring.svg';
+import WhiteRing from '../../assets/icons/ring-white.svg';
import {
INTEGRATED_SOCIAL_LIST,
SOCIAL_ICON_SIZE_ADJUSTMENT,
@@ -16,7 +17,7 @@ import {
registerNonIntegratedSocialLink,
} from '../../services';
import {SmallSocialIcon, SocialIcon, SocialLinkModal} from '../common';
-import {UserType} from '../../types';
+import {ScreenType, UserType} from '../../types';
import {
ERROR_LINK,
ERROR_UNABLE_TO_FIND_PROFILE,
@@ -32,6 +33,7 @@ interface TaggProps {
setSocialDataNeedUpdate: (social: string, username: string) => void;
userXId: string | undefined;
user: UserType;
+ screenType: ScreenType;
}
const Tagg: React.FC<TaggProps> = ({
@@ -42,6 +44,7 @@ const Tagg: React.FC<TaggProps> = ({
setSocialDataNeedUpdate,
userXId,
user,
+ screenType,
}) => {
const navigation = useNavigation();
const [modalVisible, setModalVisible] = useState(false);
@@ -97,6 +100,8 @@ const Tagg: React.FC<TaggProps> = ({
const pickTheRightRingHere = () => {
if (youMayPass) {
+ if (screenType === ScreenType.SuggestedPeople)
+ return <WhiteRing width={TAGG_RING_DIM} height={TAGG_RING_DIM} />;
if (social === 'Tagg') {
return <Ring width={TAGG_RING_DIM} height={TAGG_RING_DIM} />;
} else {
@@ -140,21 +145,27 @@ const Tagg: React.FC<TaggProps> = ({
<TouchableOpacity
style={styles.iconTap}
onPress={modalOrAuthBrowserOrPass}>
- <SocialIcon style={styles.icon} social={social} />
- {pickTheRightRingHere()}
- </TouchableOpacity>
- <View style={styles.smallIconContainer}>
- <SmallSocialIcon
- style={[
- styles.smallIcon,
- {
- height: SOCIAL_ICON_SIZE_ADJUSTMENT[social],
- width: SOCIAL_ICON_SIZE_ADJUSTMENT[social],
- },
- ]}
+ <SocialIcon
+ style={styles.icon}
social={social}
+ screenType={screenType}
/>
- </View>
+ {pickTheRightRingHere()}
+ </TouchableOpacity>
+ {screenType !== ScreenType.SuggestedPeople && (
+ <View style={styles.smallIconContainer}>
+ <SmallSocialIcon
+ style={[
+ styles.smallIcon,
+ {
+ height: SOCIAL_ICON_SIZE_ADJUSTMENT[social],
+ width: SOCIAL_ICON_SIZE_ADJUSTMENT[social],
+ },
+ ]}
+ social={social}
+ />
+ </View>
+ )}
</View>
</>
)}
@@ -166,7 +177,7 @@ const styles = StyleSheet.create({
container: {
justifyContent: 'space-between',
alignItems: 'center',
- marginHorizontal: 15,
+ marginRight: 34,
height: normalize(90),
},
iconTap: {
diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx
index 76833d65..e7bdb0f2 100644
--- a/src/components/taggs/TaggsBar.tsx
+++ b/src/components/taggs/TaggsBar.tsx
@@ -72,11 +72,12 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1}
setTaggsNeedUpdate={setTaggsNeedUpdate}
setSocialDataNeedUpdate={handleSocialUpdate}
+ screenType={screenType}
/>,
);
i++;
}
- if (!userXId) {
+ if (!userXId && screenType !== ScreenType.SuggestedPeople) {
for (let social of unlinkedSocials) {
new_taggs.push(
<Tagg
@@ -88,6 +89,7 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
setSocialDataNeedUpdate={handleSocialUpdate}
userXId={userXId}
user={user}
+ screenType={screenType}
/>,
);
i++;
@@ -122,7 +124,12 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
});
return taggs.length > 0 ? (
- <View style={[styles.container, {shadowOpacity, paddingTop}]}>
+ <View
+ style={
+ screenType === ScreenType.SuggestedPeople
+ ? [styles.spContainer]
+ : [styles.container, {shadowOpacity, paddingTop}]
+ }>
<ScrollView
horizontal
showsHorizontalScrollIndicator={false}
@@ -136,6 +143,13 @@ const TaggsBar: React.FC<TaggsBarProps> = ({
};
const styles = StyleSheet.create({
+ spContainer: {
+ shadowColor: '#000',
+ shadowRadius: 10,
+ shadowOffset: {width: 0, height: 2},
+ zIndex: 1,
+ paddingBottom: 5,
+ },
container: {
backgroundColor: 'white',
shadowColor: '#000',
@@ -146,7 +160,6 @@ const styles = StyleSheet.create({
},
contentContainer: {
alignItems: 'center',
- paddingHorizontal: 5,
paddingBottom: 5,
},
});
diff --git a/src/screens/profile/EditProfile.tsx b/src/screens/profile/EditProfile.tsx
index 7d3ca581..56bed11f 100644
--- a/src/screens/profile/EditProfile.tsx
+++ b/src/screens/profile/EditProfile.tsx
@@ -38,7 +38,7 @@ import {HeaderHeight, SCREEN_HEIGHT} from '../../utils';
import {RootState} from '../../store/rootReducer';
import {useDispatch, useSelector} from 'react-redux';
import {loadUserData} from '../../store/actions';
-import {BackgroundGradientType} from '../../types';
+import {BackgroundGradientType, ScreenType} from '../../types';
import {
ERROR_DOUBLE_CHECK_CONNECTION,
ERROR_SOMETHING_WENT_WRONG_REFRESH,
@@ -527,7 +527,11 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => {
/>
{snapchat !== '' && (
<View style={styles.row}>
- <SocialIcon social={'Snapchat'} style={styles.icon} />
+ <SocialIcon
+ social={'Snapchat'}
+ style={styles.icon}
+ screenType={ScreenType.Profile}
+ />
<View style={styles.taggInput}>
<TaggInput
accessibilityHint="Snapchat Username"
@@ -552,7 +556,11 @@ const EditProfile: React.FC<EditProfileProps> = ({route, navigation}) => {
)}
{tiktok !== '' && (
<View style={styles.row}>
- <SocialIcon social={'TikTok'} style={styles.icon} />
+ <SocialIcon
+ social={'TikTok'}
+ style={styles.icon}
+ screenType={ScreenType.Profile}
+ />
<View style={styles.taggInput}>
<TaggInput
accessibilityHint="TikTok Username"
diff --git a/src/screens/profile/SocialMediaTaggs.tsx b/src/screens/profile/SocialMediaTaggs.tsx
index 1b6bb389..45d417a6 100644
--- a/src/screens/profile/SocialMediaTaggs.tsx
+++ b/src/screens/profile/SocialMediaTaggs.tsx
@@ -12,7 +12,7 @@ import {
} from '../../components';
import {AVATAR_GRADIENT} from '../../constants';
import {ProfileStackParams} from '../../routes';
-import {SimplePostType, TwitterPostType, SocialAccountType} from '../../types';
+import {SimplePostType, TwitterPostType, SocialAccountType, ScreenType} from '../../types';
import {AvatarHeaderHeight, SCREEN_HEIGHT} from '../../utils';
import {useSelector} from 'react-redux';
import {RootState} from '../../store/rootReducer';
diff --git a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
index 1c4c3601..fffaf715 100644
--- a/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
+++ b/src/screens/suggestedPeople/SuggestedPeopleScreen.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
import {
StatusBar,
StyleSheet,
@@ -7,10 +7,20 @@ import {
View,
} from 'react-native';
import {Image} from 'react-native-animatable';
-import {isIPhoneX, SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils';
-import {TabsGradient} from '../../components';
+import {
+ fetchUserX,
+ isIPhoneX,
+ SCREEN_HEIGHT,
+ SCREEN_WIDTH,
+ userXInStore,
+} from '../../utils';
+import {TabsGradient, TaggsBar} from '../../components';
import {SafeAreaView} from 'react-native-safe-area-context';
import {normalize} from '../../utils';
+import Animated from 'react-native-reanimated';
+import {ScreenType} from '../../types';
+import {useDispatch, useStore} from 'react-redux';
+import {RootState} from '../../store/rootReducer';
/**
* Bare bones for suggested people consisting of:
@@ -51,6 +61,12 @@ const SuggestedPeopleScreen: React.FC = () => {
</TouchableOpacity>
</View>
{/* TODO: Add TaggsBar here */}
+ <TaggsBar
+ y={Animated.useValue(0)}
+ userXId={''}
+ profileBodyHeight={0}
+ screenType={ScreenType.SuggestedPeople}
+ />
{/* TODO: Add MutualFriends here */}
</View>
</View>
@@ -139,6 +155,7 @@ const styles = StyleSheet.create({
flexDirection: 'row',
justifyContent: 'space-between',
alignItems: 'flex-start',
+ marginBottom: '5%',
},
body: {},
});
diff --git a/src/services/UserFriendsService.ts b/src/services/UserFriendsService.ts
index 99d86d0b..eff18f16 100644
--- a/src/services/UserFriendsService.ts
+++ b/src/services/UserFriendsService.ts
@@ -1,7 +1,7 @@
//Abstracted common friends api calls out here
import {Alert} from 'react-native';
-import {FriendshipStatusType} from 'src/types';
+import {FriendshipStatusType} from '../types';
import {FRIENDS_ENDPOINT} from '../constants';
import {ERROR_SOMETHING_WENT_WRONG_REFRESH} from '../constants/strings';
diff --git a/src/services/UserProfileService.ts b/src/services/UserProfileService.ts
index b400843d..d0610714 100644
--- a/src/services/UserProfileService.ts
+++ b/src/services/UserProfileService.ts
@@ -1,9 +1,8 @@
-import {transformFromAstAsync} from '@babel/core';
import AsyncStorage from '@react-native-community/async-storage';
import moment from 'moment';
import {Alert} from 'react-native';
import RNFetchBlob from 'rn-fetch-blob';
-import {SocialAccountType} from 'src/types';
+import {SocialAccountType} from '../types';
import {
PROFILE_PHOTO_ENDPOINT,
HEADER_PHOTO_ENDPOINT,
generated by cgit v1.2.3-70-g09d2 (git 2.46.0) at 2025-10-06 16:33:18 +0000