diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/common/SocialLinkModal.tsx | 128 | ||||
| -rw-r--r-- | src/components/onboarding/LinkSocialMedia.tsx | 1 | ||||
| -rw-r--r-- | src/components/taggs/Tagg.tsx | 1 |
3 files changed, 67 insertions, 63 deletions
diff --git a/src/components/common/SocialLinkModal.tsx b/src/components/common/SocialLinkModal.tsx index 85445155..be3221ee 100644 --- a/src/components/common/SocialLinkModal.tsx +++ b/src/components/common/SocialLinkModal.tsx @@ -1,25 +1,30 @@ import React from 'react'; -import {TouchableOpacity} from 'react-native'; -import {Modal, StyleSheet, Text, TouchableHighlight, View, ViewProps} from 'react-native'; +import {Modal, StyleSheet, Text, TouchableOpacity, View} from 'react-native'; import {TextInput} from 'react-native-gesture-handler'; -import { TAGG_LIGHT_BLUE } from '../../constants'; -import {SCREEN_WIDTH} from '../../utils'; +import {SocialIcon} from '.'; import CloseIcon from '../../assets/ionicons/close-outline.svg'; +import {normalize, SCREEN_WIDTH} from '../../utils'; +import TaggSquareButton from './TaggSquareButton'; interface SocialLinkModalProps { + social: string; modalVisible: boolean; setModalVisible: (_: boolean) => void; completionCallback: (username: string) => void; - close: () => void; } const SocialLinkModal: React.FC<SocialLinkModalProps> = ({ + social, modalVisible, setModalVisible, - close, completionCallback, }) => { const [username, setUsername] = React.useState(''); + + const onClosePress = () => { + setModalVisible(false); + }; + return ( <> <View style={styles.centeredView}> @@ -30,40 +35,38 @@ const SocialLinkModal: React.FC<SocialLinkModalProps> = ({ onRequestClose={() => {}}> <View style={styles.centeredView}> <View style={styles.modalView}> - <Text> - Insert your snapchat username to link your snapchat account to your profile! + <TouchableOpacity + style={styles.closeButton} + onPress={onClosePress}> + <CloseIcon height={'100%'} width={'100%'} color={'grey'} /> + </TouchableOpacity> + <SocialIcon style={styles.icon} social={social} /> + <Text style={styles.titleLabel}>{social}</Text> + <Text style={styles.descriptionLabel}> + Insert your {social.toLowerCase()} username to link your{' '} + {social.toLowerCase()} account to your profile! </Text> <TextInput autoCapitalize={'none'} autoCorrect={false} - textAlign={'center'} placeholder={'Username'} style={styles.textInput} onChangeText={setUsername} + selectionColor={'grey'} value={username} /> - {/* link button */} - <TouchableHighlight - style={styles.openButton} - onPress={() => { - setModalVisible(!modalVisible); - setUsername(''); - completionCallback(username); - }}> - <Text style={styles.textStyle}>Submit</Text> - </TouchableHighlight> - {/* cancel button */} - <TouchableOpacity style={styles.closeButton} onPress={close}> - <CloseIcon height={'100%'} width={'100%'} color={'white'} /> - </TouchableOpacity> - {/* <Text + <TaggSquareButton + title={'Submit'} onPress={() => { - setUsername(''); - setModalVisible(!modalVisible); + if (username !== '') { + setModalVisible(!modalVisible); + setUsername(''); + completionCallback(username); + } }} - style={styles.cancelStyle}> - Cancel - </Text> */} + mode={'gradient'} + color={'white'} + /> </View> </View> </Modal> @@ -77,14 +80,12 @@ const styles = StyleSheet.create({ flex: 1, justifyContent: 'center', alignItems: 'center', - marginTop: 22, }, modalView: { - width: (SCREEN_WIDTH * 2) / 3, - margin: 20, + width: SCREEN_WIDTH * 0.8, backgroundColor: 'white', - borderRadius: 20, - padding: 35, + borderRadius: 5, + padding: '10%', alignItems: 'center', shadowColor: '#000', shadowOffset: { @@ -95,40 +96,41 @@ const styles = StyleSheet.create({ shadowRadius: 3.84, elevation: 5, }, - openButton: { - borderRadius: 20, - padding: 10, - elevation: 2, - backgroundColor: '#2196F3', - }, - textStyle: { - color: 'white', - fontWeight: 'bold', + textInput: { + marginTop: '8%', + width: '85%', + paddingBottom: '2%', + borderBottomWidth: 0.4, + borderBottomColor: '#C4C4C4', + fontSize: normalize(20), textAlign: 'center', + fontWeight: '500', }, closeButton: { position: 'absolute', - height: '50%', - aspectRatio: 1, - left: '3%', + height: normalize(20), + width: normalize(20), + left: '5%', + top: '5%', }, - // cancelStyle: { - // position: 'absolute', - // height: 17, - // // fontStyle: 'normal', - // // fontWeight: '500', - // // fontSize: 14, - // /* identical to box height */ - // left: '3%', - // // textAlign: 'center', - // // color: TAGG_LIGHT_BLUE, - // }, - textInput: { - height: 20, - width: '75%', - borderBottomWidth: 0.4, - borderBottomColor: '#C4C4C4', - marginBottom: 20, + icon: { + top: -(normalize(70) / 3), + height: normalize(70), + width: normalize(70), + borderRadius: 30, + position: 'absolute', + }, + titleLabel: { + marginTop: '8%', + fontSize: normalize(17), + fontWeight: '600', + }, + descriptionLabel: { + marginTop: '3%', + fontSize: normalize(11), + fontWeight: '600', + textAlign: 'center', + color: '#828282', }, }); diff --git a/src/components/onboarding/LinkSocialMedia.tsx b/src/components/onboarding/LinkSocialMedia.tsx index 6cb7e9cf..8938b9a0 100644 --- a/src/components/onboarding/LinkSocialMedia.tsx +++ b/src/components/onboarding/LinkSocialMedia.tsx @@ -100,6 +100,7 @@ const SocialMediaLinker: React.FC<SocialMediaLinkerProps> = ({ /> )} <SocialLinkModal + social={label} modalVisible={modalVisible} setModalVisible={setModalVisible} completionCallback={linkNonIntegratedSocial} diff --git a/src/components/taggs/Tagg.tsx b/src/components/taggs/Tagg.tsx index 5fa8b395..cba7777a 100644 --- a/src/components/taggs/Tagg.tsx +++ b/src/components/taggs/Tagg.tsx @@ -131,6 +131,7 @@ const Tagg: React.FC<TaggProps> = ({ ) : ( <> <SocialLinkModal + social={social} modalVisible={modalVisible} setModalVisible={setModalVisible} completionCallback={linkNonIntegratedSocial} |