diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/common/TaggPopup.tsx | 143 | ||||
| -rw-r--r-- | src/components/common/index.ts | 1 | ||||
| -rw-r--r-- | src/components/onboarding/UpdateRequired.tsx | 84 | ||||
| -rw-r--r-- | src/components/onboarding/index.ts | 1 | ||||
| -rw-r--r-- | src/components/profile/PublicProfile.tsx | 7 |
5 files changed, 86 insertions, 150 deletions
diff --git a/src/components/common/TaggPopup.tsx b/src/components/common/TaggPopup.tsx deleted file mode 100644 index f9929580..00000000 --- a/src/components/common/TaggPopup.tsx +++ /dev/null @@ -1,143 +0,0 @@ -import {RouteProp} from '@react-navigation/native'; -import {StackNavigationProp} from '@react-navigation/stack'; -import * as React from 'react'; -import {Platform, Text, StyleSheet, TouchableOpacity} from 'react-native'; -import {Image, View} from 'react-native-animatable'; -import {ArrowButton} from '../onboarding'; -import {OnboardingStackParams} from '../../routes'; -import {SCREEN_HEIGHT, SCREEN_WIDTH} from '../../utils'; -import CloseIcon from '../../assets/ionicons/close-outline.svg'; -import {BlurView} from '@react-native-community/blur'; - -type TaggPopupRouteProps = RouteProp<OnboardingStackParams, 'TaggPopup'>; -type TaggPopupNavigationProps = StackNavigationProp< - OnboardingStackParams, - 'TaggPopup' ->; - -interface TaggPopupProps { - route: TaggPopupRouteProps; - navigation: TaggPopupNavigationProps; -} - -const TaggPopup: React.FC<TaggPopupProps> = ({route, navigation}) => { - /** - * Custom popup / Tutorial screen for Tagg - * Just like a Singly Linked List, we have a next node - * if (next !== undefined) - * Display the next button and navigate to next popup node on click - * else - * Display close button, navigate back on close - */ - const {messageHeader, messageBody, next} = route.params.popupProps; - - return ( - <BlurView blurType="light" blurAmount={2} style={styles.container}> - <TouchableOpacity - style={styles.container} - onPressOut={() => { - navigation.goBack(); - }}> - <View style={styles.popup}> - <Image - style={styles.icon} - source={require('../../assets/icons/notificationPrompts/plus-logo.png')} - /> - <View style={styles.textContainer}> - <Text style={styles.header}>{messageHeader}</Text> - <Text style={styles.subtext}>{messageBody}</Text> - </View> - {!next && ( - <TouchableOpacity - style={styles.closeButton} - onPress={() => { - navigation.goBack(); - }}> - <CloseIcon height={'50%'} width={'50%'} color={'white'} /> - </TouchableOpacity> - )} - </View> - {next && ( - <View style={styles.footer}> - <ArrowButton - direction="forward" - onPress={() => { - navigation.navigate('TaggPopup', {popupProps: next}); - }} - /> - </View> - )} - </TouchableOpacity> - </BlurView> - ); -}; - -const styles = StyleSheet.create({ - container: { - flex: 1, - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', - width: '100%', - height: '100%', - }, - whiteColor: { - color: 'white', - }, - closeButton: { - position: 'relative', - height: '50%', - aspectRatio: 1, - left: '20%', - }, - textContainer: { - flex: 1, - flexDirection: 'column', - }, - icon: { - width: 40, - height: 40, - marginVertical: '1%', - }, - header: { - color: '#fff', - fontSize: SCREEN_WIDTH / 25, - fontWeight: '600', - textAlign: 'justify', - marginBottom: '2%', - marginLeft: '4%', - }, - subtext: { - color: '#fff', - fontSize: SCREEN_WIDTH / 30, - fontWeight: '600', - textAlign: 'justify', - marginBottom: '15%', - marginLeft: '3%', - }, - popup: { - width: SCREEN_WIDTH * 0.8, - height: SCREEN_WIDTH * 0.24, - backgroundColor: 'black', - borderRadius: 8, - flexDirection: 'row', - alignSelf: 'auto', - flexWrap: 'wrap', - position: 'absolute', - bottom: SCREEN_HEIGHT * 0.7, - padding: SCREEN_WIDTH / 40, - }, - footer: { - marginLeft: '50%', - flexDirection: 'column-reverse', - ...Platform.select({ - ios: { - bottom: '20%', - }, - android: { - bottom: '10%', - }, - }), - }, -}); -export default TaggPopup; diff --git a/src/components/common/index.ts b/src/components/common/index.ts index b5fd0542..5a601f1d 100644 --- a/src/components/common/index.ts +++ b/src/components/common/index.ts @@ -17,7 +17,6 @@ export {default as TaggDatePicker} from './TaggDatePicker'; export {default as BottomDrawer} from './BottomDrawer'; export {default as TaggLoadingIndicator} from './TaggLoadingIndicator'; export {default as GenericMoreInfoDrawer} from './GenericMoreInfoDrawer'; -export {default as TaggPopUp} from './TaggPopup'; export {default as TaggPrompt} from './TaggPrompt'; export {default as AcceptDeclineButtons} from './AcceptDeclineButtons'; export {default as FriendsButton} from './FriendsButton'; diff --git a/src/components/onboarding/UpdateRequired.tsx b/src/components/onboarding/UpdateRequired.tsx new file mode 100644 index 00000000..93e4e36d --- /dev/null +++ b/src/components/onboarding/UpdateRequired.tsx @@ -0,0 +1,84 @@ +import React from 'react'; +import {Image, Linking, Modal, StyleSheet, View} from 'react-native'; +import {Text} from 'react-native-animatable'; +import {CenteredView, TaggSquareButton} from '..'; +import {normalize, SCREEN_WIDTH} from '../../utils'; + +interface UpdateRequiredProps { + visible: boolean; +} + +const UpdateRequired: React.FC<UpdateRequiredProps> = ({visible}) => { + return ( + <Modal animationType={'slide'} transparent={true} visible={visible}> + <CenteredView> + <View style={styles.contentContainer}> + <Image + style={styles.logo} + source={require('../../assets/images/logo-purple.png')} + /> + <Text style={styles.header}>Update Required</Text> + <Text style={styles.body}> + You have to update your app to continue using Tagg, please download + the latest version from the app store + </Text> + <TaggSquareButton + title={'Update'} + onPress={() => { + Linking.openURL( + 'https://apps.apple.com/us/app/tagg-discover-your-community/id1537853613', + ); + }} + buttonStyle={'normal'} + buttonColor={'purple'} + labelColor={'white'} + labelStyle={styles.button} + /> + </View> + </CenteredView> + </Modal> + ); +}; + +const styles = StyleSheet.create({ + contentContainer: { + marginTop: '20%', + width: SCREEN_WIDTH * 0.9, + backgroundColor: 'white', + borderRadius: 5, + padding: '10%', + alignItems: 'center', + shadowColor: '#000', + shadowOffset: { + width: 0, + height: 2, + }, + shadowOpacity: 0.25, + shadowRadius: 3.84, + elevation: 5, + }, + logo: { + width: normalize(60), + height: normalize(60), + marginBottom: '10%', + }, + header: { + fontSize: normalize(17), + fontWeight: '700', + lineHeight: 20, + marginBottom: '5%', + }, + body: { + fontSize: normalize(13), + color: 'grey', + lineHeight: 20, + textAlign: 'center', + width: SCREEN_WIDTH * 0.8, + marginBottom: '10%', + }, + button: { + fontWeight: '700', + }, +}); + +export default UpdateRequired; diff --git a/src/components/onboarding/index.ts b/src/components/onboarding/index.ts index fdb85090..aad77f96 100644 --- a/src/components/onboarding/index.ts +++ b/src/components/onboarding/index.ts @@ -11,3 +11,4 @@ export {default as SocialMediaLinker} from './SocialMediaLinker'; export {default as LinkSocialMedia} from './LinkSocialMedia'; export {default as MomentCategory} from './MomentCategory'; export {default as UniversitySelection} from './UniversitySelection'; +export {default as UpdateRequired} from './UpdateRequired'; diff --git a/src/components/profile/PublicProfile.tsx b/src/components/profile/PublicProfile.tsx index 1c49bff5..f2d52a3d 100644 --- a/src/components/profile/PublicProfile.tsx +++ b/src/components/profile/PublicProfile.tsx @@ -241,12 +241,7 @@ const PublicProfile: React.FC<ContentProps> = ({ )} {!userXId && ( <TouchableOpacity - onPress={() => - navigation.navigate('CategorySelection', { - screenType: CategorySelectionScreenType.Profile, - user: loggedInUser, - }) - } + onPress={() => navigation.navigate('CategorySelection')} style={styles.createCategoryButton}> <Text style={styles.createCategoryButtonLabel}> Create a new category |
