diff options
| -rw-r--r-- | src/components/common/SocialLinkModal.tsx | 46 |
1 files changed, 31 insertions, 15 deletions
diff --git a/src/components/common/SocialLinkModal.tsx b/src/components/common/SocialLinkModal.tsx index 41b044fe..85445155 100644 --- a/src/components/common/SocialLinkModal.tsx +++ b/src/components/common/SocialLinkModal.tsx @@ -1,18 +1,22 @@ import React from 'react'; -import {Modal, StyleSheet, Text, TouchableHighlight, View} from 'react-native'; +import {TouchableOpacity} from 'react-native'; +import {Modal, StyleSheet, Text, TouchableHighlight, View, ViewProps} from 'react-native'; import {TextInput} from 'react-native-gesture-handler'; import { TAGG_LIGHT_BLUE } from '../../constants'; import {SCREEN_WIDTH} from '../../utils'; +import CloseIcon from '../../assets/ionicons/close-outline.svg'; interface SocialLinkModalProps { modalVisible: boolean; setModalVisible: (_: boolean) => void; completionCallback: (username: string) => void; + close: () => void; } const SocialLinkModal: React.FC<SocialLinkModalProps> = ({ modalVisible, setModalVisible, + close, completionCallback, }) => { const [username, setUsername] = React.useState(''); @@ -26,11 +30,14 @@ 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! + </Text> <TextInput autoCapitalize={'none'} autoCorrect={false} textAlign={'center'} - placeholder={'Your username'} + placeholder={'Username'} style={styles.textInput} onChangeText={setUsername} value={username} @@ -43,17 +50,20 @@ const SocialLinkModal: React.FC<SocialLinkModalProps> = ({ setUsername(''); completionCallback(username); }}> - <Text style={styles.textStyle}>Link</Text> + <Text style={styles.textStyle}>Submit</Text> </TouchableHighlight> {/* cancel button */} - <Text + <TouchableOpacity style={styles.closeButton} onPress={close}> + <CloseIcon height={'100%'} width={'100%'} color={'white'} /> + </TouchableOpacity> + {/* <Text onPress={() => { setUsername(''); setModalVisible(!modalVisible); }} style={styles.cancelStyle}> Cancel - </Text> + </Text> */} </View> </View> </Modal> @@ -96,17 +106,23 @@ const styles = StyleSheet.create({ fontWeight: 'bold', textAlign: 'center', }, - cancelStyle: { - position: 'relative', - height: 17, - top: 17, - fontStyle: 'normal', - fontWeight: '500', - fontSize: 14, - /* identical to box height */ - textAlign: 'center', - color: TAGG_LIGHT_BLUE, + closeButton: { + position: 'absolute', + height: '50%', + aspectRatio: 1, + left: '3%', }, + // 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%', |