diff options
Diffstat (limited to 'src/components/common')
| -rw-r--r-- | src/components/common/SocialLinkModal.tsx | 80 | ||||
| -rw-r--r-- | src/components/common/TaggSquareButton.tsx | 41 |
2 files changed, 65 insertions, 56 deletions
diff --git a/src/components/common/SocialLinkModal.tsx b/src/components/common/SocialLinkModal.tsx index d3bc3945..67a3f074 100644 --- a/src/components/common/SocialLinkModal.tsx +++ b/src/components/common/SocialLinkModal.tsx @@ -4,6 +4,7 @@ import {TextInput} from 'react-native-gesture-handler'; import {SocialIcon} from '.'; import CloseIcon from '../../assets/ionicons/close-outline.svg'; import {normalize, SCREEN_WIDTH} from '../../utils'; +import CenteredView from './CenteredView'; import TaggSquareButton from './TaggSquareButton'; interface SocialLinkModalProps { @@ -34,55 +35,46 @@ const SocialLinkModal: React.FC<SocialLinkModalProps> = ({ }; return ( - <> - <View style={styles.centeredView}> - <Modal - animationType="slide" - transparent={true} - visible={modalVisible} - onRequestClose={() => {}}> - <View style={styles.centeredView}> - <View style={styles.modalView}> - <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} - placeholder={'Username'} - style={styles.textInput} - onChangeText={setUsername} - selectionColor={'grey'} - value={username} - /> - <TaggSquareButton - title={'Submit'} - onPress={onSubmit} - mode={'gradient'} - color={'white'} - /> - </View> + <CenteredView> + <Modal + animationType="slide" + transparent={true} + visible={modalVisible} + onRequestClose={() => {}}> + <CenteredView> + <View style={styles.modalView}> + <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} + placeholder={'Username'} + style={styles.textInput} + onChangeText={setUsername} + selectionColor={'grey'} + value={username} + /> + <TaggSquareButton + title={'Submit'} + onPress={onSubmit} + mode={'gradient'} + color={'white'} + /> </View> - </Modal> - </View> - </> + </CenteredView> + </Modal> + </CenteredView> ); }; const styles = StyleSheet.create({ - centeredView: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - }, modalView: { width: SCREEN_WIDTH * 0.8, backgroundColor: 'white', diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx index 78a90554..817a2690 100644 --- a/src/components/common/TaggSquareButton.tsx +++ b/src/components/common/TaggSquareButton.tsx @@ -3,6 +3,7 @@ import { GestureResponderEvent, StyleSheet, Text, + TextStyle, TouchableOpacity, ViewProps, ViewStyle, @@ -14,14 +15,16 @@ import {normalize, SCREEN_WIDTH} from '../../utils'; interface TaggSquareButtonProps extends ViewProps { onPress: (event: GestureResponderEvent) => void; title: string; - mode: 'normal' | 'large' | 'gradient'; - color: 'purple' | 'white'; + buttonStyle: 'normal' | 'large' | 'gradient'; + buttonColor: 'purple' | 'white'; + labelColor: 'white' | 'blue'; style?: ViewStyle; + labelStyle?: TextStyle; } const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => { - const buttonStyles = (() => { - switch (props.color) { + const buttonColor = (() => { + switch (props.buttonColor) { case 'purple': return {backgroundColor: TAGG_PURPLE}; case 'white': @@ -29,24 +32,37 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => { return {backgroundColor: 'white'}; } })(); - switch (props.mode) { + const labelColor = (() => { + switch (props.labelColor) { + case 'white': + return {color: 'white'}; + case 'blue': + default: + return {color: '#78A0EF'}; + } + })(); + switch (props.buttonStyle) { case 'large': return ( <TouchableOpacity onPress={props.onPress} - style={[styles.largeButton, buttonStyles, props.style]}> - <Text style={styles.largeLabel}>{props.title}</Text> + style={[styles.largeButton, buttonColor, props.style]}> + <Text style={[styles.largeLabel, labelColor, props.labelStyle]}> + {props.title} + </Text> </TouchableOpacity> ); case 'gradient': return ( - <TouchableOpacity onPress={props.onPress}> + <TouchableOpacity onPress={props.onPress} style={props.style}> <LinearGradient style={styles.gradientButton} colors={BACKGROUND_GRADIENT_MAP[0]} useAngle angle={90}> - <Text style={styles.gradientLabel}>{props.title}</Text> + <Text style={[styles.gradientLabel, props.labelStyle]}> + {props.title} + </Text> </LinearGradient> </TouchableOpacity> ); @@ -55,8 +71,10 @@ const TaggSquareButton: React.FC<TaggSquareButtonProps> = (props) => { return ( <TouchableOpacity onPress={props.onPress} - style={[styles.normalButton, buttonStyles, props.style]}> - <Text style={styles.normalLabel}>{props.title}</Text> + style={[styles.normalButton, buttonColor, props.style]}> + <Text style={[styles.normalLabel, labelColor, props.labelStyle]}> + {props.title} + </Text> </TouchableOpacity> ); } @@ -86,7 +104,6 @@ const styles = StyleSheet.create({ normalLabel: { fontSize: normalize(20), fontWeight: '500', - color: '#78A0EF', }, gradientButton: { marginTop: '8%', |