From 4b6faadd4cc0a69b0aad5b44dfe6292635b39f6b Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Tue, 9 Feb 2021 17:11:03 -0800 Subject: changed insta icon + added extra prop for switch --- src/assets/socials/instagram-icon-white-bg.png | Bin 0 -> 531448 bytes src/components/common/SocialIcon.tsx | 8 +++++++- src/components/common/SocialLinkModal.tsx | 7 ++++++- src/components/moments/Moment.tsx | 2 +- src/components/moments/MomentTile.tsx | 2 +- src/components/onboarding/LinkSocialMedia.tsx | 8 ++++++-- src/components/onboarding/SocialMediaLinker.tsx | 8 ++++++-- src/components/search/RecentSearches.tsx | 2 +- src/components/taggs/SocialMediaInfo.tsx | 7 ++++++- src/screens/profile/EditProfile.tsx | 14 +++++++++++--- src/services/UserFriendsService.ts | 2 +- src/services/UserProfileService.ts | 3 +-- 12 files changed, 47 insertions(+), 16 deletions(-) create mode 100644 src/assets/socials/instagram-icon-white-bg.png (limited to 'src') 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 Binary files /dev/null and b/src/assets/socials/instagram-icon-white-bg.png differ diff --git a/src/components/common/SocialIcon.tsx b/src/components/common/SocialIcon.tsx index 3c9deb6d..0cd5d2a7 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 of the icon for a specific social media platform. @@ -11,10 +13,14 @@ interface SocialIconProps { const SocialIcon: React.FC = ({ social: social, style: style, + screenType, }) => { switch (social) { case 'Instagram': - var icon = require('../../assets/socials/instagram-icon.png'); + var icon = require('../../assets/socials/instagram-icon-white-bg.png'); + if (screenType === ScreenType.SuggestedPeople) { + icon = require('../../assets/socials/instagram-icon.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 d3bc3945..0bd5a0a5 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'; @@ -48,7 +49,11 @@ const SocialLinkModal: React.FC = ({ onPress={onClosePress}> - + {social} Insert your {social.toLowerCase()} username to link your{' '} 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 = ({ activeOpacity={0.7} onPress={modelOrAuthBrowser} style={styles.container}> - + {label} {authenticated && ( = ({ activeOpacity={0.7} onPress={handlePress} style={styles.container}> - + {label} {state.socialLinked && ( = ({ )} - + { 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 = ({route, navigation}) => { /> {snapchat !== '' && ( - + = ({route, navigation}) => { )} {tiktok !== '' && ( - + Date: Tue, 9 Feb 2021 18:39:03 -0800 Subject: added taggs bar and white ring --- src/assets/icons/ring-white.svg | 1 + src/components/profile/Content.tsx | 6 +++- src/components/taggs/Tagg.tsx | 41 ++++++++++++++-------- src/components/taggs/TaggsBar.tsx | 17 +++++++-- src/screens/profile/SocialMediaTaggs.tsx | 2 +- .../suggestedPeople/SuggestedPeopleScreen.tsx | 23 ++++++++++-- 6 files changed, 68 insertions(+), 22 deletions(-) create mode 100644 src/assets/icons/ring-white.svg (limited to 'src') 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 @@ + \ No newline at end of file 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 = ({y, userXId, screenType}) => { isBlocked, }} /> - + + + {userXId && moments.length === 0 && ( @@ -382,6 +384,7 @@ const Content: React.FC = ({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/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx index cba7777a..29b55786 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 = ({ @@ -42,6 +44,7 @@ const Tagg: React.FC = ({ setSocialDataNeedUpdate, userXId, user, + screenType, }) => { const navigation = useNavigation(); const [modalVisible, setModalVisible] = useState(false); @@ -97,6 +100,8 @@ const Tagg: React.FC = ({ const pickTheRightRingHere = () => { if (youMayPass) { + if (screenType === ScreenType.SuggestedPeople) + return ; if (social === 'Tagg') { return ; } else { @@ -140,21 +145,27 @@ const Tagg: React.FC = ({ - - {pickTheRightRingHere()} - - - - + {pickTheRightRingHere()} + + {screenType !== ScreenType.SuggestedPeople && ( + + + + )} )} @@ -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..cc0c70a7 100644 --- a/src/components/taggs/TaggsBar.tsx +++ b/src/components/taggs/TaggsBar.tsx @@ -72,6 +72,7 @@ const TaggsBar: React.FC = ({ isIntegrated={INTEGRATED_SOCIAL_LIST.indexOf(social) !== -1} setTaggsNeedUpdate={setTaggsNeedUpdate} setSocialDataNeedUpdate={handleSocialUpdate} + screenType={screenType} />, ); i++; @@ -88,6 +89,7 @@ const TaggsBar: React.FC = ({ setSocialDataNeedUpdate={handleSocialUpdate} userXId={userXId} user={user} + screenType={screenType} />, ); i++; @@ -122,7 +124,12 @@ const TaggsBar: React.FC = ({ }); return taggs.length > 0 ? ( - + = ({ }; 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/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 01698ac5..13dc422b 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 = () => { {/* TODO: Add TaggsBar here */} + {/* TODO: Add MutualFriends here */} @@ -139,6 +155,7 @@ const styles = StyleSheet.create({ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'flex-start', + marginBottom: '5%', }, body: {}, }); -- cgit v1.2.3-70-g09d2 From e60250a3661df67a6c0f3d7e17cf5943f03538c3 Mon Sep 17 00:00:00 2001 From: Shravya Ramesh Date: Wed, 10 Feb 2021 11:06:33 -0800 Subject: does not add unlinked socials on SP --- src/components/taggs/TaggsBar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src') diff --git a/src/components/taggs/TaggsBar.tsx b/src/components/taggs/TaggsBar.tsx index cc0c70a7..e7bdb0f2 100644 --- a/src/components/taggs/TaggsBar.tsx +++ b/src/components/taggs/TaggsBar.tsx @@ -77,7 +77,7 @@ const TaggsBar: React.FC = ({ ); i++; } - if (!userXId) { + if (!userXId && screenType !== ScreenType.SuggestedPeople) { for (let social of unlinkedSocials) { new_taggs.push( Date: Thu, 11 Feb 2021 13:38:53 -0800 Subject: updated instagram icon --- src/components/common/SocialIcon.tsx | 4 ++-- src/components/taggs/Tagg.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) (limited to 'src') diff --git a/src/components/common/SocialIcon.tsx b/src/components/common/SocialIcon.tsx index 0cd5d2a7..8216b6ff 100644 --- a/src/components/common/SocialIcon.tsx +++ b/src/components/common/SocialIcon.tsx @@ -17,9 +17,9 @@ const SocialIcon: React.FC = ({ }) => { switch (social) { case 'Instagram': - var icon = require('../../assets/socials/instagram-icon-white-bg.png'); + var icon = require('../../assets/socials/instagram-icon.png'); if (screenType === ScreenType.SuggestedPeople) { - icon = require('../../assets/socials/instagram-icon.png'); + icon = require('../../assets/socials/instagram-icon-white-bg.png'); } break; case 'Facebook': diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx index 29b55786..bb450b64 100644 --- a/src/components/taggs/Tagg.tsx +++ b/src/components/taggs/Tagg.tsx @@ -148,7 +148,7 @@ const Tagg: React.FC = ({ {pickTheRightRingHere()} -- cgit v1.2.3-70-g09d2