From 0079364606b3041b3e43916bfbf03601ad6b5892 Mon Sep 17 00:00:00 2001 From: Tanmay Bhatia Date: Thu, 4 Feb 2021 16:21:19 -0800 Subject: Changed snapchat and tiktok linking --- src/components/common/SocialLinkModal.tsx | 46 +++++++++++++++++++++---------- 1 file changed, 31 insertions(+), 15 deletions(-) (limited to 'src/components') 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 = ({ modalVisible, setModalVisible, + close, completionCallback, }) => { const [username, setUsername] = React.useState(''); @@ -26,11 +30,14 @@ const SocialLinkModal: React.FC = ({ onRequestClose={() => {}}> + + Insert your snapchat username to link your snapchat account to your profile! + = ({ setUsername(''); completionCallback(username); }}> - Link + Submit {/* cancel button */} - + + + {/* { setUsername(''); setModalVisible(!modalVisible); }} style={styles.cancelStyle}> Cancel - + */} @@ -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%', -- cgit v1.2.3-70-g09d2 From 41f18a15653f11b331bfeda9e96b217b9dceec8d Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 5 Feb 2021 16:43:32 -0500 Subject: added gradient style to TaggSquareButton --- src/components/common/TaggSquareButton.tsx | 30 +++++++++++++++++++++++++++++- 1 file changed, 29 insertions(+), 1 deletion(-) (limited to 'src/components') diff --git a/src/components/common/TaggSquareButton.tsx b/src/components/common/TaggSquareButton.tsx index 4fe61b95..c6064b92 100644 --- a/src/components/common/TaggSquareButton.tsx +++ b/src/components/common/TaggSquareButton.tsx @@ -7,12 +7,14 @@ import { ViewProps, ViewStyle, } from 'react-native'; +import LinearGradient from 'react-native-linear-gradient'; +import {BACKGROUND_GRADIENT_MAP} from '../../constants'; import {normalize, SCREEN_WIDTH} from '../../utils'; interface TaggSquareButtonProps extends ViewProps { onPress: (event: GestureResponderEvent) => void; title: string; - mode: 'normal' | 'large'; + mode: 'normal' | 'large' | 'gradient'; color: 'purple' | 'white'; style?: ViewStyle; } @@ -36,6 +38,18 @@ const TaggSquareButton: React.FC = (props) => { {props.title} ); + case 'gradient': + return ( + + + {props.title} + + + ); case 'normal': default: return ( @@ -74,6 +88,20 @@ const styles = StyleSheet.create({ fontWeight: '500', color: '#78A0EF', }, + gradientButton: { + marginTop: '8%', + borderRadius: 5, + paddingVertical: '5%', + aspectRatio: 3.3, + elevation: 2, + backgroundColor: '#2196F3', + }, + gradientLabel: { + color: 'white', + fontWeight: '600', + textAlign: 'center', + fontSize: normalize(17), + }, }); export default TaggSquareButton; -- cgit v1.2.3-70-g09d2 From b3749907411b9130de45218d5576da1342fa8433 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 5 Feb 2021 16:44:03 -0500 Subject: new modal done --- src/components/common/SocialLinkModal.tsx | 128 +++++++++++++------------- src/components/onboarding/LinkSocialMedia.tsx | 1 + src/components/taggs/Tagg.tsx | 1 + 3 files changed, 67 insertions(+), 63 deletions(-) (limited to 'src/components') 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 = ({ + social, modalVisible, setModalVisible, - close, completionCallback, }) => { const [username, setUsername] = React.useState(''); + + const onClosePress = () => { + setModalVisible(false); + }; + return ( <> @@ -30,40 +35,38 @@ const SocialLinkModal: React.FC = ({ onRequestClose={() => {}}> - - Insert your snapchat username to link your snapchat account to your profile! + + + + + {social} + + Insert your {social.toLowerCase()} username to link your{' '} + {social.toLowerCase()} account to your profile! - {/* link button */} - { - setModalVisible(!modalVisible); - setUsername(''); - completionCallback(username); - }}> - Submit - - {/* cancel button */} - - - - {/* { - setUsername(''); - setModalVisible(!modalVisible); + if (username !== '') { + setModalVisible(!modalVisible); + setUsername(''); + completionCallback(username); + } }} - style={styles.cancelStyle}> - Cancel - */} + mode={'gradient'} + color={'white'} + /> @@ -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 = ({ /> )} = ({ ) : ( <> Date: Fri, 5 Feb 2021 16:45:26 -0500 Subject: cleaner code= --- src/components/common/SocialLinkModal.tsx | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) (limited to 'src/components') diff --git a/src/components/common/SocialLinkModal.tsx b/src/components/common/SocialLinkModal.tsx index be3221ee..83c49943 100644 --- a/src/components/common/SocialLinkModal.tsx +++ b/src/components/common/SocialLinkModal.tsx @@ -25,6 +25,14 @@ const SocialLinkModal: React.FC = ({ setModalVisible(false); }; + const onSubmit = () => { + if (username !== '') { + setModalVisible(!modalVisible); + setUsername(''); + completionCallback(username); + } + }; + return ( <> @@ -57,13 +65,7 @@ const SocialLinkModal: React.FC = ({ /> { - if (username !== '') { - setModalVisible(!modalVisible); - setUsername(''); - completionCallback(username); - } - }} + onPress={onSubmit} mode={'gradient'} color={'white'} /> -- cgit v1.2.3-70-g09d2 From a5f746525df9bb2967c252b70e7a4e2f9daa2b8d Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 5 Feb 2021 17:31:29 -0500 Subject: fixed text width and line height --- src/components/common/SocialLinkModal.tsx | 3 +++ 1 file changed, 3 insertions(+) (limited to 'src/components') diff --git a/src/components/common/SocialLinkModal.tsx b/src/components/common/SocialLinkModal.tsx index 83c49943..c33eda6a 100644 --- a/src/components/common/SocialLinkModal.tsx +++ b/src/components/common/SocialLinkModal.tsx @@ -126,12 +126,15 @@ const styles = StyleSheet.create({ marginTop: '8%', fontSize: normalize(17), fontWeight: '600', + lineHeight: 20, }, descriptionLabel: { + width: SCREEN_WIDTH * 0.75, marginTop: '3%', fontSize: normalize(11), fontWeight: '600', textAlign: 'center', + lineHeight: 15, color: '#828282', }, }); -- cgit v1.2.3-70-g09d2 From ac9d34c3b63b7fbffd1a281b4d33b5a8326be7e2 Mon Sep 17 00:00:00 2001 From: Ivan Chen Date: Fri, 5 Feb 2021 17:45:23 -0500 Subject: fixed padding --- src/components/common/SocialLinkModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/components') diff --git a/src/components/common/SocialLinkModal.tsx b/src/components/common/SocialLinkModal.tsx index c33eda6a..d3bc3945 100644 --- a/src/components/common/SocialLinkModal.tsx +++ b/src/components/common/SocialLinkModal.tsx @@ -129,7 +129,7 @@ const styles = StyleSheet.create({ lineHeight: 20, }, descriptionLabel: { - width: SCREEN_WIDTH * 0.75, + width: SCREEN_WIDTH * 0.7, marginTop: '3%', fontSize: normalize(11), fontWeight: '600', -- cgit v1.2.3-70-g09d2